Menu
The website I am working on uses an image defined in CSS as the main logo. The html code looks like this:
<h1>Something.com | The best something ever</h1>
I would like to display just the image defined in CSS and pass the information from the h1 tag to the search enginges only.
What's the correct way to do this? Google is very strict about this, I know that display:none is wrong, what about visibility: hidden ?
Thanks in advance!
409
In HTML, a page title is defined as an <h1> element and should be placed before the content of the page and after the site header and navigation. However, <h1>s are being hidden or moved out of order, which can negatively affect accessibility and SEO.
Most likely not - unless it is done for clearly mobile usability issues.
Your h1 tag should be at the top of the page content (above any other heading tags in the page code). If your site is divided in to columns the left column may appear “higher” in the code. Be sure it does not contain any h1 tags as most likely the center column contains the main content of the page.
You should be fine with visibility: hidden.
That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.
Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.
83
The easiest, foolproof, best for SEO solution would be
<h1><img src=logo.png alt="Something.com | The best something ever"></h1>
set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.
example:
CSS
#myHeader {
width:200px;
height:50px;
background: url('lcoation/of/the/image.jpg') top left no-repeat;
text-indent:-9999px;
}
HTML
<body>
...
<h1 id='myHeader'>HELLO WORLD</h1>
...
</body>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
