Open Graph (OG)-Tags sind unerlässlich, um sicherzustellen, dass Ihre Website-Inhalte beim Teilen auf Social-Media-Plattformen korrekt angezeigt werden. Mithilfe dieser Tags können Plattformen bestimmen, welches Bild, welcher Titel und welche Beschreibung bei der Präsentation Ihrer Inhalte verwendet werden sollen. In diesem Artikel erfahren Sie, wie Sie diese Tags mithilfe von PHP zu Ihrem WordPress-Theme hinzufügen und so sicherstellen, dass das vorgestellte Bild bei jedem geteilten Beitrag korrekt angezeigt wird.
Schritt 1: Open Graph-Tags verstehen
Bevor wir uns in den Code vertiefen, wollen wir uns ansehen, was Open Graph-Tags sind und warum sie wichtig sind.
og:Titel: Definiert den Titel des Beitrags.og:Beschreibung: Bietet eine kurze Beschreibung des Beitrags.og:Bild: Gibt das Bild an, das beim Teilen des Beitrags verwendet werden soll.og:url: Gibt die kanonische URL des Beitrags an.og:Typ: Definiert die Art des Inhalts, z. B. Artikel, Video usw. Für Blogbeiträge verwenden wir „Artikel“.
Diese Tags werden innerhalb der <head> Abschnitt des HTML Ihrer Site und werden von Social-Media-Plattformen wie unter anderem Facebook, Twitter und LinkedIn gelesen.
Schritt 2: Hinzufügen des Codes zu Ihrem Design
Nachdem Sie nun die Bedeutung von Open Graph-Tags verstanden haben, fügen wir den erforderlichen Code zu Ihrem Thema hinzu. functions.php Datei. Wenn Sie ein untergeordnetes Design verwenden, fügen Sie den Code zur Datei des untergeordneten Designs hinzu. functions.php Datei, um sicherzustellen, dass Ihre Änderungen bei zukünftigen Aktualisierungen des übergeordneten Designs nicht überschrieben werden.
- Zugriff auf das WordPress-Dashboard und gehe zu Darstellung > Design-Editor.
- Wählen Sie die
functions.phpDatei Ihres Designs oder untergeordneten Designs. - Fügen Sie den folgenden PHP-Code hinzu am Ende der Datei:
- Funktion add_opengraph_tags() {
wenn (ist_einzeln() || ist_Seite()) {
globaler $post;
if (has_post_thumbnail($post->ID)) {
$img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'vollständig');
} anders {
// Standard-Bild-URL, wenn der Beitrag kein vorgestelltes Bild hat
$img_src = array('https://www.example.com/default-image.jpg');
}// Beitragstitel
$title = Titel_erhalten();
// Beitragsbeschreibung
$description = hol_den_Auszug();echo ' ';
Echo ' ';
Echo ' ';
Echo ' ';
Echo ' ';
}
}
add_action('wp_head', 'add_opengraph_tags');
Code-Erklärung:
add_opengraph_tags(): Diese Funktion prüft, ob es sich bei der aktuellen Seite um einen Beitrag oder eine Seite handelt und generiert, wenn ja, die entsprechenden Open Graph-Tags.- Ausgewähltes Bild:
has_post_thumbnail($post->ID): Überprüft, ob für den Beitrag ein hervorgehobenes Bild festgelegt ist.wp_get_attachment_image_src(): Ruft die URL des vorgestellten Bildes in voller Größe ab. Wenn der Beitrag kein vorgestelltes Bild enthält, wird ein Standardbild verwendet.
- Titel und Beschreibung:
Titel abrufen ()Undhol_den_Auszug(): Rufen Sie den Beitragstitel und die Beschreibung ab, die für dieog:TitelUndog:BeschreibungTags bzw.
- Kanonische URL und Inhaltstyp:
get_permalink(): Ruft die URL des aktuellen Beitrags für dieog:urlEtikett.og:Typ: Auf „Artikel“ setzen, um anzuzeigen, dass es sich bei dem Inhalt um einen Artikel handelt.
Schritt 3: Überprüfen der Implementierung
Nach dem Hinzufügen des Codes zu functions.php, ist es wichtig zu überprüfen, ob die Open Graph-Tags korrekt generiert werden.
- Anzeigen der Seitenquelle: Klicken Sie in einem Beitrag oder auf einer Seite mit der rechten Maustaste und wählen Sie „Seitenquelle anzeigen“ oder eine ähnliche Option. Suchen Sie nach den Open Graph-Tags im
<head>Abschnitt. - Verwenden Sie den Facebook Sharing Debugger:
- Besuchen Sie die Facebook-Sharing-Debugger.
- Geben Sie die URL Ihres Beitrags ein und klicken Sie auf „Debuggen“.
- Facebook zeigt die erkannten Informationen an, darunter Bild, Titel und Beschreibung. So lässt sich feststellen, ob die Tags korrekt generiert werden.
Schritt 4: Beheben häufiger Probleme
- Bild wird nicht angezeigt: Stellen Sie sicher, dass das ausgewählte Bild im Beitrag aktiviert ist. Wenn Sie ein Standardbild verwenden, überprüfen Sie, ob die Bild-URL korrekt und öffentlich zugänglich ist.
- Konflikte mit anderen Plugins: Einige SEO- oder Social-Media-Plugins können die Generierung von Open Graph-Tags beeinträchtigen. Deaktivieren Sie diese Plugins vorübergehend, um zu prüfen, ob das Problem weiterhin besteht.
- Zwischenspeichern: Wenn Sie ein Caching-Plugin verwenden, leeren Sie den Cache der Site, um sicherzustellen, dass die neuen Einstellungen angewendet werden.
Zusammenfassung
Das manuelle Hinzufügen von Open Graph-Tags zu Ihrem WordPress-Theme mit PHP ist eine hervorragende Möglichkeit, die korrekte Darstellung Ihrer Inhalte auf Social-Media-Plattformen sicherzustellen. Mit diesem Code haben Sie die volle Kontrolle darüber, wie Ihre Beiträge geteilt werden, einschließlich Bild, Titel und Beschreibung. Außerdem vermeiden Sie zusätzliche Plugins und halten Ihre Website schlanker und schneller.
Nachdem Sie die Open Graph-Tags konfiguriert haben, sollten Ihre Beiträge korrekt in sozialen Medien geteilt werden und die vorgestellten Bilder wie erwartet angezeigt werden. Wenn Sie Fragen haben oder weitere Hilfe benötigen, hinterlassen Sie unten gerne einen Kommentar!
Foto von Negativer Raum
