Andreas Hecht 5. Februar 2015

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

Kein Beitragsbild
Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance...

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.

Fitness für Google - Schema.org Markup für Ihr WordPress-Theme

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

Rezept-Darstellung in den Rich Snippets von Google
Die Auszeichnung eines Pop-Stars mit dargestellten Songs

Rich Snippet Darstellung eines Musikers mit seinen Songs

Eine kurze Video-Einführung in die Rich Snippets

Klicke auf den unteren Button, um den Inhalt von YouTube nachzuladen.
Inhalt laden

PGlmcmFtZSB3aWR0aD0iNTAwIiBoZWlnaHQ9IjI4MSIgc3JjPSJodHRwczovL3d3dy55b3V0dWJlLW5vY29va2llLmNvbS9lbWJlZC9BLWtYMEF1dC0xOD9mZWF0dXJlPW9lbWJlZCZ3bW9kZT1vcGFxdWUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvdz0iYXV0b3BsYXk7IGVuY3J5cHRlZC1tZWRpYSIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==

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:

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

</div>

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:

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

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

<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> 

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:

<?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:

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

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:

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

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:

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

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:

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

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:

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

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

(dpe)

Andreas Hecht

Andreas Hecht

entwickelt WordPress-Websites und bietet dir einen Website Sicherheit Service und einen Performance Service für deine Website. Außerdem ist er Spezialist für Onpage SEO und bringt Deine Website in die Top-Suchergebnisse von Google.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

10 Kommentare

  1. Dann schau ich mir das mal an, Danke Dieter !!

  2. Hallo und guten Tag aus dem Westerwald!

    Ich habe diesen Beitrag sehr interessiert gelesen und auf meiner Internetseite auch komplett nachvollzogen. Zwar ist mein Template etwas anders aufgebaut, aber das war ja zu erwarten.

    Hauptsächlich geht es mir darum das zu meinen Einträgen in den SERPs entweder ein kleines Autorenbild oder auch gerne ein Tumbernail eins Artikelbildes eingeblendet wird. Ich denk das wäre gut um in den Suchergebnissen aufzufallen und die Klickte zu erhöhen.

    Nun meine Frage um das zu erreichen muss ich da jetzt noch mehr machen als in diesem Artikel beschrieben, oder reicht das aus und nach einer gewissen Zeit blendet Goggle dann die gewünschten Tumbernails ein.

    Falls nicht, was muss ich dann noch tun? Auch die Frage wo ich das Tumbernail für den Author festlege. Ich meine mal was gelesen zu haben das es auch über ein korrespondierendes Google+ Profil geht.

    Hat da jemand einen Tip für mich, bzw. einen Link wo ich das nachlesen kann?

    LG aus dem Westerwald

    Frank Hamm

  3. Hallo. Der Artikel war mir nicht genug und das Testing-Tool von Google hat da auch permanent einen Fehler ausgespuckt. Ich kann euch diese Anleitung ans Herz legen. 80% mehr Code der allerdings funktioniert :)

    http://www.bloggingspell.com/add-schema-org-markup-wordpress/

  4. Ich finde die Aussage, man müsse nur „etwas“ Code zur Webseite hinzufügen, stark irreführend. Denn will man es richtig machen – und nur so bringt es auch etwas für die Suchmaschinen – dann kommen mindestens 25% mehr Code auf die Seite. Dann muss man nämlich jedes kleine Inhaltsschnipselchen deklarieren. Das hast Du ja sehr gut an dem Videobeispiel erklärt. Unter schema.org kann man ja nachlesen, wie tief die Auszeichnungen verschachtelt werden sollten.
    Wenn das irgendwann (hoffentlich nicht so bald) wirklich Rankingfaktor wird, müssen sich alle CMS-Systeme etwas einfallen lassen, denn ein CMS-Nutzer will ja gerade nichts mit Coding zu tun haben. Und wir Entwickler haben es eben NICHT einfacher dadurch. Die Big-Player werden es natürlich problemlos implementieren können, aber erkläre mal den kleineren Kunden, dass es mehr Arbeit macht (mehr Code) und die Webseitenerstellung dadurch teurer wird…

  5. Interessanter Artikel, Danke.

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück