search

alphagov / govuk-design-system

One place for service teams to find styles, components and patterns for designing government services.
https://www.gov.uk/design-system
MIT License
497 stars 231 forks source link

Google is showing unexpected titles in search results #445

Closed joelanman closed 6 years ago

joelanman commented 6 years ago

If you search for 'gov.uk design system checkboxes' you get this title in Google:

Components Checkboxes - Checkboxes – GOV.UK Design System

Similarly, a search for 'gov.uk design system typography' gets:

Styles Typography - Typography – GOV.UK Design System

Google appears to be combining the H1 and the Title on these pages, not sure why.

Scroll down to 'Why the search result title might differ from the page's tag' <a rel="noreferrer nofollow" target="_blank" href="https://support.google.com/webmasters/answer/35624">https://support.google.com/webmasters/answer/35624</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/joelanman"><img src="https://avatars.githubusercontent.com/u/1132904?v=4" />joelanman</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>As an aside, are 'Styles Typography' or 'Components Checkboxes' good H1s? They read slightly unclearly to me, I'd find just 'Typography' or 'Checkboxes' clearer, personally.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kr8n3r"><img src="https://avatars.githubusercontent.com/u/3758555?v=4" />kr8n3r</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>needs someone with access to Google Search Console</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/NickColley"><img src="https://avatars.githubusercontent.com/u/2445413?v=4" />NickColley</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>This doesnt seem to be an issue for the patterns "gov.uk design system confirmation" googled gets me the title as I'd expect.</p> <p>Maybe if we updated the component titles to be "Button component - GOV.UK Design System", that'd be enough.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/36degrees"><img src="https://avatars.githubusercontent.com/u/121939?v=4" />36degrees</a> commented <strong> 6 years ago</strong> </div> <div class="markdown-body"> <p>I believe Google is trying to 'merge' the H1 with the page title. I can't work out for the logic for this – it's done inconsistently for both components and patterns:</p> <img width="653" alt="screen shot 2018-07-25 at 09 07 13" src="https://user-images.githubusercontent.com/121939/43187740-353888a0-8fea-11e8-92a4-103e6c600a0c.png"> <img width="657" alt="screen shot 2018-07-25 at 09 06 49" src="https://user-images.githubusercontent.com/121939/43187735-321e256c-8fea-11e8-8866-5a9122253987.png"> <p>In most use cases the caption is distinct from the page title, and shouldn't be treated as part of it. From talking with @dashouse we think we should move the caption spans outside of the <code>H1</code> across the board, so:</p> <pre><code class="language-html"><h1 class="govuk-heading-xl"> <span class="govuk-caption-xl">govuk-caption-xl</span> govuk-heading-xl </h1></code></pre> <p>becomes:</p> <pre><code class="language-html"><span class="govuk-caption-xl">govuk-caption-xl</span> <h1 class="govuk-heading-xl">govuk-heading-xl</h1></code></pre> <p>I've tested this in the Frontend review app and moving the span outside of the h1 makes no difference to the way the caption and heading are presented.</p> <p>I think this would fix the issue.</p> <p>Thoughts?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>