Hey everyone,

 

I am currently redesigning my website at the moment, and am trying to get everything semantically (sp?) correct, and I was reading about swapping a H1 header out for a logo using CSS, they was saying that it is good for semantics and everything like that, but then you see a lot of other people saying that it is bad for semantics because you are basically setting the "title" of every page to "Your Company Name" if you are using a logo.

 

What do you guys/girls/demons/fluffy kittens do to keep things nice and semantic?

 

Thanks

I'm one of those who think that using a logo image is bad semantics. If you want to have the page title or company title as an image logo then you can always include a h1 tag with display: none or visibility: hidden; the screen readers for blind people and search engines will still find that while sighted people just see the logo.

DONT EVER USER DISPLAY NONE!!!!!!

 

The way I see it, the best thing to do is...

 

set the H1 tag to a certain width and height (the same as your logo), and then set the text indent to -9999px, that way, when Google, Yahoo and MSN crawl the website, they still asee the H1 tag and not see it with an attrbute of "display none" <--- VERY BAD FOR SEO! and as you may not know, semantics is a big park of on-page SEO.

DONT EVER USER DISPLAY NONE!!!!!!

 

The way I see it, the best thing to do is...

 

set the H1 tag to a certain width and height (the same as your logo), and then set the text indent to -9999px, that way, when Google, Yahoo and MSN crawl the website, they still asee the H1 tag and not see it with an attrbute of "display none" <--- VERY BAD FOR SEO! and as you may not know, semantics is a big park of on-page SEO.

I second that, 100% the way to do it.

Why cant i get my boss to agree with this method ??

 

They seem to think here that doing this is very bad for SEO!?

 

Or am i going crazy...?

 

..........and not see it with an attrbute of "display none"

 

I agree about using the text-indent or margin-left: -9999px; I usually use that method with image menu buttons.

 

I've been doing a little research about the display: none not being able to be read by screen readers or search engines. w3.org says

none

This value causes an element to not appear in the formatting structure (i.e., in visual media the element generates no boxes and has no effect on layout). Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely. This behavior cannot be overridden by setting the 'display' property on the descendants.

Please note that a display of 'none' does not create an invisible box; it creates no box at all. CSS includes mechanisms that enable an element to generate boxes in the formatting structure that affect formatting but are not visible themselves. Please consult the section on visibility for details.

 

which says that it's only effect is on the visual media, so you would imagine that as screen readers and search engines are not looking at the visual, they would read the element. However, it seems that screen readers attempt to read the visual and therefore "usually" don't read elements with display: none.

http://css-discuss.incutio.com/?page=ScreenreaderVisibility

When you hide material from visual display on a PC screen, you almost always hide it from screen readers too.

I second that, 100% the way to do it.

 

I was about to say but then you are setting the H1 to the text in the logo, but then I remembered that you could have whatever text you wanted in the H1 and it will still show. That way it solves the problem of same title on every page.

 

Thanks everyone

So... if I'm following this correctly, can we still get around this problem by utilising the img alt tag? For instance, if we make an H1 and put an image inside it rather than text and make sure the img alt text is the wording used in the logo image, will a screen reader and/or search engine pick up the alt text as the contents of the H1 tag?

 

<h1><img src="logo.jpg" alt="My Company" /></h1>

 

Or will that still not work?

 

I have to admit, I've been using display:none quite a lot to be able to use a background image for an H1 and only display the text when the stylesheet isn't being used, like so:

 

#headerlogo {background: url(logo.jpg); height: 100px;}
 .hidden {display: none;}

 <h1 id="headerlogo"><span class="hidden">My Company</span></h1>

 

From what people have said above, I take it that won't work as expected. Could we perhaps combine the two methods, like so:

 

<h1 id="headerlogo"><img src="logo.jpg" alt="My Company" /><span class="hidden">My Company</span></h1>

 

Your thoughts and advice are appreciated!

If you use a H1 to hold your logo try using the site with a screen reader - you soon get fed up of having the company name read out on every page

Let's put it this way, if there's a blind person using a screenreader then he would've either typed the site or visited it somehow, so he'll know the site he's on anyway surely. I wouldn't say it's bad semantics at all and I would always avoid using display:none; on anything that a search engine might view and potentially blacklist you for.

If you use a H1 to hold your logo try using the site with a screen reader - you soon get fed up of having the company name read out on every page

 

Thats what I thought originally lol

it is bad for semantics because you are basically setting the "title" of every page to "Your Company Name" if you are using a logo.

 

I think you are confusing the content of the <title> tag and the displayed page masthead which you may think of as the title of the displayed page.

The content within <title> should be different for each page and reflect the content of that page. This is important for SEO.

 

You want the masthead to be the same on every page so that you have a consistent identity, that will be "Your Company Name". As has been suggested use an image replacement technique.

 

I use:

<h1><img src="./images/my-company_logo.png" height="148" width="300" alt="My company Name"/><span id="moveit">My Company Name</span></h1>

 

and css rule:

#moveit {

position: absolute;

left: -3000px;

}

 

Thisplaces the text off the screen and just the company logo is displayed. In SEO terms search engine crawlers index the text within the <h1> (content of the h1 tag is important), in accessibility terms a text only or screen reader will see just the text within the <h1><span> and I believe is semantically correctly as it gives the identity of the site containing that page, even if it is repeated for every page visited.

 

You can see this effect on our website www.zoneix.net