Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

H1 Tag - Hidden for Logos

Featured Replies

Hi everyone,

 

I wanted to find out your thoughts on using the 'hidden h1 tag' concept for websites' logo'.

I use it in my sites, but i dont use it at work. My gaffer does not agree to using it.

 

I use the typical text-indent:-9999px; thing and think its a good thing! When CSS is turned off, the H1 tag still appears on screen - So....Does that mean the spiders/bots still see them? (I think so) but am I right?

 

Would it hurt to use hidden text, in just one part of your site?

Because, the bots may read hidden text as a grey area, but if it's only the logo/h1 then would that be a problem?

 

 

Look forward to your input!

 

:)

If a bot ignores hidden text then it might be treated with an edge of suspicion - what else could be hidden?

 

To my mind the H1 tag is for the page heading, screen reader users often skip through headings to get where they want to be.

 

Consider what's better when a screen reader reads out document headings:

 

1. Using H1 for logo

"heading level 1, image, description acme global incoporated, heading level 2, welcome to my site"

 

2. Using H1 for page heading

"heading level 1, welcome to my site"

 

If I were a screen reader user I know which I'd prefer :)

 

there's no harm in having a standalone logo image in your header DIV.

Edited by BlueDreamer

  • Author

If a bot ignores hidden text then it might be treated with an edge of suspicion - what else could be hidden?

 

,

How, does a bot ignore hidden text? I thought it does not read into the CSS? (Sorry i am a noob at SEO), therefore it does not know it is hidden, as when CSS is turned off it appears as normal. ??

 

Thanks bluedreamer

I just don't get WHY you would want to use an H1 under the logo, what's wrong with alt and title for the image and then using the h1 to do what it is meant to do ie show the main theme of the document. Why would you not want to use the h1 for what its meant for - I just don't get it - am I missing something?

  • Author

I just don't get WHY you would want to use an H1 under the logo, what's wrong with alt and title for the image and then using the h1 to do what it is meant to do ie show the main theme of the document. Why would you not want to use the h1 for what its meant for - I just don't get it - am I missing something?

Well, From what i thought is that the 'main title' of a page is the company/website name. And usually that company has a logo. So you hide the h1 tag witin the logo.

 

i mean you dont see a rubbish looking RAW text h1 tag of McDonalds when you go onto their website do you?

So by hiding the h1 tag to the viewerm we can display the lovely looking bradned logo and still show google and co. that we have a h1 tag.

 

My thoughts!?

I don't know exactly how the bots work, but to be able to filter out various tricks they will no doubt analyse HTML and CSS to look for things like big negative margins such as -9999px, contrasts of text colour vs background colour and so on.

 

In the case of your example you've placed something off screen and the bot isn't going to know that you're not trying to spam keywords with it. Bots may be self aware as well though, it depends how they've been programmed to react to certain parameters. So if they find a H1 offscreen but with your site name in it and on every page, they might analyse it and count it as bone fide. No-one is really sure how they treat things like this, it's a well guarded secret :)

I personally would not like a site like McDonalds it's a mess. McDonalds have completely different resources to the majority of the businesses we all deal with. In the end the h1 tag is meant to indicate the main theme of the page with h2 etc showing the heirarchy down the page and my understanding is that search engines interpret those tags in that way - in the end just construct your site in the way a visitor would expect ie use headers to indicate important heirarchy within the document/content. Your main theme should be in the h1 with subdivisions or subsidiary subjects in h2, h3 etc.

 

Hope this helps, I'm not really a fan of flash as you can tell !!! :flm16:

I am inclined to think that if the bots can work out when you have tried to hide text by making it the same colour as the background and penalise you then they difinately will not like the 9999px trick and will be wise to it.

  • Author

I personally would not like a site like McDonalds it's a mess. McDonalds have completely different resources to the majority of the businesses we all deal with. In the end the h1 tag is meant to indicate the main theme of the page with h2 etc showing the heirarchy down the page and my understanding is that search engines interpret those tags in that way - in the end just construct your site in the way a visitor would expect ie use headers to indicate important heirarchy within the document/content. Your main theme should be in the h1 with subdivisions or subsidiary subjects in h2, h3 etc.

 

Hope this helps, I'm not really a fan of flash as you can tell !!! :flm16:

 

I dont use Flash?!

 

I suppose it is a gray area after all, using hidden h1 tags.

Anybody have other thoughts?

 

I mean, Does it really hurt your SEO?

I mean, Does it really hurt your SEO?

Heading structure has more to do with accessibility and usability more than anything. However, a well structured document would help search engines analyse the page in the right context, so in theory it can be more accurately placed relative to any web search that match.

  • Jo 90 locked this topic
Guest
This topic is now closed to further replies.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.