Open Graph (OG) tags zijn essentieel om ervoor te zorgen dat de content van uw website correct wordt weergegeven op social media platforms wanneer deze wordt gedeeld. Deze tags helpen platforms bepalen welke afbeelding, titel en beschrijving ze moeten gebruiken bij het tonen van uw content. In dit artikel leert u hoe u deze tags toevoegt aan uw WordPress-thema met behulp van PHP, zodat de uitgelichte afbeelding correct wordt weergegeven voor elk gedeeld bericht.
Stap 1: Open Graph-tags begrijpen
Voordat we in de code duiken, kijken we eerst wat Open Graph-tags zijn en waarom ze belangrijk zijn.
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: Definieert het type inhoud, zoals een artikel, video, enz. Voor blogberichten gebruiken we "artikel".
Deze tags worden in de <head> 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
Nu u het belang van Open Graph-tags begrijpt, gaan we de benodigde code aan uw thema toevoegen functies.php bestand. Als u een child theme gebruikt, voegt u de code toe aan het child theme's functies.php bestand om ervoor te zorgen dat uw wijzigingen niet worden overschreven bij toekomstige updates van het bovenliggende thema.
- Toegang tot het WordPress-dashboard en ga naar Uiterlijk > Thema-editor.
- Selecteer de
functies.phpbestand van uw thema of child-thema. - Voeg de volgende PHP-code toe aan het einde van het bestand:
- 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), 'volledig');
} anders {
// Standaard afbeelding-URL als het bericht geen uitgelichte afbeelding heeft
$img_src = array('https://www.example.com/standaardafbeelding.jpg');
}// Berichttitel
$title = haal_de_titel();
// Berichtbeschrijving
$description = haal_het_fragment();echo ' ';
echo' ';
echo' ';
echo' ';
echo' ';
}
}
voeg_actie('wp_head', 'voeg_opengraph_tags_toe');
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()Enhaal_het_fragment() op: Haal de titel en beschrijving van het bericht op, die worden gebruikt voor deog:titelEnog:beschrijvingtags, respectievelijk.
- Canonieke URL en inhoudstype:
permanente_link() ophalen: Haalt de URL van het huidige bericht op voor deog:urllabel.og:type: Stel in op “artikel” om aan te geven dat de inhoud een artikel is.
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.
- 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
<head>sectie. - Gebruik de Facebook Sharing Debugger:
- Bezoek de Facebook-deeldebugger.
- Voer de URL van uw bericht in en klik op “Foutopsporing”.
- 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
