About the author

Related Articles

10 Comments

  1. 1
    user3633421@email.null'

    user3633421

    <h1 style="font-size: 0px; margin: 0px;">Something goes here</h1>
    

    Works like a charm…. 😉

    Reply
  2. 2
    Motaz

    Motaz Homsi

    A full article in this matter is explained here https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/
    So , when i work i use this code to support screen reader as well as hide some h1’s and use pictures instead of it like (logo)

    .offscreen{
      position: absolute;
      clip: rect(1px 1px 1px 1px); /* for Internet Explorer */
      clip: rect(1px, 1px, 1px, 1px);
      padding: 0;
      border: 0;
      height: 1px;
      width: 1px;
      overflow: hidden;
    }
    

    to find more follow the link

    Reply
  3. 3
    hpique@email.null'

    hpique

    You should be fine with visibility: hidden.

    That said, if your image is part of the content (and I would dare to say that a company logo is content, not presentation), and you care about accessible html, you should consider changing your code to include the image as a img element with title and alternate text, instead of a css background-image.

    Additionally, if you hope to attract search engines to the keywords inside the <h1> element, you might want to include those words more than once in the page. The page title is a much more relevant place than the h1 element, for example.

    Reply
  4. 4
    talkingD0G@email.null'

    talkingD0G

    You’re not going to get good SEO results if you, first hide the h1, and second use generic phrases inside the h1.

    Don’t just use the h1 for sizing, you can use classes to style.

    H1 tags should contain keyword rich information such as:

    Automotive Repair

    Automotive repair being the keyword that relates to the particular page I’m theoretically working on.

    Hope that makes sense.

    Reply
  5. 5
    Chikiro@email.null'

    Chikiro

    Resizing the block would work:

    h1 {
        overflow: hidden;
        width: 1px;
        height: 1px;
    }
    
    Reply
  6. 6
    Ms2ger@email.null'

    Ms2ger

    The easiest, foolproof, best for SEO solution would be

    <h1><img src=logo.png alt="Something.com | The best something ever"></h1>
    
    Reply
  7. 7
    Guffa@email.null'

    Guffa

    Does your web site consist of just one single page?

    Otherwise you should put the headline of each page in the h1 tag, not the tagline of the site. Repeating the same headline on every page would make it pretty much useless.

    Reply
  8. 8
    me_and@email.null'

    me_and

    The “correct” way to do this is to have the text in the title bar or in your page’s meta text.

    Reply
  9. 9
    cdutson@email.null'

    cdutson

    set the image as the background of your h1 (set the width/height so it fits) then set your text-indent to something crazy like -9999px. That way when css is disabled (such as being crawled) the bot will see the text in the header instead of the background.

    example:

    CSS

    #myHeader {
    width:200px;
    height:50px;
    background: url('lcoation/of/the/image.jpg') top left no-repeat;
    text-indent:-9999px;
    }
    

    HTML

    <body>
    ...
    <h1 id='myHeader'>HELLO WORLD</h1>
    ...
    </body>
    
    Reply
  10. 10
    William

    William Hand

    I think that visibility: hidden; would work fine. Have you tried it yet?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © 2017 SolutionMmyself.com