Zo maak je een goede deelafbeelding voor je website

Wat is een afbeelding voor een linkvoorbeeld?

Je stuurt iemand een artikel. Die ziet misschien alleen een adres, een verkeerde foto of een duidelijk kaartje met afbeelding en titel. De afbeelding op dat kaartje heet een deelafbeelding, linkvoorbeeld of Open Graph-afbeelding.

Ze hoort bij een gedeelde websitelink. Een Instagram-bericht, het kleine pictogram op een browsertab (favicon) en de zichtbare artikelomslag hebben andere functies. Je kunt dezelfde bron gebruiken, maar pas uitsnede, tekst en instellingen aan het gebruik aan.

Een dienst leest voor het voorbeeld de titel, beschrijving en het afbeeldingsadres van de pagina. Die achtergrondgegevens heten metadata. Open Graph geeft ze herkenbare namen. Je vult ze meestal zonder code in via je website-instellingen. De MDN-uitleg over metadata laat zien hoe ze verschillen van zichtbare pagina-inhoud.

Apps tonen niet allemaal hetzelfde voorbeeld. Ze kunnen bijsnijden, titels inkorten of het kaartje weglaten. Je website bepaalt het resultaat dus niet volledig. Controleer de link in de dienst waarin je hem gaat delen.

Welke afmetingen zijn handig?

Begin met 1200 × 630 pixels, tenzij je website iets anders adviseert. Dat zijn 1200 beeldpuntjes breed en 630 hoog: bijna tweemaal zo breed als hoog. Het is een praktisch uitgangspunt, geen eis voor alle diensten.

Bijvoorbeeld: de richtlijnen van LinkedIn adviseren 1200 × 627 voor een voorbeeld bij een bericht van een LinkedIn-pagina. Rek de afbeelding niet uit voor een paar pixels verschil. Volg de dienstspecifieke aanwijzingen als je een versie voor een bepaalde plek maakt.

Afmetingen en bestandsgrootte zijn iets anders. Pixels geven de beeldmaat aan; kilobytes (KB) of megabytes (MB) de benodigde opslag. Er is geen universeel KB-doel. Vergelijk kopieën en neem de kleinere als beeld en tekst duidelijk blijven. Controleer ook de bovengrens van de dienst.

Is je bron 1600 × 1600, maak dan eerst een liggende uitsnede. Meteen 1200 × 630 instellen kan het onderwerp vervormen als de tool de verhoudingen niet bewaart. Onze gids voor vergroten en verkleinen zonder vervorming legt uit hoe bijsnijden verschilt van afmetingen wijzigen.

Ontwerp voor een klein, leesbaar voorbeeld

Mensen zien het kaartje vaak op een telefoon tussen andere inhoud. Kleine details verdwijnen gemakkelijk. Kies wat meteen duidelijk moet zijn: het artikelonderwerp, het soort evenement of het product achter de link.

“Betere productfoto's” kan beter werken dan de volledige titel met ondertitel. Vaak verschijnt de titel ook buiten de afbeelding. Stop niet alles in het beeld; belangrijke informatie moet ook als paginatekst beschikbaar zijn.

Kies tekst- en achtergrondkleuren die goed van elkaar te onderscheiden zijn. Laat ruimte rond het onderwerp en houd gezichten, producten en belangrijke woorden weg van de rand. Er bestaat geen veilige zone voor alle diensten. Bekijk het hele beeld en een strakkere uitsnede rond het midden.

Bekijk het ontwerp ongeveer 300 pixels breed of klein op je telefoon. Dit is een leesproef, geen technische eis. Kun je zonder zoomen lezen en het onderwerp herkennen? Verkort anders de tekst, vergroot de letters of haal kleine details weg.

In een webshop moet het product herkenbaar zijn. Een evenementbeeld kan sfeer geven, maar datum en aanmelding horen ook in de paginatekst. Een logo helpt herkenning; hetzelfde grote logo bij elk artikel vertelt weinig over het onderwerp.

Kies het formaat en verklein een kopie

JPG is een praktische start voor foto's. PNG is geschikt als JPG letters of scherpe randen aantast. Kies bewust een achtergrond: bij transparantie bepaalt de app die, waardoor een licht logo kan wegvallen.

WebP en AVIF kunnen op de website goed werken. Browserondersteuning betekent niet dat de dienst voor linkvoorbeelden ze accepteert. Begin hier met JPG of PNG. Controleer andere formaten in de beoogde dienst.

Maak de compositie in je ontwerpprogramma. Gebruik Pixilo's bijsnijdtool voor de uitsnede en de tool voor afbeeldingsafmetingen voor de maat. Bij een vaste bestandslimiet kun je verkleinen tot een maximale bestandsgrootte. Controleer het gedownloade bestand. Deze tools stellen geen deelafbeelding op je website in.

Compressie verlaagt de bestandsgrootte. Bewaar het origineel en werk met een kopie. Vergelijk letters, logoranden en kleurverlopen. Wordt het beeld slechter, begin dan opnieuw bij het origineel met minder compressie. Een wazige kopie opnieuw opslaan brengt geen details terug. Onze vergelijking van JPG en PNG helpt kiezen voor tekst en foto's.

De afbeelding instellen in WordPress of een websitebouwer

Open het artikel in je websitebeheer. Zoek naar deelafbeelding, Social image of Open Graph image. Het veld kan bij zoekmachineoptimalisatie staan, vaak SEO genoemd. Volg deze stappen:

1. Open de juiste pagina. Bewerk het artikel of de pagina waarvan je de link wilt delen.
2. Kies een afbeelding voor deze pagina. Upload het bestand of kies het uit de mediabibliotheek met eerder opgeslagen afbeeldingen.
3. Controleer titel en standaardafbeelding. De wijziging moet deze pagina betreffen, niet het algemene deelbeeld van de hele website.
4. Sla op en publiceer. Een bestand uploaden naar de bibliotheek wijzigt de voorbeeldgegevens nog niet.
5. Test de openbare link. Gebruik de controles hieronder voordat je deelt.

In WordPress kan je bestaande SEO-plugin de instelling aanbieden. Een plugin voegt functies toe. Bijvoorbeeld: de Yoast-handleiding beschrijft de instellingen voor sociale afbeeldingen. Menu's en voorbeelden hangen af van versie en abonnement. Bekijk bestaande functies voordat je een nieuwe plugin installeert.

De uitgelichte afbeelding kan als deelbeeld dienen, afhankelijk van thema en plugins. De technische uitleg van Yoast beschrijft de selectie. Een standaardafbeelding is een reserve voor pagina's zonder eigen keuze. Gebruik voor belangrijke artikelen een specifiek beeld als de algemene afbeelding hun onderwerp niet uitlegt.

Kun je de instelling niet vinden, geef de websitebeheerder het pagina-adres en de afbeelding. Vraag om het deelbeeld in te stellen en de gepubliceerde gegevens te controleren. Metadata in de zichtbare artikeltekst plakken is niet hetzelfde als ze op de juiste plek zetten.

Optioneel: de afbeelding in de paginacode instellen

Sla dit over als je het beeld via instellingen hebt gekozen. Dit onderdeel is voor jou of je beheerder bij direct aanpassen van de code. HTML beschrijft de paginastructuur; het head-gedeelte bevat achtergrondgegevens die niet als artikeltekst verschijnen. Zet de volgende gegevens daar. og:image geeft het afbeeldingsadres; andere Open Graph-velden beschrijven de pagina. De Open Graph-specificatie legt ze uit. Dit voorbeeld is voor een artikel. Gebruik voor een algemene pagina website als type.

Vervang domein, adressen, titel, beschrijving en bestand door je eigen gegevens. Geef je 1200 × 630 op, dan moet het beeld die afmetingen echt hebben.

<meta property="og:type" content="article">
<meta property="og:title" content="Betere productfoto’s voor je winkel">
<meta property="og:description" content="Maak duidelijke afbeeldingen en bekijk ze op je productpagina.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Een blauwe mok op een lichte achtergrond met de tekst Betere productfoto’s.">

Gebruik een volledig HTTPS-adres met websitenaam en bestandspad. Het pagina-adres hoort in og:url en het afbeeldingsadres in og:image. De pagina moet haar bedoelde hoofdadres gebruiken. Controleer bij taalversies dat iedere pagina haar eigen titel en juiste adres krijgt.

Beschrijf het onderwerp en de belangrijke woorden in het beeld onder og:image:alt. Deze alternatieve tekst, of alt-tekst, vervangt niet de beschrijving van een zichtbaar artikelbeeld. Staat het beeld ook in het artikel, vul daar afzonderlijk een passende beschrijving in.

Controleer eerst of thema of plugin de velden al levert en wijzig de bestaande instelling. Meerdere afbeeldingen kunnen bewust gekozen zijn. Tegenstrijdige oude en nieuwe verwijzingen maken het resultaat echter onduidelijk. Houd hoofdbeeld en afmetingen bij elkaar.

De gegevens moeten in de gepubliceerde HTML staan wanneer de dienst de pagina opvraagt. Een later in de browser toegevoegde instelling kan ongelezen blijven. Zijn er aparte instellingen voor X-kaarten, controleer ook dat beeld: Open Graph aanpassen wijzigt andere velden niet.

Test de gepubliceerde link voordat je deelt

Plak het openbare pagina-adres in een nieuw berichtconcept en wacht op het voorbeeld. Kloppen beeld en titel? Is de tekst leesbaar? Test in de bedoelde dienst zonder het bericht te verzenden. Ga bij een ontbrekend of verkeerd beeld verder met de controles.

Open de broncode van de gepubliceerde pagina in je browser en zoek naar og:image. De naam van deze functie verschilt per browser. Controleer beeldadres, titel en pagina-adres, of vraag dit aan je beheerder. Een conceptadres uit de editor test niet de openbare link.

Gebruik voor LinkedIn de Post Inspector. Voor Facebook is er de Sharing Debugger. Plak het pagina-adres en start de controle; inloggen kan nodig zijn. Bekijk daarna ook een nieuw berichtconcept. Je hoeft niets te publiceren om te testen.

Noteer pagina-adres, beeldadres en de geteste dienst. Werkt het maar op één plek, dan helpt dit de oorzaak beter vinden dan steeds de afbeelding vervangen. LinkedIns uitleg over de cache zegt dat Post Inspector nieuwe berichten bijwerkt; voorbeelden van bestaande berichten blijven hetzelfde.

Waarom ontbreekt het beeld of verschijnt een verkeerde versie?

Maak onderscheid tussen drie oorzaken: de pagina verwijst naar het verkeerde beeld, de dienst kan het bestand niet ophalen of toont een oud opgeslagen voorbeeld. Hogere kwaliteit repareert geen kapot adres. Je browser verversen wist de cache van een andere dienst niet.

Opent het beeldadres een webpagina, dan kan het pad fout zijn of het bestand ontbreken. Sommige websites tonen dan de startpagina. Geef de beheerder beide adressen en vraag of het echte bestand zonder inloggen bereikbaar is.

Een cache bewaart een kopie van een pagina of afbeelding. Dat versnelt het laden, maar de kopie kan verouderen. Een CDN levert bestanden vanaf verschillende servers en kan ook kopieën bewaren. Laat zo nodig de websitekopieën vernieuwen. Controleer eerst openbare pagina en bestand, laat daarna de deeldienst opnieuw kijken. Alleen je browsercache wissen vernieuwt de andere kopieën niet.

Je kunt de nieuwe afbeelding een aparte naam geven, zoals product-photos-social-v2.jpg, en de verwijzing op de pagina aanpassen. Dat onderscheidt de bestanden, maar dwingt geen nieuwe pagina-opvraag af en wijzigt niet alle eerdere berichten.

Verander niet zomaar het vaste artikeladres en schakel beveiliging niet uit om te proberen. Geef je beheerder het probleemadres en de foutmelding. Die kan onderzoeken wat de toegang tot dit openbare bestand of deze pagina blokkeert.

Voorbeeld: een linkkaart voor een productfotogids

Stel je een winkelgids voor met een vierkante foto van een mok en een lange titel over productfoto's op verschillende apparaten. De automatische liggende uitsnede snijdt het oor af. Dit is een voorbeeldwerkwijze, geen gemeten resultaat.

1. Maak een liggende versie. Begin met 1200 × 630 en houd de hele mok zichtbaar met ruimte eromheen.
2. Verkort de tekst op het beeld. Probeer “Betere productfoto's”. Bewaar de volledige titel in het artikel en de voorbeeldtitel.
3. Sla op en controleer. Vergelijk JPG en PNG op bestandsgrootte, letters en productranden in het kleine voorbeeld.
4. Stel het paginabeeld in. Kies het bestand in de deelinstellingen van het artikel. Sla op en publiceer.
5. Test de link. Controleer bestand, paginagegevens en een nieuw voorbeeld in de bestemming.

De versie kan bij het artikel passen zonder ideaal te zijn voor Instagram of een brede websiteomslag. Bewaar je oorspronkelijke ontwerp om later varianten te maken zonder steeds het uiteindelijke JPG te bewerken.

Wat heeft dit met SEO te maken?

Het beeld helpt iemand de gedeelde link begrijpen. Alleen og:image toevoegen garandeert geen hogere zoekpositie. Afbeeldingen in zoekresultaten, op de pagina en in gedeelde links hebben verschillende rollen. Eén instelling bepaalt ze niet allemaal.

Kies een beschrijvende bestandsnaam en een passende titel. Schrijf een beeldbeschrijving voor mensen, niet een lijst zoekwoorden. Googles SEO-startgids bespreekt nuttige inhoud en begrijpelijke afbeeldingen. Onze gids over alt-tekst en bestandsnamen helpt bij beschrijvingen van zichtbare pagina-afbeeldingen.

Een kleiner deelbeeld versnelt niet automatisch het zichtbare titelbeeld. Gebruikt de pagina daar een ander bestand voor, optimaliseer dat afzonderlijk. Meet prestaties aan de hand van de beelden die de pagina echt laadt.

Veelgestelde vragen

Is 1200 × 630 verplicht voor Open Graph?

Nee. Het is hier een handig begin. Open Graph beschrijft hoe je adressen en afmetingen opgeeft; de ontvangende dienst bepaalt weergave en grenzen.

Kan de artikelomslag ook het deelbeeld zijn?

Ja, als de compositie past en de site naar het juiste bestand verwijst. Een aparte versie helpt bij staande of vierkante omslagen en onleesbare kleine tekst.

Heeft elke pagina een eigen beeld nodig?

Niet altijd. Een standaardbeeld is een goede reserve. Eigen beelden helpen vooral bij gedeelde gidsen, producten en evenementen waarvan het logo het onderwerp niet uitlegt.

Waarom blijft het oude beeld in een bestaand bericht?

De dienst kan het oorspronkelijke voorbeeld bewaren. Controleer een nieuw concept en de bijwerkinstructies. Een websitebestand vervangen verandert eerder verstuurde kaarten niet gegarandeerd.

Voegt een Deel-knop het beeld aan het voorbeeld toe?

Nee. Hij maakt de link verzenden makkelijker, maar vervangt de paginagegevens niet. De ontvangende dienst beslist of hij een kaart ophaalt en toont. Het beeldbestand afzonderlijk delen is iets anders.

Samenvatten metChatGPT (opent in een nieuw tabblad)Grok (opent in een nieuw tabblad)Google (opent in een nieuw tabblad)Perplexity (opent in een nieuw tabblad)Claude (opent in een nieuw tabblad)