Open Graph Voorbeeld

Een Open Graph Preview tool laat je zien hoe een gedeelde link eruit zal zien voordat je deze publiceert Je voert je velden og: title, og: description, og: image, og: url, en Twitter Card in - of plakt het blok metatags die je al hebt - en de tool geeft benaderende sociale kaarten weer voor Facebook, X/Twitter, LinkedIn, Slack, en Discord naast elkaar In plaats van een pagina live te duwen, te delen, en te ontdekken dat de titel in tweeën is gesneden of de afbeelding nooit wordt geladen, zie je het probleem terwijl je het nog kunt oplossen.

Het Open Graph-protocol is de gedeelde woordenschat die bijna elk platform gebruikt om die kaarten te bouwen. Een schraper bezoekt uw pagina, leest de og: metatags in de <head> en stelt er een voorbeeld van samen. De vangst is dat elk platform dezelfde tags anders weergeeft: X verkort beschrijvingen met ongeveer 110 tekens terwijl Facebook dichter bij de 155 tekens laat zien, LinkedIn verbergt de beschrijving volledig op sommige oppervlakken en Slack stort alles in een compacte bijlage. Een veld dat er op de ene kaart prima uitziet, kan in een andere worden verminkt, en daarom is het bekijken van alle tags in één keer de enige betrouwbare controle.

Hier is een open grafiekvoorbeeld met echte cijfers Stel og: titel in op "Hoe we onze pagina laden tijd in tweeën snijden zonder te herschrijven" (55 tekens, een pas) en geef het een 125-karakter og: beschrijving Validatie geeft de titel door en waarschuwt op de beschrijving: prima voor Facebook en LinkedIn, maar X wordt afgekapt tot voorbij ongeveer 110. de X-kaart met grote afbeeldingen snijdt de tekst af na "vanaf 4,1 seconden...", terwijl de Facebook-kaart de hele zin toont Het voorbeeld van de open grafiekafbeelding laadt uw og: afbeelding in elke kaart, dus een verbroken link laat zien "Het laden van de afbeelding is mislukt" voordat iemand deze deelt.

Deze tool draait client-side en haalt of schraapt nooit uw pagina Het werkt van de tags die u het geeft, hetzij in het formulier getypt of geplakt als onbewerkte HTML en lokaal geparseerd Dat betekent dat u metadata kunt valideren voor pagina's die achter een login, op een staging-domein, of helemaal niet worden geïmplementeerd Het enige verzoek dat het op uw server doet, is het laden van de og: image URL, zodat uw browser de afbeelding in de kaarten kan weergeven.