Gids voor sociale previews
Open Graph-afbeeldingen: test gedeelde links voor publicatie
Open Graph-afbeeldingen bepalen hoe uw pagina eruitziet wanneer iemand een link deelt. Deze gids toont de praktische grootte, tags, ontwerpcontroles, cache-oplossingen en checklist voor publicatie die previews bruikbaar houden.
Kort antwoord
Kies één Open Graph-afbeelding en test de link voor het delen
Begin voor de meeste pagina's met een afbeelding van 1200 x 630, houd belangrijke tekst en logo's uit de buurt van de randen, gebruik absolute HTTPS-afbeeldings-URL's en test de uiteindelijke URL in de debugtools van het platform. Deze eenvoudige workflow voorkomt de meeste kapotte previews.
Preview-rol
Behandel de Open Graph-afbeelding als een pagina-item
Een Open Graph-afbeelding is geen decoratie. Het is de afbeelding die de pagina vertegenwoordigt wanneer crawlers een linkkaart maken voor sociale feeds, chatapps en werktools. Deze moet overeenkomen met de titel, beschrijving, het zichtbare onderwerp en de gestructureerde data-afbeelding.
Het verkoopt de klik
De afbeelding, titel en beschrijving vormen de eerste indruk voordat de bezoeker uw pagina bereikt.
Het moet bij de inhoud passen
Een goede preview-afbeelding sluit aan bij de paginatitel, het zichtbare onderwerp en de belangrijkste gebruikersbelofte, in plaats van een generieke merkafbeelding te gebruiken.
Het hoort bij SEO-gegevens
Open Graph-afbeeldingen, Twitter card-afbeeldingen, canonieke URL's en JSON-LD-afbeeldingen moeten dezelfde pagina beschrijven.
Het heeft een naamgevingsregel nodig
Een duidelijke bestandsnaam en update-regel voorkomen dat verouderde caches en oude campagneafbeeldingen later terugkomen.
Grootteplan
Kies afmetingen die echte previews overleven
Verschillende platforms snijden en cachen previews op iets verschillende manieren. Een bestand van 1200 x 630 is een goede standaard voor Open Graph-previews, maar de veiligere regel is ontwerpen met een gecentreerd veilig gebied en de uiteindelijke URL testen op de relevante platforms.
| Platform of gebruik | Praktisch afbeeldingsplan | Let op | Publicatiecontrole |
|---|---|---|---|
| Algemene Open Graph | Gebruik 1200 x 630 als praktische standaard voor een grote deelafbeelding. | Kleine afbeeldingen kunnen wazig lijken of als kleinere miniaturen worden weergegeven. | Bekijk de definitieve URL in de debugtool van het platform voordat u deelt. |
| Facebook en LinkedIn | Gebruik dezelfde 1,91:1 stijl afbeelding tenzij de pagina een platform-specifiek bestand nodig heeft. | Randen kunnen op verschillende manieren worden bijgesneden in feeds en op apparaten. | Houd belangrijke tekst en logo's binnen het veilige middengebied. |
| X grote kaart | Gebruik summary_large_image en houd het beeld gecentreerd; X ondersteunt een brede grote kaart-afbeelding. | Kleine tekst en randdetails kunnen verdwijnen wanneer de kaart wordt bijgesneden of van formaat verandert. | Stel twitter:image in en test met de X card-tools. |
| Chatapps en werktools | Houd het bestand klein en het ontwerp eenvoudig omdat previews vaak in compacte vensters verschijnen. | Drukke screenshots, lange koppen en lage contrasten worden snel onleesbaar. | Plak de definitieve link in de tools die uw doelgroep daadwerkelijk gebruikt. |
Houd de hoofdboodschap in het midden van de afbeelding. De randen zijn risicovol omdat feedkaarten, chatpreviews en mobiele weergaven anders kunnen bijsnijden.
HTML
Stel de tags in die crawlers nodig hebben voordat de pagina live gaat
Open Graph-tags horen in de HTML-kop. Gebruik absolute afbeeldings-URL's, geef breedte en hoogte op, voeg nuttige alt-tekst toe en houd de canonieke URL consistent met de pagina die gebruikers daadwerkelijk delen.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Waarom het belangrijk is | Veelgemaakte fout |
|---|---|---|
| og:image | Wijst crawlers naar de afbeelding die de pagina moet vertegenwoordigen. | Een relatieve pad gebruiken of een afbeelding die geblokkeerd wordt door login, redirects of robotsregels. |
| og:image:width / og:image:height | Vertelt platforms de afbeeldingsgrootte voordat ze het bestand ophalen en inspecteren. | Afmetingen weglaten en elke crawler laten raden hoe de preview wordt weergegeven. |
| og:image:alt | Beschrijft de preview-afbeelding voor toegankelijkheid en geeft crawlers meer context. | De paginatitel herhalen in plaats van te beschrijven wat er in de afbeelding zichtbaar is. |
| og:url | Verbindt de preview met de canonieke pagina-URL die gedeeld moet worden. | Een tracking-, staging- of cultuurverkeerde URL gebruiken als permanente pagina-identiteit. |
| twitter:card / twitter:image | Geeft X een expliciete instructie voor een grote kaart en een optionele platform-specifieke afbeelding. | Aannemen dat X de Open Graph-afbeelding altijd precies hetzelfde weergeeft als andere platforms. |
Als u Blazor gebruikt, houdt de Blazor SEO Metadata Component Open Graph-tags, Twitter card-tags, canonieke URL's en JSON-LD-metadata bij elkaar.
Ontwerpregels
Ontwerp eerst voor een kleine feedkaart
De meeste mensen zien niet de volledige afbeelding. Ze zien een gecomprimeerde kaart in een feed, bericht of previewvenster. Eenvoudige ontwerpen winnen: één duidelijk onderwerp, leesbaar contrast en geen kleine tekst die alleen in het ontwerpbestand werkt.
Workflow
Een eenvoudig workflow voor elke belangrijke pagina
- 1
Schrijf de previewbelofte
Bepaal in één oogopslag wat de kaart moet zeggen: onderwerp, voordeel, product of invalshoek van het artikel.
- 2
Maak de afbeelding in de geplande verhouding
Gebruik 1200 x 630 voor het standaardbestand en houd de belangrijke inhoud gecentreerd.
- 3
Optimaliseer het bestand
Gebruik JPG of PNG voor de sociale afbeelding, houd het bestand redelijk klein en vermijd zichtbare compressieschade.
- 4
Stel metadata en schema in
Werk Open Graph-tags, Twitter card-tags, canonieke URL en JSON-LD-afbeeldingsreferenties samen bij.
- 5
Publiceer met een stabiele bestandsnaam
Gebruik een betekenisvolle bestandsnaam en wijzig deze bij het vervangen van de afbeelding als platformcaches waarschijnlijk de oude versie behouden.
- 6
Test de definitieve URL
Voer de openbare pagina-URL door de debugtools en controleer de echte preview, niet alleen de broncode.
Tooltip
Gebruik PixelPress nadat de previewgrootte is bepaald
Wanneer het afbeeldingsplan de definitieve bestanden benoemt, kan PixelPress helpen met lokale WebP- of AVIF-conversie. Houd originelen onaangeroerd, controleer de output en werk dan de Open Graph-URL bij.
Foutopsporing
Ververs platformcaches voordat u de preview vertrouwt
Sociale platforms cachen previewgegevens. Als u een afbeelding vervangt maar dezelfde URL behoudt, kan een platform de oude preview blijven tonen. Gebruik de officiële tools en wijzig indien nodig de bestandsnaam of voeg een versie-URL toe.
Checklist
Open Graph afbeelding checklist voor publicatie
Gebruik deze lijst voordat een artikel, productpagina, toolpagina of landingspagina live gaat. Het voorkomt previewproblemen die duur zijn om te ontdekken nadat de link al gedeeld is.
Veelgestelde vragen
Welke grootte moet een Open Graph-afbeelding hebben?
Gebruik 1200 x 630 als praktische standaard voor de meeste Open Graph-previews. Het is groot genoeg voor schermen met hoge dichtheid en dicht bij de gebruikelijke 1,91:1 previewverhouding. Test de uiteindelijke URL toch, want elk platform kan previews anders bijsnijden of cachen.
Kan ik voor elke pagina dezelfde Open Graph-afbeelding gebruiken?
Dat kan, maar het is meestal minder sterk. Een generieke merkafbeelding is beter dan geen afbeelding, maar belangrijke artikelen, productpagina's en tools verdienen een preview-afbeelding die bij de specifieke pagina past.
Waarom wordt mijn oude Open Graph-afbeelding nog steeds getoond?
De meest voorkomende oorzaak is platformcaching. Gebruik de Facebook Sharing Debugger, LinkedIn Post Inspector of X card-tools om de URL te verversen. Als het oude bestand blijft terugkomen, publiceer dan de nieuwe afbeelding met een nieuwe bestandsnaam of versie-URL.
Wat is het verschil tussen og:image en twitter:image?
og:image is de standaard Open Graph-afbeelding die door veel platforms wordt gebruikt. twitter:image is specifiek voor X-kaarten. Als u twitter:image opgeeft, kan X die afbeelding gebruiken in plaats van terug te vallen op og:image.
Moet de JSON-LD-afbeelding overeenkomen met de Open Graph-afbeelding?
Het hoeft niet identiek te zijn, maar moet hetzelfde paginaverhaal vertellen. Zoekmetadata, Open Graph-tags, Twitter cards en JSON-LD mogen niet naar niet-gerelateerde of verouderde afbeeldingen verwijzen.
Waar past PixelPress in bij Open Graph-afbeeldingen?
PixelPress past nadat u de afbeeldingsgrootte, bestandsnaam en rol hebt bepaald. Het kan helpen de definitieve bestanden lokaal te converteren terwijl de originelen onaangeroerd blijven. De pagina heeft daarna nog steeds correcte metadata en previewtests nodig.