Advertisement
  1. Code
  2. Theme Development

Integration von Google Rich Snippets in ein WordPress-Theme

by
Read Time:13 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Wir alle kennen die Art und Weise, wie Google Suchergebnisse präsentiert - mit einem Seitentitel und einem kleinen Textausschnitt für jedes Ergebnis. Mit Google Rich Snippets können wir dem Web-Suchergebnis-Snippet nützliche Informationen hinzufügen, um es von anderen Ergebnissen abzuheben und letztendlich mehr Besucher anzulocken. Während es in WordPress bereits Plugins gibt, die diese Art von Funktionalität bieten, gibt es Situationen, in denen die Weitergabe an ein Plugin eines Drittanbieters nicht ratsam ist. In diesem Tutorial werden wir das Mikrodatenformat in das WordPress-Theme-Markup integrieren, um ein kulinarisches Rezept anzuzeigen und es mit den Anforderungen von Google Rich Snippets kompatibel zu machen.


Einführung in Google Rich Snippets

Schauen wir uns ein Beispiel für ein reichhaltiges Snippet an:

Ich habe für Sie die Ausschnitte zusätzlicher Informationen hervorgehoben, die Google von der Seite "liest". Wie Sie sehen können, fügen Rich Snippets den Suchmaschinenergebnissen einige wirklich nützliche Informationen hinzu. Bei Rezepten umfassen diese Informationen ein Foto, eine Rezeptbewertung, Kalorien und die Gesamtzeit, die für die Zubereitung des Gerichts benötigt wird. All diese zusätzlichen Informationen geben den Benutzern ein besseres Verständnis für den Inhalt der Seite und erhöhen die Wahrscheinlichkeit, dass Benutzer auf den Link klicken und Ihre Website besuchen.

Die Snippets für jeden Inhaltstyp sehen etwas anders aus und enthalten Informationen, die für den jeweiligen Inhaltstyp relevant sind.

Wie aktiviere ich Rich Snippets?

Das Geheimnis hinter Rich Snippets ist ein strukturiertes, semantisches Markup, mit dem Google den Inhalt der Seite verstehen kann. Alles, was Sie tun müssen, ist, Ihren Inhalt richtig zu markieren, um die bestimmte Art von Informationen auf Ihrer Website zu beschreiben. In diesem Tutorial konzentrieren wir uns auf ein kulinarisches Rezept, aber Google unterstützt umfangreiche Snippets für eine Reihe anderer Inhaltstypen, nämlich:

  • Bewertungen
  • Menschen
  • Produkte
  • Unternehmen und Organisationen
  • Veranstaltungen
  • Musik

Weitere Informationen zu umfangreichen Snippets und Inhaltstypen finden Sie in der Google-Hilfe.

Beim Markieren Ihrer Inhalte stehen drei Markup-Formate zur Auswahl:

  • Mikrodaten
  • Mikroformate
  • RDFa

In diesem Lernprogramm integrieren wir das Mikrodaten-Markup in die Eigenschaften von schema.org, wie in der Dokumentation zu Google Rich Snippets empfohlen. Es ist erwähnenswert, dass das Vokabular von schema.org nicht nur von Google, sondern auch von anderen großen Suchanbietern - Yahoo! und Microsoft.

Besuchen Sie Schema.org, um weitere Informationen und Beispiele zur Implementierung in Ihrem Code zu erhalten.


Schritt 1 Erstellen eines benutzerdefinierten Rezeptposttyps

Da wir ziemlich viel Code schreiben werden, erstellen wir eine separate Datei namens recipe-config.php, in der alle unsere Snippets gespeichert sind, und fügen sie mithilfe der PHP-Funktion include ein. Öffnen Sie dazu die Datei functions.php in Ihrem aktuellen Themenverzeichnis und fügen Sie am Ende den folgenden Code ein:

Erstellen Sie nun eine neue Datei mit dem Namen recipe-config.php. Der gesamte folgende Code sollte zu dieser Datei hinzugefügt werden.

Beginnen wir mit der Erstellung eines neuen benutzerdefinierten Beitragstyps mit dem Namen "Rezept".

Wenn Sie jetzt zum Admin-Bereich gehen, sollte es im Menü eine neue Option namens "Rezepte" geben. Fügen Sie noch keine Rezepte hinzu, da wir zuerst einige benutzerdefinierte Meta-Boxen hinzufügen müssen.


Schritt 2 Hinzufügen von benutzerdefinierten Meta-Boxen

Die Einrichtung

Da wir einige benutzerdefinierte Meta-Boxen verschiedener Typen benötigen, um alle rezeptspezifischen Daten zu speichern, werde ich die kostenlose Bibliothek für benutzerdefinierte Meta-Boxen und Felder für WordPress verwenden, um sie zu erstellen. Natürlich können Sie auch ein anderes Skript verwenden oder Meta-Boxen von Grund auf neu erstellen, wenn Sie dies bevorzugen.

Wptuts+ bietet ein großartiges Tutorial zum Thema wiederverwendbare benutzerdefinierte Meta-Boxen

Zuerst müssen wir die Bibliothek von GitHub herunterladen. Wie der Autor vorschlägt, speichern wir alle Skriptdateien im Ordner "lib/metabox". Beginnen Sie also mit dem Erstellen des Ordners "lib" in Ihrem Thema oder untergeordneten Thema und fügen Sie dann den Ordner "metabox" in "lib" hinzu. Entpacken Sie alle heruntergeladenen Dateien und laden Sie sie in "/wp-content/theme/my-theme/lib/metabox" hoch.

Schließlich müssen wir die Datei init.php einfügen. Normalerweise würden Sie es in Ihre Datei functions.php aufnehmen, aber wir werden es in unserer Datei recipe-config.php tun, da dort alle rezeptspezifischen Funktionen gespeichert werden.

Sobald dies erledigt ist, können wir mit der Definition von Meta-Boxen beginnen.

Meta-Boxen definieren

Um sich für Google Rich Snippets zu qualifizieren, müssen nicht alle in der Spezifikation enthaltenen Eigenschaften angegeben werden, obwohl für jeden Inhaltstyp ein Mindestmaß erforderlich ist. In diesem Tutorial werden die folgenden Eigenschaften integriert:

  • name
  • recipeCategory
  • image
  • description
  • ingredients
  • instructions
  • recipeYield
  • prepTime
  • cookTime
  • totalTime
  • datePublished
  • author

Beachten Sie, dass wir nicht für alle Eigenschaften benutzerdefinierte Meta-Boxen erstellen müssen. Beispielsweise wird totalTime basierend auf prepTime und cookTime berechnet.

Fügen wir einige benutzerdefinierte Meta-Boxen hinzu.

Mit diesem Code haben wir eine Meta-Box namens "Kulinarisches Rezept" erstellt, die nur auf dem Bearbeitungsbildschirm für den Beitragstyp "Rezepte" angezeigt wird.

Die tatsächlichen Felddefinitionen werden als Array in der Eigenschaft 'fields' gespeichert. Lass uns genauer hinschauen:

Das Hinzufügen eines neuen Feldes ist so einfach wie das Kopieren eines der Array-Elemente (siehe oben) und das Ändern der Werte für 'name', 'id', 'desc' und 'type'. Die Bibliothek für benutzerdefinierte Metaboxen und Felder bietet eine Reihe vordefinierter Feldtypen und eine bequeme Methode zum Definieren Ihrer eigenen.

Um die getrennte Eingabe von Stunden und Minuten für die Koch- und Vorbereitungszeit zu erleichtern, habe ich unseren eigenen Feldtyp namens "number" definiert. Ich habe einen der neuen HTML5-Eingabetypen verwendet - number - und eine einfache Validierungsfunktion erstellt, bei der der vom Benutzer angegebene Wert vom Integer-Typ umgerechnet wird.


Schritt 3 Anzeigen des Rezepts

Jetzt sind wir endlich bereit, ein Markup zu schreiben. Wir könnten eine separate Vorlagendatei für unseren benutzerdefinierten Beitragstyp erstellen und das Markup direkt in dieser Vorlage platzieren. Stattdessen fügen wir das gesamte Markup in eine Funktion ein und hängen es mit the_content()-Filter an den Beitragsinhalt an. Dies ist wichtig, da es viele Plugins gibt, die Inhalte hinzufügen, z. Social Media Buttons bis zum Ende des Beitrags. Auf diese Weise stellen wir sicher, dass die gesamte Plugin-Ausgabe unter dem Rezept angezeigt wird.

Lassen Sie uns über den Code hinwegkommen. Zuerst ziehen wir das globale $post-Objekt, mit dem wir auf verschiedene nützliche Informationen über den angezeigten Beitrag zugreifen können.

Anschließend verwenden wir das bedingte Tag is_singular(), um zu überprüfen, ob derzeit ein einzelner Beitrag vom Typ 'my_culinary_recipe' angezeigt wird. Dies liegt daran, dass wir keine separate Vorlage für unseren benutzerdefinierten Beitragstyp erstellt haben und WordPress daher die allgemeinere Vorlage single.php (oder index.php, wenn es keine single.php gibt) verwendet, um das Rezept anzuzeigen. Mit der if-Anweisung stellen wir sicher, dass das Rezept-Markup nicht in regulären Posts angezeigt wird.

Schließlich rufen wir die Rezeptdaten mit der Funktion get_post_meta() ab und platzieren sie innerhalb des Markups, das gemäß dem Mikrodatenformat strukturiert ist.

Hilfsfunktionen

Möglicherweise stellen Sie fest, dass ich einige zusätzliche Funktionen verwendet habe - mcr_time(), mcr__total_time() und mcr_list_items(), um die Daten abzurufen und für die Anzeige vorzubereiten. Lass uns mal sehen!

Zeitbezogene Eigenschaften (prepTime, cookTime und totalTime) erwarten Werte im ISO 8601-Dauerformat. Um dies zu berücksichtigen, nehmen unsere beiden zeitbezogenen Funktionen ein Format als Parameter und bereiten die Ausgabe entsprechend vor.

Die Funktion mcr_time() bereitet die Ausgabe für Koch- und Vorbereitungszeiten vor und akzeptiert zwei Parameter:

  • $type (erforderlich) ist die Art der Zeit, die angezeigt werden soll. Akzeptiert zwei Werte - 'prep' (Standard) oder 'cook'
  • $format (optional) - Gibt an, dass die Ausgabe gemäß dem ISO 8601-Dauerformat formatiert werden soll. Akzeptiert nur einen Wert - 'iso'.

Die Funktion mcr_total_time() berechnet und bereitet die Ausgabe für die Gesamtzeit des Rezepts vor. Akzeptiert nur einen Parameter - $format, analog zum Parameter $format in der Funktion mcr_time().

Die letzte Hilfsfunktion zeigt Listen von Elementen an - Zutaten oder Anweisungen gemäß dem Parameter $type.

Jetzt ist es Zeit, Inhalte hinzuzufügen. Navigieren Sie im Verwaltungsbereich zum Abschnitt Rezepte und fügen Sie ein Rezept hinzu. Die Ausgabe muss möglicherweise etwas gestylt werden. Wenn Sie sich jedoch den Beitrag ansehen, sollte das Rezept unter dem regulären Inhalt angezeigt werden.

Das ist es! Sie müssen nur noch überprüfen, ob unser Markup mit dem umfangreichen Snippet-Testtool von Google korrekt ist.

Dies ist die umfangreiche Snippet-Vorschau, die aus unserem HTML-Markup generiert wurde:

Sie können Ihr Markup testen, indem Sie dem Testtool entweder eine URL oder einen Codeausschnitt bereitstellen.

Warten Sie nach dem Hinzufügen des Markups für Rich Snippets, bis der Google-Crawler es entdeckt hat. Wenn Google das neue Markup bemerkt, sollte es in den Suchergebnissen umfangreiche Snippets für Ihre Website anzeigen. Sie können auch ein Anfrageformular senden, um Google über umfangreiche Snippets auf Ihrer Website zu informieren. Geben Sie ihm jedoch zunächst etwas Zeit.


Abschluss

In diesem Tutorial habe ich Ihnen gezeigt, wie Sie ein Mikrodatenformat in ein schema.org-Vokabular integrieren, um kulinarische Rezepte anzuzeigen. Dieses Beispiel sollte Ihnen als Blaupause dienen, mit der Sie umfangreiche Snippets für andere Inhaltstypen aktivieren können. Haben Sie Google Rich Snippets für irgendetwas in Ihren Projekten verwendet? Lass es uns in den Kommentaren unten wissen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.