Hoe u Open Graph-tags in WordPress kunt toevoegen met behulp van PHP

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.

Stap 1: Open Graph-tags begrijpen

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

• og:titel: Definieert de titel van het bericht.
• og:beschrijving: Geeft een korte beschrijving van het bericht.
• og:afbeelding: Geeft aan welke afbeelding moet worden gebruikt bij het delen van het bericht.
• og:url: Geeft de canonieke URL van het bericht op.
• og:type: Defines the type of content, such as an article, video, etc. For blog posts, we use “article”.

Deze tags worden in de gedeelte van de HTML van uw site en worden gelezen door sociale-mediaplatforms zoals Facebook, Twitter en LinkedIn.

Stap 2: De code aan uw thema toevoegen

Now that you understand the importance of Open Graph tags, let’s add the necessary code to your theme’s functies.php file. If you’re using a child theme, add the code to the child theme’s functies.php bestand om ervoor te zorgen dat uw wijzigingen niet worden overschreven bij toekomstige updates van het bovenliggende thema.

1. Toegang tot het WordPress-dashboard en ga naar Uiterlijk > Thema-editor.
2. Selecteer de functies.php bestand van uw thema of child-thema.
3. Voeg de volgende PHP-code toe aan het einde van het bestand:
4. functie add_opengraph_tags() {
   als (is_single() || is_pagina()) {
   wereldwijd $post;
   als (has_post_thumbnail($post->ID)) {
   $img_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), ‘full’);
   } anders {
   // Standaard afbeelding-URL als het bericht geen uitgelichte afbeelding heeft
   $img_src = array(‘https://www.example.com/default-image.jpg’);
   }// Berichttitel
   $title = haal_de_titel();
   // Berichtbeschrijving
   $description = get_the_excerpt();echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   echo ‘’;
   }
   }
   add_action(‘wp_head’, ‘add_opengraph_tags’);

Code-uitleg:

• add_opengraph_tags(): Deze functie controleert of de huidige pagina een bericht of pagina is en genereert, indien dit het geval is, de juiste Open Graph-tags.
• Uitgelichte afbeelding:
  • heeft_post_miniatuur($post->ID): Controleert of er een uitgelichte afbeelding is ingesteld voor het bericht.
  • wp_get_attachment_image_src(): Haalt de volledige URL van de uitgelichte afbeelding op. Als de post geen uitgelichte afbeelding heeft, wordt een standaardafbeelding gebruikt.
• Titel en beschrijving:
  • haal_de_titel() En haal_het_fragment() op: Haal de titel en beschrijving van het bericht op, die worden gebruikt voor de og:titel En og:beschrijving tags, respectievelijk.
• Canonieke URL en inhoudstype:
  • permanente_link() ophalen: Haalt de URL van het huidige bericht op voor de og:url label.
  • og:type: Set to “article” to indicate that the content is an article.

Stap 3: De implementatie verifiëren

Nadat u de code hebt toegevoegd aan functies.phpis het belangrijk om te controleren of de Open Graph-tags correct worden gegenereerd.

1. Bekijk de bron van de pagina: Klik met de rechtermuisknop op een bericht of pagina en selecteer 'Paginabron weergeven' of een vergelijkbare optie. Zoek naar de Open Graph-tags in de sectie.
2. Gebruik de Facebook Sharing Debugger:
   • Bezoek de Facebook-deeldebugger.
   • Enter the URL of your post and click “Debug”.
   • Facebook toont de informatie die het detecteert, inclusief de afbeelding, titel en beschrijving. Dit helpt identificeren of de tags correct worden gegenereerd.

Stap 4: Problemen met veelvoorkomende problemen oplossen

• Afbeelding wordt niet weergegeven: Zorg ervoor dat de uitgelichte afbeelding is ingesteld op de post. Als er een standaardafbeelding wordt gebruikt, controleer dan of de URL van de afbeelding correct en openbaar toegankelijk is.
• Conflicten met andere plug-ins: Sommige SEO- of social media-plugins kunnen de generatie van Open Graph-tags verstoren. Probeer deze plugins tijdelijk uit te schakelen om te zien of het probleem zich blijft voordoen.
• Cachen: Als u een cacheplug-in gebruikt, wist u de cache van de site om er zeker van te zijn dat de nieuwe instellingen worden toegepast.

Samenvatting

Het handmatig toevoegen van Open Graph-tags aan uw WordPress-thema met behulp van PHP is een uitstekende manier om ervoor te zorgen dat uw content correct wordt weergegeven op socialemediaplatforms. Met deze code hebt u volledige controle over hoe uw berichten worden gedeeld, inclusief welke afbeelding, titel en beschrijving worden gebruikt. Bovendien vermijdt u het vertrouwen op extra plug-ins, waardoor uw site lichter en sneller blijft.

Nu u de Open Graph-tags hebt geconfigureerd, zouden uw berichten correct moeten worden gedeeld op sociale media, met de uitgelichte afbeeldingen zoals verwacht. Als u vragen hebt of verdere assistentie nodig hebt, kunt u hieronder een reactie achterlaten!

Foto door Negatieve ruimte