How to add photos, reviews, starlets and breadcrumb in Google results

microdata and rich snippetGoogle is constantly changing and in recent times we have seen more innovation in his algorithm, among which the curious and well known microdata.
 

Rich Snippets: How to Use the schema.org markers to see reviews, photos, contact information and company, stars of votes and breadcrumb in the results of google

Scrolling through the Google SERP for certain keywords more often we see how some of the results are shown to the user in a different way, and far more attractive than usual: photos in thumbnails, stars and various information increasingly accompanying the usual description and attribute added value to that result, a value that often attracts the click. Let's look at an example here:
 
google serp with microdata
 
It is not uncommon that every time you think I want that my site to appear that way! But maybe we should first ask what it is ...
 
[adsense:block:adcontenuto]

What is Schema.org and what are the microdata

Schema.org is a website created by agreement between the major search engines on the planet, they are listed in the instructions and markers to "educate" the best search engines on the particular content. Then the webmaster is responsible for providing additional information on their site or web page according to the desired size and content in schema.org. In the act it is practical to place markers within the canonical html tags, but the operation literally helps the search engine to better index the content (for example will indicate what type it is - your website, blog - in which sector - restaurants, hotels, etc. - and if it contains images, video or audio).
 
There are also types of schemes already pre-made or better prepared:
 
View Hierarchy Types Microdata we always have as a reference for the use of markers right depending on the type of website that we want to enrich.
 
Also google provides, but only for some, an automatic generator of these patterns:
 
See Automatic Microdata Generator that can be useful in a first approach to micro-data in order to understand its logic. Choose from the schemes already ready on the right and compile the fields that interest us. At the end we will have the generated code to paste into our pages.
 

How microdata works: The basic rules

The basics to be fixed in mind when it comes to micro data are:
 
itemscope - indicates that the contents of the div in which it is inserted is an object;
itemtype - indicates that the object belongs to a particular type (Review, Recipe, Book, etc.);
itemprop - further indicate the specific property dell'itemtype.
itemscope itemtype and should always be combined, this syntax:
 
<div itemscope itemtype="http://schema.org/Thing">.
 
Following the hierarchy of the types of micro data we see immediately that the object "Thing" is the most common type and generic type mother so to speak, that contains all the others inside it are subtypes Creative Works, Person, Event, etc., each of their other subtypes as Blog, Article, Book, and so on, each accompanied by its specific properties that are regulated by heredity. What does this mean? Basically, the subtype such as Blogs, in addition to its specific properties, can also use the properties of the parent type Creative Works and the even higher Thing

How to use markers: add photos, reviews and starlets number of votes

He learned the fundamentals of microdata is time to move on in practice and put our information in our page so we have the stars and the Miniature. Given that from what has been said so far, the instructions can be inserted are many (just look at the specific properties listed next to the types of the hierarchy) and not only photos and starlets of the votes, but also the prices of products such as profile photos of social networks, addresses, contacts, and so on and so forth.
 
But, as the title, the purpose of this article is to provide a simple example of the use of micro-data and the properties examined are just the photos, reviews and starlets with the votes. But to understand the whole is better to proceed to examples.
 
We use the particular type Review Reviews ie, so the code will utilizato:
 
<div itemscope itemtype="http://data-vocabulary.org/Review">
<img itemprop="photo" src="fotopersonale.jpg" />
<span itemprop="itemreviewed"> name of what you're reviewing </ span>
<span itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating"> rating <span itemprop="average"> 9 </ span> <span itemprop="best"> 10 </ span> </ span> out of <span itemprop="votes"> 1276 </ span> ratings.
<span itemprop="count"> 767 </ span> positive reviews of users. </ div>
As we see in the example, the first line indicates that the html div tag is included in a review, and below we have used the properties of this object are: photo, itemreviewed, rating, etc.. It 'important that if we ribadiree utlizzato a different type of Review, the property itemreviewed could not use it because of this specific type.
 
[adsense:block:adcontenuto]

Where to put the markers?

It 'important to note that what you want to see in the results of google must be clearly visible even in the site: therefore any kind of hidden text or furbate css.Posizionamo through the code within the web page you want in the exact location where want to view the site. So header, footer or before the title of the page does not matter.
 
In the case of a cms then we could put the code in the template so that all the pages have that code, but only in the case of micro generic and therefore adaptable to every page. However, if the microdata should be specific, should be included in the body of the page.
 

Useful Resources

In addition to the resources reported at the beginning of article - Hierarchy of Types of Micro date and Generator Auto - another important resource for testing on the correct insertion of the Rich Snippets, is the Rich Snippets Testing Tool provided by Google Webmaster Tools .
 
The instrument is also important because Google will put some time before you see the results in accordance with the instructions, so it's a usefull way to see right now the way it will come out your result.
 

How to insert a breadcrumb in Google results

Finally, an aspect that is missing from Most Recent deal is how to look directly into the breadcrumb (the so-called breadcrumbs) in Google results instead of the URL of the page. Breadcrumbs are the necessary path to get to that particular page:
 
This is a typical example of a breadcrumb: Category -> Sub Category -> Name Page
 
Instead of the URL in the results of google prorpio will come our way.
 
use a CMS like Drupal or Wordpress, you will need to put his hand to the main file of the template (in the case of Drupal I use personally page.tpl.php) and identify the part that is printed on the screen above the breadcrumb.
 
Eg.
 
<div class="breadcrumb"> <? php print $ breadcrumb?> </ div>
 
then add the markers in this way:
 
<div itemprop="breadcrumb" class="breadcrumb"> <? php print $ breadcrumb?> </ div>
 
but before the body tag:
 
<body itemscope itemtype="http://schema.org/WebPage">

 

Similar Content

Penalization of domains with exact keywords

matt cutts and penalty

You may come to an end the possibility of finishing in the SERPs so "easy" using a keyword as exact domain of a website. In a recent tweet, Matt Cutts reported the introduction (not yet in worldwide) is a minor update to the algorithms of Google, not related to Panda or Penguin, which should reduce this "beneficial effect".
News Magazine: 

How to add author box in WordPress post

wordpress author boxBe recognized by the web is a very important element for those who want out from the crowd and it is even more for those who manage a blog or website.
Thus was born the need (if not born, born leak now) to create a sort of brand / quality indicator to associate with the result of the hard work you do to create the post. What to do? Simple, just associate the author box (including image and name-surname) of each post that has been published.
Development: 

Anonymous, this time hitting the State Police

The hacktivist group most famous against the most sensitive Italian goal. The hole suffered by the server of the State Police at the hands of Anonymous last night marks a quantum leap in the company's shares, which - perhaps because they have abandoned WikiLeaks - seem to be devoting more and more data leaks and dedicate to public shares.
News Magazine: 

Utility: The difference between the Share button and +1 on Google+

diffrernce share button and +1 on google+Google released at a later time the "Share" button to give a clear demarcation between the sharing post on Google+ and its "Likes" in the form of the +1 button. Originally, the sharing was incorporated in +1: users who appreciated the content could express their preference through this button and then also share it. So let us understand the real difference between the Share button and the +1 because at the eye of many, seen as an unnecessary duplication.

Social Network: