SchemaOrg Microdata

Attribute

itemscope

Ein Element mit einem itemscope-Attribut definiert den Beginn eines neuen Objektes, mit in der Regel einen zu definierenden Typ (itemtype), welches Eigenschaften (itemprop) und auch Kind-Elemente haben kann. Das itemscope-Attribut ist vom Typ Boolean und somit unter HTML5 ein Attribut ohne Wert.

<article itemscope>...</article>

itemtype

Das itemtype-Attribut ist immer eine gültige absolute URL, es definiert das angewandte Schema welches zugrunde liegt, ist kein itemtype definiert ist keine Zuordnung der Eigenschaften (itemprop) möglich und jedes weitere auszeichnen des Textes ist überflüssig, genau so ist das hinzufügen eines itemtype überflüssig wenn kein itemscope im selben Element gesetzt ist. Der Attribut-Wert kann auch mehrere Werte enthalten diese sind dann durch Space zu trennen.
z.B. Article, Person, Organization

<article itemtype="http://schema.org/Article">...</article>

itemprop

Das itemprop-Attribut identifiziert beim Hinzufügen zu einem Element eine Eigenschaften des durch den itemscope definierten Objektes, des vom itemtype definierten Types. Jedes Objekt hat einen definierten Satz von Eigenschaften, die natürlich nicht alle Pflicht-Attribute sind, allerdings setzt Google einige Attribute voraus damit ein Objekt als Gültig erkannt wird.
Die Wertezuweisung geschieht über unterschiedliche Wege:
innerhalb des Tags

<span itemprop="name">Udo Schmal</span>

als Referenz durch ein HTML-Attribut

<a itemprop="url" href="https://www.gocher.me/SchemaOrg">SchemaOrg</a>

bei Meta-Tags durch Zuweisung des Wertes an das Attribut content, Metatags dürfen unter HTML5 auch im Body gesetzt werden sind allerdings nur mit itemprop und content Attribut gültig.

<meta itemprop="datePublished" content="2017-10-11" />

itemref

Elemente mit einem itemscope-Attribut kann man auch ein itemref-Attribut hinzufügen, dieses ist ein Zeiger auf ein Objekt was dem aktuellen hinzugefügt werden soll, im Attribut können mehrere Referenzen angegeben werden, mehrere Referenzen werden durch Space getrennt
z.B. Author zu einem Artikel der außerhalb des Artikels plaziert wurde

<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author">...</article>
<div itemprop="author" itemscope itemtype="https://schema.org/Person" id="author">...</div>

itemid

Elemente mit einem itemscope-Attribut kann man auch ein itemid-Attribut hinzufügen, um es mit einer globalen Kennung zu versehen, damit es als Ziel einer Verknüpfung / Beziehung dienen kann.
z.B. zur Referenzierung

<article>
  <link itemprop="author" href="#udo.schmal" />
...</article>
<div id="udo.schmal" itemscope itemtype="http://schema.org/Person" itemid="#udo.schmal">...</div>

Hilfsmittel bei der Erstellung und Überprüfung

1. Für Artikel, Buchrezensionen, Filme, lokale Unternehmen, Produkte, Restaurants, Software, TV-Folgen, Veranstultungen stellt Google eine Erstellungshilfe, eine Strukturierte Daten: Markup-Hilfe, zur Verfügung.
2. Eine Überprüfung der SchemaOrg Microdata ist mit Hilfe von Googles Schema Markup Validator einfach möglich.
3. Zur Überprüfung der Website stellt Google den Test für Rich-Suchergebnisse eine Übersicht der auf der Website gefundenen SchemaOrg Objekte zur Verfügung.
4. Eine Übersicht der Möglichkeiten und Anleitungen findet man bei Google in der Search Gallery

Beispiele

Breadcrumbs

<ul class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li>     <a href="/" title="home"><span class="accessibility">home</span></a>   </li>
  <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">     <a href="/news/" itemscope itemtype="http://schema.org/Thing" itemprop="item">       <span itemprop="name">News</span></a>     
    <meta itemprop="position" content="1" />
   </li>
  <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">     <a href="/news/aktuelle-news/" itemscope itemtype="http://schema.org/Thing" itemprop="item">       <span itemprop="name">News des Tages</span></a>     
    <meta itemprop="position" content="2" />
   </li>
  <li itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">     <a href="/news/aktuelle-news/derTitel/" itemscope itemtype="http://schema.org/Thing" itemprop="item">       <span itemprop="name">Titel einer Meldung</span></a>     
    <meta itemprop="position" content="3" />
   </li>
</ul>

Achtung: home nicht mit SchemaOrg auszeichnen da es sonst zusätzlich in der Breadcrumb-List bei Google erscheint!
Rein SEO-technisch ist der Begriff home als Titel der Startseite natürlich Schwachsinn und sollte nie genutzt werden.
Für das Beispiel würde es unter dem Titel im Google-Suchergebnis-Titel folgender Maßen aussehen:
https://www.gocher.me > News > News des Tages > Titel einer Meldung

Article

Bei einem Artikel kann und sollte man wenn möglich genauer differenzieren zwischen
z.B. NewsArticle, Report, ScholarlyArticle, SocialMediaPosting, TechArticle, …

<article itemscope itemtype="http://schema.org/Article">
  <div class="hidden" itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <meta itemprop="name" content="gocher.me - Udo Schmal" />
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject"><img src="https://www.gocher.me/icon~100x100.png" alt="Logo" />
      <meta itemprop="url" content="https://www.gocher.me/icon~100x100.png" />
      <meta itemprop="width" content="100" />
      <meta itemprop="height" content="100" />
    </div>
  </div>
  <h1 itemprop="headline name">Internet mal anders</h1>
  <div itemprop="articleBody">
    <div itemprop="image" itemscope itemtype="http://schema.org/ImageObject"><img alt="Programmierung" src="/media/Entwicklung.png" height="223" width="190" title="Programmierung" itemprop="image" />
      <meta itemprop="url" content="http3://www.gocher.me/media/Entwicklung.png" />
      <meta itemprop="width" content="190" />
      <meta itemprop="height" content="223" />
    </div>
    <section>
      <h3>Entwicklung</h3>
      <p>Die hier aufgeführten Routinen...</p>
    </section>
    <section>
      <h3>Administration</h3>
      <p>Hier finden Sie Themen zur Server...</p>
    </section>
    <p>Autor:       <span itemprop="author" itemscope itemtype="http://schema.org/Person">         <a class="author" href="https://plus.google.com/107378996518617284564?rel=author" title="Google+ Author" target="_blank" rel="author">           <span itemprop="name">Udo Schmal</span>         </a>       </span>       
      <link itemprop="author" href="#udo.schmal" />
,       <span class="nowrap">veröffentlicht: <time datetime="2011-12-31" itemprop="datePublished">31.12.2011</time></span>       <span class="nowrap">letzte Änderung: <time datetime="2017-07-03" itemprop="dateModified">03.07.2017</time></span>      </p>
  </div>
</article>
<div itemscope itemtype="http://schema.org/Person" itemid="#udo.schmal">
  <div itemscope itemtype="http://schema.org/ImageObject"><img height="204" width="150" src="/media/udo.jpg" alt="Udo Schmal" title="Udo Schmal" itemprop="image" />
    <meta itemprop="url" content="https://www.gocher.me/media/udo.jpg" />
    <meta itemprop="width" content="150" />
    <meta itemprop="height" content="204" />
  </div>
  <p><strong><span itemprop="name">Udo Schmal</span></strong><br />     <span itemprop="jobtitle">Softwareentwickler</span><br />     <span itemprop="homeLocation" itemscope itemtype="http://schema.org/PostalAddress">       <span itemprop="streetAddress">Ellerndiek 26</span><br />       <span itemprop="postalCode">24837 </span> <span itemprop="addressLocality">Schleswig</span><br />       <span itemprop="addressRegion">Schleswig-Holstein</span><br />       <span itemprop="addressCountry">Germany</span>     </span><br />     <br />     <a href="https://www.gocher.me" itemprop="url">www.gocher.me</a><br />     <a href="mailto:udo.schmal@t-online.de" itemprop="email">udo.schmal@t-online.de</a>   </p>
</div>

Event

<section itemscope itemtype="http://schema.org/Event">
  <h3 itemprop="name">Lazarus / Free Pascal Treffen</h3>
  <p itemprop="description">Diese Jahr findet das Lazarus / Free Pascal Treffen in Berlin?</p>
  <p>Veranstaltungs Termin: <time itemprop="startDate" datetime="2017-09-03T19:00">Fr. 03.09.2017 um 19:00 Uhr</time> statt</p>
</section>