271

It seems like there are a few different techniques out there, so I was hoping to get a "definitive" answer on this...

On a website, it's common practice to create a logo that links to the homepage. I want to do the same, while best optimizing for search engines, screen readers, IE 6+, and browsers who have disabled CSS and/or images.

Example One: Doesn't use an h1 tag. Not as good for SEO, right?

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

Example Two: Found this somewhere. The CSS seems a little hacky.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    padding: 70px 0 0 0;
    overflow: hidden;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:70px;
}

Example Three: Same HTML, different approach using text-indent. This is the "Phark" approach to image replacement.

<h1 id="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
#logo {
    background: transparent url("logo.png") no-repeat scroll 0% 0%;
    width: 250px;
    height: 70px;
    text-indent: -3333px;
    border: 0;
    margin: 0;
}

#logo a {
    display: block;
    width: 280px; /* larger than actual image? */
    height: 120px;
    text-decoration: none;
    border: 0;
}

Example Four: The Leahy-Langridge-Jefferies method. Displays when images and/or css is turned off.

<h1 id="logo" class="logo">
    <a href="">Stack Overflow</a>
</h1>
/* css */
h1.logo {
    margin-top: 15px; /* for this particular site, set this as you like */
    position: relative; /* allows child element to be placed positioned wrt this one */
    overflow:hidden; /* don’t let content leak beyond the header - not needed as height of anchor will cover whole header */
    padding: 0; /* needed to counter the reset/default styles */
}

h1.logo a {
    position: absolute; /* defaults to top:0, left:0 and so these can be left out */
    height: 0; /* hiding text, prevent it peaking out */
    width: 100%; /* 686px; fill the parent element */
    background-position: left top;
    background-repeat: no-repeat;
}

h1#logo {
    height: 60px; /* height of replacement image */
}

h1#logo a {
    padding-top: 60px; /* height of the replacement image */
    background-image: url("logo.png"); /* the replacement image */
}

What method is the best for this sort of thing? Please provide html and css in your answer.

5
  • you should check out this topic to: stackoverflow.com/questions/1874895/…
    – meo
    Commented Jun 6, 2010 at 20:06
  • 15
    Matt Cutts answering this question. youtu.be/fBLvn_WkDJ4
    – troynt
    Commented Oct 30, 2010 at 23:12
  • 2
    Isn't the title attribute should be in the <a>?
    – bobo
    Commented Mar 4, 2012 at 11:45
  • 30
    This question should not be marked as off-topic. It is a pretty clearly defined question about CSS and search engine optimization. Just because it's not C# doesn't mean it's not code.
    – MikeMurko
    Commented Sep 16, 2012 at 21:20
  • 3
    @troynt I find Matt Cutts to give misleading advice sometimes. As such I tend not to watch him. Commented Mar 13, 2013 at 13:05

17 Answers 17

253

You're missing the option:

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

title in href and img to h1 is very, very important!

18
  • 22
    does wrapping an h1 around an image with alt text carry the same weight (seo-wise) as plain text wrapped with an h1?
    – Andrew
    Commented Jun 18, 2009 at 12:11
  • 12
    By the way, it is relevant, a logo is part of your website content, it is not used for decoration, so use <img> with alt attribute not CSS for your logo. Commented Mar 31, 2010 at 0:06
  • 1
    @Dracorat Not true. (e.g. YouTube & most of the largest sites on the internet)
    – its_me
    Commented Feb 3, 2013 at 17:38
  • 38
    Unfortunately the link in the comment left by @troynt is now broken. Here's a new permalink to the content: youtu.be/fBLvn_WkDJ4
    – ahsteele
    Commented Mar 4, 2013 at 18:46
  • 15
    For all who are wondering what's in the linked video: Matt Cutts basically says, you should use the alt attribute of the img tag instead of hiding text with css.
    – bjunix
    Commented Nov 21, 2016 at 15:39
17

I do it mostly like the one above, but for accessibility reasons, I need to support the possibility of images being disabled in the browser. So, rather than indent the text from the link off the page, I cover it by absolutely positioning the <span> to the full width and height of the <a> and using z-index to place it above the link text in the stacking order.

The price is one empty <span>, but I'm willing to have it there for something as important as an <h1>.

<h1 id="logo">
  <a href="">Stack Overflow<span></span></a>
</h1>
#logo a {
   position:relative;
   display:block;
   width:[image width];
   height:[image height]; }

#logo a span {
   display:block;
   position:absolute;
   width:100%;
   height:100%;
   background:#ffffff url(image.png) no-repeat left top;
   z-index:100; /* Places <span> on top of <a> text */  }
6
  • 1
    What's wrong with indenting? My assumption was that screenreaders and crawlers still pick up the text despite indentation.
    – ckarbass
    Commented Mar 25, 2009 at 0:20
  • 2
    Sorry it took me so long to get back here. The only issue with indenting is if images are disabled in the user's browser but CSS is on, nothing appears, text or images. It's kind of an edge case, but important to consider for me, working on a university website.
    – Rob Knight
    Commented Apr 11, 2009 at 20:39
  • hmm...I couldn't get this to work. The anchor text kept appearing on top of the image.
    – Andrew
    Commented Jun 18, 2009 at 12:20
  • <nitpicker> use #logo span instead, it will be more efficient for the browser to render </nitpicker> Commented Mar 4, 2010 at 5:32
  • 1
    In some cases you need a {top:0} to #logo a span.
    – Marcus
    Commented Nov 15, 2010 at 17:29
11

If accessibility reasons is important then use the first variant (when customer want to see image without styles)

<div id="logo">
    <a href="">
        <img src="logo.png" alt="Stack Overflow" />
    </a>
</div>

No need to conform imaginary SEO requirements, because the HTML code above has correct structure and only you should decide does this suitable for you visitors.

Also you can use the variant with less HTML code

<h1 id="logo">
  <a href=""><span>Stack Overflow</span></a>
</h1>
/* position code, it may be absolute position or normal - depends on other parts of your site */
#logo {
  ...
}

#logo a {
   display:block;
   width: actual_image_width;
   height: actual_image_height;
   background: url(image.png) no-repeat left top;
}

/* for accessibility reasons - without styles variant*/
#logo a span {display: none}

Please note that I have removed all other CSS styles and hacks because they didn't correspond to the task. They may be usefull in particular cases only.

2
  • 6
    display:none is not accessible.
    – KPM
    Commented Oct 26, 2014 at 20:36
  • Best method is wrapping the logo under div due to its Accessibility, Usability and SEO optimization, and mostly used across big web organizations. Twitter, Amazon, Mozilla don't use <h1> for their logos but main headings to better capture page value. bit.ly/1MR4fr5
    – Oriol
    Commented Nov 18, 2015 at 0:32
5

Chiming in a bit late here, but couldn't resist.

You're question is half-flawed. Let me explain:

The first half of your question, on image replacement, is a valid question, and my opinion is that for a logo, a simple image; an alt attribute; and CSS for its positioning are sufficient.

The second half of your question, on the "SEO value" of the H1 for a logo is the wrong approach to deciding on which elements to use for different types of content.

A logo isn't a primary heading, or even a heading at all, and using the H1 element to markup the logo on each page of your site will do (slightly) more harm than good for your rankings. Semantically, headings (H1 - H6) are appropriate for, well, just that: headings and subheadings for content.

In HTML5, more than one heading is allowed per page, but a logo isn't deserving of one of them. Your logo, which might be a fuzzy green widget and some text is in an image off to the side of the header for a reason - it's sort of a "stamp", not a hierarchical element to structure your content. The first (whether you use more depends on your heading hierarchy) H1 of each page of your site should headline its subject matter. The main primary heading of your index page might be 'The Best Source For Fuzzy Green Widgets in NYC'. The primary heading on another page might be 'Shipping Details for Our Fuzzy Widgets'. On another page, it may be 'About Bert's Fuzzy Widgets Inc.'. You get the idea.

Side note: As incredible as it sounds, don't look at the source of Google-owned web properties for examples of correct markup. This is a whole post unto itself.

To get the most "SEO value" out HTML and its elements, take a look at the HTML5 specs, and make make markup decisions based on (HTML) semantics and value to users before search engines, and you'll have better success with your SEO.

1
  • 1
    Adding to this, that all of this is true, and the logo shouldn't be the h1 on the any other page except the homepage (& ideally not on a homepage). However, often on a homepage the most relevant place for the h1 will be the logo, as hero banner content may not be specific enough to the topic of the website (i.e it may relate to a current service or product which is being pushed rather than the core topic of the site). If the site only has one area of focus (e.g. a site for an app), the hero area may work for the h1. When it doesn't work an image with alt wrapped in h1 is better than nothing.
    – elmarko
    Commented Aug 29, 2018 at 14:25
4

How W3C does?

Simply have a look a look at https://www.w3.org/. The image has a z-index:1, the text is here but behind because of the z-index:0 coupled to the position: absolute;

The original HTML:

<h1 class="logo">
    <a tabindex="2" accesskey="1" href="/">
        <img src="/2008/site/images/logo-w3c-mobile-lg" width="90" height="53" alt="W3C">
    </a>
    <span class="alt-logo">W3C</span>
</h1>

The original CSS:

#w3c_mast h1 a {
    display: block;
    float: left;
    background: url(../images/logo-w3c-screen-lg) no-repeat top left;
    width: 100%;
    height: 107px;
    position: relative;
    z-index: 1;
}
.alt-logo {
    display: block;
    position: absolute;
    left: 20px;
    z-index: 0;
    background-color: #fff;
}
1
  • 4
    Hide a text content behind an image is not really a "best method for SEO" and in the W3C code sample, screen readers are reading "W3C" two times (one for alt attribute and one for span text) so it cannot be either a "best method for accessibility"
    – Klemart3D
    Commented Dec 28, 2021 at 9:39
3

I think you'd be interested in the H1 debate. It's a debate about whether to use the h1 element for the page's title or for the logo.

Personally I'd go with your first suggestion, something along these lines:

<div id="header">
    <a href="http://example.com/"><img src="images/logo.png" id="site-logo" alt="MyCorp" /></a>
</div>

<!-- or alternatively (with css in a stylesheet ofc-->
<div id="header">
    <div id="logo" style="background: url('logo.png'); display: block; 
        float: left; width: 100px; height: 50px;">
        <a href="#" style="display: block; height: 50px; width: 100px;">
            <span style="visibility: hidden;">Homepage</span>
        </a>
    </div>
    <!-- with css in a stylesheet: -->
    <div id="logo"><a href="#"><span>Homepage</span></a></div>
</div>


<div id="body">
    <h1>About Us</h1>
    <p>MyCorp has been dealing in narcotics for over nine-thousand years...</p>
</div>

Of course this depends on whether your design uses page titles but this is my stance on this issue.

3
  • I'm pretty sure IMG's are considered content whereas css background images aren't. That's why I tend to lean towards background images for site-wide images and things of that nature that aren't explicitly for that page content. Commented Mar 21, 2009 at 19:38
  • @d03boy: Well in that case you could make an inline div that has the correct sizing for the logo size and give that the background. A span inside it (that has visibility: hidden;) will provide an "alt text" replacement.
    – Ross
    Commented Mar 21, 2009 at 20:29
  • 6
    H1 debate is now a dead link
    – alex
    Commented Jul 7, 2010 at 23:04
2

You missed title in <a> element.

<h1 id="logo">
  <a href="#" title="..."><span>Stack Overflow</span></a>
</h1>

I suggest to put title in <a> element because client would want to know what is the meaning of that image. Because you have set text-indent for the test of <h1> so, that front end user could get information of main logo while they hover on logo.

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

This was the good option for SEO because SEO gives the H1 tag high priority, inside the h1 tag should be your site name. Using this method if you search the site name in SEO it will show your site logo as well.

you want to hide the site name OR text please use text-indent in negative value. ex

h1 a {
 text-indent: -99999px;
}
2

If you don't want the browser styles applied when wrapping your image in an <h1>, you can get the same accessibility and SEO improvements with the <h1> by using the attributes role="heading" and aria-level="1"

For example, as far as the voice over is concerned, this

<h1>
    <a href="/">
        Stack Overflow
    </a>
</h1>

is the same as

<div role="heading" aria-level="1">
    <a href="/">
        <img src="https://via.placeholder.com/150" alt="Stack Overflow" />
    </a>
</div>

1

One point no one has touched on is the fact that the h1 attribute should be specific to every page and using the site logo will effectively replicate the H1 on every page of the site.

I like to use a z index hidden h1 for each page as the best SEO h1 is often not the best for sales or aesthetic value.

1
  • You can always use H1 for logo on main page only. Commented Jan 29, 2016 at 6:57
1

After reading through the above solutions, I used a CSS Grid solution.

  1. Create a div containing the h1 text and the image.
  2. Position the two items in the same cell and make them both relatively positioned.
  3. Use the old zeldman.com technique to hide the text using text-indent, white-space, and overflow properties.
<div class="title-stack">
    <h1 class="title-stack__title">StackOverflow</h1>
    <a href="#" class="title-stack__logo">
        <img src="/images/stack-overflow.png" alt="Stack Overflow">
    </a>
</div>
.title-stack {
    display: grid;
}
.title-stack__title, .title-stack__logo {
    grid-area: 1/1/1/1;
    position: relative;
}
.title-stack__title {
    z-index: 0;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}
0

I don't know but this is the format have used...

<h1>
    <span id="site-logo" title="xxx" href="#" target="_self">
        <img src="http://www.xxx.com/images/xxx.png" alt="xxx" width="xxx" height="xxx" />
        <a style="display:none">
            <strong>xxx</strong>
        </a>
    </span>
</h1>

Simple and it has not done my site any harm as far as I can see. You could css it but I don't see it loading any faster.

0

A new (Keller) method is supposed to improve speed over the -9999px method:

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

recommended here:http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

0

For SEO reason:

<div itemscope itemtype="https://schema.org/Organization">
 <p id="logo"><a href="/"><span itemprop="Brand">Your business</span> <span class="icon fa-stg"></span> - <span itemprop="makesOffer">sell staff</span></a></p>
 </div>
   <h1>Your awesome title</h1>
-1
<h1><a href="/" title="Some title">Name</a></h1>
h1 a{
  width: {logo width};
  height: {logo height};
  display:block;
  text-indent:-9999px;
  background:url({ logo url});
}
1
  • It's best not to use massive text indents like this, because it causes a potentially big performance hit. Detailed explanation here.
    – Nick F
    Commented May 7, 2013 at 17:35
-1
<div class="logo">
    <h1><a href="index.html"><span>Insert Website Name</span></a></h1>
    <p>Insert Slogan Here</p>
</div>
#header .logo h1 {
    background: red; /* replace with image of logo */
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a {
    display:block;
    height:40px; /* image height */
    width:220px; /* image width */
}

#header .logo h1 a span {
    display:none;
}
-1

My suggestion for improving accessibility and SEO.

  • Set up the company text with the H1 tag
  • Add the Title attribute
  • Add the schema tags

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