Prolog: I thought a lot about making this idea publicly available as it may add another ace in the hole of SEO engineers and degrade search results, at least for a while, if it is really applicable. But in the end I decided in favour of writing it down as I think the detection of this should be not too hard for search engines and it has a very interesting technological approach which may be also useful in different applications.
To make sure, I did not test this and maybe never will as I do not want to jeopardize my search engine ranking. It may very well be that this is completely useless and non-functional but I'm not taking any risks here.
You should always consider to improve your content before trying to raise your page-rank via dubious techniques.
So, here we go:
In a discussion with a coworker today we came to the topic of font rendering on a search result page of a project we're currently working on. I don't know how we made the connection but at some time we were discussing SEO techniques.
At that time an idea arose in my mind. Everyone concerned with SEO nowadays should know that hiding text from the page visitor and just having it in the page for the search engine is evil. Every search engine should be able to detect such intentions and add a penalty to the page if such questionable tactics are detected. Such SEO techniques to make text invisible are for example:
- text color is same as background
- place text in a div-element and hide it
- place text in a div-element and position it offscreen
- place text in a div-element and place it behind other stuff
- unrecognizable tiny font-size
My idea deals with none of those tricks. What came to my mind was to utilize not the descriptive information in HTML and CSS to hide text but the graphical information required for rendering. To be able to render the text visibly but still make it invisible to the page visitor my idea was to utilize a web font which has just empty glyphs in it for each character.
The @font-face should nowadays be supported by all major browsers and allow to retrieve the font also from a custom location and font file. So to "hide" text on a webpage you have to create a custom web font where each character is included but contains an empty space for the rendering of the characters. Then add it to the CSS and declare a font-face for it. Finally style the text to use the CSS with the custom font. It should now be invisible for the average page visitor but still visible for the crawler.
If the search engine would have to detect this it would also have to download the custom font, render it and have a detection algorithm that the rendered font does not display any text. As far as my knowledge and a quick research told none of the major search engines are currently also fetching resource files like custom fonts during their crawl operations. (But I think, if this trick to hide text gains any significant spread, search engines will begin to actually do this and quickly detect and penalize blank fonts.)
Another quick search also did not reveal anything that this idea has been tried or discussed elsewhere so maybe this is really a new approach. Drawbacks to this could be that until the web-font is loaded by the browser the text may still be visible. Furthermore browsers which do not support web-fonts may also display the hidden text. But these should be neglectible.| Permalink