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

Question

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    lt div id  logo  gt       lt a href    gt           lt img src  logo png  alt  Stack Overflow    gt       lt  a gt   lt  div gt    Example Two  Found this somewhere  The CSS seems a little hacky    lt h1 id  logo  gt       lt a href    gt Stack Overflow lt  a gt   lt  h1 gt       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    lt h1 id  logo  gt       lt a href    gt Stack Overflow lt  a gt   lt  h1 gt       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    lt h1 id  logo  class  logo  gt       lt a href    gt Stack Overflow lt  a gt   lt  h1 gt       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

User · Accepted Answer

You re missing the option    lt h1 gt     lt a href  http   stackoverflow com  gt       lt img src  logo png  alt  Stack Overflow    gt     lt  a gt   lt  h1 gt    title in href and img to h1 is very  very important

User · Answer

I don t know but this is the format have used      lt h1 gt       lt span id  site-logo  title  xxx  href     target   self  gt           lt img src  http   www xxx com images xxx png  alt  xxx  width  xxx  height  xxx    gt           lt a style  display none  gt               lt strong gt xxx lt  strong gt           lt  a gt       lt  span gt   lt  h1 gt    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

User · Answer

If accessibility reasons is important then use the first variant  when customer want to see image without styles    lt div id  logo  gt       lt a href    gt           lt img src  logo png  alt  Stack Overflow    gt       lt  a gt   lt  div gt    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   lt h1 id  logo  gt     lt a href    gt  lt span gt Stack Overflow lt  span gt  lt  a gt   lt  h1 gt       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

User · Answer

lt h1 gt     lt a href  http   stackoverflow com  gt    Stack Overflow lt img src  logo png  alt  Stack Overflow    gt     lt  a gt   lt  h1 gt    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

User · Answer

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    lt h1 class  logo  gt       lt a tabindex  2  accesskey  1  href     gt           lt img src   2008 site images logo-w3c-mobile-lg  width  90  height  53  alt  W3C  gt       lt  a gt       lt span class  alt-logo  gt W3C lt  span gt   lt  h1 gt    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

User · Answer

lt h1 gt  lt a href     title  Some title  gt Name lt  a gt  lt  h1 gt    h1 a    width   logo width     height   logo height     display block    text-indent -9999px    background url   logo url

User · Answer

You missed title in  lt a gt  element     lt h1 id  logo  gt     lt a href     title       gt  lt span gt Stack Overflow lt  span gt  lt  a gt   lt  h1 gt    I suggest to put title in  lt a gt  element because client would want to know what is the meaning of that image  Because you have set text-indent for the test of  lt h1 gt  so  that front end user could get information of main logo while they hover on logo

User · Answer

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

User · Answer

For SEO reason    lt div itemscope itemtype  https   schema org Organization  gt    lt p id  logo  gt  lt a href     gt  lt span itemprop  Brand  gt Your business lt  span gt   lt span class  icon fa-stg  gt  lt  span gt  -  lt span itemprop  makesOffer  gt sell staff lt  span gt  lt  a gt  lt  p gt    lt  div gt      lt h1 gt Your awesome title lt  h1 gt

User · Answer

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

User · Answer

After reading through the above solutions  I used a CSS Grid solution    Create a div containing the h1 text and the image  Position the two items in the same cell and make them both relatively positioned  Use the old zeldman com technique to hide the text using text-indent  white-space  and overflow properties     lt div class  title-stack  gt       lt h1 class  title-stack  title  gt StackOverflow lt  h1 gt       lt a href     class  title-stack  logo  gt           lt img src   images stack-overflow png  alt  Stack Overflow  gt       lt  a gt   lt  div gt     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

User · Answer

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

User · Answer

lt div class  logo  gt       lt h1 gt  lt a href  index html  gt  lt span gt Insert Website Name lt  span gt  lt  a gt  lt  h1 gt       lt p gt Insert Slogan Here lt  p gt   lt  div gt     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

User · Answer

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    lt div id  header  gt       lt a href  http   example com   gt  lt img src  images logo png  id  site-logo  alt  MyCorp    gt  lt  a gt   lt  div gt    lt  -- or alternatively  with css in a stylesheet ofc-- gt   lt div id  header  gt       lt div id  logo  style  background  url  logo png    display  block           float  left  width  100px  height  50px   gt           lt a href     style  display  block  height  50px  width  100px   gt               lt span style  visibility  hidden   gt Homepage lt  span gt           lt  a gt       lt  div gt       lt  -- with css in a stylesheet  -- gt       lt div id  logo  gt  lt a href     gt  lt span gt Homepage lt  span gt  lt  a gt  lt  div gt   lt  div gt     lt div id  body  gt       lt h1 gt About Us lt  h1 gt       lt p gt MyCorp has been dealing in narcotics for over nine-thousand years    lt  p gt   lt  div gt    Of course this depends on whether your design uses page titles but this is my stance on this issue

User · Answer

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  lt span gt  to the full width and height of the  lt a gt  and using z-index to place it above the link text in the stacking order   The price is one empty  lt span gt   but I m willing to have it there for something as important as an  lt h1 gt       lt h1 id  logo  gt     lt a href    gt Stack Overflow lt span gt  lt  span gt  lt  a gt   lt  h1 gt     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  lt span gt  on top of  lt a gt  text

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

Examples related to css

Examples related to xhtml

Examples related to image

Examples related to seo