tumblr visit counter

SEO Friendly Hiding

Today, every serious company is fighting for higher search engine position. Search engine position depends on thousands factors, but few of them are significant.

Every web page should meet following criteria:

SEO is directly connected with above mentioned criteria.

In general, three techniques are “driving force” of a web site:

  • HTML – the content, does not care how it looks, nor where is positioned…
  • CSS – define how to display HTML elements (design issues such color, size, position… of the elements)
  • JavaScript – manipulate (not create) the content

Sometimes, in order to satisfy design/typography issues, developers are forced to use non standard fonts. Beginners are not aware of importance of accessibility/usability on the web, and will place simple <img> tag instead of semantically appropriate <h[1-6]> tag for the headings, but… more experienced developers will use SEO Friendly CSS Hiding (Accessibility/SEO Friendly CSS Hiding snippet) which is much better, but search engines do not like hiding techniques. Search engines can detect CSS hiding techniques, but still tolerate.

We can flag text that appears to be hidden using CSS at Google. To date we have not algorithmically removed sites for doing that. We try hard to avoid throwing babies out with bathwater.

Matt Cutts

Using CSS SEO hiding, actually is more and more outspread by implementing with CSS sprites. Follow few CSS sprites related posts:

Inspired by SEO Friendly CSS hiding techniques and respecting Matt Cutts advice SEO Mistakes: Unwise comments, I decide to use JavaScript approach instead of CSS, because CSS define how to display HTML elements, and in this case I need to “replace” text with image which is more programming issue then designing.

The idea is:

  • Create semantically correct HTML page. Do not care how does it looks.
  • Apply design (using CSS)
  • Programmable apply CSS style with background image, wrap text and move it to negative position

Create semantically correct HTML

I will skip standard page structure tags. So, semantically correct SEO ready HTML code is:


<h1 class="i" id="title">SEO Friendly Hiding</h1>

<p class="i" id="text">
	There is always possibility to be blacklisted by search engines
	if you are using hiding techniques.
	So, my advice is to use standard techniques,
	always (if possible) ensure fail-safe mechanism,
	do not try to manipulate with search engines,
	just follow three fundamentals:
	<strong><em>
		semantically correct HTML,
		accessibility,
		usability
	</em></strong>.
</p>

CSS styles


.img {
        background: url(seo-hiding.png) no-repeat;
}
#title {
        background-position: 0 0;
        height: 30px;
}
#text {
        background-position: 0 -100px;
        height: 100px;
}

An image with the same content:SEO Friendly Hiding

Finally, JavaScript which will do the job:


$(document).ready(function() {
	$('.i').addClass('img')
			.wrapInner('<span />');
	$('.i span').css({'position': 'absolute', 'left': '-10000px'});
});

In order to simplify the code, and make it easier for understanding, jQuery is used in this example.

Somebody will ask: “Why negative position is used? Isn’t display: none; better?

Well… No. display:none;, will “hide” the element, so text readers, used by disability visitors, will skip hidden block. Therefore position: absolute; left: -10000px, is better then “display: none“, or “visibility: hidden“.

Demo

Advice

W3C CSS Working Group is actively working on this issue, in order to provide mechanism to use custom fonts (by recommending usage of @font-face), text shadows, css images (still working draft) and much more.

There is always possibility to be blacklisted by search engines if you are using hiding techniques. So, my advice is to follow W3C recommendations, which are easier, ensuring failback mechanism and just follow three fundamentals: semantically correct HTML, accessibility, usability.




Dalibor Sojic

WEB Developer, freelancer.

More Posts - Website - Twitter - LinkedIn - Google Plus

2 Responses to “SEO Friendly Hiding”

  1. Ahmedabad Webs

    Oct 05. 2012

    Yes good information…we make seo friendly website…every one want to stand top on search engine..but many factors are important…for the seo friendly website….http://www.ahmedabadwebs.com

    Reply to this comment
  2. ana

    Nov 07. 2012

    Until you are using this technique for small (and unimportant) divs is ok, but if you are going to use it for a div full of headings, links and anchors you may go blacklisted also :(

    Reply to this comment

Leave a Reply