What's your logo? An H1 or an image?

[English]August 16, 2012

There are several bad practices on how to add a logo in a web page. In this article we're going to explore how to display it to be friendly with search engines.

Since I started web development, I've had always wondered how to display a logo. What's good for SEO? Who does it right? Who does it wrong?

Websites like Meneame.net, aNieto2k, Wordpress, The New York Times, Reddit, etc, do this in a different way. In this article I'm going to give my opinion about how to display it, based in my experiencie and from what I've saw in the WWW.

There are several bad practices from which we can learn and think about how to display a logo in a web page. Here are some of the most common ones:

The first option is just using an inline image:

<img src="logo.png" alt="My web page" />

The second option is the one most of the websites use:

h1 {
  width: 300px;
  height: 50px;
  background: url('logo.png');
}
<a href="URL" title="My web page">
  <h1 class="logo"></h1>
</a>

Finally, the third option (careful, this can make your eyes bleed):

<a href="URL" title="My web page">
  <h1 class="logo">
    <img src="logo.png" alt="My web page" />
  </h1>
</a>

But if we are talking about SEO, for obvious reasons we should think about what's being read by the search engine.

For example, Google will penalize web sites that abuse of the h1 tag, keywords and the ones that don't have a good content structure using the tags. Actually, it is accepted to have multiple h1 tags because sometimes it is really necessary.

One of the main reasons on why the h# tags exitsts, is to structure content. The h character in tag means header and the number is the priority it has in the whole content of the document.

That is why your content should be presented with the importance it has, meaning that if the main title of your website is: My web page, but you are displaying an article with the title: How to be alive, your main title is the latest one. The most important part of your content is the article, not the title of the web page.

There's actually an ongoing debate about this at The H1 Debate in which there's a pool about if either we should use the H tag as the logo or as the main article title. Guess who's winning?

The recommendation that I have is the following: Use the H tags to prioritize your individual content, but on the index page, try to display it as an H1. For the rest of your pages just use a regular image.