Replacing H1 text with a logo image best method for SEO and accessibility

0 votes

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.

Feb 20 in Others by Kichu
• 19,040 points
199 views

1 answer to this question.

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


you missed this option in the code 
href title and h1 image are very vital
answered Feb 21 by narikkadan
• 18,480 points

Related Questions In Others

0 votes
0 answers

Sharing a story to Instagram with a background image and a sticker - IOS Swift

I'm trying to share a story with ...READ MORE

2 days ago in Others by gaurav
• 18,960 points
10 views
0 votes
1 answer
0 votes
1 answer

Yoast Seo breadcrumbs: How to add custom text to category and tag name

use this code  add_filter('wpseo_breadcrumb_single_link', 'filter_breadcrumbs_for_h1', 10, 2); function filter_breadcrumbs_for_h1($link_output, ...READ MORE

answered Feb 12 in Others by narikkadan
• 18,480 points
85 views
0 votes
0 answers

Replacing H1 text with a logo image: best method for SEO and accessibility?

i want to link my logo to ...READ MORE

Feb 14 in Others by Kichu
• 19,040 points
1,412 views
0 votes
1 answer

seo - images and h1

SEO is speculative at best. Generally, the accepted ...READ MORE

answered Mar 11 in Digital Marketing by narikkadan
• 18,480 points
120 views
0 votes
1 answer

H2 comes before h1 in source, Is it ok?

Semantically, H1 should come before H2 in ...READ MORE

answered Mar 12 in Digital Marketing by narikkadan
• 18,480 points
188 views
0 votes
1 answer

Render HTML to an image

To answer your question, there are a ...READ MORE

answered Feb 8 in Java by Soham
• 9,150 points
591 views
0 votes
1 answer

Switching H1 text with a logo image

<h1> <a href="http://stackoverflow.com"> ...READ MORE

answered Feb 27 in Others by narikkadan
• 18,480 points
289 views
0 votes
2 answers

What is most SEO optimized image HTML code for?

What is most SEO optimized image HTML ...READ MORE

answered Feb 12 in Others by gdxxfgoidt
385 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP