2

Which of these alternatives would be the less negative to Google search engine?

<h1>
    <a href="#" title="Company Name">
        <img src="img/logo.png" alt="Logo" title="Company name" />
    </a>
</h1>

or

<h1>
    <a href="#" title="Company Name">
        Company Name
    </a>
</h1>

accompanied by

h1 { background-image: url('../img/logo.png'); }
h1 a { text-indent: -9999px; }

or accompanied by

h1 { background-image: url('../img/logo.png'); }
h1 a { color: transparent; user-select: none; }
  • 3
    Neither. Why are you messing with the h1 tag and messing with it's purpose?? The h1 header tag is a very important semantic clue. Stuffing an image or link in it, you are devaluing the potential of the h1 tag to possibly 0. If you want an image or link, what is wrong with a div or span? Do not screw around with any header tag. It does not make sense. You are doing yourself a disservice. – closetnoc Nov 5 '15 at 16:42
  • Ok, just calm down your nerves, ok? I know that's a not okay thing to do. It's something that it's happening in the company I work, and this is a situation we're dealing with. So I came here and asked which of these scenarios is the less negative one. The text-indent one i've seen even on wordpress' core. – ghaschel Nov 5 '15 at 16:59
  • 1
    Given the two(?) I would say the second. The reasons is simple. The h1 tag is clean text and can be semantically weighed. The image is added after the HTML is downloaded. Please understand what is stored and weighed by G is the original HTML code. Any JS modification speaks to rendering and not indexing. But still, I would try and get to company to remove the logo from a header tag- it should be a simple change. I do apologize for being so direct and offending you. I like to set people straight quickly- not trying to be mean- just absolute. There is so much bad SEO advice, I tend to jump. – closetnoc Nov 5 '15 at 17:13
  • @closetnoc text-indent, is often used for PNG sprites (whether or not this is correct, many people do it, including Stack Exchange sites), but sadly many people attempt to use it for ranking purposes which sadly in the examples above does... logos are not headers, and the same h1's shouldn't be repeated on all pages. Thankfully, the team at Stack Exchange ain't that stupid, they use just the a method, and without the header. – Simon Hayter Nov 5 '15 at 17:44
  • @SimonHayter Agreed. It was all the rage to put a bunch of stuff in the h1 tag a long while ago thinking that the h1 tag would make it more important, however, it just muddied the waters. I am a very firm believer that you do not mess with header tags. Links are okay, but I still advise against it mostly out of tradition and expectation. It does not make the link more important though the header will rank just fine. – closetnoc Nov 5 '15 at 17:48
4

The logo is content, not presentation. So it should be included in the HTML, not in the CSS. Therefore using the img element is the appropriate choice.

However, you should not use the alt value "Logo" for it; use the company name (i.e., what the logo stands for) instead. And then you could and should omit the title attribute. (And the title attribute of the a element should probably say something like "To the homepage" instead of repeating the company name.)

<img src="img/logo.png" alt="ACME Inc." />

And if you care about the HTML5 document outline, the site name (whether it’s a logo or text) should be in an h1 element that belongs to the body sectioning root (so I don’t agree with mentioned statements that this should not be done).¹ Otherwise you get an unlabeled top-level entry in the outline (and you would have to make sure to always use sectioning elements explicitly, otherwise you could end up with a wrong outline).

<body>

  <!-- this represents the document heading, which should not be confused with the main content heading -->
  <h1>
    <a href="#" title="To ACME’s homepage">
      <img src="img/logo.png" alt="ACME" />
    </a>
  </h1> 

  <main>
    <article>
      <!-- this represent the main content heading -->
      <h2>…</h2> <!-- may also use <h1> instead -->
    </article>
  </main>

</body>

¹ See some of my other answers for more details:

3

This has been asked several times on varous stack's and in various forms, there is no right or wrong answer because Google does understand the text-indent usage when using background, however...

It is widely agreed that using a proper image using an ALT tag is the better way of keeping your code more semantic and having better accessibility. For example this answer on Stack Overflow back in 2009 has the most upvotes (170+) for the same question:

SOURCE

You're missing the option:

<h1>
  <a href="http://stackoverflow.com">
      <img src="logo.png" alt="Stack Overflow" />
  </a>
</h1>

Matt Cutts from Google also discussed about this during one of his Q&A videos on YouTube and basically said its better to use ALT tag and avoid using text-indent.

SOURCE

YouTube Transcript: Okay Richard M from Australia asks, "if you have a company logo on your site what is the best way to include the text to the logo for SEO purposes, all tags CSS hiding or does it matter"

Yes it does matter it's much better use in all tag them to use like I'm hiding some CSS, you know nine thousand pixel over to the that's what the hell tag was more or less built for I you know are all attribute you know how everyone a fair up but yeah go ahead in years old and that's a fantastic way to say you know this is the text that in my logo search engines can read that and use that.

I would not you know hide it using CSS or anything like that when is a perfectly valid perfectly simple way to do it it does the job just fine.

text-indent for PNG Sprites, not SEO

However, with all this said many people, many websites still continue to use text-indent, mostly because of the use of PNG sprites for page compression, for example Pro Webmasters uses text-indent.

Avoid using text-indent with headers, why? because...

So, while I won't say using text-indent should be avoided, I do agree it should be avoided when using header tag, this is because you shouldn't really associate your logo with a header, its not a header... its your logo, your page titles should be compiled with real text based headers.

Repeating the same god damn h1's

Using the format h1 > a > img will likely repeat on all of your pages, and this brings issues into should you be using multiple h1's on the page...? that's why many top companies nowadays just use a > img because, its the most correct method...

Using h1 > a > img or h1 > a with text-indent is purely because your attempting to rank higher for those keywords, spamming the same phrase on every single page isn't going to make you rank any better if its a vs h1, it's one of several hundred signals that Google uses, most old, dated SEO advice will tell you h1 is the most important, its simply not... plain text with no markup can rank just as well, with other factoring signals.

Ideally Code

A more up to date ideal example would be something like this:

<div itemscope itemtype="http://schema.org/Organization">
    <a itemprop="url" href="http://www.example.com/">
        <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" />
    </a>
<div>

Summary

  • If your using PNG sprites then you could choose text-indent, but do lose the h1
  • If your not using PNG sprites use the ALT tag, but again lose the h1
  • Nicely said as always!! – closetnoc Nov 5 '15 at 17:51
2

You should use the <img> solution rather than the background image solution. Most sites have a logo image rather than a logo background -- Google supports it fully. The standard image solution also works best with accessibility.

The background image solution could possibly get you penalized for hidden text or keyword stuffing. (I would say that it is unlikely if your site is actually for your company name, especially if the logo has the company name in the image, but with automated algorithms, you never know.)

You should not use an H1 tag around your company name or your logo. The h1 tag should be different on each of your pages. Logos and company names are typically used on all pages. You don't need to use your company name in an H1 for ranking purposes anyway. Your site will rank fine for your company name with little effort on your part because:

  • Your domain is the company name
  • Many inbound links to your site will have the company name as anchor text
  • You will use your company name elsewhere which will get the keyword plenty of weight
    • As the page title of the home page: Company Name - Widgets since 2007
    • At the end of most other page titles: Widget guide 2015 - Company Name
    • In the footer with your copyright: Copyright 2015 Company name
  • More good points! – closetnoc Nov 5 '15 at 18:35
2

As most optimized variation i would consider the one which contains most SEO-relevant signals. And this is in my opinion this one:

<div itemscope itemtype="http://schema.org/Organization">
  <a itemprop="url" href="http://www.example.com/" title="My Firm">
    <h1 itemprop="name">My Firm</h1>
    <img itemprop="logo" src="http://www.example.com/logo.png" alt="Example" title="My Firm"/>
  </a>
</div>
  • +1 for showing structured data solution. You might consider making the title more 'accessibility' focused rather than SEO - for e.g. title="Go To Home Page" – asimovwasright Nov 12 '15 at 9:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.