Enabling Rich Snippets (Structured Data) for your Website

Adding structured data to your website will have an significant impact on the visibility of your sites in search engines like Google. The algorithms of search engines are developing fast, and the understanding of the content of a website is becoming better every day. Nevertheless, adding rich snippets to your code will assure a better processing and results in higher rankings.

What is Structured Data?

Data that resides in fixed fields within a a file is called structured data. This means, that data points like a heading, an URL or an image are wrapped with a tag, so Google can understand what type of content it is. The web-standard is defined by schema.org.

Schema.org is a collaborative, community activity with a mission to create, maintain, and promote schemas for structured data on the Internet.

How does it work?

Schema.org defines a wrapping structure, that becomes more and more detailed. The following snippet shows an example for a blog post.

<body itemscope itemtype="http://schema.org/WebPage">
	<div class="post" itemscope itemtype="http://schema.org/Article">
		<img itemprop="image" src="URL OF THE POSTS FEATURED IMAGE">
		<h1 itemprop="headline">TITLE OF THE POST</h1>
		<div class="post content" itemprop="articleBody">
			HERE IS THE CONTENT OF THE BLOG POST.
		</div>
	</div>
</body>

As you can see, an “itemscope” is defined for each type that contains different “itemproperties”. In this case, the itemtype “Webpage” is added to the body-tag as a global property to each site. The article contains the itemproperties “image, headline” and the  “articleBody”, the content of the post.

On Schema.org you can find all possible properties for each itemscope. The url in the markup is at the same time the definition of it: Article = http://schema.org/Article

Tools and Examples

Tools

Google Structured Data Testing Tool
The most important tool to check your snippets is the Structured Data testing tool of Google. It fetches your website and shows you all items and errors. There are certain requirements like for example a product has to have an item property “price” defined by Google itself that can be checked-up.

google-structured data-testing tool

Schema Creator
To create your first rich snippets, the Schema Creator is a very useful tool. It allows you to quickly create and understand a snippet for the most important types (Person, Review, Product, Organization, Events, etc…). They are also offering a WordPress Schema Creator to simply add structured data to your published content.

Examples

Have a look on the wrapping of “itemscopes” in the following two exampes with the type “PostalAdress” inside the main scope “Person” and “Organization” and .

Person

<div itemscope itemtype="http://schema.org/Person">
	<div itemprop="name">FIRST NAME LAST NAME</div>
	<div itemprop="jobtitle">JOBTITLE</div>
	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">STREET 1</span>
		<span itemprop="addressLocality">CITY</span>
		<span itemprop="addressRegion">STATE</span>
		<span itemprop="postalCode">1010</span>
		<span itemprop="addressCountry">COUNTRY</span>
	</div>
	<div itemprop="email">[email protected]</div>
	<div itemprop="telephone">+43123456789</div>
</div>

Organization

<div itemscope itemtype="http://schema.org/Organization">
	<a itemprop="url" href="http://www.COMPANY.com">
		<div itemprop="name">COMPANYNAME</div>
	</a>
	<div itemprop="description">
		HERE IS A SHORT DESCRIPTION OF YOUR COMPANY
	</div>
	<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
		<span itemprop="streetAddress">STREET 1</span>
		<span itemprop="addressLocality">CITY</span>
		<span itemprop="addressRegion">STATE</span>
		<span itemprop="postalCode">1010</span>
		<span itemprop="addressCountry">COUNTRY</span>
	</div>
</div>
INTERNETKULTUR | © 2018 | Imprint