
SchemaOrg Microdata

SchemaOrg Microdata

Der Einsatz von Auszeichnungen zur Strukturierung von Daten ist vor allem von Vorteil für Suchmaschinen, entwickelt von Google, Bing und Yahoo ist gerade bei diesen mit Erfolg zu rechnen. Für eine große Anzahl von Inhalten stehen Schemata zur Verfügung. Eine ausführliche Beschreibung zur Nutzung steht auf schema.org("https://schema.org") zur Verfügung.

Bessere Darstellung in den Suchergebnissen von Google

Beim Einsatz von Schemata ist darauf zu achten, das gerade Masken zur Erfassung der Daten, die Bestandteile den speziellen Properties angepasst werden. Einzelne Elemente wie z.B. dem itemprop breadcrumb kann man auch direkt bei der Realisierung der Webpage berücksichtigen! Werden itemproperties eingesetzt, sollte natürlich auch der itemtype, bei einer Webpage wäre das http://schema.org/WebPage, im kapselnden Element, hier das html-Tag, gesetzt/definiert werden, falls auch innerhalb des head Informationen enthalten sind, sonst reicht auch die Definition im body-Tag!
&lt;body itemscope itemtype=&quot;http://schema.org/WebPage&quot;&gt;
  &lt;ul class=&quot;breadcrumb-list&quot; itemscope itemtype=&quot;http://schema.org/BreadcrumbList&quot;&gt;
    &lt;li class=&quot;breadcrumb-item&quot; itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
      &lt;a class=&quot;breadcrumb&quot; href=&quot;/&quot; title=&quot;home&quot; id=&quot;breadcrumbs-home&quot; itemprop=&quot;item&quot;&gt;
        &lt;span class=&quot;accessibility&quot; itemprop=&quot;name&quot;&gt;home&lt;/span&gt;
        &lt;meta itemprop=&quot;position&quot; content=&quot;1&quot; /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;breadcrumb-item&quot; itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
      &lt;a class=&quot;breadcrumb&quot; href=&quot;/Programmierung&quot; title=&quot;Programmierung&quot; itemprop=&quot;item&quot;&gt;
        &lt;span itemprop=&quot;name&quot;&gt;Programmierung&lt;/span&gt;
        &lt;meta itemprop=&quot;position&quot; content=&quot;2&quot; /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;breadcrumb-item&quot; itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
      &lt;a class=&quot;breadcrumb&quot; href=&quot;/HTML5&quot; title=&quot;HTML5&quot; itemprop=&quot;item&quot;&gt;
        &lt;span itemprop=&quot;name&quot;&gt;HTML5&lt;/span&gt;
        &lt;meta itemprop=&quot;position&quot; content=&quot;3&quot; /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
    &lt;li class=&quot;breadcrumb-item&quot; itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
      »&lt;a class=&quot;breadcrumb&quot; href=&quot;/video&quot; title=&quot;video.js&quot; itemprop=&quot;item&quot;&gt;
        &lt;span itemprop=&quot;name&quot;&gt;video.js&lt;/span&gt;
        &lt;meta itemprop=&quot;position&quot; content=&quot;4&quot; /&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;div class=&quot;video&quot; itemscope itemprop=&quot;video&quot; itemtype=&quot;http://schema.org/VideoObject&quot;&gt;
    &lt;video width=&quot;640&quot; height=&quot;360&quot; data-setup=&quot;{}&quot; class=&quot;video-js vjs-default-skin vjs-big-play-centered&quot; poster=&quot;https://www.gocher.me/media/video/sammy.jpg&quot; preload=&quot;auto&quot; controls=&quot;true&quot; id=&quot;example_video_1&quot;&gt;
      &lt;source type=&quot;video/mp4&quot; src=&quot;/media/video/sammy.mp4&quot; /&gt;
      &lt;source type=&quot;video/webm&quot; src=&quot;/media/video/sammy.webm&quot; /&gt;
      &lt;source type=&quot;video/ogg&quot; src=&quot;/media/video/sammy.ogv&quot; /&gt;
      &lt;track label=&quot;Deutsch&quot; srclang=&quot;de&quot; src=&quot;/media/video/sammy.de.vtt&quot; kind=&quot;captions&quot; /&gt;
      &lt;p class=&quot;vjs-no-js&quot;&gt;To view this video please enable JavaScript, and consider upgrading to a web browser that &lt;a href=&quot;https://videojs.com/html5-video-support/&quot; target=&quot;_blank&quot;&gt;supports HTML5 video&lt;/a&gt;&lt;/p&gt;
    &lt;/video&gt;
    &lt;meta content=&quot;https://www.gocher.me/media/video/sammy.jpg&quot; itemprop=&quot;thumbnailUrl&quot; /&gt;
  &lt;/div&gt;
&lt;/body&gt;
Attribute

	1. itemscope
	2. 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.            &lt;article itemscope&gt;...&lt;/article&gt;
	3. itemtype
	4. 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            &lt;article itemtype=&quot;http://schema.org/Article&quot;&gt;...&lt;/arzicle&gt;
	5. itemprop
	6. 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
&lt;span itemprop=&quot;name&quot;&gt;Udo Schmal&lt;/span&gt;  als Referenz durch ein HTML-Attribut
&lt;a itemprop=&quot;url&quot; href=&quot;https://www.gocher.me/SchemaOrg&quot;&gt;SchemaOrg&lt;/a&gt;  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.            &lt;meta itemprop=&quot;datePublished&quot; content=&quot;2017-10-11&quot;&gt;
	7. itemref
	8. 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            &lt;article itemscope itemtype=&quot;http://schema.org/NewsArticle&quot; itemref=&quot;author&quot;&gt;...&lt;/article&gt;
&lt;div itemprop=&quot;author&quot; itemscope itemtype=&quot;https://schema.org/Person&quot; id=&quot;author&quot;&gt;...&lt;/div&gt;
	9. itemid
	10. 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            &lt;article&gt;&lt;link itemprop=&quot;author&quot; href=&quot;#udo.schmal&quot; /&gt;...&lt;/article&gt;
&lt;div id=&quot;udo.schmal&quot; itemscope itemtype=&quot;http://schema.org/Person&quot; itemid=&quot;#udo.schmal&quot;&gt;...&lt;/div&gt;

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("https://www.google.com/webmasters/markup-helper/?hl=de"), zur Verfügung.
	2. Eine Überprüfung der SchemaOrg Microdata ist mit Hilfe von Googles Schema Markup Validator("https://validator.schema.org/") einfach möglich.
	3. Zur Überprüfung der Website stellt Google den Test für Rich-Suchergebnisse("https://search.google.com/test/rich-results?hl=de") 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("https://developers.google.com/search/docs/appearance/structured-data/search-gallery")
Screenshots der Google Tools
		* 
		* 
		* 
		* 
		* 
		* 

Beispiele

Breadcrumbs
&lt;ul class=&quot;breadcrumb-list&quot; itemscope itemtype=&quot;http://schema.org/BreadcrumbList&quot;&gt;
  &lt;li&gt;
    &lt;a href=&quot;/&quot; title=&quot;home&quot;&gt;&lt;span class=&quot;accessibility&quot;&gt;home&lt;/span&gt;&lt;/a&gt;
  &lt;/li&gt;
  &lt;li itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
    &lt;a href=&quot;/news/&quot; itemscope itemtype=&quot;http://schema.org/Thing&quot; itemprop=&quot;item&quot;&gt;
      &lt;span itemprop=&quot;name&quot;&gt;News&lt;/span&gt;&lt;/a&gt;
    &lt;meta itemprop=&quot;position&quot; content=&quot;1&quot; /&gt;
  &lt;/li&gt;
  &lt;li itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
    &lt;a href=&quot;/news/aktuelle-news/&quot; itemscope itemtype=&quot;http://schema.org/Thing&quot; itemprop=&quot;item&quot;&gt;
      &lt;span itemprop=&quot;name&quot;&gt;News des Tages&lt;/span&gt;&lt;/a&gt;
    &lt;meta itemprop=&quot;position&quot; content=&quot;2&quot; /&gt;
  &lt;/li&gt;
  &lt;li itemscope itemtype=&quot;http://schema.org/ListItem&quot; itemprop=&quot;itemListElement&quot;&gt;
    &lt;a href=&quot;/news/aktuelle-news/derTitel/&quot; itemscope itemtype=&quot;http://schema.org/Thing&quot; itemprop=&quot;item&quot;&gt;
      &lt;span itemprop=&quot;name&quot;&gt;Titel einer Meldung&lt;/span&gt;&lt;/a&gt;
    &lt;meta itemprop=&quot;position&quot; content=&quot;3&quot; /&gt;
  &lt;/li&gt;
&lt;/ul&gt;
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 &gt; News &gt; News des Tages &gt; Titel einer Meldung

---------------------------------------------

Article

Bei einem Artikel kann und sollte man wenn möglich genauer differenzieren zwischen
z.B. NewsArticle, Report, ScholarlyArticle, SocialMediaPosting, TechArticle, …
&lt;article itemscope itemtype=&quot;http://schema.org/Article&quot;&gt;
  &lt;div class=&quot;hidden&quot; itemprop=&quot;publisher&quot; itemscope itemtype=&quot;https://schema.org/Organization&quot;&gt;
    &lt;meta itemprop=&quot;name&quot; content=&quot;gocher.me - Udo Schmal&quot; /&gt;
    &lt;div itemprop=&quot;logo&quot; itemscope itemtype=&quot;https://schema.org/ImageObject&quot;&gt;
      &lt;img src=&quot;https://www.gocher.me/icon~100x100.png&quot; alt=&quot;Logo&quot; /&gt;
      &lt;meta itemprop=&quot;url&quot; content=&quot;https://www.gocher.me/icon~100x100.png&quot; /&gt;
      &lt;meta itemprop=&quot;width&quot; content=&quot;100&quot; /&gt;
      &lt;meta itemprop=&quot;height&quot; content=&quot;100&quot; /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;h1 itemprop=&quot;headline name&quot;&gt;Internet mal anders&lt;/h1&gt;
  &lt;div itemprop=&quot;articleBody&quot;&gt;
    &lt;div itemprop=&quot;image&quot; itemscope itemtype=&quot;http://schema.org/ImageObject&quot;&gt;
      &lt;img alt=&quot;Programmierung&quot; src=&quot;/media/Entwicklung.png&quot; height=&quot;223&quot; width=&quot;190&quot; title=&quot;Programmierung&quot; itemprop=&quot;image&quot; /&gt;
      &lt;meta itemprop=&quot;url&quot; content=&quot;http3://www.gocher.me/media/Entwicklung.png&quot; /&gt;
      &lt;meta itemprop=&quot;width&quot; content=&quot;190&quot; /&gt;
      &lt;meta itemprop=&quot;height&quot; content=&quot;223&quot; /&gt;
    &lt;/div&gt;
    &lt;section&gt;
      &lt;h3&gt;Entwicklung&lt;/h3&gt;
      &lt;p&gt;Die hier aufgeführten Routinen...&lt;/p&gt;
    &lt;/section&gt;
    &lt;section&gt;
      &lt;h3&gt;Administration&lt;/h3&gt;
      &lt;p&gt;Hier finden Sie Themen zur Server...&lt;/p&gt;
    &lt;/section&gt;
    &lt;p&gt;Autor:
      &lt;span itemprop=&quot;author&quot; itemscope itemtype=&quot;http://schema.org/Person&quot;&gt;
        &lt;a class=&quot;author&quot; href=&quot;https://plus.google.com/107378996518617284564?rel=author&quot; title=&quot;Google+ Author&quot; target=&quot;_blank&quot; rel=&quot;author&quot;&gt;
          &lt;span itemprop=&quot;name&quot;&gt;Udo Schmal&lt;/span&gt;
        &lt;/a&gt;
      &lt;/span&gt;
      &lt;link itemprop=&quot;author&quot; href=&quot;#udo.schmal&quot; /&gt;,
      &lt;span class=&quot;nowrap&quot;&gt;veröffentlicht: &lt;time datetime=&quot;2011-12-31&quot; itemprop=&quot;datePublished&quot;&gt;31.12.2011&lt;/time&gt;&lt;/span&gt;
      &lt;span class=&quot;nowrap&quot;&gt;letzte Änderung: &lt;time datetime=&quot;2017-07-03&quot; itemprop=&quot;dateModified&quot;&gt;03.07.2017&lt;/time&gt;&lt;/span&gt;
     &lt;/p&gt;
  &lt;/div&gt;
&lt;/article&gt;

&lt;div itemscope itemtype=&quot;http://schema.org/Person&quot; itemid=&quot;#udo.schmal&quot;&gt;
  &lt;div itemscope itemtype=&quot;http://schema.org/ImageObject&quot;&gt;
    &lt;img height=&quot;204&quot; width=&quot;150&quot; src=&quot;/media/udo.jpg&quot; alt=&quot;Udo Schmal&quot; title=&quot;Udo Schmal&quot; itemprop=&quot;image&quot; /&gt;
    &lt;meta itemprop=&quot;url&quot; content=&quot;https://www.gocher.me/media/udo.jpg&quot; /&gt;
    &lt;meta itemprop=&quot;width&quot; content=&quot;150&quot; /&gt;
    &lt;meta itemprop=&quot;height&quot; content=&quot;204&quot; /&gt;
  &lt;/div&gt;
  &lt;p&gt;&lt;strong&gt;&lt;span itemprop=&quot;name&quot;&gt;Udo Schmal&lt;/span&gt;&lt;/strong&gt;&lt;br /&gt;
    &lt;span itemprop=&quot;jobtitle&quot;&gt;Softwareentwickler&lt;/span&gt;&lt;br /&gt;
    &lt;span itemprop=&quot;homeLocation&quot; itemscope itemtype=&quot;http://schema.org/PostalAddress&quot;&gt;
      &lt;span itemprop=&quot;streetAddress&quot;&gt;Ellerndiek 26&lt;/span&gt;&lt;br /&gt;
      &lt;span itemprop=&quot;postalCode&quot;&gt;24837 &lt;/span&gt; &lt;span itemprop=&quot;addressLocality&quot;&gt;Schleswig&lt;/span&gt;&lt;br /&gt;
      &lt;span itemprop=&quot;addressRegion&quot;&gt;Schleswig-Holstein&lt;/span&gt;&lt;br /&gt;
      &lt;span itemprop=&quot;addressCountry&quot;&gt;Germany&lt;/span&gt;
    &lt;/span&gt;&lt;br /&gt;
    &lt;br /&gt;
    &lt;a href=&quot;https://www.gocher.me&quot; itemprop=&quot;url&quot;&gt;www.gocher.me&lt;/a&gt;&lt;br /&gt;
    &lt;a href=&quot;mailto:udo.schmal@t-online.de&quot; itemprop=&quot;email&quot;&gt;udo.schmal@t-online.de&lt;/a&gt;
  &lt;/p&gt;
&lt;/div&gt;
---------------------------------------------

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