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 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!
<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">
<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">
<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">
<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">
»<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="https://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="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>
<meta content="https://www.gocher.me/media/video/sammy.jpg" itemprop="thumbnailUrl" />
</div>
</body>
<article itemscope>...</article>
<article itemtype="http://schema.org/Article">...</arzicle>
<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">
<article itemscope itemtype="http://schema.org/NewsArticle" itemref="author">...</article>
<div itemprop="author" itemscope itemtype="https://schema.org/Person" id="author">...</div>
<article><link itemprop="author" href="#udo.schmal" />...</article>
<div id="udo.schmal" itemscope itemtype="http://schema.org/Person" itemid="#udo.schmal">...</div>
<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
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>
<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>