6 replies
  • WEB DESIGN
  • |
Hi there,

I'm starting optimisation on a newly built website, the majority of what would be the title of the content (what I'd optimise as a h1) are images - now I could spend some time making a text version of this image and make it as identicle to it as possible but I was wondering if using a h1 span around the image and having the span hidding is very bad for search engines or if it will work just as well as re-creating the image as text.

Thanks,

Liam
#h1 tag #image #image h1
  • Profile picture of the author DavidO
    You can put <h1> tags around the image code and optimize both the image name and alt tag.

    If you're using graphical text the alt tag should be identical to the text displayed or else it could be considered spamming. If it's just an image your description should be accurate without keyword stuffing, for the same reason.

    Also, you mentioned multiple images but you should really use only one h1 tag, 2 at most but never more.
    {{ DiscussionBoard.errors[2192688].message }}
  • Profile picture of the author JonathanKrantz
    I have read numerous times that you may do this if and only if the text on the image is the same as the actual text you want to write.

    Google search engine supposedly does not check this automatically but may do sometime manually.

    In your css do this:
    Code:
    h1 {
      background-image:url('...');
      text-indent:-9999em;
    }
    and this in the markup:

    Code:
    <h1>Some text</h1>
    I have been doing this on my sites and have yet to see some bad consequences.
    {{ DiscussionBoard.errors[2192691].message }}
    • Profile picture of the author khay
      Originally Posted by JonathanKrantz View Post

      I have read numerous times that you may do this if and only if the text on the image is the same as the actual text you want to write.

      Google search engine supposedly does not check this automatically but may do sometime manually.

      In your css do this:
      Code:
      h1 {
        background-image:url('...');
        text-indent:-9999em;
      }
      and this in the markup:

      Code:
      <h1>Some text</h1>
      I have been doing this on my sites and have yet to see some bad consequences.
      This is the correct way to do it. HTML markup shows text (for the spiders) and the CSS displays an image (for the users).

      You may also want to define the width/height of the H1 in the CSS to match that of the image.
      {{ DiscussionBoard.errors[2193424].message }}
      • Profile picture of the author LP_User
        There are multiple ways to do this, but all have some drawbacks (including the one above!).

        Although certainly the one above is the best option available.
        {{ DiscussionBoard.errors[2199410].message }}
  • Profile picture of the author zippynewyork
    It really depends on what you're going for. Optimizing a site for search and to make it pleasant for a visitor at the same can be challenging.

    As far as images or text, where at all possible, easily spider read text should always be an option over images. Even if you have to put the work in to make it look nice, always use nice keyword rich text instead of images. Especially the H1 tags!

    The point of SEO
    {{ DiscussionBoard.errors[2193022].message }}
  • Profile picture of the author LiamMcArthur
    thanks for the answers!, and DavidO - I meant multiple images (as in multiple page images throughout the site, 1 image per page) I should have explained that sorry! I think I'll create the image in textual format and try and make it look exactly like it (just to be safe) because I keep hearing that it's a bad way to do it, but than that it's an okay way to do it somewhere else.
    Signature
    Liam McArthur
    Web Developer | Eden Mobility
    {{ DiscussionBoard.errors[2193323].message }}

Trending Topics