Open Graph- en social card-voorbeeld
Bekijk een voorbeeld van hoe een link zich op X, LinkedIn, Slack, Discord en Facebook ontvouwt tot een social card op basis van een titel, beschrijving, afbeeldings-URL en pagina-URL.
Open Graph- en social card-voorbeeld — Het Open Graph- en social card-voorbeeld laat zien hoe je link eruitziet wanneer hij op sociale platforms wordt gedeeld. Typ een titel, beschrijving, afbeeldings-URL en pagina-URL en schakel vervolgens tussen X, LinkedIn, Slack, Discord en Facebook om een live mock-up van de linkcard voor elk te zien. Alles wordt in je browser gerenderd — je tekst wordt nooit geüpload en de afbeeldings-URL wordt rechtstreeks vanaf de host in het voorbeeld geladen, niet via onze servers.
Wat is Open Graph- en social card-voorbeeld?
Dit is een visuele voorbeeldtool voor Open Graph- (OG) en social cards. Open Graph- en Twitter Card-metatags vertellen platforms welke titel, samenvatting en afbeelding ze moeten tonen wanneer iemand je link deelt, en deze tool reconstrueert die linkcard zodat je hem kunt controleren voordat je publiceert. Marketeers, contentschrijvers en ontwikkelaars gebruiken het bij het lanceren van een blogpost, landingspagina of productpagina om te bevestigen dat de kop niet wordt afgekapt, de afbeelding het kader vult en het domein correct leesbaar is. Kies een platform met de segmentbesturing om de specifieke lay-out ervan te zien: X, Facebook en LinkedIn renderen een grote bannerafbeelding met de titel en beschrijving eronder, terwijl Slack en Discord een compacte card tonen met een accentbalk, het domein en een kleine thumbnail. De domeinregel wordt automatisch afgeleid uit de pagina-URL. Het simuleert de card alleen op basis van de waarden die je invoert — het scrapet je live pagina niet en leest geen bestaande metatags.
Open Graph- en social card-voorbeeld gebruiken
- Voer de paginatitel in die als kop van de card moet verschijnen.
- Schrijf de beschrijving (de samenvattingsregel die onder de titel wordt getoond).
- Plak een absolute afbeeldings-URL (idealiter 1200×630) om de voorbeeldafbeelding te laden.
- Voer de pagina-URL in — het domein dat op de card wordt getoond, wordt hieruit afgeleid.
- Schakel tussen X, LinkedIn, Slack, Discord en Facebook om de lay-out van elk platform te vergelijken.
- Pas de titel en beschrijving aan totdat niets wordt afgekapt en de card er goed uitziet.
Voorbeelden
Blogpost-card
De titel 'How to Bake Sourdough', een korte beschrijving, een og.png-afbeelding en de URL https://blog.example.com/sourdough worden op X gerenderd als een grote bannercard met het domein blog.example.com boven de kop.
Slack/Discord-ontvouwing
Als je naar Slack schakelt, verschijnen dezelfde waarden als een compacte card met links een accentbalk, het domein, de titel en rechts een kleine vierkante thumbnail.
Ontbrekende afbeelding
Laat de afbeeldings-URL leeg en het voorbeeld toont een tijdelijk kader in de juiste beeldverhouding, zodat je de afstand en tekstlay-out nog steeds kunt beoordelen.
Veelgestelde vragen
- Welke platforms kan ik bekijken?
- Vijf: X (Twitter), LinkedIn, Slack, Discord en Facebook. X, Facebook en LinkedIn worden getekend als bannercards met een grote afbeelding, terwijl Slack en Discord de compacte ontvouwstijl met een accentbalk en een kleine thumbnail gebruiken. Gebruik de platformschakelaar om er direct tussen te wisselen.
- Leest het de Open Graph-tags van mijn live pagina?
- Nee. Het crawlt of haalt je pagina niet op en analyseert geen bestaande metatags. Het bouwt de card puur op uit de titel, beschrijving, afbeeldings-URL en pagina-URL die je typt, dus het is een wat-als-voorbeeld in plaats van een validator van een gepubliceerde pagina.
- Waar komt de voorbeeldafbeelding vandaan?
- De afbeelding wordt rechtstreeks door je browser geladen vanaf de afbeeldings-URL die je invoert — hij gaat van de eigen host van de afbeelding naar je browser, niet via onze servers. Als de afbeelding niet verschijnt, controleer dan of de URL absoluut is (begint met https://) en openbaar bereikbaar is.
- Waarom wordt mijn titel of beschrijving afgekapt in de card?
- Sociale platforms kappen lange titels en beschrijvingen af, en het voorbeeld bootst dit na door de regels te beperken. Als tekst hier wordt afgekapt, wordt hij bij het delen waarschijnlijk ook afgekapt, dus kort hem in totdat hij past.
- Worden mijn gegevens naar een server verzonden?
- Nee. De titel, beschrijving en URL's die je typt, blijven in je browser en worden nooit door ons geüpload, gelogd of opgeslagen. Het enige externe verzoek is dat je browser de voorbeeldafbeelding ophaalt vanaf de URL die je opgeeft, wat normaal browsergedrag is.
Gerelateerde tools
Hreflang-taggenerator
Genereert hreflang-linktags voor een meertalige pagina op basis van een lijst met taal-URL-paren, met een optionele x-default en een zelfverwijzende tag.
JSON-LD-generator
Genereer geldige gestructureerde JSON-LD-gegevens voor de schema's Article, Product, FAQPage, HowTo, LocalBusiness, Event, Recipe, BreadcrumbList en Organization met een eenvoudig formulier.
Zoekwoorddichtheid-checker
Analyseer elke tekst om de woordfrequentie en zoekwoorddichtheid te tellen als woordcombinaties van 1, 2 of 3 woorden, met een waarschuwing voor overoptimalisatie.
Meta-taggenerator
Genereer SEO-, Open Graph- en Twitter Card-metatags voor je pagina op basis van een titel, beschrijving, canonieke URL, afbeelding, sitenaam en kaarttype.