4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Using an image as <h1>

by DavidO
3 replies
  • WEB DESIGN
    • |
This is a further question to an earlier thread of mine.

I have a couple questions about using an image as my h1:

<h1><img style="width: 500px; height: 150px;"
alt="Lose Weight While Eating As Much As You Want"
src="images/lose_weight_fast.jpg" /></h1>

1. Does using the same/similar keywords in both the alt tag and image name give extra h1 juice?

2. Or is it just diluted by all the extra words required in an image tag? In that case I can cut the number of words by doing this:

<h1><img alt="Lose Weight While Eating As Much As You Want" src="images/blood_pressure_headline.png" /></h1>

This displays just fine.

3. Would either of these options be considering keyword-stuffing and therefore penalized?

I have a design that requires the use of graphic text headlines and so I'd appreciate any clarifications on this issue.
#&lth1&gt #<h1> #image
  • Profile picture of the author wayfarer
    The alt attribute (not alt tag) is required by the W3C, and is the only good way image-disabled crawlers (like search-spiders) will know what your content is. As long as the alt text describes what is in the image, there should be no problem.

    The image name is only read by seach spiders if the alt attribute is missing, so it doesn't matter. Because of this, both example #1 and example #2 are equivalent, since the alt attributes are the same. You won't be penalized. You also won't get any extra "juice" out of either of them.
    Signature
    I build web things, server things. I help build the startup Veenome. | Remote Programming Jobs
    {{ DiscussionBoard.errors[601793].message }}
    • Profile picture of the author leechesofkarma
      Define your H1 in your style file or in the head of your document. All styles should be kept together and in your head when possible. This means not trying to add the style onto individual objects in the body.

      So in my head I would define my h1 tag something like this:

      h1 {background: url(yourimage.jpg) top left no-repeat; text-indent: -9999px;}

      Here you are placing your image on the h1 and also using a text indent so that you can still use your keyword in your h1 but by using the -9999 it will not be shown or visible on the page unless you disable the styles.

      So in your body you just do this:
      <h1>Your keyword here</h1> and your image will be shown in
      place of the keyword but you will retain all of the h1 seo benefits for your keyword.

      Hope this helps.
      Jon
      {{ DiscussionBoard.errors[603634].message }}
  • Profile picture of the author kdavies
    As been said you should avoid inline css as much as possible. It makes your code more readable and maintable.
    Signature
    About
    Special Offers
    Portfolio
    Testimonials
    {{ DiscussionBoard.errors[607126].message }}

Trending Topics