Integration von Google Rich Snippets in ein WordPress-Theme
() translation by (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:
1 |
include('recipe-config.php'); |
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".
1 |
add_action( 'init', 'register_my_culinary_recipe' ); |
2 |
|
3 |
function register_my_culinary_recipe() { |
4 |
$labels = array( |
5 |
'name' => _x( 'Recipes', 'culinary_recipes' ), |
6 |
'singular_name' => _x( 'Recipe', 'culinary_recipes' ), |
7 |
'add_new' => _x( 'Add New', 'culinary_recipes' ), |
8 |
'add_new_item' => _x( 'Add New Recipe', 'culinary_recipes' ), |
9 |
'edit_item' => _x( 'Edit Recipe', 'culinary_recipes' ), |
10 |
'new_item' => _x( 'New Recipe', 'culinary_recipes' ), |
11 |
'view_item' => _x( 'View Recipe', 'culinary_recipes' ), |
12 |
'search_items' => _x( 'Search Recipes', 'culinary_recipes' ), |
13 |
'not_found' => _x( 'No Recipes found', 'culinary_recipes' ), |
14 |
'not_found_in_trash' => _x( 'No recipes found in Trash', 'culinary_recipes' ), |
15 |
'parent_item_colon' => '', |
16 |
'menu_name' => _x( 'Recipes', 'culinary_recipes' ) |
17 |
);
|
18 |
$args = array( |
19 |
'labels' => $labels, |
20 |
'public' => true, |
21 |
'publicly_queryable' => true, |
22 |
'show_ui' => true, |
23 |
'show_in_menu' => true, |
24 |
'show_in_nav_menus' => true, |
25 |
'exclude_from_search' => false, |
26 |
'hierarchical' => false, |
27 |
'has_archive' => true, |
28 |
'rewrite' => array('slug' => 'recipe') |
29 |
);
|
30 |
register_post_type( 'my_culinary_recipe', $args ); |
31 |
}
|
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.
1 |
function be_initialize_cmb_meta_boxes() { |
2 |
if ( !class_exists( 'cmb_Meta_Box' ) ) { |
3 |
require_once( 'lib/metabox/init.php' ); |
4 |
}
|
5 |
}
|
6 |
add_action( 'init', 'be_initialize_cmb_meta_boxes', 9999 ); |
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.
1 |
$prefix = 'mcr_'; // Prefix for all fields |
2 |
|
3 |
function mcr_create_metaboxes( $meta_boxes ) { |
4 |
global $prefix; |
5 |
$meta_boxes[] = array( |
6 |
'id' => 'recipe-data', |
7 |
'title' => 'Culinary Recipe', |
8 |
'pages' => array('my_culinary_recipe'), |
9 |
'context' => 'normal', |
10 |
'priority' => 'high', |
11 |
'show_names' => true, |
12 |
'fields' => array( |
13 |
//TITLE - TEXT
|
14 |
array( |
15 |
'name' => __( 'Recipe Title', 'culinary_recipes' ), |
16 |
'id' => $prefix . 'name', |
17 |
'type' => 'text', |
18 |
),
|
19 |
//RECIPE TYPE - TEXT
|
20 |
array( |
21 |
'name' => __( 'Recipe Type', 'culinary_recipes' ), |
22 |
'desc' => __( 'The type of dish: for example, appetizer, entree, dessert, etc.', 'culinary_recipes' ), |
23 |
'id' => $prefix . 'type', |
24 |
'type' => 'text_medium', |
25 |
),
|
26 |
// IMAGE UPLOAD
|
27 |
array( |
28 |
'name' => 'Recipe Image', |
29 |
'desc' => 'Image of the dish being prepared.', |
30 |
'id' => $prefix . 'image', |
31 |
'type' => 'file', |
32 |
'save_id' => false, // save ID using true |
33 |
'allow' => array('url', 'attachment') // limit to just attachments with array( 'attachment' ) |
34 |
),
|
35 |
//SUMMARY - TEXT
|
36 |
array( |
37 |
'name' => __( 'Summary', 'culinary_recipes' ), |
38 |
'desc' => __( 'A short summary describing the dish.', 'culinary_recipes' ), |
39 |
'id' => $prefix . 'summary', |
40 |
'type' => 'text', |
41 |
),
|
42 |
//INGREDIENTS - TEXTAREA
|
43 |
array( |
44 |
'name' => __( 'Ingredients', 'culinary_recipes' ), |
45 |
'desc' => __( 'Put each ingredient in seaprate line.', 'culinary_recipes' ), |
46 |
'id' => $prefix . 'ingredients', |
47 |
'type' => 'textarea', |
48 |
),
|
49 |
//DIRECTIONS - TEXTAREA
|
50 |
array( |
51 |
'name' => __( 'Instructions', 'culinary_recipes' ), |
52 |
'desc' => __( 'Put each instruction in seaprate line.', 'culinary_recipes' ), |
53 |
'id' => $prefix . 'instructions', |
54 |
'type' => 'textarea', |
55 |
),
|
56 |
//YIELD - TEXT
|
57 |
array( |
58 |
'name' => __( 'Yield', 'culinary_recipes' ), |
59 |
'desc' => __( 'Enter the number of servings or number of people served', 'culinary_recipes' ), |
60 |
'id' => $prefix . 'yield', |
61 |
'type' => 'text_medium', |
62 |
),
|
63 |
//PREP TIME - TITLE
|
64 |
array( |
65 |
'name' => __( 'Prep time', 'culinary_recipes' ), |
66 |
'desc' => __( 'How long does it take to prep?', 'culinary_recipes' ), |
67 |
'type' => 'title', |
68 |
'id' => $prefix . 'prep_title' |
69 |
),
|
70 |
//PREP TIME HOURS - NUMBER
|
71 |
array( |
72 |
'name' => __( 'Hours', 'culinary_recipes' ), |
73 |
'id' => $prefix . 'prep_time_hours', |
74 |
'type' => 'number', |
75 |
'std' => '0', |
76 |
),
|
77 |
//PREP TIME MINUTES- NUMBER
|
78 |
array( |
79 |
'name' => __( 'Minutes', 'culinary_recipes' ), |
80 |
'id' => $prefix . 'prep_time_minutes', |
81 |
'type' => 'number', |
82 |
'std' => '0', |
83 |
),
|
84 |
//COOK TIME - TITLE
|
85 |
array( |
86 |
'name' => __( 'Cooking time', 'culinary_recipes' ), |
87 |
'desc' => __( 'Total time of cooking, baking etc.', 'culinary_recipes' ), |
88 |
'type' => 'title', |
89 |
'id' => $prefix . 'coking_title' |
90 |
),
|
91 |
//COOKING TIME - TEXT
|
92 |
array( |
93 |
'name' => __( 'Hours', 'culinary_recipes' ), |
94 |
'id' => $prefix . 'cook_time_hours', |
95 |
'type' => 'number', |
96 |
'std' => '0', |
97 |
),
|
98 |
//COOKING TIME - TEXT
|
99 |
array( |
100 |
'name' => __( 'Minutes', 'culinary_recipes' ), |
101 |
'id' => $prefix . 'cook_time_minutes', |
102 |
'type' => 'number', |
103 |
'std' => '0', |
104 |
)
|
105 |
)
|
106 |
);
|
107 |
|
108 |
return $meta_boxes; |
109 |
}
|
110 |
|
111 |
add_filter( 'cmb_meta_boxes' , 'mcr_create_metaboxes' ); |
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:
1 |
array( |
2 |
'name' => __('Summary', 'culinary_recipes'), |
3 |
'desc' => __('A short summary describing the dish.', 'culinary_recipes'), |
4 |
'id' => $prefix .'summary', |
5 |
'type' => 'text', |
6 |
),
|
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.
1 |
add_action( 'cmb_render_number', 'rrh_cmb_render_number', 10, 2 ); |
2 |
function rrh_cmb_render_number( $field, $meta ) { |
3 |
echo '<input type="number" min="0" max="60" class="cmb_text_inline" name="', $field['id'], '" id="', $field['id'], '" value="', '' !== $meta ? $meta : $field['std'], '" />','<p class="cmb_metabox_description">', $field['desc'], '</p>'; |
4 |
}
|
5 |
add_filter( 'cmb_validate_number', 'rrh_cmb_validate_number' ); |
6 |
|
7 |
function rrh_cmb_validate_number( $new ) { |
8 |
return (int)$new; |
9 |
}
|
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.
1 |
function mcr_display_recipe($content) { |
2 |
|
3 |
global $post; |
4 |
$recipe = ''; |
5 |
|
6 |
if ( is_singular( 'my_culinary_recipe' ) ) { |
7 |
$recipe .= '<div class="recipe">'; |
8 |
$recipe .= '<div itemscope itemtype="http://schema.org/Recipe" >'; |
9 |
$recipe .= '<h2 itemprop="name">'. get_post_meta($post->ID,'mcr_name',true) .'</h2>'; |
10 |
$recipe .= '<img class="alignright" itemprop="image" src="'. get_post_meta($post->ID,'mcr_image',true) .'" />'; |
11 |
$recipe .= '<span class="mcr_meta"><b>Recipe type:</b> <time itemprop="recipeCategory">'. get_post_meta($post->ID,'mcr_type',true) .'</time></span>'; |
12 |
$recipe .= '<span class="mcr_meta"><b>Yield:</b> <span itemprop="recipeYield">'. get_post_meta($post->ID,'mcr_yield',true) .'</span></span>'; |
13 |
$recipe .= '<span class="mcr_meta"><b>Prep time:</b> <time content="'. mcr_time('prep','iso') .'" itemprop="prepTime">'. mcr_time('prep') .'</time></span>'; |
14 |
$recipe .= '<span class="mcr_meta"><b>Cook time:</b> <time content="'. mcr_time('cook','iso') .'" itemprop="cookTime">'. mcr_time('cook') .'</time></span>'; |
15 |
$recipe .= '<span class="mcr_meta"><b>Total time:</b> <time content="'. mcr_total_time('iso') .'" itemprop="totalTime">'. mcr_total_time() .'</time></span>'; |
16 |
$recipe .= '</br>'; |
17 |
$recipe .= '<hr />'; |
18 |
$recipe .= '<span itemprop="description">'. get_post_meta($post->ID,'mcr_summary',true) .'</span><br />'; |
19 |
$recipe .= '<h3>Ingredients:</h3> '. mcr_list_items('ingredients'); |
20 |
$recipe .= '<h3>Directions:</h3> '. mcr_list_items('instructions'); |
21 |
$recipe .= '<span class="mcr_meta">Published on <time itemprop="datePublished" content="'. get_the_date('Y-m-d') .'">'. get_the_date('F j, Y') .'</time></span>'; |
22 |
$recipe .= '<span class="mcr_meta">by <span itemprop="author">'. get_the_author() .'</span></span>'; |
23 |
$recipe .= '</div>'; |
24 |
$recipe .= '</div>'; |
25 |
}
|
26 |
|
27 |
return $content . $recipe; |
28 |
}
|
29 |
add_filter('the_content', 'mcr_display_recipe', 1); |
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.
1 |
function mcr_time($type = 'prep', $format = null) { |
2 |
|
3 |
global $post; |
4 |
|
5 |
$hours = get_post_meta($post->ID,'mcr_'.$type.'_time_hours',true); |
6 |
$minutes = get_post_meta($post->ID,'mcr_'.$type.'_time_minutes',true); |
7 |
$time = ''; |
8 |
if ($format == 'iso') { |
9 |
if ($hours > 0) { |
10 |
$time = 'PT'.$hours.'H'; |
11 |
if($minutes > 0) { |
12 |
$time .= $minutes.'M'; |
13 |
}
|
14 |
}
|
15 |
else { |
16 |
$time = 'PT'.$minutes.'M'; |
17 |
}
|
18 |
}
|
19 |
else { |
20 |
if ($hours > 0) { |
21 |
if ($hours == 1) { |
22 |
$time = $hours.' hour '; |
23 |
}
|
24 |
else { |
25 |
$time = $hours.' hrs '; |
26 |
}
|
27 |
if ($minutes > 0) { |
28 |
$time .= $minutes.' mins'; |
29 |
}
|
30 |
}
|
31 |
else { |
32 |
$time = $minutes.' mins'; |
33 |
}
|
34 |
}
|
35 |
return $time; |
36 |
}
|
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
'.
1 |
function mcr_total_time($format = null) { |
2 |
|
3 |
global $post; |
4 |
$prep_hours = get_post_meta($post->ID,'mcr_prep_time_hours',true); |
5 |
$prep_minutes = get_post_meta($post->ID,'mcr_prep_time_minutes',true); |
6 |
$cook_hours = get_post_meta($post->ID,'mcr_cook_time_hours',true); |
7 |
$cook_minutes = get_post_meta($post->ID,'mcr_cook_time_minutes',true); |
8 |
$total_minutes = ($prep_hours + $cook_hours)*60 + $prep_minutes + $cook_minutes; |
9 |
$hours = 0; |
10 |
$minutes = 0; |
11 |
|
12 |
if ($total_minutes >= 60) { |
13 |
$hours = floor($total_minutes / 60); |
14 |
$minutes = $total_minutes - ($hours * 60); |
15 |
}
|
16 |
else { |
17 |
$minutes = $total_minutes; |
18 |
}
|
19 |
$total_time = ''; |
20 |
if ($format == 'iso') { |
21 |
if ($hours > 0 ) { |
22 |
$total_time = 'PT'.$hours.'H'; |
23 |
if ($minutes > 0) { |
24 |
$total_time .= $minutes.'M'; |
25 |
}
|
26 |
}
|
27 |
else { |
28 |
$total_time = 'PT'.$minutes.'M'; |
29 |
}
|
30 |
}
|
31 |
else { |
32 |
if ($hours > 0 ) { |
33 |
if ($hours == 1) { |
34 |
$total_time = $hours.' hour '; |
35 |
}
|
36 |
else { |
37 |
$total_time = $hours.' hrs '; |
38 |
}
|
39 |
if ($minutes > 0) { |
40 |
$total_time .= $minutes.' mins'; |
41 |
}
|
42 |
}
|
43 |
else { |
44 |
$total_time = $minutes.' mins'; |
45 |
}
|
46 |
}
|
47 |
return $total_time; |
48 |
}
|
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
.
1 |
function mcr_list_items($type = 'ingredients') { |
2 |
|
3 |
global $post; |
4 |
|
5 |
if (get_post_meta($post->ID, 'mcr_'. $type, true)) { |
6 |
$get_items = get_post_meta($post->ID, 'mcr_'. $type, true); |
7 |
$items = explode("\r", $get_items); |
8 |
$list = ''; |
9 |
}
|
10 |
else { |
11 |
return; |
12 |
}
|
13 |
if ($type=='ingredients') { |
14 |
$list .= '<ul>'; |
15 |
foreach ($items as $item) { |
16 |
$list .= '<li><span itemprop="ingredients">' . trim($item) . '</span></li>'; |
17 |
}
|
18 |
$list .= '</ul>'; |
19 |
}
|
20 |
elseif ($type=='instructions') { |
21 |
$list .= '<ol itemprop="recipeInstructions">'; |
22 |
foreach ($items as $item) { |
23 |
$list .= '<li>' . trim($item) . '</li>'; |
24 |
}
|
25 |
$list .= '</ol>'; |
26 |
}
|
27 |
else { |
28 |
$list .= 'Invalid list type.'; |
29 |
}
|
30 |
return $list; |
31 |
}
|
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.