Den Head-Bereich deiner WP-Seite mit Custom-Code individuell zu ergänzen kann in vielerlei Hinscht sehr wichtig und hilfreich sein. In diesem Tutorial führen wir dich anhand einer Optimierung für Facebook-Werbung durch die Thematik. In unserem Beispielprojekt soll der Head-Bereich so ergänzt werden, dass bei Facebook-Verlinkungen auf die Seite immer ein bestimmtes Bild als Thumbnail eingeblendet wird.

Auslesen, was Facebook aktuell als Thumbnail auswählen würde

Über den „Sharing Debugger“ von Facebook kannst du auslesen lassen, welches Bild Facebook bei einer Verlinkung auf deine Seite auswählen würde. Der Facebook-Crawler ermittelt das Bild oftmals rein zufällig. Du kannst dir vorstellen, dass das nicht immer von Vorteil ist. Wie das bei Facebook genau funktioniert, kannst du in diesem Artikel durchlesen: https://developers.facebook.com/docs/sharing/webmasters/crawler .

Den Head-Bereich über das Child-Theme mit Custom-Code individuell ergänzen

Um nun den Head-Bereich mit Custom-Code individuell zu ergänzen, öffnen wir die functions.php deines Child-Themes. Es ist wichtig bei individuellem Code immer ein Child-Theme zu verwenden. Ansonsten könnten deine Änderungen nach einem Update des Main-Themes verloren gehen.

In der functions.php scrollen wir ganz nach unten. Am Ende des bestehenden Codes können wir nun einen eigenen Custom-Code einfügen. Dieser besteht aus folgender Funktion, die du einfach hier von der Seite so übernehmen kannst:

//Wenn immer das gleiche Bild angezeigt werden soll, dann sieht der Code wie folgt aus:
function next_header_insertion() {
echo '<meta property="og:image" content="Link_zu_deinem_Bild_1.jpg" />';
}

Diese Funktion ist dafür zuständig, ein ganz bestimmtes Bild auszuwählen. Damit diese Funktion aber auch jedes Mal beim Auslesen deiner Seite aufgerufen wird, musst du noch einen „Hook“ (deutsch: Haken) einfügen. Das gelingt dir mit folgendem Code:

//Wenn immer das gleiche Bild angezeigt werden soll, dann sieht der Code wie folgt aus:
function next_header_insertion() { 
echo '<meta property="og:image" content="Link_zu_deinem_Bild_1.jpg" />'; 
}
// den Hook einfügen 
add_action('wp_head', 'next_header_insertion');

Nachdem du den Code in deine functions.php kopiert, den Pfad zu deinem Wunschbild eingefügt und das Ganze gespeichert hast, musst du die überabeitete functions.php wieder auf den Server hochladen.

Um zu sehen ob alles geklappt hat, kannst du nun deine Website im Browser aufrufen und mit Rechtsklick -> Seitenquelltext anzeigen den Quellcode deiner Seite einsehen. In der Suche gibst du den Suchbegriff „og:image“ ein. Das Suchergebnis sollte nun einen Eintrag mit <meta>-Tag anzeigen, der auch den Pfad zu dem von dir ausgewählten Bild enthält. Es hat also alles geklappt. Du hast den Head-Bereich mit Custom-Code individuell ergänzt, sodass z.B. Facebook bei Verlinkungen auf deine Seite immer das von dir gewünschte Bild anzeigt.

Änderungen nur für die Startseite umsetzen

Möchtest du, dass das von dir ausgewählte Bild nur beim Aufruf, bzw. der Verlinkung zu der Startseite angezeigt wird, dann kannst du die oben gezeigte Funktion noch in eine if-Verzweigung packen. Das machst du wie folgt:

//Wenn beim Verlinken der Homepage ein anderes Bild angezeigt werden soll, dann sieht der Code wie folgt aus:
function next_header_insertion() {
if( is_front_page() {
echo '<meta property="og:image" content="Link_zu_deinem_Bild_1.jpg" />';
}
}
add_action('wp_head', 'next_header_insertion');

Das bedeutet nun also, dass die Funktion nur greift, wenn deine Startseite ausgelesen wird. Bei den Unterseiten wird eines der dort vorhandenen Bildern zufällig ausgewählt.

Den Head-Bereich deiner WP-Seite mit Custom-Code individuell zu ergänzen kann also aus vielen verschiedenen Gründen enorm wichtig sein. Besonders für das richtige Vermarkten deiner Seite ist es essenziell, dass Crawler und Suchmaschinen auf die von dir gewünschten Einträge zugreifen. Wir hoffen, dass dir das Tutorial bei der Optimierung deiner WP-Seite weiterhelfen wird!