WordPress OG-tags: hoe u meer klikken naar uw bericht op social media kunt verhogen

Heb je gehoord over og metatags? Implementeer je metatags op je WordPress-site? Dit artikel laat u zien wat metatags zijn en hoe u deze op uw WordPress-website kunt implementeren.

Wanneer een bericht van je blog of een URL van je website op Facebook wordt gedeeld, kan de sociale-mediasite er goed aan doen om de juiste gegevens eruit te halen. Dingen zoals de URL van uw blog of website, een uittreksel van de tekst van het bericht, een uitgelichte afbeelding, enz. worden weergegeven, zodat gebruikers erop klikken.

Als u echter een fervent Facebook-gebruiker bent, is het u misschien opgevallen dat de gegevens die het van websites haalt (inclusief die van u) niet altijd perfect zijn. Soms trekt het een afbeelding die de inhoud van het gedeelde bericht niet nauwkeurig weergeeft, of het extraheert tekst aan het einde van het bericht en gebruikt het als het uittreksel, wat bijna altijd geen goede zaak is, en erger nog, er zijn momenten waarop geen andere gegevens dan de titel van het bericht (of de inhoud van de tag) en de URL wordt helemaal gedeeld!

Dit gebeurt meestal als u het niet implementeert open graph-metatags (ook bekend als og metatags) op uw WordPress-website. Zonder deze belangrijke tags kunnen Facebook (en andere sociale-mediasites) niet de juiste informatie krijgen om weer te geven voor een gedeeld bericht of een gedeelde link.

Dit is hoe het eruit kan zien als je een URL deelt op Facebook vanaf een website die niet wordt bijgewerkt met open graph-tags:

facebook delen zonder og tags

Aan de andere kant, zo ziet het eruit wanneer je een URL deelt die open graph-metatags implementeert:

facebook delen met og1

Facebook's Open Graph (OG) metatags

De open-graph-metatags van Facebook bepalen hoe een website van derden (zoals uw blog) op Facebook wordt gepresenteerd.

Hoewel het is ontwikkeld door Facebook, worden open graph-metatags ook gebruikt door andere sociale netwerken (zoals Twitter en LinkedIn) om het delen dat daar plaatsvindt aan te passen.

Om de open grafiek-metatags op uw WordPress-site op te nemen, moet u extra . toevoegen tags in de van uw website. Volgens de open grafiek protocol, de volgende zijn de vereiste eigenschappen:

  • og: titel
  • og: type
  • og: afbeelding
  • og: url

 

og-tags facebook1

Door gebruik te maken van open grafieken op websites, heeft Neil Patel gevonden een stijging van de klikfrequentie met 39%.

Hoe controleer je op OG-metatags op je WordPress-site?

Kijk naar de broncode van je WordPress website als je niet zeker weet of er al og tags op je website zijn geplaatst. Druk in Windows of Linux op Ctrl + U en in Mac op Command + Alt + U om de broncode te bekijken.

Als het al wordt toegevoegd, vindt u uw og-tags in de sectie binnen de "

og

Daarnaast kunt u de Facebook Sharing Debugger tool om te zien wat Facebook leest over uw site.

OG-metatags toevoegen aan WordPress zonder plug-in

Om og metatags toe te voegen aan uw berichten en pagina's op WordPress zonder een plug-in te gebruiken, voegt u eenvoudig het volgende codefragment toe aan uw thema's functions.php bestand.

// De Open Graph toevoegen aan de functie Language Attributes add_opengraph_doctype ($output) {return $output. ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"'; } add_filter('language_attributes', 'add_opengraph_doctype'); // Laten we Open Graph Meta Info-functie toevoegen add_og_meta_tag() { global $post; if( !is_singular() ) // als het geen bericht of pagina is, voeg dan geen og tags return toe; echo " \n"; echo ' ' . "\n"; echo' ' . "\n"; echo' ' . "\n"; echo' ' . "\n"; echo' ' . "\n"; echo'  ' . "\n"; if( !has_post_thumbnail( $post->ID) ) { // als het bericht geen uitgelichte afbeelding heeft, gebruik dan een standaard afbeelding $default_image="https://example.com/image.jpg"; // vervang dit door een standaard afbeelding op uw server of een afbeelding in uw mediabibliotheek echo ' '; } else { $thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id ($post->ID), 'groot'); echo' '; } echo "\n \n"; } add_action( 'wp_head', 'add_og_meta_tag', 0 );

Zorg ervoor dat u "UW GEBRUIKERS-ID" wijzigt in de deel met uw eigen Facebook-gebruikers-ID.

U kunt uw Facebook-gebruikers-ID vinden door naar uw Facebook-profielpagina te gaan in een desktopbrowser.

  1. Klik op je profielafbeelding en selecteer "Bekijk profielfoto"
  2. Hiermee wordt de fotoviewer van Facebook geopend voor uw profielfoto.
  3. De URL zou er nu ongeveer zo uit moeten zien: “https://www.facebook.com/photo?fbid=xxxxxxxxxxxxxxx&set=a.xxxxxxxxxxxxxxx"
  4. Zoek het onderdeel bid=xxxxxxxxxxxxxx. De cijfers na de bid parameter "xxxxxxxxxxxxxxxx” is uw gebruikers-ID.
  5. Kopieer dat en gebruik het om "UW GEBRUIKERS-ID" in het bovenstaande codefragment te vervangen.

facebook gebruikers-ID

U bent klaar! Uw website is nu bijgewerkt met open graph-tags.

OG-metatags toevoegen aan WordPress met een plug-in

De twee populaire SEO-plug-ins, Yoast SEO en All in One SEO Pack wordt geleverd met functies voor open grafiek-metatags.

OG-tags toevoegen met Yoast SEO-plug-in

Installeer eerst Yoast SEO. Na de installatie zou u het nieuwe SEO-item in het linkerzijbalkmenu van de beheerder moeten zien.

Om og-tags toe te voegen met Yoast, ga naar SEO > Social via het admin-zijbalkmenu.

Zodra je op de pagina bent, ga je naar het tabblad Facebook.

yoast seo en tag

Yoast SEO voegt standaard open grafiektags toe aan uw berichten. U hoeft niets te configureren. 

U moet echter og-tags configureren voor de voorpagina van uw website.

Onder de Instellingen voorpagina sectie, kunt u een afbeeldings-URL voor uw voorpagina definiëren. Dit wordt gebruikt voor de og: afbeelding eigenschap van uw startpagina. 

U kunt ook de titel en de beschrijving toevoegen, die beide worden gebruikt voor de og: titel en og: beschrijving eigenschappen respectievelijk.

Eindelijk is er de Standaardinstellingen sectie. Hiermee kun je een standaard afbeeldings-URL definiëren die zal worden gebruikt voor de og: afbeelding eigenschap voor het geval er geen uitgelichte afbeelding is gedefinieerd.

Als je klaar bent, vergeet dan niet te klikken op Wijzigingen opslaan om uw wijzigingen toe te passen.

OG-tags per bericht configureren met Yoast SEO

Als je handmatig og-tags per bericht wilt instellen, kun je dit doen door naar de berichteditor te gaan en naar beneden te scrollen naar de Yoast Metabox-sectie en naar de Social Tab.

yoast per bericht en tags

U kunt dan hier een aangepaste parameter voor verschillende og-tags definiëren.

Als je klaar bent met het toevoegen van je og-tags aan een bericht, zorg er dan voor dat je het opslaat, bijwerkt of publiceert, wat van toepassing is, om de gemaakte wijzigingen vast te leggen.

OG-tags toevoegen met alles-in-één SEO-pakket

Installeer eerst het Alles-in-één SEO-pakket. Ga na de installatie naar All in One SEO > Sociale netwerken via het zijbalkmenu van uw site. Zodra je op de pagina bent, ga je naar de Facebook Tab.

alles in één seo en tags

Met All in One SEO Pack worden og-tags standaard uit de doos aan uw bericht toegevoegd, vergelijkbaar met Yoast.

Er zijn hier meer configureerbare opties in vergelijking met Yoast, maar sommige zijn alleen beschikbaar als je de pro-versie gebruikt. nooit deless, is het aantal configureerbare opties in de gratis versie meer dan genoeg.

  • Standaard berichtafbeelding - bepaalt welke afbeelding zal worden gebruikt voor een bericht og: afbeelding eigendom.
  • Standaard Facebook-afbeelding posten - als u de standaard afbeelding (set hieronder) selecteert in de standaard afbeeldingsoptie voor posten, uploadt u hier de aangepaste afbeelding.
  • Standaard berichttype Objecttypes - laat je een standaardwaarde definiëren voor een bericht, pagina of bijlage og: type eigendom.
  • Toon Facebook-auteur - u kunt uw Facebook-profiel koppelen aan uw website. Als u deze optie inschakelt, kunt u een bericht aan uw Facebook-profiel koppelen, zodat uw lezers uw FB-pagina/profiel direct kunnen volgen. U kunt meer leren over hoe u dit kunt configureren via AIOSEO's help pagina.
  • Site Naam - stelt u in staat om te configureren welke waarden worden gebruikt voor een bericht og: sitenaam eigendom. U kunt tags gebruiken om de waarde voor deze eigenschap dynamisch te genereren, u kunt ook een standaardtekst toevoegen of u kunt de twee ook mixen als u dat wilt.

Na de bovenstaande items is er een sectie voor het configureren van de startpagina en tags van uw site. Onder de Instellingen startpagina sectie, kunt u het volgende definiëren:

  • Beeld - voor uw startpagina's og: afbeelding eigendom.
  • Titel - voor uw startpagina's og: titel eigendom. U kunt variabelen gebruiken om dit dynamisch te genereren.
  • Omschrijving - voor uw startpagina's og: beschrijving eigendom.
  • Object type - voor uw startpagina's og: type eigendom.

Eindelijk is er een Geavanceerde instellingen sectie, waarmee u extra metatags voor open grafieken kunt definiëren, zoals: fb: app_id, fb: admins, Etc.

Als u tevreden bent met uw configuratie, vergeet dan niet om wijzigingen opslaan.

OG-tags per bericht configureren met alles-in-één SEO-pakket

U kunt per bericht en tags configureren met AIOSEO zoals Yoast. Ga naar de berichteditor en scrol omlaag naar de AIOSEO-metabox en ga vervolgens naar de Social Tab.

aioseo per bericht en tags

De opties hier zijn vergelijkbaar met wat hierboven is besproken. U kunt doorgaan en aangepaste parameters definiëren voor uw og-tags voor dit bericht, waarbij u alle opties negeert die u in de instellingen van AIOSEO hebt gedefinieerd.

Als je klaar bent met het toevoegen van je og-tags aan een bericht, zorg er dan voor dat je het opslaat, bijwerkt of publiceert, wat van toepassing is, om de gemaakte wijzigingen vast te leggen.

Dat behandelt hoe u og-tags aan uw WordPress-site kunt toevoegen. Hopelijk heeft dit artikel je geholpen om de betere aanpak daarvoor te kiezen en dat je een beetje hebt geleerd over hoe belangrijk het is om og-tags op je website te implementeren.

Als je meer WordPress-tips en -trucs wilt zien, bekijk dan onze volledige 101 lijst met WordPress-tips en -trucs.

Download de lijst met 101 WordPress-trucs die elke blogger zou moeten kennen

101 WordPress-trucs

Klik hier om nu te downloaden

// De open grafiek toevoegen aan de taalkenmerken

functie add_opengraph_doctype( $output) {

retourneer $uitvoer . ' xmlns:og="https://opengraphprotocol.org/schema/" xmlns:fb="https://www.facebook.com/2008/fbml"';

}


add_filter('language_attributes', 'add_opengraph_doctype');


// Laten we Open Graph Meta Info toevoegen

functie add_og_meta_tag() {


wereldwijde $ post;


if( !is_singular() ) // als het geen bericht of pagina is, voeg dan geen og-tags toe

terug te keren;

echo " \n";

echo' ' . "\n";

echo' ' . "\n";

echo' ' . "\n";

echo' ' . "\n";

echo' ' . "\n";

echo' ' . "\n";


if(!has_post_thumbnail( $post->ID)) { // als het bericht geen uitgelichte afbeelding heeft, gebruik dan een standaard afbeelding

$default_image="https://example.com/image.jpg"; // vervang dit door een standaardafbeelding op uw server of een afbeelding in uw mediabibliotheek

echo' ';

}


else {

$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID), 'groot');

echo' ';

}


echo "\n \n";

}


add_action( 'wp_head', 'add_og_meta_tag', 5 );

Over de auteur
David Attard
David heeft de afgelopen 21 jaar in of rond de online en digitale industrie gewerkt. Hij heeft ruime ervaring in de software- en webontwerpindustrie met behulp van WordPress, Joomla en de niches eromheen. Hij heeft gewerkt met softwareontwikkelingsbureaus, internationale softwarebedrijven, lokale marketingbureaus en is nu hoofd Marketing Operations bij Aphex Media - een SEO-bureau. Als digitale consultant ligt zijn focus op het helpen van bedrijven om een ​​concurrentievoordeel te behalen door gebruik te maken van een combinatie van hun website en digitale platforms die vandaag de dag beschikbaar zijn. Zijn mix van technologische expertise gecombineerd met een sterk zakelijk inzicht geeft zijn geschriften een concurrentievoordeel.

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!

Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...