Erste Schritte mit schema.org mithilfe von Mikrodaten

Die meisten Webmaster sind mit HTML-Tags auf ihren Seiten vertraut. Normalerweise teilen HTML-Tags dem Browser mit, wie die im Tag enthaltenen Informationen angezeigt werden sollen. Zum Beispiel <h1>Avatar</h1>sagt dem Browser , den Textstring „Avatar“ in einer Überschrift 1 - Format angezeigt werden soll . Das HTML-Tag enthält jedoch keine Informationen darüber, was diese Textzeichenfolge bedeutet - "Avatar" könnte sich auf den äußerst erfolgreichen 3D-Film oder auf eine Art Profilbild beziehen - und dies kann die Suche erschweren Engines, um relevante Inhalte einem Benutzer intelligent anzuzeigen.

Schema.org bietet eine Sammlung von gemeinsam genutzten Vokabularen, mit denen Webmaster ihre Seiten so markieren können, dass sie von den wichtigsten Suchmaschinen verstanden werden: Google, Microsoft, Yandex und Yahoo!

Sie verwenden das Vokabular von schema.org zusammen mit den Formaten Mikrodaten , RDFa oder JSON-LD , um Informationen zu Ihrem Webinhalt hinzuzufügen. Dieses Handbuch hilft Ihnen dabei, sich mit Microdata und schema.org vertraut zu machen, damit Sie Ihren Webseiten Markups hinzufügen können.

Obwohl sich dieses Handbuch auf Mikrodaten konzentriert , zeigen die meisten Beispiele auf der Website schema.org auch Beispiele in RDFa und JSON-LD. Die hier vorgestellten Grundideen (Typen, Eigenschaften usw.) sind über Mikrodaten hinaus relevant. Schauen Sie sich die Beispiele an, um zu sehen, wie die Details verglichen werden.

  1. So markieren Sie Ihre Inhalte mithilfe von Mikrodaten
    1. Warum Mikrodaten verwenden?
    2. itemscope und itemtype
    3. itemprop
    4. Eingebettete Elemente
  2. Verwenden des Vokabulars von schema.org
    1. schema.org Typen und Eigenschaften
    2. Erwartete Typen, Texte und URLs
    3. Testen Sie Ihr Markup
  3. Erweitertes Thema: Maschinenverständliche Versionen von Informationen
    1. Daten, Zeiten und Dauer
    2. Aufzählungen und kanonische Referenzen
    3. Fehlende / implizite Informationen
    4. Schema.org erweitern

1. So markieren Sie Ihre Inhalte mithilfe von Mikrodaten

1a. Warum Mikrodaten verwenden?

Ihren Webseiten liegt eine Bedeutung zugrunde, die die Benutzer beim Lesen der Webseiten verstehen. Suchmaschinen haben jedoch ein begrenztes Verständnis dafür, was auf diesen Seiten diskutiert wird. Durch Hinzufügen zusätzlicher Tags zum HTML-Code Ihrer Webseiten - Tags mit der Aufschrift "Hey Suchmaschine, diese Informationen beschreiben diesen bestimmten Film, Ort, diese Person oder dieses Video" - können Sie Suchmaschinen und anderen Anwendungen helfen, Ihren Inhalt besser zu verstehen und zeigen Sie es auf nützliche und relevante Weise an. Mikrodaten sind eine Reihe von Tags, die mit HTML5 eingeführt wurden und die Ihnen dies ermöglichen.

1b. itemscope und itemtype

Beginnen wir mit einem konkreten Beispiel. Stellen Sie sich vor, Sie haben eine Seite über den Film Avatar - eine Seite mit einem Link zu einem Filmtrailer, Informationen über den Regisseur usw. Ihr HTML-Code könnte ungefähr so ??aussehen:

<div>
 <h1> Avatar </ h1>
 <span> Regie: James Cameron (geb. 16. August 1954) </ span>
 <span> Science Fiction </ span>
 <a href="../movies/avatar-theatrical-trailer.html"> Trailer </a>
</ div>

Identifizieren Sie zunächst den Abschnitt der Seite, der sich "mit" dem Film Avatar befasst. Fügen Sie dazu das Element itemcope zum HTML-Tag hinzu, das Informationen zum Element enthält, wie folgt:

<div itemscope >
  <h1> Avatar </ h1>
  <span> Regie: James Cameron (geb. 16. August 1954) </ span>
  <span> Science Fiction </ span>
  <a href="../movies/avatar-theatrical-trailer.html"> Trailer </a>
</ div>

Durch Hinzufügen geben itemscopeSie an, dass sich der im <div>...</div>Block enthaltene HTML-Code auf ein bestimmtes Element bezieht.

Es ist jedoch nicht allzu hilfreich anzugeben, dass ein Element besprochen wird, ohne anzugeben, um welche Art von Element es sich handelt. Sie können den Elementtyp mithilfe des itemtypeAttributs unmittelbar nach dem angeben itemscope.

<div itemscope itemtype = "http://schema.org/Movie" >
  <h1> Avatar </ h1>
  <span> Regie: James Cameron (geb. 16. August 1954) </ span>
  <span> Science Fiction </ span>
  <a href="../movies/avatar-theatrical-trailer.html"> Trailer </a>
</ div>

Dies gibt an, dass das in div enthaltene Element tatsächlich ein Film ist, wie in der Typhierarchie von schema.org definiert. In diesem Fall werden Elementtypen als URLs bereitgestellt http://schema.org/Movie.

Zurück nach oben

1c. itemprop

Welche zusätzlichen Informationen können wir Suchmaschinen über den Film Avatar geben? Filme haben interessante Eigenschaften wie Schauspieler, Regisseur, Bewertungen. Verwenden Sie das itempropAttribut , um die Eigenschaften eines Elements zu kennzeichnen. Um beispielsweise den Regisseur eines Films zu identifizieren, fügen Sie itemprop="director"dem Element, das den Namen des Regisseurs enthält, etwas hinzu. (Eine vollständige Liste aller Eigenschaften, die Sie einem Film zuordnen können, finden Sie unter http://schema.org/Movie.)

<div itemscope itemtype = "http://schema.org/Movie">
  <h1 itemprop = "name" > Avatar </ h1>
  <span> Regisseur: <span itemprop = "Regisseur" > James Cameron </ span> (geboren am 16. August 1954) </ span>
  <span itemprop = "genre" > Science Fiction </ span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> Trailer </a>
</ div>

Beachten Sie, dass wir zusätzliche <span>...</span>Tags hinzugefügt haben , um die itemprop Attribute an den entsprechenden Text auf der Seite anzuhängen . <span>Tags ändern nicht die Art und Weise, wie Seiten von einem Webbrowser gerendert werden. Sie sind daher ein praktisches HTML-Element itemprop.

Suchmaschinen können jetzt nicht nur verstehen, dass http://www.avatarmovie.com eine URL ist, sondern auch, dass es die URL für den Trailer zum Science-Fiction-Film Avatar ist, der von James Cameron inszeniert wurde.

Zurück nach oben

1d. Eingebettete Elemente

Manchmal kann der Wert einer Elementeigenschaft selbst ein anderes Element mit eigenen Eigenschaften sein. Beispielsweise können wir angeben, dass der Regisseur des Films ein Element vom Typ Person ist und die Person die Eigenschaften nameund hat birthDate. Um anzugeben, dass der Wert einer Eigenschaft ein anderes Element ist, beginnen Sie itemscopeunmittelbar nach dem entsprechenden Element mit einem neuen itemprop.

<div itemscope itemtype = "http://schema.org/Movie">
  <h1 itemprop = "name"> Avatar </ h1>
  <div itemprop = "Director" itemscope itemtype = "http://schema.org/Person" >
  Regie: <span itemprop = "name"> James Cameron </ span> (Jg <span itemprop = "birth" > 16. August 1954 </ span>)
  </ div>
  <span itemprop = "genre"> Science Fiction </ span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> Trailer </a>
</ div>

Zurück nach oben

2. Verwenden des Vokabulars von schema.org

2a. schema.org Typen und Eigenschaften

Nicht auf allen Webseiten geht es um Filme und Personen. Zusätzlich zu den in Abschnitt 1 beschriebenen Film- und Personentypen beschreibt schema.org eine Vielzahl anderer Elementtypen, von denen jeder seine eigenen Eigenschaften hat, mit denen das beschrieben werden kann Artikel.

Der breiteste Elementtyp ist Sache , die vier Eigenschaften: name, description, url, und image. Spezifischere Typen teilen Eigenschaften mit breiteren Typen. Zum Beispiel ist ein Ort eine spezifischere Art von Sache, und ein LocalBusiness ist eine spezifischere Art von Ort. Spezifischere Elemente erben die Eigenschaften ihres übergeordneten Elements. (Tatsächlich ist ein LocalBusiness eine spezifischere Art von Ort und eine spezifischere Art von Organisation, sodass es Eigenschaften von beiden übergeordneten Typen erbt.)

Hier ist eine Reihe häufig verwendeter Elementtypen:

Sie können auch eine vollständige Liste aller Elementtypen auf einer einzelnen Seite anzeigen.

Zurück nach oben

2b. Erwartete Typen, Texte und URLs

Im Folgenden finden Sie einige Hinweise, die Sie beim Hinzufügen von schema.org-Markups zu Ihren Webseiten beachten sollten.

  • Mehr ist besser, außer verstecktem Text. Im Allgemeinen ist es umso besser, je mehr Inhalte Sie markieren. In der Regel sollten Sie jedoch nur den Inhalt markieren, der für Personen sichtbar ist, die die Webseite besuchen, und nicht den Inhalt in versteckten Divs oder anderen versteckten Seitenelementen.
  • Erwartete Typen gegen Text. Beim Durchsuchen der schema.org-Typen werden Sie feststellen, dass viele Eigenschaften "erwartete Typen" haben. Dies bedeutet, dass der Wert der Eigenschaft selbst ein eingebettetes Element sein kann (siehe Abschnitt 1d: eingebettete Elemente). Dies ist jedoch keine Voraussetzung - es ist in Ordnung, nur normalen Text oder eine URL anzugeben. Wenn ein erwarteter Typ angegeben wird, ist es außerdem in Ordnung, ein Element einzubetten, das ein untergeordneter Typ des erwarteten Typs ist. Wenn der erwartete Typ beispielsweise "Ort" ist, ist es auch in Ordnung, ein LocalBusiness einzubetten.
  • Verwenden der URL-Eigenschaft. Einige Webseiten beziehen sich auf einen bestimmten Artikel. Beispielsweise haben Sie möglicherweise eine Webseite zu einer einzelnen Person, die Sie mit dem Elementtyp Person markieren können. Auf anderen Seiten ist eine Sammlung von Elementen beschrieben. Auf Ihrer Unternehmenswebsite kann beispielsweise eine Seite mit Mitarbeitern und einem Link zu einer Profilseite für jede Person vorhanden sein. Für Seiten wie diese mit einer Sammlung von Elementen sollten Sie jedes Element separat markieren (in diesem Fall als eine Reihe von Personen) und die URL-Eigenschaft dem Link zur entsprechenden Seite für jedes Element wie folgt hinzufügen:
    <div itemscope itemtype = "http://schema.org/Person">
      <a href="alice.html" itemprop="url"> Alice Jones </a>
    </ div>
    <div itemscope itemtype = "http://schema.org/Person">
      <a href="bob.html" itemprop="url"> Bob Smith </a>
    </ div>
    

Zurück nach oben

2c. Testen Sie Ihr Markup

Ähnlich wie ein Webbrowser wichtig ist, um Änderungen an Ihrem Webseitenlayout zu testen, und ein Code-Compiler wichtig ist, um den von Ihnen geschriebenen Code zu testen, sollten Sie auch Ihr schema.org-Markup testen, um sicherzustellen, dass es korrekt implementiert ist. Google bietet ein umfangreiches Tool zum Testen von Snippets, mit dem Sie Ihr Markup testen und Fehler identifizieren können.

3. Erweitertes Thema: Maschinenverständliche Versionen von Informationen

Viele Seiten können unter Verwendung nur die beschrieben werden itemscope, itemtypeund itempropAttribute (beschrieben in Abschnitt 1) zusammen mit den Arten und Eigenschaften auf schema.org definiert (in Abschnitt 2 beschrieben).

Manchmal ist es jedoch für eine Maschine schwierig, eine Artikeleigenschaft ohne zusätzliche Begriffsklärung zu verstehen. In diesem Abschnitt wird beschrieben, wie Sie beim Markieren Ihrer Seiten maschinenverständliche Versionen von Informationen bereitstellen können.

  • Datum, Uhrzeit und Dauer: Verwenden Sie das timeTag mitdatetime
  • Aufzählungen und kanonische Referenzen: Verwenden Sie das linkTag mithref
  • Fehlende / implizite Informationen: Verwenden Sie das metaTag mit content.

Zurück nach oben

3a. Datum, Uhrzeit und Dauer: Verwenden Sie das Zeit-Tag mit Datum / Uhrzeit

Daten und Zeiten können für Maschinen schwer verständlich sein. Betrachten Sie das Datum "04/01/11". Bedeutet das den 11. Januar 2004? 4. Januar 2011? Oder 1. April 2011? Verwenden Sie das timeTag zusammen mit dem datetimeAttribut, um Datumsangaben eindeutig zu machen . Der Wert des datetimeAttributs ist das im YYYY-MM-DDFormat angegebene Datum . Der folgende HTML-Code gibt das Datum eindeutig als 1. April 2011 an.

<time datetime = "2011-04-01"> 04/01/11 </ time>

Sie können auch eine Zeit innerhalb eines Tages im Format hh:mmoder angeben hh:mm:ss. Die Zeiten werden mit dem Buchstaben vorangestellt Tund können zusammen mit einem Datum wie dem folgenden angegeben werden:

<time datetime = "2011-05-08T19: 30"> 8. Mai, 19.30 Uhr </ time>

Lassen Sie uns dies im Kontext sehen. Hier ist ein HTML-Code, der ein Konzert beschreibt, das am 8. Mai 2011 stattfindet. Das Event-Markup enthält den Namen des Events, eine Beschreibung und das Datum des Events.

<div itemscope itemtype = "http://schema.org/Event" >
  <div itemprop = "name" > Wirbelsäulentipp </ div>
  <span itemprop = "description" > Eine der lautesten Bands aller Zeiten
  Wiedervereinigungen für eine unvergessliche zweitägige Show. </ span>
  Veranstaltungsdatum:
  <time itemprop = "startDate" datetime = "2011-05-08T19: 30"> 8. Mai, 19.30 Uhr </ time> 
</ div>

Die Dauer kann auf analoge Weise mithilfe des timeTags mit dem datetimeAttribut angegeben werden. Die Dauer wird mit dem Buchstaben vorangestellt P(steht für "Punkt"). So können Sie eine Rezeptkochzeit von 1 ½ Stunden festlegen:

<time itemprop = "cookTime" datetime = "PT1H30M" > 1 1/2 Stunden </ time>

Hwird verwendet, um die Anzahl der Stunden zu bestimmen, und Mwird verwendet, um die Anzahl der Minuten zu bestimmen.

Die Standards für Datum, Uhrzeit und Dauer sind in der Datums- / Zeitnorm ISO 8601 festgelegt .

Zurück nach oben

3b. Aufzählungen und kanonische Referenzen: Link mit href verwenden

Aufzählungen

Einige Eigenschaften können nur einen begrenzten Satz möglicher Werte annehmen. Programmierer nennen diese "Aufzählungen" oft. Beispielsweise könnte ein Online-Shop mit einem zu verkaufenden Artikel den Artikeltyp "Angebot" verwenden, um die Details des Angebots anzugeben. Die availabilityEigenschaft kann typischerweise eine von nur wenigen möglich Werte- In stock, Out of stock, Pre-order, und so weiter. Ähnlich wie Elementtypen als URLs angegeben werden, können mögliche Werte für eine Aufzählung auf schema.org auch als URLs angegeben werden.

Hier ist ein Artikel zum Verkauf, gekennzeichnet mit der Angebotsart und den relevanten Eigenschaften:

<div itemscope itemtype = "http://schema.org/Offer">
  <span itemprop = "name"> Blend-O-Matic </ span>
  <span itemprop = "price"> 19,95 USD </ span>
  <span itemprop = "Availability"> Heute verfügbar! </ span>
</ div>

Und hier ist derselbe Artikel, aber mit linkund hrefum die Verfügbarkeit eindeutig als einen der zulässigen Werte anzugeben:

<div itemscope itemtype = "http://schema.org/Offer">
  <span itemprop = "name"> Blend-O-Matic </ span>
  <span itemprop = "price"> 19,95 USD </ span>
  <link itemprop = "Availability" href = "http://schema.org/InStock" /> Heute verfügbar!
</ div>

Schema.org bietet Aufzählungen für eine Handvoll Eigenschaften. In der Regel wird in schema.org eine entsprechende Aufzählung angegeben, wenn eine begrenzte Anzahl typischer Werte für eine Eigenschaft vorhanden ist. In diesem Fall werden die möglichen Werte für availabilityin ItemAvailability angegeben .

Kanonische Referenzen

In der Regel werden Links mithilfe des <a>Elements angegeben. Die folgenden HTML-Links verweisen beispielsweise auf die Wikipedia-Seite für das Buch Catcher in the Rye.

<div itemscope itemtype = "http://schema.org/Book">
  <span itemprop = "name"> Der Fänger im Roggen </ span> -
  von <span itemprop = "author"> JD Salinger </ span>
  Hier ist die <a itemprop="url" href="http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye"> Wikipedia-Seite </a> des Buches </a>.
</ div>

Wie Sie sehen können, itemprop="url"kann ein Link zu einer Seite auf einer anderen Site (in diesem Fall Wikipedia) angegeben werden, auf der dasselbe Element behandelt wird. Links zu Websites von Drittanbietern können Suchmaschinen helfen, den Artikel, den Sie auf Ihrer Webseite beschreiben, besser zu verstehen.

Möglicherweise möchten Sie Ihrer Seite jedoch keinen sichtbaren Link hinzufügen. In diesem Fall können Sie linkstattdessen ein Element wie folgt verwenden:

<div itemscope itemtype = "http://schema.org/Book">
  <span itemprop = "name"> Der Fänger im Roggen </ span> -
  <link itemprop = "url" href = "http://en.wikipedia.org/wiki/The_Catcher_in_the_Rye" />
  von <span itemprop = "author"> JD Salinger </ span>
</ div>

Zurück nach oben

3c. Fehlende / implizite Informationen: Verwenden Sie das Meta-Tag mit Inhalt

Manchmal enthält eine Webseite Informationen, deren Markierung wertvoll wäre, aber die Informationen können aufgrund der Darstellung auf der Seite nicht markiert werden. Die Informationen können in einem Bild (z. B. einem Bild, das eine Bewertung von 4 von 5 darstellt) oder einem Flash-Objekt (z. B. die Dauer eines Videoclips) übermittelt werden, oder sie können impliziert, aber nicht explizit angegeben werden auf der Seite (zum Beispiel die Währung eines Preises).

Verwenden Sie in diesen Fällen die meta Tag zusammen mit dem contentAttribut, um die Informationen anzugeben. Betrachten Sie dieses Beispiel: Das Bild zeigt Benutzern eine Bewertung von 4 von 5 Sternen:

<div itemscope itemtype = "http://schema.org/Offer">
  <span itemprop = "name"> Blend-O-Matic </ span>
  <span itemprop = "price"> 19,95 USD </ span>
  <img src = "bilder/four-stars.jpg" />
  Basierend auf 25 Benutzerbewertungen
</ div>

Hier ist noch einmal das Beispiel mit den markierten Bewertungsinformationen.

<div itemscope itemtype = "http://schema.org/Offer">
  <span itemprop = "name"> Blend-O-Matic </ span>
  <span itemprop = "price"> 19,95 USD </ span>
  <div itemprop = "reviews" itemscope itemtype = "http://schema.org/AggregateRating" >
    <img src = "bilder/four-stars.jpg" />
    <meta itemprop = "reviewValue" content = "4" /> 
    <meta itemprop = "bestRating" content = "5" /> 
    Basierend auf <span itemprop = "reviewCount" > 25 </ span> Benutzerbewertungen
  </ div>
</ div>

Diese Technik sollte sparsam eingesetzt werden. Nur metamit Inhalten für Informationen verwenden, die sonst nicht gekennzeichnet werden können.

Zurück nach oben

3d. Schema.org erweitern

Die meisten Websites und Organisationen haben keinen Grund, schema.org zu erweitern. Schema.org bietet jedoch die Möglichkeit, zusätzliche Eigenschaften oder Untertypen zu vorhandenen Typen anzugeben. Wenn Sie daran interessiert sind, lesen Sie mehr über den Erweiterungsmechanismus von schema.org .