Grow your CSS skills. Land your dream job.

CSS Images replacement and SEO

  • .V1
    # July 8, 2008 at 4:31 pm

    Yes! Its time for this topic ^_^

    I have been working on a new blog for my website, yes… Im going to blog o.o beside that weird fact, i have run in to a rather had issue, I want the blog to run as fast as possible so I’m pulling all optimization techniques i know out of the closet, from mod_deflate to image sprites and element reducing. Every KB i can save will be saved, and reused.

    Nice, but whats the problem… In my design i have a tag list in each article, instead of a text url this is a icon.
    (looks really hot) Would google punish me for that, as im not "showing" the content as it is. I transform it in to the product that it stands for.

    For example, i have the tag Adobe Dreamweaver. I will image replace that with a DW application icon.
    Im hiding it using by giving a <li> a height attribute and a overflow:hidden. Than i give the tag a padding-top of 20px so it goes hidden because of the overflow hidden. Than by using the background image position i show the right icon.
    (Great technique if u ask me ^_^)

    So, will google punish me for using such technique? Or not..

    (see http://blog.3rd-Eden.com (firefox / safari are pixel perfect, no clue about ie, because im to lazy to test it atm) for the current progress / design in questioning :P
    (ignore the grid, and markup / borders ;) its in development ^^)

    # July 8, 2008 at 5:46 pm

    I like that, very sneaky, like ninja.

    At the moment I don’t think it will have too much of a detrimental effect and will degrade pretty well too. I don’t see why it would be too different to using a text indent of -9999px (I am amazed this is still allowed). I don’t think you will get negatively marked for it, like you do with same color / background color.

    It is best to ask on an SEO forum as the goal posts are always moving and they would know better.

    Having said all this I think it is better to stick with text indent, at least we know the bots are cool with that (for now).

    # July 8, 2008 at 5:49 pm

    I just noticed:

    "may the source be with you" LOL :lol:

    I’m such a geek haha

    .V1
    # July 9, 2008 at 3:01 am

    The downside with indent is, that u cant use it with <a href> because it moves the click target area to, thats why im using my own little technique with padding and overflow hidden.

    And yeah,

    we are all geeks :D!

    Posted it on google webmaster forums :)
    http://groups.google.com/group/Google_W … e7b803446#

    we will see what the geeks have to say :p

    # July 9, 2008 at 5:50 am

    If I’m not entirely mistaken, Google, like every other crawler, crawls through the markup, not the design. GoogleBot will see:

    …while visitors will see the icons. Also, I do hope you’ll get some :hover-feedback on the icons.

    Better yet, here’s Google’s own words about PageRank and what they (GoogleBot) searches for:

    Hypertext-Matching Analysis: Our search engine also analyzes page content. However, instead of simply scanning for page-based text (which can be manipulated by site publishers through meta-tags), our technology analyzes the full content of a page and factors in fonts, subdivisions and the precise location of each word. We also analyze the content of neighboring web pages to ensure the results returned are the most relevant to a user’s query.
    .V1
    # July 9, 2008 at 6:03 am
    "koewnet" wrote:
    If I’m not entirely mistaken, Google, like every other crawler, crawls through the markup, not the design. GoogleBot will see:

    …while visitors will see the icons. Also, I do hope you’ll get some :hover-feedback on the icons.

    Better yet, here’s Google’s own words about PageRank and what they (GoogleBot) searches for:

    Hypertext-Matching Analysis: Our search engine also analyzes page content. However, instead of simply scanning for page-based text (which can be manipulated by site publishers through meta-tags), our technology analyzes the full content of a page and factors in fonts, subdivisions and the precise location of each word. We also analyze the content of neighboring web pages to ensure the results returned are the most relevant to a user’s query.

    I’m implementing tooltips that get display the innerHTML of the a tags when people hover the icons.

    a better ripoff version of this example : http://3rd-eden.com/Spry-it.com/examples/alt%20tooltip/

    my main concern is that i don’t blacklisted if i use such technique.. Because this is a little step further than normal image text replacement. That little piece of google is still not an answer it just confuses more..

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".