Fitness-Schema für Google – Rich Snippets für Ihr WordPress-Theme

Schema.org wurde als gemeinsames Projekt von Google, Microsoft und Yahoo! entwickelt, um den Inhalt von Webseiten durch Suchmaschinen leichter strukturieren und erfassen zu können. Das Markup hilft den Suchmaschinen dabei, den Inhalt von Webseiten leichter erfassen und indexieren zu können. Dieses Prinzip erleichtert die Arbeit von Webmastern ungemein, da sie sich auf ein einziges Verfahren konzentrieren und möglichst viele Vorteile daraus ziehen können. Daher ist Schema.org auch für die Suchmaschinenoptimierung von großer Relevanz. Zudem kann Google aus dem Schema.org Markup Rich Snippets erstellen, was sich durchaus positiv auf die Klickten und Besucherzahlen einer Webseite auswirken kann, weil die betreffenden Suchergebnisse auffälliger sind. Bisher benutzt Google die Rich Snippets leerdings (noch) nicht als Ranking-Faktor.

Was mit Schema.org ausgezeichnet werden kann

Mit Schema.org lassen sich etliche Elemente einer Website auszeichnen, hier ein kleiner Auszug dessen, was möglich ist:

• Personen
• Orte, Geschäfte, Restaurants
• Gesundheit und Medizin
• Events und Veranstaltungen
• Kreativität: kreative Arbeit, Buch, Film, Musik, Rezept, TV-Serie
• Organisation
• Testbericht, Rating/Bewertung
• Produkt, Angebot

Eine vollständige Liste mit allen Möglichkeiten, allen auszuzeichnenden Elementen und kompletter Dokumentation erhalten Sie auf der Website von Schema.org. Hier bei Dr. Web hat Kollege Dieter Petereit vor einiger Zeit einen ausführlichen Beitrag zum Thema Rich Snippets veröffentlicht.

Rich Snippets

Das Schema.org Markup wird hauptsächlich dazu genutzt, um sogenannte Rich Snippets zu erstellen. Diese Snippets werden direkt auf den Suchergebnisseiten (auch “SERPs” genannt) angezeigt und sollen dem Suchenden einen Mehrwert bieten. Wird zum Beispiel nach einem Rezept gesucht (das mit Infos zum Rich Snippet seitens des Betreibers versehen wurde), werden direkt Rezeptvorschläge mit Zubereitungsdauer und Kalorienangabe ausgegeben. So unterscheiden sich die normalen Suchergebnisse von den Rich Snippets erheblich, erzeugen mehr Aufmerksamkeit und dementsprechend mehr Klicks. Hier zwei Beispiele der Darstellung von Rich Snippets:

Die Auszeichnung eines Kochrezepts

Die Auszeichnung eines Pop-Stars mit dargestellten Songs

Eine kurze Video-Einführung in die Rich Snippets

Wie Sie Schema.org nutzen können

Um Schema.org zu nutzen, müssen Sie nur etwas zusätzliches HTML-Markup Ihrer Webseite hinzufügen. Dies geschieht, damit die Suchmaschine weiß, worum es bei Ihrer Webseite geht und welche speziellen Elemente auf der einzelnen Seite zu finden sind. Wenn Ihre Seite ein Video enthält, würde man damit beginnen, den äußeren Container zu finden und ihn mit den Attributen itemscope und itemtype versehen. Siehe Code-Beispiel:

1
2
3
4

<code><div itemscope itemtype="http://schema.org/Movie">
 
</div>
</code>

Jedes Element im Video kann durch die Nutzung des Attributs itemprop definiert werden. Um den Namen des Videos zu definieren, muss lediglich die Überschrift etwas modifiziert werden:

1

<code><h1 itemprop="name">Avatar</h1></code>

Auch innerhalb des Videos kann jedes einzelne Element so für Suchmaschinen verständlich ausgezeichnet werden. Hier ein Beispiel einer vollständigen Auszeichnung:

1
2
3
4
5
6
7
8
9

<code><div itemscope itemtype="http://schema.org/Movie">
<h1 itemprop="name">Avatar</h1>
<div itemprop="director" itemscope itemtype="http://schema.org/Person">
Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span>
</div>
<span itemprop="genre">Science fiction</span>
<a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div> 
</code>

Schema.org mit WordPress nutzen

Die Nutzung mit WordPress ist relativ einfach, dass genutzte Theme muss nur ein wenig modifiziert werden. Vorteilhaft wäre es, wenn Sie sich für die Modifizierungen ein Child-Theme erstellen, damit beim nächsten Theme-Update nicht alle Änderungen wieder verschwunden sind. Fügen Sie nun als Erstes folgende Funktion der functions.php Ihres genutzten Themes hinzu:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
function html_tag_schema() {
    $schema = 'http://schema.org/';
 
    // Is single post
    if(is_single()) {
        $type = "Article";
    }
 
    // Is author page
    elseif( is_author() ) {
        $type = 'ProfilePage';
    }
 
    // Contact form page ID
    elseif( is_page(1) )
    {
        $type = 'ContactPage';
    }
 
    // Is search results page
    elseif( is_search() ) {
        $type = 'SearchResultsPage';
    }
 
    else {
        $type = 'WebPage';
    }
 
    echo 'itemscope="itemscope" itemtype="' . $schema . $type . '"';
}

Diese Funktion definiert automatisch das richtige Schema für die einzelnen WordPress-Seiten. Damit die Kontaktseite allerdings korrekt ausgezeichnet wird, stellen Sie bitte die betreffende WordPress-ID der Kontakt-Seite fest und ändern dann is_page(1) auf die korrekte ID um. Die Funktion kann noch beliebig erweitert werden, gerade mit Custom Post Types funktioniert die Auszeichnung perfekt.

Suchen Sie nun den HTML-Tag Ihres Themes (zumeist in der header.php zu finden) und ändern ihn folgendermaßen ab:

1
2

<code><html <?php html_tag_schema(); ?> <?php language_attributes(); ?>>
</code>

Haben sie dies erledigt, wird von nun an jede Seite korrekt ausgezeichnet. Als nächstes suchen Sie nach dem Title-Tag, dieser befindet sich ebenfalls in der header.php. Ändern Sie den Tag wie folgt um:

1
2

<code><title itemprop="name"><?php wp_title(''); ?></title>
</code>

Als nächstes muss der Bereich des Hauptinhalts ausgezeichnet werden. Hierzu suchen Sie in der single.php nach dem Div, dass die the_Content() Funktion umschliesst. Ergänzen Sie das Div mit folgenden Informationen:

1
2
3
4

<code><div id="content" itemprop="mainContentOfPage">
<?php the_content();?>
</div>
</code>

Es ist immer eine gute Idee, Google und andere Suchmaschinen wissen zu lassen, wann ein Beitrag publiziert oder modifiziert wurde. Schließlich kann man daran auch seine Aktualität erkennen. Meist werden Sie in der single.php fündig, wenn Sie nach Datums-Tags suchen. Ergänzen Sie es bitte folgendermaßen:

1
2

<code><time class="entry-date" datetime="<?php the_date('c'); ?>" itemprop="datePublished" pubdate><?php  the_time( get_option( 'date_format' ) ); ?></time>
</code>

WordPress Beitragsbilder korrekt auszeichnen

Als vorerst letzte Arbeit am Theme bleibt noch die Auszeichnung der Post-Thumbnails übrig. Öffnen Sie dazu die functions.php Ihres WordPress-Themes und suchen nach der Funktion the_post_thumbnail(). Zu dieser Funktion fügen wir ein weiteres Attribut hinzu, nämlich “itemprob => image”. Dieses Attribut zeigt den Suchmaschinen, dass hier ein Beitragsbild mit direktem Bezug auf den kompletten Artikel verwendet wurde. So sollte die Funktion im Anschluss aussehen:

1
2

<code><?php the_post_thumbnail('thumbnail', array('itemprop' => 'image')); ?>
</code>

Sollte es bereits ein Array in der Funktion geben, so trennen Sie die Arrays einfach mit einem Komma und fügen Sie sie hintereinander ein.

Fazit

Sich mit solchen, recht einfach umzusetzenden On-Page SEO Maßnahmen zu beschäftigen, kann unter Umständen sehr viel mehr Besucher auf die eigene Webseite bringen und diese auch zu Kunden umwandeln. Auch wenn man für das private “Internettagebuch” um diese Schritte noch herumkommt, so sind sie für Besitzer einer Website, die Geld verdienen muss, absolute Pflicht. Denn sich von der Konkurrenz abzuheben, bedeutet mehr Besucherzahlen und das wiederum ist die Voraussetzung für mehr Umsatz.

Links zum Beitrag

• OnPageWiki – Schema.org
• Google Webmaster-Tools – Schema.org FAQ (DE)
• Google Webmaster-Tools – Über Rich Snippets und strukturierte Daten (DE)
• Schema.org Dokumentation
• Schema.org – alle auszeichenbaren Elemente
• Child-Themes – WordPress Codex

(dpe)