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
20 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
• 10,840 points

Related Questions In Others

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
• 10,840 points
63 views
0 votes
1 answer

Create an seo and web accessibility analyzer

there are some tools which  are already ...READ MORE

answered Feb 12 in Others by narikkadan
• 10,840 points
57 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
653 views
0 votes
0 answers

seo - images and h1

I like to have logos instead of ...READ MORE

Mar 9 in Digital Marketing by Kichu
• 19,040 points
29 views
0 votes
0 answers

H2 comes before h1 in source, Is it ok?

IF i use <h2> for left sidebar ...READ MORE

Mar 11 in Digital Marketing by Kichu
• 19,040 points
92 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
• 8,730 points
306 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
• 10,840 points
119 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
230 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