Outcome from 2018 SEO project with Go Fish Digital:
Having more than h1 tag on a page can negatively impact search engine rankings, as it makes it difficult for crawlers to understand what the title of a page is. Since HTML5 it is permitted to have more than a single h1 tag, but it's not a good practice for search engine optimisation. On desktop we correctly only have one h1 tag which contains the title of the page, but on mobile we also have a second h1 tag containing the Wikipedia header image:
<h1> <span><img src="/static/images/mobile/copyright/wikipedia-wordmark-en.png" alt="Wikipedia" srcset="/static/images/mobile/copyright/wikipedia-wordmark-en.svg 1x" height="18" width="116"/></span> <sup>β</sup> </h1>
This h1 tag should be removed, and replaced with something else that's appropriate for the context.
Acceptance criteria
Given we are using "nav" for our main menu. Let's continue adopting HTML5 semantic elements
- Separate the site header from the content, by having the header be its own semantic area, scoping headings locally (instead of part of the document-wide structure). header-container should become a header element.
- #content should become a main element.
- ~~~For older versions of IE, update https://github.com/wikimedia/mediawiki-skins-MinervaNeue/blob/b0df6367c26d3aee454d0fa1a76ca32244697bcb/includes/skins/ie8Html5Support.mustache~~~ not necessary.
- When rendering the logo, replace the <h1> tag with an <a> tag. This should link to the homepage, given this is an industry standard.
- Ensure any change in styles is compatible with cached HTML
QA steps
Visit https://en.wikipedia.beta.wmflabs.org/wiki/Transcluded_page and navigate various pages via Special:Random. Checking that the heading bar and content are displaying as normal. Make sure to visit pages as anonymous as well as logged in to catch any potential regressions.
Use real mobile phones to test this.
It would also be advisable to test with a few legacy browsers e.g. Opera Mini, UC browser.
Note: While we're unlikely to see any issues here at all (or notice any changes) possible things that could go wrong:
- The header disappears on a certain browser
- Site name/logo is stretched/huge
- Clicking site logo/title doesn't take you to main page
- article content is not visible