Rich Snippets – Breadcrumbs

Neu! Mit schema.org können Sie eine viel größere Bandbreite an Elementtypen auf Ihren Seiten mithilfe eines Vokabulars auszeichnen, das Google, Microsoft und Yahoo! verstehen. Weitere Informationen. Google unterstützt Ihre vorhandenen Rich Snippet-Markups jedoch weiterhin.

Hinweis: Dieser Artikel befasst sich mit einem experimentellen Format. Abhängig vom Feedback sowie von anderen verfügbaren Markup-Standards kann er zu einem späteren Zeitpunkt geändert oder ersetzt werden.

Über Breadcrumbs

Eine Breadcrumb-Spur setzt sich aus mehreren Links (Breadcrumbs) zusammen, die einem Nutzer helfen, die Hierarchie Ihrer Website zu verstehen und entsprechend auf der Website zu navigieren:

Seiten können mehrere Breadcrumb-Spuren aufweisen. Beispiel:

Wenn Sie Breadcrumb-Informationen im Textkörper einer Webseite auszeichnen, kann Google diese identifizieren und so die Informationen auf Ihren Seiten in unseren Suchergebnissen einordnen und darstellen.

Eigenschaften

Breadcrumbs können verschiedene Eigenschaften enthalten, die Sie mithilfe von Mikrodaten oder RDFa-Markups markieren können. Google erkennt die folgenden Breadcrumb-Eigenschaften.

Eigenschaft Beschreibung
title Der Titel eines Breadcrumbs.
url Die URL eines Breadcrumbs.
child Der nächste Breadcrumb in der Hierarchie. Das Element "child" muss ein weiteres Breadcrumb-Element sein.

Der folgende HTML-Code beschreibt eine Breadcrumb-Spur für eine Produktseite auf einer Website für Damenbekleidung.

  <a href="http://www.example.com/dresses">Kleider</a> › 
  <a href="http://www.example.com/dresses/real">Echte Kleider</a> › 
  <a href="http://www.example.com/dresses/real/green">Echte grüne Kleider</a> 

Diese Breadcrumbs werden auf der Seite wie folgt angezeigt:

KleiderEchte KleiderEchte grüne Kleider

In den folgenden Abschnitten wird beschrieben, wie Sie diesen Content mithilfe von Mikrodaten oder RDFa auszeichnen.

Mikrodaten

Im Folgenden noch einmal der gleiche HTML-Code mit Mikrodaten-Markups:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/kleider" itemprop="url">
    
    <span itemprop="title">Kleider</span>
  
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/kleider/echt" itemprop="url">
    
    <span itemprop="title">Echte Kleider</span>
  
  </a> ›
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/kleidung/kleider/echt/grün" itemprop="url">
    
    <span itemprop="title">Echte grüne Kleider</span>
  
  </a>
</div>

Erklärung:

  • In der ersten Zeile jedes <div>-Tags gibt <itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> an, dass das von den <div>-Tags umschlossene HTML ein Breadbrumb darstellt. itemscope gibt an, dass der Inhalt des <div> ein Element beschreibt, und itemtype="http://data-vocabulary.org/Breadcrumb" gibt an, dass das Element ein Breadcrumb ist.
  • Das Beispiel beschreibt Eigenschaften des Elements, etwa seinen Titel und seine URL. Zur Kennzeichnung der Eigenschaften wird jedem Element mit einer dieser Eigenschaften, etwa <div> oder <span>, ein itemprop-Attribut zugewiesen, das eine Eigenschaft angibt. Beispiel: <span itemprop="url">.
  • Jedes Breadcrumb-Element sollte in der richtigen Reihenfolge angezeigt werden, wobei das erste Element die Seite auf oberster Ebene und das letzte Element die übergeordnete Seite der aktuellen Seite angibt.

Wenn eine Seite mehrere Breadcrumb-Spuren hat

Wenn Ihre Seite nur eine einzige Breadcrumb-Spur hat, verwendet Google die Reihenfolge der Elemente so, wie sie auf Ihrer Seite angezeigt werden. Wenn Ihre Seite jedoch mehr als eine Breadcrumb-Spur enthält, müssen Sie die Spur angeben, zu der jeder Breadcrumb gehört. Verwenden Sie hierzu die Eigenschaft child, um das nächste Element in der Hierarchie anzugeben:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  
  <a href="http://www.example.com/bücher" itemprop="url">
    
    <span itemprop="title">Bücher</span>
  
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/bücher/autoren" itemprop="url">
      
      <span itemprop="title">Autoren</span>
    
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/bücher/autoren/stephenking" itemprop="url">
        
        <span itemprop="title">Stephen King</span>
      
      </a>
    </div>
  </div>
</div>

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/bücher" itemprop="url">
    
    <span itemprop="title">Bücher</span>
  
  </a> ›
  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/belletristik" itemprop="url">
      
      <span itemprop="title">Belletristik</span>
    
    </a> ›
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    
      <a href="http://www.example.com/bücher/belletristik/horror" itemprop="url">
        
        <span itemprop="title">Horror</span>
      
      </a>
    </div>
  </div>
</div>

RDFa

Im Folgenden sehen Sie noch einmal denselbe HTML-Inhalt mit RDFa-Markups:

<div xmlns:v="http://rdf.data-vocabulary.org/#">
   <span typeof="v:Breadcrumb">
     <a href="http://www.example.com/kleider" rel="v:url" property="v:title">
      
      Kleider
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/kleider/echt" rel="v:url" property="v:title">
      
      Echte Kleider
    
    </a> ›
   </span>
   <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/kleider/echt/grün" rel="v:url" property="v:title">
      
      Echte grüne Kleider
    
    </a> ›
   </span>
</div>

Erklärung:

  • Das Beispiel beginnt mit einer Namensraum-Deklaration über xmlns. Hiermit wird der Namensraum angegeben, in dem das Vokabular – eine Liste der Entitäten und ihrer Komponenten – festgelegt wird. Vergessen Sie nicht, den Schrägstrich und die abschließende Raute (#) einzufügen: xmlns:v="http://rdf.data-vocabulary.org/#".
  • Jeder Breadcrumb wird über typeof="v:Breadcrumb" identifiziert.
  • Der Name des Breadcrumbs wird mithilfe der Eigenschaft title identifiziert, die das Präfix v: enthält. Beispiel: <span property="v:title">. Das Attribut rel gibt an, dass der Link die URL dieses Breadcrumbs ist. Das Attribut property sollte im Element <a> angegeben und nicht darin geschachtelt werden: <a href="books.html" rel="v:url" property="v:title">Books</a>.
  • Jedes Breadcrumb-Element sollte in der richtigen Reihenfolge angezeigt werden, wobei das erste Element die Seite auf oberster Ebene und das letzte Element die übergeordnete Seite der aktuellen Seite angibt.

Wenn eine Seite mehrere Breadcrumb-Spuren hat

Wenn Ihre Seite nur eine einzige Breadcrumb-Spur hat, verwendet Google die Reihenfolge der Elemente so, wie sie auf Ihrer Seite angezeigt werden. Wenn Ihre Seite jedoch mehr als eine Breadcrumb-Spur enthält, müssen Sie die Spur angeben, zu der jeder Breadcrumb gehört. Verwenden Sie hierzu die Eigenschaft child, um das nächste Element in der Hierarchie anzugeben:


<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/bücher" rel="v:url" property="v:title">
      
      Bücher
    </a> ›
    <span rel="v:child">
      
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/bücher/autoren" rel="v:url" property="v:title">
          
          Autoren
        </a> ›
        <span rel="v:child">
               
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/bücher/autoren/stephenking" rel="v:url" property="v:title">
              
              Stephen King
            
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>

<div xmlns:v="http://rdf.data-vocabulary.org/#"> 
  <span typeof="v:Breadcrumb">
    <a href="http://www.example.com/bücher" rel="v:url" property="v:title">
      
      Bücher
    </a> ›
    <span rel="v:child">
      
      <span typeof="v:Breadcrumb">
        <a href="http://www.example.com/bücher/belletristik" rel="v:url" property="v:title">
          
          Fiction
        </a> ›
        <span rel="v:child">
               
          <span typeof="v:Breadcrumb">
            <a href="http://www.example.com/bücher/belletristik/horror" rel="v:url" property="v:title">
              
              Horror
            </a> ›          
          </span>
        </span>
      </span>
    </span>
  </span>
</div>