Rich snippets – a summery

Rich Snippets are not something that is actively studied in the web development industry but I feel is essential for SEO reasons,  which are very helpful if used correctly.

From what I have found “Rich Snippets” are a way in which search engines can identify/classify the type of content that can be found on your site and can help with search engine listings/optimisation.

http://schema.org/ is a site created in order to better classify web content from a combined effort by Google, Microsoft and Yahoo.

http://schema.org/docs/gs.html is a helpful place to start, below is my summery of the article.

 

Summery

  • Anything that is going to be classified as a rich snippet/tag should be enclosed in an html tag (div/span) with the attribute of “itemscope” – e.g. <div itemscope>{rich tag stuff}</div>  – The attribute itself does not have any parameters.

<div itemscope itemtype=”https://schema.org/TravelAgency”>{Some html content}</div>

  • The “itemprop” attribute should be given to child elements that match desired schema’s, these are listed on the related itemtype link under the “Property” column. e.g. under https://schema.org/TravelAgency some examples itemprop’s are ”branchOf”, “currenciesAccepted”, “openingHours” .
  • The next column on the same page lists the type of value that is expected e.g.

<h1 itemprop=”name”>Bob the builder</h1> is expecting “Bob the builder” to be text.

  • “itemtype”s can also be embedded within others e.g. “Bob the builder” can have an additional itemtype of https://schema.org/Person where additional itemprops can also be added to that as child elements. e.g

<h1 itemprop=”name” itemtype=”https://schema.org/Person”>Bob the builder</h1>

This is a basic Summery of the http://schema.org/docs/gs.html  doc, there is more information on this page, that is really interesting, but I don’t feel that is is relevant at a beginner level.

A really nice tool that you can use to test your rich tags is https://www.google.com/webmasters/tools/richsnippets

Here you can either enter the url, but for testing purposes, I would enter custom html markup into the html tab editor, and then preview how google will display it well as which information was extracted.

Here is a full html example that you can paste straight into the html editor on https://www.google.com/webmasters/tools/richsnippets to see how it works

 

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<title>Hello world</title>

</head>

<body>

<div itemscope itemtype=”https://schema.org/Action&#8221; >

<div itemprop=”agent” itemtype=”https://schema.org/Person“>Bob The Builder</div>

</div>

</body>

</html>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s