<div id="what_is_seomoz">
<h1><span>What is SEOmoz?</span></h1>
<p>
SEOmoz is a Seattle based search engine optimization company.
We provide SEO / Web Marketing ...
</p></div>
The result in the actual website is that very pretty image of a flower with a gradient background. This is done by simply adding a background image to the div tag and hiding what's inside the span:
#what_is_seomoz h1 { background: url(/some/background/image.gif) no-repeat; }
#what_is_seomoz h1 span { display: none };
The result is cleaner, more semantically correct code. My question is this: Do search engines treat sites with CSS image replacements any differently?
This technique could easily be abused to stuff a bunch of keywords all over the site while displaying something completely different to the user. I've heard that the major SEs will often look for ridiculously high margin settings to try and detect this kind of thing (setting: margin: -999px for example, would render text off the page). Will they soon start penalizing sites that use display: none inside of nested elements?
On the flip-side, this technique should result in pages that are well optimized for spiders. It affords you the opportunity to use html tags with semantic meaning and therefore spiders should be able to break the page down more easily (and decide what's-what on the page).
Approaching this topic from an accessibility point of view, this CSS Image Replacements method has much in common with using hidden text as a method of providing screen readers an opportunity to skip navigation links.
Example is found at www.firstgov.gov , near the top of source is
A ... class="invisiblelink" ... Skip to Main Content /A A ... class="invisiblelink" ... Skip to Government Search /A
A blind persons page reader would read this text and this would help them navigate around the site. This is complying with the legal requirements of section 508 (and the UK's Disability Discrimination Act) in which public web pages must accessible to people with disabilities.
However techniques like this are discouraged by some search engine employees. Matt Cutts recommended February 2006 -
"My advice is to make sure that all of the hidden text is gone from the site before requesting reinclusion [to Google] " (www.mattcutts.com/blog/seo-advice-a-full-clean-up/)
It is unclear as to why Matt should advise to remove text that is clearly helps the Blind and their screen readers. If implemented his recommendation could mean the site no longer complies with the Disability Discrimination Act.
When Matt Cutts is advising sites to remove navigation aids the Blind could question whether Google have forgotten their corporate motto of "Don't be evil."
I see you have stopped using this method on the home page, however you still have "seomoz.org" hidden behind the logo. There doesn't appear to be any H1 tags on the home page at all. Did you decide this was a little too grey hat?
I have a client which I was considering using this for. For example it's politically correct in their industry to use the term "vehicle" instead of "car". However far more people use "car" in their searches than "vehicle" therefore using this method I could place car in an <H1> tag on the page without it being visible.
Any advice? I'm assuming it should be avoided but just wanted to see what others had to say.
This is definitely a gray area that still there's not much certainty about image replacement rather than a widepsread phobia of being banned. It seems very complicated for an algorithm to figure out what is keyword spamming and what is not, when it comes to CSS. My feeling is that search engine algorithms would not jeopardise anyone's site, unless 100% they are doing some unethical. Check out our SEO Brighton blog entries for more on this topic.
To me, that's hidden text. I know that you are legit, but where do search engines draw the line? How do you know it's 'safe' to do that? :)
see https://www.threadwatch.org/node/4313#comment-...about just this subject
Thanks graywolf
From matt cutts:
Just to note most of the navigation links are #anchors to sections within the page.
--hidden-- href="#content" Skip to Main Content href="#govsearch" Skip to Government Search .... 20 odd more --/hidden--
A name="content" /A P Content here
Sighted people would not find these particularly useful and would probably find them confusing.
Blind People find these jumps useful as it permits them to skip repetitive snippets and other common page elements like navigation links. Basically this hidden text helps the blind easily access the meat of the page.
I'm running into a lot clients that have websites that use Drupal with the Cufon font replacement module. It totally scares me. Because they are actually replacing textual content on the page with an image. You can't select this text with a cursor, but you can download the image. However, in the source code you can see the text.
Does anyone have any opinions on this? My general rule of thumb is "better safe than sorry" and tell em to stick to regular CSS fonts. But that's never good enough for designers...
I believe cufon is javascript and is rendered after the HTML is loaded. If Google is indexing the page after all javascript is executed then it could be a problem. I wouldn't be too concerned. This entire topic is kind of funny but a concern for a lot of people.
I have always looked at it as a matter of if you turned off all the css on the site, would the user still have the same text still appear. It definitely makes it easier to design for different devices.
Doing a negative text indent on an H1 and replacing it with an image is the same thing as assigned alt tags to an image. Just like someone mentioned above, as long as it's exact text or describes exactly what is represented in the image or better yet, the image represents the text. I've always thought that using the img tag is only for inline images anyways. That way you can change the entire design without having to touch the HTML or replace any image files with new images.
That's definitely a grey area, but one could ask why those links can't be visible. They're not particularly useful to sighted people, but it's not as if their visibility would harm the page.
And of course, if the US government does it and gets away with it, that doesn't mean the rest of us will be treated the same way.
I'd be concerned about something like this too. I think of image replacement as a way of using an image of text for something like a heading. Hidden behind the image would be that same text in a heading tag.
But what you're describing is hiding a considerable amount of text about your company behind your logo. The logo itself doesn't present all that information, so the text really doesn't belong there.
A client of mine has an image of their company name and slogan at the top of every page. Behind that is (brackets removed so the code would display)
div id="header" div id="title" !--Image Replacement. Do not edit. -- h2 Company Name /h2 h2 Company Slogan /h2 /div /div
In the CSS, we have #header #title { background: url(/images/header-title.jpg); width: 621px; height: 65px; float: left; }
#header #title h1, #header #title h2 { display: none; }
In my example above I forgot to mention that what's contained in the <p> tag (SEOmoz is a seattle based..etc) shows up on the front-end. I'm not stuffing the company bio in there and not showing it.
The text we hide is almost always word-for-word with what the replacement image shows.
I see... so it's just the contents of the span that's not displayed. I probably should have looked at your CSS before warning you of the dangers you faced.
I suddenly feel like Miss Emily Litella.
A little too scared to be part of the bathwater. Seems as ripe for abuse as "keyword stuffing" was in 1998.
Off topic: My question is why are using the span tags inside of the h1(and all other) tags? That's just extra (bloated) code that's not needed.
On topic: I think it's fine to use the exact text that's displayed on the image, anything else is spam in my opinion.
That's how css image replacment is done. You apply a background image to the parent element and you hide the child. (at least that's how I've always read how to do it)
I can see why you did it and I'm going to feel like an idiot if I'm wrong, but here's how I would do it.
#what_is_seomoz h1 { background: url(/some/background/image.gif) no-repeat; text-indent: -9000em; }
That makes for less code on both the webpage and the style sheet.
I've personally always thought display: none; is worse than a negative text-indent but I could be wrong, which I often am.
I did some googling and apparently there are quite a few ways of doing it. I guess it just boils down to preference.
If the div id is "what_is_seomoz" then why would you need to write, again, What is SEOmoz between the span tags? Could you not just put ? If the purpose of putting the text is clearly SEO, but the text is not being shown, wouldn't that be inappropriate? Then again, if Google does not penalize for it because it's not over-the-top, does that make it ok for SEO?
I think you're misunderstanding what I'm doing here.
I named the div "what_is_seomoz" for semantic reasons, it has nothing to do with SEO. When viewing that div through a web browser the user sees a big graphic that says "What is SEOmoz." If I were to just use an <img> tag to achieve this it wouldn't be considered semantic markup. In other words, I would be using an image tag to display text - this is wrong. Instead, I keep the text inside the markup but hide it from being displayed using CSS. There's nothing wrong about doing it this way and unless you spam a bunch of keywords in there you won't be penalized.
Okay.. thanks for the clarification.
Really great post I rated it for future viewers to see. I recommend it to my friends and co-workers so they can learn from your articles from now on.
- Casey Removed Link
You are nasty, very nasty, more then me. :D
Just wanted to point out that google does it for all of theri SERP pages...
The code that they use:
<style>#navbar div,#logo span{background:url(/images/nav_logo.png) no-repeat;overflow:hidden;height:26px}#navbar .nr{background-position:-60px 0;width:16px}#navbar #np{width:44px}#navbar #nf{background-position:-26px 0;width:18px}#navbar #nc{background-position:-44px 0;width:16px}#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}#navbar #nl{background-position:-76px 0;width:46px}#logo{display:block;width:150px;height:52px;position:relative;overflow:hidden;margin:15px 0 12px}#logo span{background-position:0 -26px;position:absolute;top:0;left:0;width:100%;height:100%}body,td,div,.p,a{font-family:arial,sans-serif}.g{margin:1em 0}#sd{font-size:113%;font-weight:bold}</style>
<a id=logo href="https://www.google.com/webhp?hl=en" title="Go to Google Home">Google<span></span></a>
If you think about their guidelines, anything that is visible to the user and requires an alternative should be made available. In the case of images and flash for instance - especially when we are talking about navigation.
My 2 Cents...
Please check out my blog and let me know what you think. Would love some non-spam interaction! ;) -> <a href="https://knowseo.blogspot.com">Know SEO Blog</a>
Just wanted to point out that google does it for all of theri SERP pages...
The code that they use:
<style>#np,#nn,.nr,#logo span,.ch{cursor:pointer;cursor:hand}.tas{padding:3px 3px 3px 5px}.taf{padding:3px 3px 6px 5px}.tam{padding:6px 3px 6px 5px}.tal{padding:6px 3px 3px 5px}.sl,.r{font-weight:normal;margin:0;display:inline}.sl{font-size:84%}.r{font-size:1em}.e{margin:.75em 0}.mblink:visited{color:#00c}.sm{display:block;margin:0;margin-left:40px}#navbar div,#logo span{background:url(/images/nav_logo.png) no-repeat;overflow:hidden;height:26px}#navbar .nr{background-position:-60px 0;width:16px}#navbar #np{width:44px}#navbar #nf{background-position:-26px 0;width:18px}#navbar #nc{background-position:-44px 0;width:16px}#navbar #nn{background-position:-76px 0;width:66px;margin-right:34px}#navbar #nl{background-position:-76px 0;width:46px}#logo{display:block;width:150px;height:52px;position:relative;overflow:hidden;margin:15px 0 12px}#logo span{background-position:0 -26px;position:absolute;top:0;left:0;width:100%;height:100%}body,td,div,.p,a{font-family:arial,sans-serif}.g{margin:1em 0}#sd{font-size:113%;font-weight:bold}--></style>
<a id=logo href="https://www.google.com/webhp?hl=en" title="Go to Google Home">Google<span></span></a>
If you think about their guidelines, anything that is visible to the user and requires an alternative should be made available. In the case of images and flash for instance - especially when we are talking about navigation.
My 2 Cents...
Please check out my blog and let me know what you think. Would love some non-spam interaction! ;) -> Know SEO Blog
Yeah -- that's hidden text -- it's un-ethical. It's no different than changing the font color to white.
i agree, same as changing text to white