среда, 26 августа 2015 г.

HTML5 & Schema.org - Structured Microdata for SEO

12:23 By , No comments


Formats like Microdata, Microformats or RDFa can be used to improve your site semantic by standardized code. In this tutorial you can find SEO Best Practices for microdata, which helps to optimize the search engine indexing. Examples for webpage, breadcrumb, blog as well as author rating and information are shown in combination with HTML5 tags. These rich snippets helps you to easily realize your own markup.
Schema.org as well as data-vocabulary.org is an initiative of the major internet search engines Bing, Google, Yahoo! and Yandex to use mark-up for HTML pages. The Schema markup can be used to improve your site semantic that is using standardized code to set a precedent in search engine indexing, allowing navigators to quickly locate desired, highly relevant information. Wikipedia describe it as:
Schema.org is an initiative launched on 2 June 2011 by Bing, Google and Yahoo! (the operators of the then world’s largest search engines) to “create and support a common set of schemas for structured data markup on web pages.”
So, Microformats can improve your site semantic, which helps you to optimize your website for search engines. But you have to evaluate whether data is useful or not. This is a matter of personal taste. Just be aware that microformats can add weight to a page, so using it for everything isn't necessarily a great idea. The best search engine optimization (SEO) philosophy is: The right thing to do is what is best for the user. That is what's good for SEO.
There are three formats that can be used: (1) Microdata, (2) Microformats and (3) RDFa. But Google recommends to use microdata as it can be read in their schema.org FAQ:
There are arguments to be made for preferring any of the existing standards, but we’ve found that microdata strikes a balance between the extensibility of RDFa and the simplicity of microformats, so this is the format that we’ve gone with.
Hence, I'm using Microdata, where I want to show you the best practice on this page. The idea behind Microdata, Microformatsand RDFa is to setup context for search engine crawlers to add additional semantic meaning. Microformats are a quick solution for marking up your HTML code referencing specific relations such as your address, job, or colleagues. Google supports Microdata, also called rich snippets, for these content types: (1) Reviews, (2) People, (3) Products, (4) Businesses and organizations, (5) Recipes, (6) Events and (7) Music. The mark-up itself can be ignored by applications which don't know or need it, such as browsers.
My first question was, why there are two schema versions, where both are used by Google etc.: data-vocabulary.org vs. schema.org? What I understand is, that data-vocabulary.org is the old and schema.org is the new common data vocabulary plattform. So, you are already allowed to use data-vocabulary.org but you should use schema.org when it is possible.
Let's discuss a first rich snippet example by using the schema.org/Organization schema:
  1. <div itemscope itemtype="http://schema.org/Organization">
  2.  
  3.    <span itemprop="name">Company Name</span>
  4.  
  5.     Phone: <span itemprop="telephone">Phone Number</span>
  6.    <a href="https://ludwig.im" itemprop="url">https://ludwig.im</a>
  7.  
  8. </div>
The keyword itemscope is necessary to inform that we are defining a scope for a new item. The value is passed into itemtype as a full URL linking to Schema’s object documentation. In other words, itemscope="itemscope" itemtype= tells the search engines that the information to follow is the primary category for this section. The linkhttp://schema.org/Organization is the specific category, with the link itself providing a reference point for the search engines. The itemprop covers the specific parcel of information by wrapping it in HTML5 tags: In this case, the name, telephone or url.
That means, you have to define itemscope > itemtype > itemprop:
  • Itemscope: An element with the itemscope attribute specified creates a new item, a group of name-value pairs. Elements with an itemscope attribute may have an itemtype attribute specified, to give the item types of the item. The itemscope attribute is a boolean attribute.
  • Itemtype: The itemtype attribute must have a value that is an unordered set of unique space-separated tokens that are case-sensitive, each of which is a valid URL that is an absolute URL, and all of which are defined to use the same vocabulary. The attribute's value must have at least one token. If the itemtype attribute is missing or parsing it in this way finds no tokens, the item is said to have no item types.
  • Itemprop: The itemprop attribute, has a value that is an unordered set of unique space-separated tokens that are case-sensitive, representing the names of the name-value pairs that it adds. The attribute's value must have at least one token. When an element with an itemprop attribute adds a property to multiple items, the requirement above regarding the tokens applies for each item individually.
I'm using HTML5, which is a markup language used for structuring and presenting content. Therefore, all examples are coded in HTML5, which has the following features:
  • Brings several improvements in usability and user experience
  • Has several new tags like video or article that will help you to classify your content
  • Is awesome for sites rich in media (audio & video)
  • Is an alternative to Flash and Silverlight
  • Is SEO-friendly when it comes to website crawling and indexing
  • Is it for mobile apps
In order to give you a better feeling about the tags in this tutorial, please have this table in your mind:
TagDescriptionMODX equivalent
{{site_name}}Site Name[[++site_name]]
{{pagetitle}}Title of the page[[*pagetitle]]
{{longtitle}}Long Title of the page[[*longtitle]]
{{menutitle}}Title used when the page appears in menus[[*menutitle]]
{{introtext}}Introduction Text (e.g. short summary)[[*introtext]]
{{content}}Content of the page.[[*content]]
{{publishedon}}Published On date, e.g. 2014-12-01[[*publishedon]]
{{editedon}}Edited On date, e.g. 2014-12-01[[*editedon]]
{{language}}Language of the page e.g. en[[++cultureKey]]
I'm using MODX with it's template system, but you can use these examples directly in an HTML5 file or in another content management system (CMS). Please give me feedback if you have questions or improvement suggestions for this html5 markup best practices guide.

Webpage structure using Microdata

schema.org/WebPage tells the search engines like Google or Bing, that it is indexing a webpage so that various properties such as data-vocabulary.org/Breadcrumb may be used.
  1. <body itemscope itemtype="http://schema.org/WebPage">
  2.     <meta itemprop="name" content="{{menutitle}}"/>
  3.     <meta itemprop="description" content="{{introtext}}"/>
  4.     <meta itemprop="keywords" content="topic1, topic2, topic3"/>
  5.  
  6.     <!-- Blog Author information using http://data-vocabulary.org/Person-->
  7.     <!-- Main Navigation using http://schema.org/SiteNavigationElement -->
  8.     <!-- Header with Banner using http://schema.org/WPHeader -->
  9.     <!-- Breadcrumb using http://data-vocabulary.org/Breadcrumb -->
  10.     <!-- Content using http://schema.org/Blog and http://schema.org/BlogPosting -->
  11.     <!-- User comments using http://schema.org/UserComments -->
  12.     <!-- Footer using http://schema.org/WPFooter -->
  13. </body>
You can see that the name, description and keywords match the menutitle, introtext and some keywords. In the following sections you can find the most important microdata for blogger like data-vocabulary.org/Person, schema.org/WPHeader or data-vocabulary.org/Review:

Author information

An item with the item type data-vocabulary.org/Person represents a person. Each property of the Person item is identified with the itemprop attribute, where itemprop="name"describes the person's name.
  1. <div role="contentinfo" itemscope itemtype="http://data-vocabulary.org/Person">
  2.  
  3.         <address rel="author" itemprop="name">
  4.             <span itemprop="nickname">Max</span> Mustermann
  5.         </address>
  6.         <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address">
  7.             <meta itemprop="locality" content="Gummersbach">
  8.             <meta itemprop="region" content="North Rhine-Westphalia">
  9.             <meta itemprop="country-name" content="Germany">
  10.         </span>
  11.         <meta itemprop="role" content="Prince of Persia">
  12.  
  13. </div>
The Google Structure Tool result can be seen in the following screenshot:
Example about data-vocabulary.org/Person
Fig. 1: Example about data-vocabulary.org/Person
Alternativly you can use schema.org/Person:
  1. <div role="contentinfo" itemscope itemtype="http://schema.org/Person">
  2.  
  3.         <address rel="author" itemprop="name">
  4.             <span itemprop="givenName">Max</span> Mustermann
  5.         </address>
  6.         <span  itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
  7.             <meta itemprop="addressLocality" content="Gummersbach">
  8.             <meta itemprop="addressRegion" content="North Rhine-Westphalia">
  9.             <meta itemprop="addressCountry" content="Germany">
  10.         </span>
  11.         <meta itemprop="jobTitle" content="Prince of Persia">
  12.  
  13. </div>
schema.org/SiteNavigationElement extends WebPageElement and can be used to mark-up links, which would often make good contextual links. You can use this schema for your page menu.
  1. <nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement">
  2.  
  3.     <ul>
  4.         <li>
  5.             <a href="https://ludwig.im/" title="Link to Home" itemprop="url">
  6.                 <span itemprop="name">Home</span>
  7.             </a>
  8.         </li>
  9.         <li>
  10.             <a href="https://ludwig.im/en/projects/" title="Link to current page" itemprop="url">
  11.                 <span itemprop="name">Projects</span>
  12.             </a>
  13.         </li>
  14.     </ul>
  15.  
  16. </nav>
schema.org/WPHeader is a WebPageElement that can include markup from CreativeWork as well as Thing. It describes the header section of the webpage. The most important item property is headline, which describes the title of your page.
  1. <header role="banner" itemscope itemtype="http://schema.org/WPHeader">
  2.     <meta itemprop="name" content="{{menutitle}}"/>
  3.     <meta itemprop="description" content="{{pagetitle}}"/>
  4.     <meta itemprop="keywords" content="topic1, topic2, topic3"/>
  5.     <h1 itemprop="headline">{{longtitle}}</h1>
  6. </header>
At first let's say: Breadcrumbs do not effect SEO, but it may helps to optimize click-through rates, because it is shown in the search engine response page (SERP). Breadcrumbs are helpful for SERPs but not necessarily recognized as content. Hence, this is a must have! All important search engines are supporting the data-vocabulary.org/Breadcrumb mark-up. Breadcrumbs is a navigation aid used on your website and allows users to keep track of their location. But you don't need to include the current page in your breadcrumbs as Google mentioned:
Each breadcrumb item should appear in order, with the first item representing the top-level page, and the final item representing the parent of the current page.
Breadcrumbs can contain a number of different properties where Google, Bing etc. recognizes the following breadcrumb properties: (1) title (2) url (3) child. The two properties url and title are completely redundant. A common example you can find here:
  1. <nav role="navigation" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  2.  
  3.     <meta itemprop="name" content="Breadcrumb"/>
  4.     <meta itemprop="description" content="Breadcrumb for {{pagetitle}}"/>
  5.  
  6.     <ul itemprop="itemListElement">
  7.         <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  8.             <a rel="index home" href="/" title="Home" itemprop="url">
  9.                 <span itemprop="title">Home</span>
  10.             </a>
  11.         </li>
  12.         <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  13.             <a href="https://ludwig.im/en/projects/" title="Projects" itemprop="url">
  14.                 <span itemprop="title">Projects</span>
  15.             </a>
  16.         </li>
  17.         <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  18.             <a href="ttps://ludwig.im/en/projects/modx-snippet-chunk-plugin/" title="MODX Stuff" itemprop="url">
  19.                 <span itemprop="title">MODX Stuff</span>
  20.             </a>
  21.         </li>      
  22.         <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  23.                 <span itemprop="title">LudwigShariff for MODX</span>
  24.         </li>
  25.     </ul>
  26.  
  27. </nav>
The Google Structure Tool result can be seen in the following screenshot:
Example for data-vocabulary.org/Breadcrumb
Fig. 2: Example for data-vocabulary.org/Breadcrumb
Furthermore, this is another example by using schema.org/BreadcrumbList and schema.org/ListItem consisting of a chain of linked Web pages. It typically described using at least their URL and their name, ending with the current page. This methode is not supported by Google!
  1. <nav role="navigation" itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">
  2.  
  3.     <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
  4.         <a rel="index home" href="/" title="Home" itemprop="url">
  5.             <span itemprop="name">Home</span>
  6.         </a>
  7.         <meta itemprop="position" content="1" />
  8.     </span>
  9.     ›
  10.     <span itemprop="itemListElement" itemscope  itemtype="http://schema.org/ListItem">
  11.         <a href="https://ludwig.im/en/projects/" title="Projects" itemprop="url">
  12.             <span itemprop="name">Projects</span>
  13.         </a>
  14.         <meta itemprop="position" content="2" />
  15.     </span>
  16.     ›
  17.     <span itemprop="itemListElement" itemscope  itemtype="http://schema.org/ListItem">
  18.         <a href="https://ludwig.im/en/projects/ludwigshariff-shariff-for-modx" title="LudwigShariff" itemprop="url">
  19.             <span itemprop="name">LudwigShariff</span>
  20.         </a>
  21.         <meta itemprop="position" content="3" />
  22.     </span>
  23.  
  24. </nav>

Blog and BlogPosting

schema.org/Blog can be used, where you typically find a list of several blog posts. In other words, schema.org/BlogPosting represents a single blog post of schema.org/Blog. Schema BlogPosting is a more specific schema.org/Article type. That means, every BlogPosting is an Article, but not every Article is a BlogPosting, because Article is just general with the following specific types: (1) BlogPosting, (2) NewsArticle, (3) ScholarlyArticle. In other words, if you have a typical blog, it would be the best solution to use schema.org/Blog withschema.org/BlogPosting.
  1. <main role="main" itemscope itemtype="http://schema.org/Blog">
  2.  
  3.     <meta itemprop="name" content="{{menutitle}}"/>
  4.     <meta itemprop="description" content="{{site_name}} Blog is about {{longtitle}}"/>
  5.     <meta itemprop="keywords" content="Topic1, Topic2, Topic3, Topic4, Topic5"/>
  6.  
  7.     <article role="main" itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
  8.         <div>
  9.             Posted on <time datetime="{{publishedon}}" itemprop="datePublished">{{publishedon}}</time>
  10.             <div itemprop="keywords">Topic1, Topic2, Topic3</div>
  11.             <a itemprop="discussionUrl" href="#add-your-comment">
  12.                 <data itemprop="interactionCount" value="UserComments:0">20 User comments</data>
  13.             </a>
  14.             <data itemprop="interactionCount" value="UserCheckins:4">4 Shares</data>
  15.             <meta itemprop="interactionCount" content="UserTweets:0"/>
  16.             <meta itemprop="interactionCount" content="UserLikes:4"/>
  17.             <meta itemprop="interactionCount" content="UserPlusOnes:0"/>
  18.         </div>
  19.  
  20.         <h2 itemprop="alternativeHeadline">{{pagetitle}}</h2>
  21.         <div itemprop="description">{{introtext}}</div>
  22.         <div itemprop="articleBody">{{content}}</div>
  23.         Last modified on <time datetime="{{editedon}}" itemprop="dateModified">{{editedon}}</time>
  24.     </article>
  25.  
  26. </main>
In this example you can see a typically blog and blog posting with social interactions like UserTweets, UserLikes and UserPlusOnes as well as UserComments.

UserComments

It is pretty easy to mark up comments with microdata: schema.org/UserComments allows to define a user interaction event in which a visitor comments on an item. If you are usingschema.org/BlogPosting, the item property itemprop="comment" says that there are comments from users. The item type of this property can be schema.org/Comment orschema.org/UserComments. Each comment has its own itemscope, which means that you have to repeat it on each comment. Because, some people are getting the error messageWarning: Missing required field "dtstart". by Google's Rich Structure Validator. So, please don't forget to add the itemprop='comment' property to UserComment itemscope element. The instance of UserComments has to be inside something like a CreativeWork (e.g. Blog).
  1. <div id="disqus">
  2.     <h2 id="add-your-comment">Add Your Comment</h2>
  3.     <div id="disqus_thread">
  4.         <ul>
  5.             <li itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="post1">
  6.                 <meta itemprop="discusses" content="{{pagetitle}}"/>
  7.                 <link itemprop="url" href="#post1">
  8.                 <time itemprop="commentTime" content="2014-08-18" datetime="2014-08-18T04:47" title="Aug 18, 2014 04:47">3 months, 3 weeks ago</time>
  9.                 <span itemprop="creator" itemtype="http://schema.org/Person">
  10.                         <span itemprop="name">Hasi Hupferl</span>
  11.                 </span> said:
  12.                 <div itemprop="commentText">Great article!</div>
  13.             </li>
  14.             <li itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="post2">
  15.                 <meta itemprop="discusses" content="{{pagetitle}}"/>
  16.                 <link itemprop="url" href="#post2">
  17.                 <time itemprop="commentTime" content="2014-08-18" datetime="2014-08-18T21:32" title="Aug 18, 2014 21:32">3 months, 3 weeks ago</time>
  18.                 <span itemprop="creator" itemtype="http://schema.org/Person">
  19.                         <span itemprop="name">Maus Mietze</span>
  20.                 </span> said:              
  21.                 <div itemprop="commentText">Cool Schema!</div>
  22.             </li>
  23.         </ul>
  24.     </div>
  25. </div>
In this schema, a typical mistake is when you forget the item property "comment" (itemprop="comment") in the first line. Then you will get the error message error: missing required field "dtstart". in Google's Structured Data Testing Tool. In the next example you can find an HTML5 section/article style comment structure:
  1. <article id="disqus">
  2.     <header>
  3.         <h2 id="add-your-comment">Add Your Comment</h2>
  4.     </header>
  5.     <p id="disqus_thread">
  6.  
  7.         <section itemprop="comment" itemscope itemtype="http://schema.org/UserComments" id="post1">
  8.             <meta itemprop="discusses" content="{{pagetitle}}"/>
  9.             <link itemprop="url" href="#post1">      
  10.             Posted by:
  11.                 <span itemprop="creator" itemscope itemtype="http://schema.org/Person">
  12.                     <span itemprop="name">Max Mustermann</span>
  13.                 </span>
  14.             <time itemprop="commentTime" content="2014-08-18" datetime="2014-08-18T21:32" title="Aug 18, 2014 21:32">3 months, 3 weeks ago</time>
  15.             <span itemprop="commentText">Thanks for your help!</span>
  16.         </section>
  17.         ...
  18.         ...
  19.  
  20.     </p>
  21. <article>
As you can see, the first example is more compact than the second one. All examples are using schema.org/Person in order to define the comment creator as a person.

Author Rating

The schema data-vocabulary.org/Review represents a review of a business, product or organization. The smallest version of a review depends on the name of the reviewer and the rating. In this case, the rating property consists of another item, as indicated by itemscope. The itemtype attribute indicates that the nested item is a rating: itemtype="http://data-vocabulary.org/Rating". If you’re using the default 1 to 5 scale, the only property you need to mark up is the rating itself like 4.
  1. <div itemscope itemtype="http://data-vocabulary.org/Review">
  2.     <strong>Reviewed <span itemprop="itemreviewed">{{pagetitle}}</span> by:</strong>
  3.     <span itemprop="reviewer">Max Mustermann</span> on
  4.     <time itemprop="dtreviewed" datetime="2014-12-11T22:09">2014-12-11</time>
  5.     <div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
  6.     Rating:
  7.         <span class="fa fa-star"></span>
  8.         <span class="fa fa-star"></span>
  9.         <span class="fa fa-star"></span>
  10.         <span class="fa fa-star"></span>
  11.         <span class="fa fa-star"></span>
  12.         <span class="fa fa-star-o"></span>
  13.         (<span itemprop="value">5</span> out of <span itemprop="best">6</span>)
  14.     </div>
  15. </div>
The Google Structure Tool result can be seen in the following screenshot:
Example for data-vocabulary.org/Review
Fig. 3: Example for data-vocabulary.org/Review
But if you want to use a different scale, you need to declare the limits of the scale you’re using. In this example, I used the limit from 1 to 6 by defining the actual rating value (itemprop="value") and the best value (itemprop="best"). There is also the possibility to define a worst value like 3 (itemprop="worst"). Another example you can find here:
  1. <div itemprop="review" itemscope itemtype="http://schema.org/Review">
  2.     <span itemprop="itemreviewed">{{pagetitle}}</span>
  3.     <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
  4.         <meta itemprop="worstRating" content="1">
  5.         <meta itemprop="bestRating" content="6">
  6.         <meta itemprop="ratingValue" content="5">
  7.         <span class="fa fa-star"></span>
  8.         <span class="fa fa-star"></span>
  9.         <span class="fa fa-star"></span>
  10.         <span class="fa fa-star"></span>
  11.         <span class="fa fa-star"></span>
  12.         <span class="fa fa-star-o"></span>
  13.     </div>
  14.     <time itemprop="datePublished" datetime="2014-12-11T22:09">2014-12-11</time>
  15.     <span itemprop="author">Max Mustermann</span>
  16. </div>
This example is using schema.org/Review, where itemprop="reviewRating" can be used with the itemtype="http://schema.org/Rating". The Google Structure Tool result can be seen in the following screenshot:
Example for schema.org/Review
Fig. 4: Example for schema.org/Review

Rating with Votes

Description will follow
  1. <div itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
  2.     <div>Reviewed <span itemprop="itemreviewed">{{pagetitle}}</span></div>
  3.     <div itemprop="rating" itemscope itemtype="http://data-vocabulary.org/Rating">
  4.     Rating based on <span itemprop="votes">3</span> votes:
  5.         <span class="fa fa-star"></span>
  6.         <span class="fa fa-star"></span>
  7.         <span class="fa fa-star"></span>
  8.         <span class="fa fa-star-o"></span>
  9.         <span class="fa fa-star-o"></span>
  10.         (<span itemprop="average">3</span> out of <span itemprop="best">5</span>) Stars
  11.     </div>
  12. </div>

ImageObject and ImageGallery

The HTML5 <figure> element specifies self-contained content and is intended to be used in conjunction with the <figcaption> element to mark-up diagrams, illustrations, photos or code examples. The <figcaption> element itself is optional and can appear before or after the content within the <figure>. <figure> itself may contain multiple other child elements like <img>. Hence, it fits very well to the ImageObject and ImageGallery element.

A figure with description

As described before, figure elements are representing a unit of content, where it can be used optionally with a caption. The img element itself represents an image as it is used in olderHTML versions. The schema.org/ImageObject mark-up an image, which can be used with the item property thumbnailURL to mark that this image is an thumb version. Furthermore, the item property image defines the real link to the image.
  1. <figure itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
  2.     <a href="figure_large.jpg" title="Image Title" itemprop="contentUrl">
  3.         <img src="figure_thumbnail.jpg" width="600" height="300" alt="Image Description" itemprop="thumbnailUrl">
  4.     </a>
  5.     <figcaption itemprop="caption">Image Description</figcaption>
  6. </figure>
The figure is holding a thumbnail for the larger image and has a description as well as an URL to the image.

Gallery - Many figures with description

schema.org/ImageGallery defines a image gallery. The ImageGallery element consists of many images.
  1. <figure itemscope itemtype="http://schema.org/ImageGallery">
  2.     <img src="/figure1.jpg" alt="Nice image" itemprop="image">
  3.     <img src="/figure2.jpg" alt="Wow" itemprop="image">
  4.     <a href="figure3_large.jpg" title="Image Title" itemprop="contentUrl">
  5.         <img src="/figure3_thumbnail.jpg" alt="Cool" width="600" height="300" itemprop="thumbnailUrl">
  6.     </a>
  7.     <figcaption itemprop="caption">Image Description for all images</figcaption>
  8. </figure>
In this example you can see three figures, which have one description.

Code Snippets

schema.org/Code describes computer programming source code like code snippet, scripts, templates or ready for compile code. These proposed vocabularies will improve search engines’ understanding of documentation with technical content, and thus greatly increase the discoverability of your content. The schema.org/Code type is proposed with source code in mind, not to run an application. Therefore, it is good to combine it with an Syntax Highlighter.
  1. <div itemscope itemtype="http://schema.org/Code">
  2.     <meta itemprop="copyrightYear" content="2015"/>
  3.     <meta itemprop="copyrightHolder" content="{{sitename}}"/>
  4.     <meta itemprop="datePublished" content="{{publishedon}}"/>
  5.     <meta itemprop="programmingLanguage" content="php"/>
  6.     <div itemprop="sampleType">print_r("Hello World");</div>
  7.     <link itemprop="license" content="http://www.gnu.org/licenses/gpl-2.0.html"/>
  8. </div>
In this example, you can see a print_r command using PHP. At this point in time, Google don't know the property license but it should be updated in the future.

SoftwareApplication

schema.org/SoftwareApplication is a more specialized subclass of CreativeWork. You can describe the type and category of Software in combination with a rating. In the following example you can see an easy to implement solution. You describe the Application category and subcategory as well as an rating by using the aggregateRating schema.
  1. <div itemscope itemtype="http://schema.org/SoftwareApplication">
  2.     <div itemprop="name">LudwigDisqus</div>
  3.     <meta itemprop="SoftwareApplicationCategory" content="http://schema.org/DesignApplication"/>
  4.     <meta itemprop="interactionCount" content="UserDownloads:11"/>
  5.     <span itemprop="SoftwareApplicationSubCategory">Modx Extra</span>
  6.     <div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
  7.         LudwigDisqus is rated <span itemprop="ratingCount">11</span> times with
  8.         <span itemprop="ratingValue">4.9</span>
  9.         <meta itemprop="bestRating" content="5" />
  10.     </div>
  11. </div>
The Google Structure Tool result can be seen in the following screenshot:
Example for schema.org/SoftwareApplication
Fig. 5: Example for schema.org/SoftwareApplication
Possible Software application types are:
  • GameApplication (e.g. action, arcades, etc..)
  • EntertainmentApplication (e.g. music, sports, TV)
  • BusinessApplication (e.g. productivity tool, accounting, finance, tax)
  • MultimediaApplication (e.g. audio/video player, consumer photo/video editor)
  • DeveloperApplication (e.g. compilers, debuggers)
  • DriverApplication (e.g. OS drivers)
  • EducationalApplication
  • HealthApplication
  • TravelApplication
  • FinanceApplication (e.g. accounting, finance, tax)
  • SecurityApplication
  • BrowserApplication (e.g. web browser, RSS reader, browser add-on/plugin)
  • CommunicationApplication (e.g. email , VOIP application)
  • DesktopEnhancementApplication
  • DesignApplication (e.g. graphic design, pro audio/video, modeling, CAD/CAM)
  • HomeApplication (e.g. decoration, landscaping, DIY)
  • SocialNetworkingApplication
  • UtilitiesApplication (e.g. system tools, utilities)
  • ReferenceApplication (e.g. books, reference)
  • SportsApplication
  • ShoppingApplication
  • MedicalApplication
  • OtherApplication
More information about schema.org/SoftwareApplication you can find in the CreativeWork/SoftwareApplication Proposal from 2011.
schema.org/WPSideBar is used to markup a primary and secondary sidebar. WPSideBar is a good mark-up for HTML5 <aside> elements, which defines a block of content that is related to the main content around it. <aside> is used for tangentially related content on the left or right side of the main element. HTML5 <aside> elements should be contain content that can be removed without reducing the meaning of the main content. The HTML5 specs changed a little bit for <aside>. Please have a look to Aside Revisited in order to get more information about it. The Annotations for assistive technology products (ARIA) Role role="complementary" is implicit to the <aside> element. Hence, you don't need to insert it into this element.
  1. <aside itemscope itemtype="http://schema.org/WPSideBar">
  2.     <meta itemprop="name" content="Social Buttons for {{pagetitle}}"/>
  3.     <meta itemprop="description" content="Add {{site_name}} to your social media and publicate it. Thanks!"/>
  4.     <meta itemprop="keywords" content="Social Buttons, Facebook, Twitter, LinkedIn, Xing, Mail, GooglePlus"/>
  5.  
  6.     <ul>
  7.         <li id="sb-facebook">
  8.             <a href="http://www.facebook.com/sharer/sharer.php?u=" rel="nofollow" title="Share" target="_blank" itemprop="url">Facebook</a>
  9.         </li>
  10.         <li id="sb-twitter">
  11.             <a href="https://twitter.com/intent/tweet?text=" rel="nofollow" title="Share" target="_blank" itemprop="url">Twitter</a>
  12.         </li>
  13.     </ul>
  14. </aside>
In this example, you can find a sidebar with social media buttons, where the item properties name, description, keywords and url are used.

WPAdBlock

For transparency and sometimes, legal reasons, you want to explicitly note that a block is advertisement. In this case, you can use schema.org/WPAdBlock. Please note, this block makes it very easy for browser plugins to remove adverts from sites.
  1. <aside role="note" itemscope itemtype="http://schema.org/WPAdBlock">
  2.     <meta itemprop="name" content="Adsense for {{pagetitle}}"/>
  3.     <meta itemprop="description" content="Support {{site_name}} by using Adsense and other advertisements."/>
  4.     <div>Your AD block</div>
  5. </aside>
The schema.org/WPFooter item type defines a footer for a document or a section. A footer typically contains information about the author of the section, copyright data, contact, sitemap or links to related documents. This HTML5 Element is not restricted to use one <footer> element per site. You can use multiple footers, each of which will then become the <footer>for that section of the webpage, which can be a <section> or an <article>. In the following example you can see a <footer> for the hole document of your page by using item property name, description, keywords, copyrightYear and copyrightHolder:
  1. <footer role="contentinfo" itemscope itemtype="http://schema.org/WPFooter">
  2.     <meta itemprop="name" content="Webpage footer for {{pagetitle}}"/>
  3.     <meta itemprop="description" content="Information about imprint and data protection"/>
  4.     <meta itemprop="keywords" content="Imprint, Data Protection, Copyright Data, QR-Code"/>
  5.     <meta itemprop="copyrightYear" content="2015"/>
  6.     <meta itemprop="copyrightHolder" content="{{sitename}}"/>
  7.  
  8.     <!-- Links to Imprint etc. -->
  9.     <div>Imprint</div>
  10.  
  11.     <!-- QR-Code (e.g. LudwigQRCode for Modx) -->
  12.     <div>QR-Code</div>
  13. </footer>

Rich Structure Validators

There are a lot of testing and validation tools for HTML5, structured data markup and rich snippets, on the web. The most imporant are these ones, which validate microformats and schema.org markup in microdata, RDFa and JSON-LD. Here you can find a list of the (for me) most important validators:
Bing Markup Validator
I never used this validator, because you need to have an Microsoft-Account. If you like this strict login policy, you can validate various formats like Microdata, hCard or hCalendar.
Google's Mobile-Friendly Testing Tool
Test if your website has a mobile-friendly design.
Google's Structured Data Testing Tool
You can use the structured data testing tool to test authorship markup and preview how rich snippets will appear in search results.
Linter Structured Data
The Structured Data Linter is a tool aiding webmasters and web developers to verify the structured data present in their HTML pages. Search engines use structured data to understand webpages more accurately and to present enhanced search results.
Nu Markup Validation Service
W3C has launched the Nu Markup Validation Service. From a Semantic Web point of view it is important to note that the default setting of the validator validates HTML5 with RDFa1.1. Lite and with microdata.
Open Graph Object debugger from Facebook
You need to login on Facebook but it gives you a good overview about your Open Graph Data.
Rich Pins validator
Rich Pins, also called as Super Pins or Enhanced Pins is a service of Pinterest. These pins show viewers more information than usual pins. Rich Pins are based on Open Graph and currently support Place, Article, Product, Recipe and Film Pins. In order to use this validator, Pinterest requires an approval process.
Twitter Card Validator
Twitter card validator is looking for Open Graph and Twitter Card properties on your page. Before your page shows an "tweet", you must first have your domain approved as well as implemented Social Meta tags on your page.
Yandex structured data validator
The Yandex Microformat validator verifies additional data types and fields to ensure that microformats comply with the Yandex service requirements.

Social Meta Tags

Social Meta Tags allows us to optimize our page for sharing Google+, Twitter, Facebook and Pinerest. The idea is to define the page title, description or an image(s) for sharing in social networks.

Open Graph

One of the most important social API's is called Open Graph API, that is adopted by Facebook. You can turn your web pages into social graph objects by using the Open Graph protocol. Furthermore, Open Graph is using RDFa, which means that you have to place the following <meta> tags in the <head> of your web page:
  1. <meta property="og:site_name" content="{{sitename}}" />
  2. <meta property="og:title" content="{{pagetitle}}" />
  3. <meta property="og:type" content="article"/>
  4. <meta property="og:url" content="LINK_TO_YOUR_PAGE"/>
  5. <meta property="og:image" content="YOUR ARTICLE IMAGE" />
  6. <meta property="og:description" content="{{introtext}}" />
Next to this, you can also use the Open Graph article type method, which includes further information about your article. The article object type has several possible values but the mostcommon ones are these:
  1. <meta property="article:author" content="Max Mustermann"/>
  2. <meta property="article:published_time" content="{{publishedon}}"/>
  3. <meta property="article:modified_time" content="{{editedon}}"/>
  4. <meta property="article:section" content="Microformats"/>
  5. <meta property="article:tag" content="schema.org,html5,blog,microdata" />

Twitter Cards

Twitter's “Twitter Cards” API has the same idea like Open Graph: It allows tweets to link to your site with enhanced content. Twitter Cards are used to attach rich photos, videos or media experience to Tweets. Add the following lines to your webpage, and users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to all of their followers.
  1. <meta name="twitter:card" content="summary"/>
  2. <meta name="twitter:site" content="@publisher_handle" />
  3. <meta name="twitter:creator" content="@author_handle" />
  4. <meta name="twitter:title" content="{{pagetitle}}" />

Summary

The summary is missing. I will finish it in the next days.

HTML5 tags vs. schema.org

HTML 5 TagSchemaSchema Hierarchy
bodyhttp://schema.org/WebPageThing > CreativeWork > WebPage
headerhttp://schema.org/WPHeaderThing > CreativeWork > WebPageElement > WPHeader
navhttp://schema.org/SiteNavigationElementThing > CreativeWork > WebPageElement > SiteNavigationElement
mainhttp://schema.org/BlogThing > CreativeWork > Blog
articlehttp://schema.org/BlogPostingThing > CreativeWork > Article > BlogPosting
figurehttp://schema.org/ImageObjectThing > CreativeWork > MediaObject > ImageObject
figure (gallery)http://schema.org/ImageGalleryThing > CreativeWork > WebPage > CollectionPage > ImageGallery
videohttp://schema.org/VideoObjectThing > CreativeWork > MediaObject > VideoObject
asidehttp://schema.org/WPSideBarThing > CreativeWork > WebPageElement > WPSideBar
footerhttp://schema.org/WPFooterThing > CreativeWork > WebPageElement > WPSideFooter
MarkupSchemaSchema Hierarchy
Commentshttp://schema.org/UserCommentsThing > Event > UserInteraction > UserComments
Author informationhttp://data-vocabulary.org/PersonThing > Event > UserInteraction > UserComments

0 коммент.:

Отправить комментарий