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

Elk groot platform cache het resultaat van het schrapen van uw pagina, vaak voor een week of langer, dus een link die u deelde voordat de fix de verouderde kaart blijft tonen. Het bijwerken van de tags maakt die cache niet alleen ongeldig. betreffende -Scrape de URL in het platform debugger - de Facebook-debugger, de LinkedIn Post-inspecteur, of door opnieuw in Slack te delen - om een nieuwe app te forceren. Het toevoegen van een onschadelijke queryreeks aan de URL produceert ook een cachevrij voorbeeld 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 om grafiektags te openen wanneer de Twitter:-equivalenten ontbreken, dus een pagina met alleen OG:TITLE, OG:DESCRIPTION en OG:IMAGE zal nog steeds een kaart produceren. Wat je niet in een open grafiek kunt uitdrukken, is de kaartstijl: Twitter:Card beslist tussen de grote banner en de compacte samenvattingslay-out, en Twitter:site en Twitter:Creator de kaart toeschrijven aan je accounts. Voeg die drie toe en laat de OG: Tags de rest bedekken.

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

Houd OG: Title op of onder ongeveer 60 tekens - de meeste kaarten snoeit daarachter en smalle mobiele kaarten worden eerder geknipt. Voor OG:beschrijving De limieten divergeren: X toont ongeveer 110 tekens, Facebook en LinkedIn tonen dichter bij 155 tot 200. Als je naar de strakkere X-limiet schrijft, leest je beschrijving overal volledig. Alles wat voorbij is dat niet verloren gaat, is gewoon verborgen achter een ellips, dus laad de belangrijke woorden front-load.

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

De gebruikelijke oorzaken zijn een OG:Image dat een relatief pad is in plaats van een absolute URL, een afbeelding die wordt geserveerd via gewone http, tags die buiten de worden geplaatst , tags die door client-side JavaScript worden geïnjecteerd die de schraper nooit uitvoert, of de pagina die een niet-200-status of een inlogomleiding naar de schraper retourneert. Controleer of de tags in de onbewerkte HTML worden weergegeven die uw server retourneert - bekijk de bron in plaats van de browserinspecteur, aangezien de inspecteur de DOM toont 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 platformdebugger. De officiële debuggers moeten uw live-URL ophalen, zodat ze nutteloos zijn voor een pagina die niet is geïmplementeerd. Hier plakt u eenvoudig de tags die u wilt verzenden - van uw sjabloon, uw Framework-metadata-object of een lokale build - en de voorbeeldweergaven worden onmiddellijk weergegeven, geen implementatie vereist.

Wat gebeurt er als ik een tag weglaat?

Schrapers vallen terug en de fallbacks zijn onvoorspelbaar. Zonder OG:Titel gebruiken ze meestal de -tag, en zonder OG:beschrijving kunnen ze de metabeschrijving gebruiken of de hoofdtekst schrapen. Zonder OG:Image tonen de meeste platforms een kaart met alleen tekst, hoewel sommigen een willekeurige afbeelding van de pagina zullen pakken - vaak een logo of een trackingpixel. Zonder OG:URL wordt het gedeelde adres gebruikt zoals het is, wat betekent dat volgparameters uw share-tellingen kunnen fragmenteren. Het expliciet instellen van de tags is de enige manier om het resultaat te regelen.

Helpt open grafiekmarkeringen mijn zoekrangschikkingen?

niet direct. Open grafiektags worden gelezen door sociale en chatplatforms, niet gebruikt als rankingfactor door zoekmachines. Wat ze wel beïnvloeden, is de doorkliksnelheid op elk deel van uw link, die het verkeer aandrijft en, na verloop van tijd, de signalen die er wel toe doen. Behandel ze als conversieoptimalisatie voor gedeelde links in plaats van als een SEO-rangschikkingshendel.

Is de tool voor het openen van grafiekvoorbeelden 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.

Grafiekvoorbeeld openen

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