SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background images have no "alt" tags. SEO neutral?

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    This is the best seo way to do what you want http://www.visibilityinherit.com/cod...ment-demo1.php

  4. #4
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    This is the best seo way to do what you want { visibility: inherit; } Image Replacement Technique #1
    Interesting. Can you offer a bit of commentary about what this demo represents?

    I was thinking that it was a simple demo to show an image alt tag somehow magically appended to a css background image :-)

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,324
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    That's a good link, Eric. I didn't actually grasp that this was the point of the question. Sorry Scott!

    This is the most popular "image replacement" technique. Paul O'Brien talks about it here:

    Header replacement

    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.

    Just look at the source code to see how it works.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Additionally, it's the only method that works in all conditions... CSS On/Images On, CSS Off/Images On, CSS On, Images Off, CSS off/Images Off.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  9. #9
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    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.
    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.

  10. #10
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Keyword stuffing alt tags was effective 10 years ago, but Google is smarter now than it was then.
    Hi Stevie D, while I appreciate the reply, let's keep this discussion on topic. This is not about keyword stuffing.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    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.
    There is no alt tag - it's an alt attribute

    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

  12. #12
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good points all. Thanks for the discussion.

    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 ;-)

  13. #13
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Scott Blanchard View Post
    Hi Stevie D, while I appreciate the reply, let's keep this discussion on topic. This is not about keyword stuffing.
    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.

  14. #14
    SitePoint Addict Scott Blanchard's Avatar
    Join Date
    Sep 2010
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @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.


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
  •