Waarom toont mijn linkvoorbeeld de oude afbeelding nadat ik de tags heb bijgewerkt?

Elk groot platform cachet het resultaat van het schrapen van je pagina, vaak voor een week of langer, dus een link die je deelde voordat de oplossing de verouderde kaart blijft tonen Het bijwerken van de tags maakt die cache niet op zichzelf ongeldig Schraap de URL opnieuw in de platformdebugger - de Facebook Sharing Debugger, de LinkedIn Post Inspector, of door opnieuw te delen in Slack - om een nieuwe ophaalactie af te dwingen Het toevoegen van een onschadelijke queryreeks aan de URL levert ook een cacheloze preview op om te testen.

Heb ik zowel OG: als Twitter: Tags nodig?

Niet altijd, maar het is veiliger om beide op te nemen X valt terug naar Open Graph tags wanneer de twitter: equivalenten ontbreken, dus een pagina met alleen og: titel, og: beschrijving, en og: afbeelding zal nog steeds een kaart opleveren Wat je niet kunt uitdrukken in Open Graph is de kaartstijl: twitter: kaart beslist tussen de grote banner en de compacte samenvattingsindeling, en twitter: site en twitter: creator schrijven de kaart toe aan je accounts Voeg die drie toe en laat de og: tags de rest dekken.

Hoe lang moeten mijn og:title en og:description zijn?

Houd og: titel op of onder ongeveer 60 tekens - de meeste kaarten knotten daar voorbij, en smalle mobiele kaarten knippen eerder Voor og: beschrijving lopen de limieten uiteen: X toont ongeveer 110 tekens, Facebook en LinkedIn tonen dichter bij 155 tot 200 Als je schrijft naar de strakkere X-limiet leest je beschrijving overal volledig Alles wat voorbij is dat niet verloren gaat, het is gewoon verborgen achter een ellips, dus laad de belangrijke woorden vooraf.

Waarom is mijn voorbeeld leeg of wordt alleen de URL weergegeven?

De gebruikelijke oorzaken zijn een og: afbeelding die een relatief pad is in plaats van een absolute URL, een afbeelding die via gewone http wordt weergegeven, tags die buiten de zijn geplaatst, tags die zijn geïnjecteerd door JavaScript aan de clientzijde en die de scraper nooit uitvoert, of de pagina die een niet-200-status of een inlogomleiding naar de scraper retourneert Controleer of de tags verschijnen in de onbewerkte HTML die uw server retourneert - bekijk de bron in plaats van de browserinspecteur, aangezien de inspecteur de DOM weergeeft nadat JavaScript is uitgevoerd.

Haalt deze tool mijn URL op om de tags te controleren?

heel weinig . Het doet helemaal geen netwerkverzoeken. Het werkt vanuit de tags die u in het formulier typt of plakt als HTML, en alles wordt geparseerd en weergegeven in uw browser. Dat is een bewuste ontwerpkeuze: browsers kunnen vanwege CORS geen willekeurige pagina's van derden ophalen, en een server-side fetcher zou betekenen dat u uw niet-uitgebrachte URL's naar iemand anders stuurt. Omdat er niets wordt opgehaald, kunt u pagina's op localhost, staging of achter een login valideren.

Kan ik een voorbeeld van een pagina bekijken die nog niet is gepubliceerd?

Ja, en het is de belangrijkste reden om een tool als deze te gebruiken in plaats van een platform debugger De officiële debuggers moeten uw live URL ophalen, dus ze zijn nutteloos voor een pagina die niet wordt geïmplementeerd Hier plakt u gewoon de tags die u wilt verzenden - van uw sjabloon, uw framework metadata object, of een lokale build - en de previews renderen onmiddellijk, geen implementatie vereist.

Wat gebeurt er als ik een tag weglaat?

Schrapers vallen terug, en de fallbacks zijn onvoorspelbaar Met geen og: titel gebruiken ze meestal de tag, en zonder og: beschrijving mogen ze de meta beschrijving gebruiken of hoofdtekst schrapen Met geen og: afbeelding tonen de meeste platforms een alleen tekst kaart, hoewel sommige een willekeurige afbeelding van de pagina zullen pakken - vaak een logo of een tracking pixel Met geen og: url wordt het gedeelde adres gebruikt zoals het is, wat betekent dat tracking parameters het aantal van uw delen kunnen fragmenteren Het expliciet instellen van de tags is de enige manier om het resultaat te controleren.

Helpt Open Graph markup mijn zoekranglijst?

Niet direct. Open Graph tags worden gelezen door sociale en chatplatforms en worden niet gebruikt als rankingfactor door zoekmachines. Wat ze wel beïnvloeden is de klikfrequentie op elk deel van uw link, die het verkeer aanstuurt en, na verloop van tijd, de signalen die er wel toe doen. Behandel ze als conversie-optimalisatie voor gedeelde links in plaats van als een SEO-rankinghendel.

Is de Open Graph Preview-tool gratis en privé?

Ja. Het is volledig gratis zonder aanmelding en elke parse, validatie en voorbeeld vindt plaats in JavaScript in uw browser. De titels, URL's en afbeeldingslinks die u invoert, worden nooit naar een server verzonden en de tool blijft offline werken zodra de pagina is geladen.

Open Graph Voorbeeld

Bekijk een voorbeeld van hoe uw link eruit zal zien op Facebook, X, LinkedIn, Slack en Discord, valideer uw OG: tags en kopieer een correct metablok

Paste existing meta HTML (optional)

Nothing is fetched or uploaded. Paste the tags from your page source and they are parsed in your browser.

og:title53/60

og:description127/200

og:image

og:url

og:site_name5/40

twitter:site

twitter:creator

og:type

twitter:card

Validation

8 1 0

og:title 53 characters - displays in full on every platform.
og:description 127 characters - fine for Facebook and LinkedIn, but X truncates past ~110.
og:image Absolute HTTPS image URL. Serve it at 1200x630 (1.91:1) for the best result.
og:url Absolute canonical URL set.
og:type Set to "website".
og:site_name 5 characters - shown above the title on most cards.
twitter:card Large banner card. Best when your image is 1200x630 or wider.
twitter:site Valid handle (@toolz).
twitter:creator Valid handle (@toolz).

Generated meta tags

<!-- Open Graph / Facebook / LinkedIn / Slack / Discord -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta property="og:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta property="og:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta property="og:site_name" content="Toolz" />
<meta property="og:image" content="https://toolz.dev/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Open Graph Preview: Test Social Cards Before You Ship" />

<!-- X / Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:url" content="https://toolz.dev/tools/open-graph-preview" />
<meta name="twitter:title" content="Open Graph Preview: Test Social Cards Before You Ship" />
<meta name="twitter:description" content="Preview how your link looks on Facebook, X, LinkedIn, Slack, and Discord. Validate your og: tags and copy a correct meta block." />
<meta name="twitter:image" content="https://toolz.dev/og-image.png" />
<meta name="twitter:site" content="@toolz" />
<meta name="twitter:creator" content="@toolz" />

Social card previews

Approximations of each platform's layout - exact rendering changes over time.

Facebook