Social cards: Open Graph-tags en de deelafbeelding

Wat een linkpreview is

Als iemand een link deelt in een sociaal netwerk of een messenger, leest het platform de pagina en maakt een kleine kaart: een afbeelding, een titel, een korte tekst en het domein. De meeste platforms lezen daarvoor de tags van het Open Graph-protocol, meta-elementen in de head van de pagina. X, voorheen Twitter, leest ook eigen tags die beginnen met twitter:. Elk platform ontwerpt zijn kaart zelf en bepaalt hoeveel tekst het toont. Jij bepaalt wat de pagina de platforms vertelt.

De basistags

Het Open Graph-protocol, gepubliceerd op ogp.me, noemt vier eigenschappen die elke pagina zou moeten hebben: og:title, og:type, og:image en og:url. og:url is het canonieke adres van de pagina. Optioneel, maar nuttig, zijn og:description, og:site_name en og:locale, de taal en regio van de tags, bijvoorbeeld de_DE.

<meta property="og:title" content="Zomeruitverkoop: alle mokken afgeprijsd">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Zes blauwe mokken op een houten tafel">
<meta property="og:description" content="Tot 31 augustus: lagere prijzen voor mokken en borden.">
<meta property="og:site_name" content="Voorbeeldwinkel">
<meta name="twitter:card" content="summary_large_image">

Schrijf elk adres volledig, met https://. Het protocol definieert een adres als een URL die http:// of https:// gebruikt, dus een pad zoals /img/sale.jpg is geen geldige waarde. og:url moet overeenkomen met de canonieke link van de pagina. Staat een tag er twee keer met verschillende waarden, dan geeft het protocol de voorkeur aan de eerste.

De deelafbeelding

De meeste previews tonen de afbeelding breed. Een afbeelding in een verhouding van ongeveer 1,91 : 1, bijvoorbeeld 1200 × 630 pixels, wordt vaak aanbevolen en past in de meeste kaarten zonder bijsnijden. Vierkante afbeeldingen worden vaak boven en onder bijgesneden, dus houd belangrijke inhoud in het midden. Voor Google Discover raadt Google afbeeldingen aan die ten minste 1200 pixels breed zijn, een grote preview die is toegestaan met de instelling max-image-preview:large, en een afbeelding die is ingesteld met og:image of schema.org-markering. Google raadt ook af om algemene afbeeldingen zoals het logo van de website te gebruiken.

og:image:width en og:image:height geven de grootte van de afbeelding in pixels. og:image:alt beschrijft wat er op de afbeelding staat, geen bijschrift. Het protocol zegt dat een pagina met og:image ook og:image:alt moet opgeven.

Titel en beschrijving

og:title mag afwijken van het title-element. Het heeft de naam van de website niet nodig, want die staat in og:site_name. Platforms korten lange teksten in op hun eigen lengte, dus zet de belangrijke woorden vooraan. Open Graph-tags tellen ook buiten sociale netwerken. Google noemt de inhoud van og:title als een van de bronnen voor titellinks in zoekresultaten, houdt rekening met og:site_name voor de sitenaam en noemt og:image als een manier om een voorkeursafbeelding op te geven.

Tags voor X

De tag twitter:card kiest het soort kaart. De waarde summary_large_image vraagt om een grote, brede afbeelding, summary om een kleine. Heeft je pagina al Open Graph-tags, dan is twitter:card toevoegen vaak genoeg. De ontwikkelaarspagina's van X konden voor deze gids niet worden gelezen, dus controleer daar de actuele regels voordat je op een detail vertrouwt.

Eén kaart per pagina

Veel websites zetten dezelfde titel en afbeelding voor elke pagina, vaak via het thema. Dan ziet elke gedeelde link er hetzelfde uit. Geef elke belangrijke pagina een eigen og:title, og:description en og:image: een productpagina de productfoto, een artikel de hoofdafbeelding. Voor og:type gebruikt het protocol onder andere website voor een algemene pagina en article voor een artikel. Een winkel- of contentsysteem kan deze tags automatisch vullen met de titel, de samenvatting en de hoofdafbeelding van elke pagina. Controleer na een wijziging één pagina van elk sjabloon.

Waarom de preview niet verandert

Veel platforms bewaren een kaart zodra ze die hebben gemaakt. Verander je later de afbeelding of de titel, dan zien mensen misschien nog een tijd de oude kaart. Een nieuwe bestandsnaam voor een nieuwe afbeelding helpt, omdat het platform dan een nieuw adres ziet. Sommige platforms bieden een tool die de pagina opnieuw ophaalt.

Voordat je een pagina deelt

• Zijn og:title, og:type, og:image en og:url aanwezig, en is og:url het canonieke adres?
• Is elk adres volledig, met https://?
• Is de afbeelding breed genoeg, laadt ze, en staat de belangrijke inhoud in het midden?
• Zijn og:image:alt, og:image:width en og:image:height ingesteld?
• Is er een twitter:card-tag, en is de titel kort genoeg?

Werken met Do4U

De Social card controle laat zien hoe een pagina eruitziet als haar link wordt gedeeld, en controleert de tags achter de preview. Je voert één adres in. Do4U leest de pagina en het begin van haar deelafbeelding. De code verzamelt de Open Graph-tags, de tags voor de Twitter/X-kaart en de terugvalopties, dus de titel, de metabeschrijving en de eerste afbeelding, en daarnaast de canonieke link en de taal. Hij leest het echte formaat en de echte grootte van de afbeelding uit het bestand en vergelijkt die met de tags. Je krijgt een neutrale preview, een tabel van alle tags, bevindingen met een korte reden en voorgestelde tags om over te nemen. Tags die een pagina alleen met JavaScript zet, worden niet gezien. Er wordt geen AI gebruikt, en de controle is gratis, met een daglimiet.

Do4U vindt aanwijzingen, jij controleert en beslist. De preview is een neutrale schets: hoe een platform de link toont, bepaalt het platform.