Looking to get a bit of extra visibility for pages on my hiking websites I implemented support for Google’s Rich Snippets. This feature allows for the markup of pages so that extra bits of information such as user ratings or photos can be included in Google search results. On a page with a long list of results, the eye catching additions could lead to greater click through rates.
Google supports a couple of different microformats that webpage owners can mark up their pages so that the Google search engine can determine what should be added to their results. My sites catalog outdoor activities such as hiking trails and allows users to rate their enjoyability. Marking up the average rating allows Google to show this rating with graphic stars. The HTML markup such as:
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
<span class="rating">
<span itemprop="average">4.33</span>
</span>
</span>
is part of the markup that results in a Google search listing that looks like:
That’s great! So what’s the problem? The problem is that Google does not just rely on markup to try and extract some meta data from the page in order to present them in the search results. They also do some parsing on their own. If you view one of the pages that I was trying to support you’ll note that I have an Amazon recommended item at the bottom of the page. The writeup for this item includes the author(s)’ name preceded by the phrase “by “. Even with no markup, to Google this is significant and they fetch the name as the author of the page! Of course they are not the author of the page, but instead only of the item listed. What to do?
I tried playing with some different text with varying degrees of success until I stumbled upon a solution via CSS, in particular through the content property. I wanted the user visiting the page to see the author indicated by text similar to “by Robert Barron” but I didn’t want Google to see that. The solution using CSS involves displaying the author’s name only with a CSS class designation:
<span class="AmazonAuth">Robert Barron</span>
The CSS markup indicates that it should be preceded by the value of content property:
.AmazonAuth:before
{
content: "by ";
}
The CSS above indicates that before an element of the class AmazonAuth the content should be inserted. When Google parses web pages for indexing it does not take the CSS markup into account, so the “by ” prefix does not exist as far as it’s concerned and does not cause it to falsely guess the page author’s name.