How the BBC hide their h1 tag

8th Mar 2017
How the BBC hide their h1 tag

The BBC use some sneaky CSS on their new home page to hide their H1 tag.

Whilst considering the h1 tag for a news site client, I wandered over to the BBC's website to see whether they use their brand or a keyword as a h1, or the latest article on their page - which is typically the biggest text on a news site's home page.

When I checked the source code, I could see that their h1 tag is "BBC Homepage", and it sits right above "Welcome to the BBC [Date]". But I just couldn't see it on the page!

BBC Homepage

A bit more detective work and it ends up the CSS for the h1 tag is:

display:  block;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
font-size: 2px;

If we then change that CSS to have a larger font size and remove the text-indent, we can see it here:

BBC h1 tag

CSS for what's shown above:

display:block;
font-size:34px;

 

So the BBC are hiding their h1 tag.

SEO or general web crawling?

The point of a h1 tag is tell spiders the main title of a page. Because search engine robots love good semantic mark up, and need to understand content, header tags were always a valuable way of conveying your keywords and main focus. Whilst some argue less emphasis is put on them in the SEO world now, they're still important. 

Therefore, the BBC hiding theirs could be seen as keyword stuffing or bordering on dodgy SEO tactics. Which could land them in hot water with Google.

But the other way to look at, could just be that they want a strong h1 tag for any other online tools indexing their site - aggregators or other automated services trying to gather data. And they don't want a messy h1 tag messing up their design. Perhaps a "safer" way around this though would be to use "Welcome to the BBC" as their home page - or change that text to "Welcome to the BBC Homepage". Or just "BBC Homepage" if they're trying hard to optimise.

We'd be interested in any other SEO'ers takes on this?

 

 

Comments

  • By Lisa 09/03/2017 07:59:35

    Completely completely agree - accessibility is crucial, especially to the BBC - but I just wonder why they needed to hide it? "BBC Homepage" could be incorporated into the design; it doesn't need to be big / it could be styled. I just personally always show h1s on a page and was just surprised - seeing's they've got big text on there - why they went about it in this way.

  • By Narrative 08/03/2017 21:58:51

    Heading tags are not for spiders, they came along afterwards. H1, H2 etc were developed to provide information on the structural hierarchy of a document. They are especially relevant for accessibility. The BBC care more about accessibility than they do about SEO. The H1 tag is used in the way you describe because it's what screenreaders (text to voice systems for visually impaired) look for first when they start to describe a web page. Since Google likes sites that follow best practice, including sites that are accessible, it is very unlikely they would get marked down for it. For more information on how the BBC use mark-up, they have an extensive set of developer guidelines with their approved usage. http://www.bbc.co.uk/guidelines/futuremedia/accessibility/mobile/structure/headings

Leave a Comment

Submitting this form will create you an account on this site for submitting comments, raising disputes and other features as we add them. If you've already got an account you will receive an email asking you to confirm this comment is really by you!

Know a great web designer, developer or marketer?

Tell them to apply to join The Web Guild - it’s free for anyone who gets a company profile approved before the end of March! Read our How it Works page or sign up here!

<< Back to news