So fügen Sie Open Graph-Tags in WordPress mit PHP hinzu

Open Graph (OG) tags are essential for ensuring that your website content is displayed correctly on social media platforms when shared. These tags help platforms determine which image, title, and description to use when showcasing your content. In this article, you’ll learn how to add these tags to your WordPress theme using PHP, ensuring that the featured image is correctly displayed for each shared post.

Schritt 1: Open Graph-Tags verstehen

Before diving into the code, let’s review what Open Graph tags are and why they are important.

• 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: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Diese Tags werden innerhalb der 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

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s functions.php file. If you’re using a child theme, add the code to the child theme’s functions.php Datei, um sicherzustellen, dass Ihre Änderungen bei zukünftigen Aktualisierungen des übergeordneten Designs nicht überschrieben werden.

1. Zugriff auf das WordPress-Dashboard und gehe zu Darstellung > Design-Editor.
2. Wählen Sie die functions.php Datei Ihres Designs oder untergeordneten Designs.
3. Fügen Sie den folgenden PHP-Code hinzu am Ende der Datei:
4. 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), ‘full’);
   } 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 = get_the_excerpt();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 () Und hol_den_Auszug(): Rufen Sie den Beitragstitel und die Beschreibung ab, die für die og:Titel Und og:Beschreibung Tags bzw.
• Kanonische URL und Inhaltstyp:
  • get_permalink(): Ruft die URL des aktuellen Beitrags für die og:url Etikett.
  • og:Typ: Set to “article” to indicate that the content is an article.

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.

1. 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 Abschnitt.
2. Verwenden Sie den Facebook Sharing Debugger:
   • Besuchen Sie die Facebook-Sharing-Debugger.
   • Enter the URL of your post and click “Debug”.
   • 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