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 www.schema.org zur Verfügung.

Bessere Darstellung in den Suchergebnissen von Google

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!

<body itemscope itemtype="http://schema.org/WebPage">
  <ul class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
    <li class="breadcrumb-item" itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      <a class="breadcrumb" href="/" title="home" id="breadcrumbs-home" itemprop="item">
        &#xf015;<span class="accessibility" itemprop="name">home</span>
        <meta itemprop="position" content="1" />
      </a>
    </li>
    <li class="breadcrumb-item" itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      &raquo;<a class="breadcrumb" href="/Programmierung" title="Programmierung" itemprop="item">
        <span itemprop="name">Programmierung</span>
        <meta itemprop="position" content="2" />
      </a>
    </li>
    <li class="breadcrumb-item" itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      &raquo;<a class="breadcrumb" href="/HTML5" title="HTML5" itemprop="item">
        <span itemprop="name">HTML5</span>
        <meta itemprop="position" content="3" />
      </a>
    </li>
    <li class="breadcrumb-item" itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
      &raquo;<a class="breadcrumb" href="/video" title="video.js" itemprop="item">
        <span itemprop="name">video.js</span>
        <meta itemprop="position" content="4" />
      </a>
    </li>
  </ul>
  <div class="video" itemscope itemprop="video" itemtype="http://schema.org/VideoObject">
    <video width="640" height="360" data-setup="{}" class="video-js vjs-default-skin vjs-big-play-centered" poster="http://www.gocher.me/media/video/sammy.jpg" preload="auto" controls="true" id="example_video_1">
      <source type="video/mp4" src="/media/video/sammy.mp4" />
      <source type="video/webm" src="/media/video/sammy.webm" />
      <source type="video/ogg" src="/media/video/sammy.ogv" />
      <track label="Deutsch" srclang="de" src="/media/video/sammy.de.vtt" kind="captions" />
      <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
    </video>
    <meta content="http://www.gocher.me/media/video/sammy.jpg" itemprop="thumbnailUrl" />
  </div>
</body>

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 … >
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" … >
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="http://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">
<div itemprop="author" itemscope itemtype="https://schema.org/Person" id="author">
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
<link itemprop="author" href="#udo.schmal" />
<div id="udo.schmal" itemscope itemtype="http://schema.org/Person" itemid="#udo.schmal">

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 Test Tool für strukturierte Daten einfach möglich.
  3. Zur Überprüfung der Website stellt Google in den Google Webmaster Tools 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
Screenshots der Google Tools

Beispiele

Breadcrumbs

<ul class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
  <li>
    <a href="/" title="home">
      {Home-Symbol}<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!
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="http://www.gocher.me/icon~100x100.png" alt="Logo" />
      <meta itemprop="url" content="http://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="http://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="http://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">
        Olvengraben 41
      </span>
      <br />
      <span itemprop="postalCode">
        47608
      </span>
      <span itemprop="addressLocality">
        Geldern
      </span>
      <br />
      <span itemprop="addressRegion">
        Nordrhein-Westfalen
      </span>
      <br />
      <span itemprop="addressCountry">
        Germany
      </span>
    </span>
    <br />
    <br />
    <a href="http://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>

Autor: , veröffentlicht: , letzte Änderung:

Bildrechte

Alle auf dieser Website veröffentlichen Bilder dürfen ausschließlich durch Freunde privat genutzt werden, weitere Infos siehe unter Impressum!

Kontakt

Copyright / License of sources

Copyright (c) 2007-2017, Udo Schmal <udo.schmal@t-online.de>

Permission to use, copy, modify, and/or distribute the software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

Service Infos

CMS Info
UDOs Webserver

0.3.1.24

All in one Webserver

Udo Schmal

Sa, 21 Okt 2017 00:30:10
Development Info
Lazarus LCL 1.9.0.0

Free Pascal FPC 3.1.1

OS:Win64, CPU:x86_64
Hardware Info
Precision WorkStation T3500

Intel(R) Xeon(R) CPU W3530 @ 2.80GHz

x86_64, 1 physical CPU(s), 4 Core(s), 8 logical CPU(s), 2800 MHz