Open Graph-analyse

Hoe deze controle werkt

Scanaris zoekt in de <head> van je pagina naar drie Open Graph-tags: og:title, og:description en og:image. Zijn alle drie aanwezig met inhoud, dan valt er niets te zeggen. Ontbreekt er een, dan opent hij een informatieve bevinding die aangeeft welke; ontbreken alle drie, dan zegt de bevinding simpelweg dat de pagina geen Open Graph heeft. Hij is informatief, dus kost geen punten: het is geen beveiligings- of indexeringsfout, het is een gemiste kans telkens wanneer iemand je site deelt.

Waarom dit belangrijk is

Wanneer iemand je link plakt in WhatsApp, X, LinkedIn, Slack, Discord, iMessage of Telegram, bezoekt de app de URL, leest deze tags en bouwt de voorvertoningskaart: grote afbeelding, titel en beschrijving. Zonder deze tags verschijnt de kaart zonder afbeelding, met de kale URL of met een willekeurig stuk tekst van de pagina. Het verschil in klikken tussen een link met kaart en een zonder is groot, vooral op mobiel, waar de kaart het hele scherm vult. En de afbeelding die je kiest is voor veel mensen de eerste indruk van je merk.

Hoe je het oplost

<meta property="og:title" content="Beveiligingsscanner voor met AI gebouwde apps">
<meta property="og:description" content="Scan je site in 60 seconden en krijg elke fout met de oplossing.">
<meta property="og:image" content="https://jouwdomein.nl/og/home.png">
<meta property="og:url" content="https://jouwdomein.nl/">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

• De afbeelding komt als absolute HTTPS-URL, 1200 bij 630 pixels, in JPG of PNG en onder 1 MB zodat elk platform hem accepteert. Een merkachtergrond, de paginatitel in groot en het logo: dat is de formule die werkt.
• Eén per pagina, niet overal dezelfde. Een artikel met zijn kop in de afbeelding wordt vaker gedeeld dan een met de generieke afbeelding van de site. Nuxt heeft een module die deze afbeeldingen uit een sjabloon genereert; Next.js doet het met een bestand opengraph-image.tsx in elke route.
• Nuxt: useSeoMeta({ ogTitle, ogDescription, ogImage, twitterCard: 'summary_large_image' }). Next.js: metadata.openGraph en metadata.twitter. WordPress: Yoast en Rank Math genereren ze per bericht uit de uitgelichte afbeelding.
• twitter:card is de enige eigen tag die X nodig heeft; voor titel, beschrijving en afbeelding gebruikt het de og:-tags als het zijn eigen niet vindt.

Platforms cachen de kaart de eerste keer dat ze een URL zien. Vraag na het wijzigen van de tags een nieuwe scrape aan in de Sharing Debugger van Facebook, de Post Inspector van LinkedIn of de validator van X; WhatsApp en Telegram vernieuwen hem na een tijdje vanzelf.

Controleer of het opgelost is

curl -s https://jouwdomein.nl | grep -oE '<meta (property|name)="(og:|twitter:)[^"]+" content="[^"]*"'
curl -s -o /dev/null -w "%{http_code} %{content_type}\n" "$(curl -s https://jouwdomein.nl | grep -oE 'og:image" content="[^"]+"' | cut -d'"' -f3)"

De eerste toont de tags; de tweede downloadt de afbeelding en moet 200 geven met een afbeeldingstype. Plak daarna de URL in een chat met jezelf en bekijk de kaart.

Veelgestelde vragen

Ik heb al een titel en meta description. Werken die niet?

Sommige platforms gebruiken ze als reserve, maar geen enkel toont een afbeelding zonder og:image, en de afbeelding maakt het verschil in klikken. De og:-tags laten je bovendien een andere titel kiezen dan die voor Google, korter en directer.

Telt het voor SEO?

Niet direct: Google gebruikt Open Graph niet voor de ranking. Het telt doordat mensen delen en klikken, wat uitmondt in links en verkeer. Wat Google wel leest, wordt bekeken door SEO-metadata.

Mijn afbeelding wordt in sommige apps afgesneden.

Elk platform snijdt bij naar zijn eigen verhouding. Met 1200 bij 630 en de belangrijke inhoud gecentreerd, met marge aan de randen, ziet het er overal goed uit. Vermijd kleine tekst tegen de hoeken.