There is a school of thought that having an inline linked image (an image loaded via the img tag, rather than via css background attribute) at or near the top of your document markup, which has an alt tag containing your site’s primary keyword phrase, gives your site a boost in terms of SEO.
I’ve seen the apparent benefits of this technique first hand and believe it definitely has merit.
However, since I’m keen on using CSS and background images for every image except those inside content, I have no images in my theme to apply an alt tag to.
Is there an SEO friendly workaround when using CSS exclusively for image display?
Curious what others thoughts are on this.
PS: Using css has its own inherit SEO benefits such as streamlined, semantic markup that does not dilute the actual “content” on the page that the search engine really want to index. I get that and am a huge believer, and advocate of CSS in this regard. Just looking for some ideas I’m not aware of to have the best of both worlds.
SEO has its place, but it steps over the line (IMHO) which it tries to influence design. Use background images when they are just for decoration; use <img> when the image is a part of the content. The on-page content should be all you need for SEO purposes. Don’t try to over-think SEO.
Basically, the normal text has position:relative and has an element like a span inside it set to position: absolute, and the span holds a background image that sits over the text. Works well as long as the image is not transparent.
The proper name for the “header replacement” links above is gilder-levin image replacement, it actually predates their use of it, and it’s not JUST for headers… and I suggest using it whenever an image is just a presentational affectation applied to some text… that way you have MEANINGFUL text being treated as content text instead of an image description; semantically there’s a huge difference between a textnode and a IMG tag.
… as to the SEOtards, if they’re telling you to do anything that isn’t semantic markup with proper heading orders and separation of your screen presentation from your HTML content, they’re probably packing you so full of sand you could change your name to Sahara, or are pulling more “let’s game the search engine” bull that will get your site slapped down sooner or later.
Again, semantic markup of content of value should be all the on-site SEO you need. Anything more than that from a HTML perspective is 100% grade A manure.
Oh yeah. I don’t claim to of created anything (aside from a few uniques). I just don’t bother to memorize all the founders and or the exact date of it’s first official usage.
Keyword stuffing alt tags was effective 10 years ago, but Google is smarter now than it was then. Assuming that you’ve already used your keywords elsewhere on the page in the text, in the headings, in the title and in inbound link text, you’re unlikely to get any significant benefit from including it as alt text.
If the images genuinely need alt text then yes, use it. Alternatively, use an image replacement technique, which is likely to be at least as effective in terms of SEO. But if the image is purely decorative then adding spurious alt text is not the right way to go.
As a rule of thumb if the image is important to the content then it should be in the html but if its decoration only then it should be in the CSS. However. sometimes its easier and neater to manage images in the CSS and that’s where image replacement is useful.
The technique that I’ve used since about 2003 is the one that Ralph linked to and actually pre-dates the Gilder/Levin article by some considerable years except that I didn’t give a name to it and of course many others were doing the same thing also. It’s good to give names to things as a point of reference but ownership should not be implied. Most things have been done by someone else already if you look hard enough
The technique is good for all scenarios of images /off/on css off/on of as already mentioned and the benefits are obvious.
The only downside of the technique is that it doesn’t work for transparent images although if you add an extra element you can place another background image between the replaced image and the text to keep it hidden although I think this is a step too far.
I am also of the opinion that if you do code specifically to please a search engine then maybe you have already lost
I think there are certain nuanced balances when discussions of “writing for search engines” vs “writing for humans” are delved into. There is a visceral reaction to discuss the extremes.
However, when we reduce the discussion to the extremes (“keyword stuffing” and “writing for the search engines”), it blurs the very real realities that we all face when trying to get our content discovered by search engines, so that they will eventually reach the audience that we intend to influence: the people.
@Paul, good correction. I say “alt tag” when I mean “alt attribute” way too much
If you’re putting alt text in there only because you think it will help your position in the search results (ie, it is not needed from an accessibility/content point of view), then you’re keyword stuffing. You might be only doing it at a very low level, but even if it’s just one or two words, that’s still stuffing.
If you’re putting an image in there as a background-image, then either it should be purely decorative (in which case it should not have any alt text) or it should be using an image replacement technique to replace actual text content (in which case there is no need for alt text because it’s already there in plain, and so is likely to have more impact than alt text). If you find that you’re needing to use alt text on a background-image, that’s usually a clue that you should have used an <img> in the first place.
@StevieD - I think I’m going to just agree to disagree with your characterization of my question and the intent I have for asking it and leave it at that
I think the thread has served its purpose of discussion of the original topic and can be closed before it devolves into a semantical discussion of spam vs legitimate SEO.
