Open Graph-tags toevoegen in WordPress

Open Graph-tags zijn kleine stukjes metadata in de HTML van uw pagina die bepalen hoe uw content verschijnt wanneer iemand deze deelt op sociale media. Zonder hen moeten platforms zoals Facebook, LinkedIn en Twitter raden welke titel, beschrijving en afbeelding ze moeten tonen, en ze hebben dat vaak verkeerd. Een gedeelde link met een ontbrekende afbeelding of een verminkte titel ziet er onprofessioneel uit, en mensen klikken er veel minder snel op. Het correct instellen van Open Graph-tags duurt slechts enkele minuten en maakt een echt verschil in social media-verkeer.

Waarom Open Graph-tags belangrijk zijn voor delen op sociale media

Telkens wanneer iemand een link deelt op Facebook, LinkedIn, Twitter of berichten-apps zoals WhatsApp en Telegram, halen die platforms de Open Graph-metadata van uw pagina op om een previewkaart op te bouwen. Deze kaart bevat doorgaans een titel, een beschrijving en een afbeelding. Als uw OG-tags ontbreken of verkeerd zijn geconfigureerd, kunt u de verkeerde afbeelding zien die uit een sidebar-advertentie wordt getrokken, de meta-beschrijving halverwege een zin afgekapt, of helemaal geen preview.

De cijfers spreken voor zich. Berichten met rijke previewkaarten krijgen aanzienlijk meer engagement dan platte tekstlinks. Op Facebook zien berichten met afbeeldingen ongeveer 2-3x meer engagement dan zonder. Op LinkedIn krijgen artikelen met aansprekende previewafbeeldingen meer kliks en shares. Het correct instellen van uw OG-tags is een van de eenvoudigste manieren om de zichtbaarheid van uw gedeelde content te vergroten.

Checklist met vereiste Open Graph-tags

Niet alle OG-tags zijn even belangrijk. Hier zijn de tags die u altijd moet opnemen:

• og:title: De titel van uw pagina zoals deze in social shares moet verschijnen. Houd hem onder de 60 tekens om afkapping op de meeste platforms te voorkomen.
• og:description: Een korte samenvatting van de pagina-inhoud. Streef naar 120-200 tekens. Dit is uw kans om een aansprekende hook te schrijven die mensen laat klikken.
• og:url: De canonieke URL van de pagina. Dit zorgt ervoor dat alle shares naar dezelfde URL verwijzen, waardoor engagementmetrics worden geconsolideerd.
• og:type: Het type content. Gebruik article voor blogberichten, website voor uw homepage en product voor e-commerceartikelen.
• og:image: De previewafbeelding. Dit is de allerbelangrijkste OG-tag voor engagement. Zie hieronder meer over best practices voor afbeeldingen.

Optionele maar aanbevolen tags zijn og:site_name (uw websitenaam), og:locale (taal en regio, bijv. en_US) en article:published_time voor blogberichten.

og:image best practices voor maximale impact

De previewafbeelding is wat mensen het eerst opvalt bij het scrollen door hun social feeds. Het juist krijgen ervan is de moeite waard:

• Grootte: Gebruik afbeeldingen van minimaal 1200x630 pixels. Facebook beveelt dit aan als minimum voor schermen met hoge resolutie. Voor LinkedIn werkt 1200x627 pixels het beste.
• Beeldverhouding: Houd 1.91:1 aan voor de beste cross-platform compatibiliteit. Deze verhouding werkt goed op Facebook, LinkedIn, Twitter en berichten-apps.
• Bestandsformaat: JPEG en PNG worden universeel ondersteund. Vermijd WebP voor OG-afbeeldingen, omdat sommige platforms en crawlers het nog niet ondersteunen.
• Bestandsgrootte: Houd afbeeldingen onder de 5MB. Facebook kan afbeeldingen overslaan die te lang duren om te downloaden.
• Inhoud: Vermijd afbeeldingen met te veel tekst. Facebook handhaafde vroeger een 20%-tekstregel voor advertenties, en hoewel dit niet langer geldt voor organische shares, presteren schone afbeeldingen met minimale tekst doorgaans beter.
• Fallback-afbeelding: Stel altijd een sitewijde standaard OG-afbeelding in voor pagina's zonder uitgelichte afbeelding. Een gebrande afbeelding met uw logo werkt goed als fallback.

Open Graph-tags instellen met Yoast SEO

Yoast SEO genereert automatisch Open Graph- en Twitter Card-tags voor elke pagina op uw site. Zo configureert u het:

Voor sitewijde instellingen:

1. Installeer en activeer Yoast SEO.
2. Ga naar Yoast SEO, dan Sociaal in het admin-menu.
3. Schakel op het Facebook-tabblad "Add Open Graph meta data" in.
4. Upload een standaardafbeelding die wordt gebruikt wanneer een bericht of pagina geen uitgelichte afbeelding heeft.
5. Schakel op het Twitter-tabblad de Twitter Card-metadata in en kies "Summary" of "Summary with large image" als uw standaardkaarttype.

Voor afzonderlijke berichten en pagina's:

1. Bewerk het bericht of de pagina.
2. Klik in de Yoast SEO-metabox op het tabblad "Sociaal" (het deelpictogram).
3. Pas onder "Facebook preview" de titel, beschrijving en afbeelding voor delen op sociale media aan.
4. Stel onder "Twitter preview" indien nodig een andere titel, beschrijving of afbeelding in (anders gebruikt Twitter de Facebook OG-waarden).

Yoast haalt de uitgelichte afbeelding automatisch op als og:image als u geen aangepaste instelt. Het genereert ook de og:title uit de SEO-titel en de og:description uit de meta-beschrijving, zodat uw social shares consistent blijven met uw SEO-instellingen.

Open Graph-tags instellen met Rank Math

Rank Math behandelt OG-tags op vergelijkbare wijze als Yoast:

1. Installeer en activeer Rank Math.
2. Ga naar Rank Math, dan General Settings, dan Social Meta.
3. Schakel "Add Open Graph meta data to your site's header" in.
4. Stel een standaard social-share-afbeelding in voor berichten zonder uitgelichte afbeelding.

Voor aanpassing per bericht klikt u op het Rank Math-pictogram tijdens het bewerken van een bericht en navigeert u naar het tabblad "Sociaal". U kunt afzonderlijke titels, beschrijvingen en afbeeldingen instellen voor Facebook en Twitter.

Open Graph-tags handmatig toevoegen via functions.php

Als u liever geen SEO-plugin gebruikt, kunt u OG-tags toevoegen via de functions.php van uw thema. Deze aanpak geeft u volledige controle over elke tag:

function custom_open_graph_tags() {
    if (is_singular()) {
        global $post;
        $title = get_the_title();
        $description = has_excerpt() ? get_the_excerpt() : wp_trim_words($post->post_content, 30);
        $url = get_permalink();
        $image = get_the_post_thumbnail_url($post->ID, 'large');
        $site_name = get_bloginfo('name');

        echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url($url) . '" />' . "\n";
        echo '<meta property="og:type" content="article" />' . "\n";
        echo '<meta property="og:site_name" content="' . esc_attr($site_name) . '" />' . "\n";
        if ($image) {
            echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "\n";
            echo '<meta property="og:image:width" content="1200" />' . "\n";
            echo '<meta property="og:image:height" content="630" />' . "\n";
        }
    } elseif (is_front_page()) {
        $site_name = get_bloginfo('name');
        $description = get_bloginfo('description');
        echo '<meta property="og:title" content="' . esc_attr($site_name) . '" />' . "\n";
        echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "\n";
        echo '<meta property="og:url" content="' . esc_url(home_url('/')) . '" />' . "\n";
        echo '<meta property="og:type" content="website" />' . "\n";
    }
}
add_action('wp_head', 'custom_open_graph_tags');

Voeg dit niet toe naast een SEO-plugin die al OG-tags uitgeeft. Dubbele OG-tags kunnen social media-crawlers in verwarring brengen.

Open Graph-tags voor WooCommerce-producten

Als u een WooCommerce-winkel runt, profiteren uw productpagina's van extra OG-tags. Zowel Yoast SEO als Rank Math hebben WooCommerce-integraties die og:type automatisch op product instellen en productspecifieke metadata zoals prijs en beschikbaarheid opnemen.

Voor handmatige implementaties kunt u inhaken op WooCommerce-productdata:

function woo_product_og_tags() {
    if (is_product()) {
        global $product;
        $price = $product->get_price();
        $currency = get_woocommerce_currency();
        echo '<meta property="og:type" content="product" />' . "\n";
        echo '<meta property="product:price:amount" content="' . esc_attr($price) . '" />' . "\n";
        echo '<meta property="product:price:currency" content="' . esc_attr($currency) . '" />' . "\n";
    }
}
add_action('wp_head', 'woo_product_og_tags');

Uw Open Graph-tags testen

Test na het instellen van uw OG-tags voordat u iets belangrijks deelt. Hier zijn de tools die u nodig hebt:

• Facebook Sharing Debugger: Bezoek developers.facebook.com/tools/debug en voer uw URL in. Het toont precies wat Facebook ziet, inclusief de titel, beschrijving en afbeelding. Klik op "Scrape Again" om de cache te vernieuwen als u wijzigingen hebt aangebracht.
• LinkedIn Post Inspector: Bezoek linkedin.com/post-inspector en voer uw URL in. LinkedIn cachet agressief, gebruik dus deze tool om een refresh te forceren na het bijwerken van uw OG-tags.
• Twitter Card Validator: Bezoek cards-dev.twitter.com/validator. Voer uw URL in om een preview te zien van hoe uw Twitter Card eruit zal zien.
• InspectWP-scan: Voer een scan uit om te verifiëren dat uw OG-tags aanwezig zijn in de HTML-uitvoer van de pagina.

Social media-caches wissen na wijzigingen

Social media-platforms cachen uw OG-data zwaar. Als u uw OG-tags bijwerkt en de oude preview nog steeds verschijnt bij delen, moet u de cache wissen:

• Facebook: Gebruik de Sharing Debugger-tool en klik op "Scrape Again". Mogelijk moet u twee keer klikken voor hardnekkige caches.
• LinkedIn: Gebruik de Post Inspector-tool om een opnieuw scrapen te forceren. LinkedIn kan soms tot 7 dagen nodig hebben om zijn cache op natuurlijke wijze bij te werken.
• Twitter: Gebruik de Card Validator om een nieuwe crawl aan te vragen. Twitter werkt meestal binnen enkele minuten bij.
• WhatsApp en Telegram: Deze apps cachen previews aan de clientzijde. Vraag mensen om hun app-cache te wissen, of wacht tot de cache natuurlijk verloopt (meestal 24-72 uur).

Veelvoorkomende Open Graph-fouten om te vermijden

• Ontbrekende og:image: De meest voorkomende fout. Zonder afbeelding zien social shares er saai uit en worden ze genegeerd. Stel altijd een uitgelichte afbeelding of sitewijde standaard in.
• Afbeelding te klein: Afbeeldingen onder 200x200 pixels worden mogelijk helemaal niet weergegeven op Facebook. Streef naar minimaal 1200x630 pixels.
• Dubbele OG-tags: Twee SEO-plugins draaien, of een SEO-plugin plus een social media-plugin die beide OG-tags uitgeven, resulteert in conflicterende metadata. Gebruik slechts één bron voor uw OG-tags.
• og:url-mismatch: De og:url moet overeenkomen met uw canonieke URL. Als ze naar verschillende URL's verwijzen, kunnen social platforms in de war raken over welke pagina engagement moet krijgen.
• Geen og:type instellen: Sommige platforms gaan standaard naar website als og:type ontbreekt, wat prima is voor uw homepage maar niet ideaal voor blogberichten. Stel article in voor berichten zodat platforms de publicatiedatum en auteursinformatie weergeven.
• Twitter-specifieke tags vergeten: Hoewel Twitter kan terugvallen op OG-tags, geeft het toevoegen van twitter:card- en twitter:site-tags u meer controle over het Twitter-previewformaat.