Open Graph instellingen configureren in Webflow

Open Graph-instellingen bepalen hoe uw pagina's worden weergegeven wanneer ze worden gedeeld op sociale media zoals LinkedIn, Facebook en X. Met een goede titel, omschrijving en afbeelding ziet een gedeelde link er professioneel en uitnodigend uit. In dit artikel leest u hoe u Open Graph in Webflow configureert, zowel statisch als dynamisch per CMS-item.

Probleem

Wanneer u een pagina van uw website deelt op sociale media, verschijnt er geen afbeelding, een verkeerde titel of een lege omschrijving, waardoor de link weinig aandacht trekt.

Oorzaak

Sociale media gebruiken Open Graph-tags (og:title, og:description, og:image) om een voorbeeld te tonen. Zijn deze tags niet ingesteld, dan kiezen platforms zelf willekeurige of geen informatie. Bij CMS-pagina's ontbreken deze gegevens vaak omdat ze niet aan velden zijn gekoppeld.

Oplossing

U stelt per pagina of per Collection Page-template de Open Graph-titel, -omschrijving en -afbeelding in. Voor CMS-pagina's koppelt u deze aan de juiste velden zodat elk item een eigen voorbeeld krijgt.

Stappenplan

1. Open de Page Settings van de pagina of de Collection Page-template in Webflow.
2. Scroll naar het onderdeel Open Graph Settings.
3. Vul de Open Graph Title en Description in, of koppel ze aan CMS-velden.
4. Stel een Open Graph Image in; koppel deze bij CMS-pagina's aan het afbeeldingsveld.
5. Kies de optie om dezelfde waarden als de SEO-titel/omschrijving te gebruiken indien gewenst.
6. Klik op Publish.
7. Test de weergave met een Open Graph- of social media-previewtool.

Configuratievoorbeeld

Open Graph voor uw BDMNL-blog:

• OG Title: gekoppeld aan het veld Titel
• OG Description: gekoppeld aan het veld Samenvatting
• OG Image: gekoppeld aan de Hoofdafbeelding (bij voorkeur 1200 x 630 px)
• Resultaat: elk gedeeld artikel toont een eigen afbeelding en tekst

Veelgemaakte fouten

• Geen Open Graph-afbeelding instellen, waardoor gedeelde links er kaal uitzien.
• Een te kleine afbeelding gebruiken, waardoor deze wazig of bijgesneden wordt weergegeven.
• De OG-velden niet koppelen op CMS-templates, waardoor alle items hetzelfde voorbeeld tonen.
• Niet publiceren, waardoor de tags niet live staan.

Controle na afloop

Gebruik een social media preview- of Open Graph-controletool om te zien hoe de pagina wordt weergegeven. Controleer dat titel, omschrijving en afbeelding correct en uniek per pagina verschijnen. Houd er rekening mee dat platforms voorbeelden cachen; soms moet u de cache vernieuwen.

Praktische tips

• Gebruik een afbeelding van circa 1200 x 630 pixels voor de beste weergave op de meeste platforms.
• Koppel OG-velden aan CMS-velden zodat elk item automatisch een eigen voorbeeld krijgt.
• Houd de OG-titel kort en pakkend; lange titels worden afgekapt.
• Net als social-instellingen in een WordPress-SEO-plugin bepalen Open Graph-tags hoe uw content op social media opvalt.

FAQ

Welke platforms gebruiken Open Graph?
Onder meer Facebook, LinkedIn en X gebruiken Open Graph-tags voor het voorbeeld.

Welke afbeeldingsgrootte is ideaal?
Circa 1200 x 630 pixels werkt op de meeste platforms goed.

Kan ik OG koppelen aan CMS-velden?
Ja, op een Collection Page-template koppelt u titel, omschrijving en afbeelding aan velden.

Waarom zie ik nog de oude afbeelding bij delen?
Platforms cachen voorbeelden; vernieuw de cache met de previewtool van het platform.

Verschijnen wijzigingen direct?
Pas na publiceren, en mogelijk na het vernieuwen van de cache bij het platform.

Samenvatting

Met Open Graph-instellingen bepaalt u hoe uw pagina's eruitzien bij delen op social media. Stel titel, omschrijving en een afbeelding van circa 1200 x 630 px in, koppel ze bij CMS-pagina's aan velden en publiceer. Test het resultaat met een previewtool.

Gerelateerde artikelen:

• Dynamische SEO-titels instellen in Webflow
• Dynamische meta-omschrijvingen instellen in Webflow
• Canonical URLs instellen in Webflow

Komt u er niet uit? Dien een ticket in bij BDMNL, dan configureren wij de Open Graph-instellingen voor u.