SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Replacing h1 tag with logo

    Forgive me, I really don't know the best forum to post this question in.

    screen shot is attached.

    A site I manage is looking to replace <h1>Company Name</h1> with an image logo. I know there has been much debate whether a logo is content or a background image of an h1. But the last article I read made a good case that logos are content, so I won't be using an image replacement technique.

    I'd like to keep the H1 on the page for SEO purposes, the site currently ranks in the top 10 on google.

    So where would you move the h1 to? My brain found this to be a dilemma because <h1>Company Name</h1> no longer fits the page design..

    I thought about:
    - shoving it above the address
    - putting in the footer ( just to have one on the page )
    - make the text the same color as the header background, then position the logo on top of it
    - or deleting it entirely, but wouldn't that only hurt my rankings?

    thanks for looking
    Attached Images Attached Images

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    30
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Have you considered using the h1 for what the page is actually about and also adding a company logo?

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    As mentioned in the previous post, in HTML4 and earlier, the H1 tag ( of which there should be only one) Should be reserved for a descriptive title of the subject that particular HTML document is about. On occasion, there may be overlap ( such as in a landing page or what not) but thats about it.

    The best is to create a class to deal with this overlap, so then you can output the logo go as
    Code:
    <h1 class="logo">My Company and what we do</h1>
    on the home page and
    Code:
    <div class="logo">My Company and what we do</div>
    everywhere else.

    you can then use an image replacement technique to achieve what you were wanting.
    Code:
    .logo { position:relative; 
    height:50px;
    width:50px;
    overflow:hidden;}
    .logo:after{
    content:url(logo.jpg);
    position:absolute;
    top:0;
    left:0;
    }
    hope that helps

  4. #4
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,421
    Mentioned
    273 Post(s)
    Tagged
    5 Thread(s)
    The <h1> will only help your SEO efforts if it's relevant. i.e. a heading which tells you what the following text is about. So putting an <h1> heading with the company name in the footer "just to have it there" is pointless.

    Use <h1> as it's intended, for the most important heading on the page. Put the company name where it makes sense. If you're using the logo to display the company name, then surely the alt text for the logo is the place to put it.

  5. #5
    SitePoint Zealot
    Join Date
    Aug 2010
    Posts
    197
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the help everyone. Good tips for this edit and the redesign!

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It should be perfectly fine to use an image's alt text as the content text of a heading.

    <h1><img src="logo" alt="Acme Garage Homepage"></h1> (on the home page, because on inner pages usually other text is more appropriate as the h1 and this should fall back to a div or a p like in the example above)

    The alt text is real content and if it's inside a heading tag, then it's now a heading as well.

    The only reason I prefer the image-replacement method mentioned above is because browsers suck at showing alt text if the image, for whatever reason, doesn't load. Users with screen readers or without CSS, and search spiders, they'll all still get that text, but anyone sighted using any (non-Gecko) graphical browser may not get any alt text if the image doesn't appear.

    Gecko is the only engine to get it right.

    Opera shows the text but lets the unloaded image dimensions cut the text off. Or, that was Opera under Presto. Under Blink it probably does what Blink does: not show any text unless the image dimensions were already big enough to show ALL the text. Bleh.

    In Gecko (Firefox/Iceweasel/SeaMonkey/otherWeirdAnimals) images are inline elements and if the file they call to replace them with never comes, it remains an inline element and has text inside. The text flows like any other inline element and is always visible.

    </rant>

  7. #7
    SitePoint Member mamahadija's Avatar
    Join Date
    Apr 2014
    Location
    South Africa
    Posts
    13
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    never use h1 for logo
    h1 if you are seo conscious should have the keyword of the page = main header for your page should be in h1
    there should be one h1 for each page
    use a img attribute and dont forget title and alt tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •