Text and img headings - Indexing Issue

Marketing
1

Hi all

Simple question, do the search engine’s treat:

<h2>Sub Heading</h2>

the same as

<h2><img src=“sub-heading.gif”><span>Sub Heading</span></h2>

h2 span { left:-99999px; overflow:hidden; position:absolute; }

I’m hiding the text to display a graphic but will Google etc still index the span text title?

Thanks :cool:

2

Nothing in SEO is ever simple! :lol:

I would think you’ll be okay by hiding the text like that. Google will of course be able to read it. You might want to place the <span> before the <img>.

That all being said, why don’t you just add an alt tag to the image?

3

Nothing in SEO is ever simple!
:slight_smile:

Yes I’ll be adding the alt tag aswell, more weight for seo text, not sure if it matters if I put the <span> first or last, I’ve seen a few other sites using this technique who always placed the <span> last. I’m mainly using this to get a better display of the titles and trying to stay away from using sFIR to force the font style, I think it’s also a popular accessibility technique that other developers use??

Also with links:
<h2><a href=“link.html”><img src=“sub-heading.gif”><span>Sub Heading</span></a></h2>
or
<h2 id=“img_display”><a href=“link.html”><span>Sub Heading</span></a></h2>

Cheers :cool:

4

I think you are starting to complicate things for yourself.

If you add an alternate attribute for your image tag, then that text gets added to the containing tag/link e.g.

<h2><a href="link.html"><img src="image" alt="attribute" /><span>Sub Heading</span></a><h2>

This looks to search engines like:

<h2><a>attributeSub Heading</a><h2>

See how the alternate text and span text get concatenated for the link’s anchor text? Not ideal.

You need to KISS (Keep It Simple Stupid):

<h2><a href=""><img src="" alt="Heading/Anchor Text Goes Here" /></a></h2>

More reading:

5

yes right and its very difficult and one type of testing :lol:

6

Thanks guys

So that brings me to the second snippet from above, more appropriate now?:

<h2 id="img_display"><a href="link.html" title="Sub Heading"><span>Sub Heading</span></a></h2>

#img_display { background: url(some_img.gif) no-repeat 0 0 }
h2 span { left:-99999px; overflow:hidden; position:absolute; }

Thanks for the links seriocomic, everything’s their seems like it comes down to personal preference… good read :cool:

7

Google gets wary about text that is positioned off the page - just in case it’s being used for search engine spamming - in the same way that it is wary about text that has the same foreground and background colour.

However, Google is also smart enough to know that positioning text in this way is a legitimate design strategy, and to figure out when it is being done for good reasons and when it is being done for bad. As long as the words you use in the sub-heading do relate to the content of the page, Google should realise that it is a genuine heading, and index it in exactly the same way.

A couple of other tips for using that kind of image replacement technique:

  • All images must have an alt attribute. In this case, as you are repeating the content of the image, you can leave it empty, ie alt=""
  • It is good practice to add a title="Sub-heading" attribute to the image, particularly if you have used a font that is less clear, so that people can hover over the image and get a tooltip of what it says