tigtools

Open Graph-förhandsvisning

Ange vad dina Open Graph-taggar innehåller för att se ungefär hur en delad länk kan se ut, och om bilden har rätt storlek.

Körs i din webbläsare Ingen registrering

Webbläsaren laddar den här bilden direkt från adressen du anger.

Rekommenderas: 1200 × 630 px (1,91:1), JPG eller PNG, under några megabyte. Håll viktigt innehåll borta från kanterna, eftersom vissa appar beskär till en kvadrat.

Stort länkkort
Ingen bild
example.com
—
Litet länkkort
Ingen bild
example.com
—

Dessa kort är generiska uppskattningar. Varje app har sin egen layout, typsnitt och beskärning, och cachelagrar förhandsvisningar.

Så här använder du det

  1. Ange den og:title och og:description som du använder eller planerar att använda på sidan.
  2. Klistra in den fullständiga URL:en till og:image. Verktyget läser in den och rapporterar dess faktiska pixelstorlek.
  3. Lägg till sidans URL eller domän, jämför sedan förhandsvisningarna av stora och små kort och åtgärda eventuella varningar.

Så fungerar det

När någon delar en länk hämtar de flesta sociala nätverk och chattappar sidan och läser dess Open Graph-taggar: og:title, og:description, og:image och og:url. Sedan skapar de ett kort. En bred bild med omkring 1,91:1 ger oftast ett stort kort med bilden överst; en liten eller kvadratisk bild ger ofta ett kompakt kort med en miniatyrbild bredvid texten.

Detta verktyg visar två generella kortstilar som hjälper dig att bedöma längd och bildbeskärning. Det kontrollerar bildens naturliga storlek efter att webbläsaren har laddat den: under 200 × 200 px hoppar många appar över bilden, under 600 × 315 px brukar de använda den lilla layouten, och ett förhållande långt från 1,91:1 innebär beskärning. 1200 × 630 px är den allmänt rekommenderade storleken eftersom den förblir skarp på högupplösta skärmar.

Förhandsvisningen kan inte visa exakt vad en viss app kommer att visa. Appar skiljer sig åt i hur många rader av titel och beskrivning de visar, vissa ignorerar beskrivningen, och de flesta cachelagrar en förhandsvisning ett tag efter den första delningen, så ändringar av dina taggar kanske inte syns direkt. Många plattformar erbjuder ett eget felsökningsverktyg för att uppdatera den cachen.

Exempel

En skärmbild som används som og:image

En skärmbild på 1440 × 900 har bildförhållandet 1,6:1. Verktyget varnar om förhållandet: i ett stort kort skulle bilden beskäras upptill och nedtill. Exportera en 1200 × 630-version så undviker du överraskningar.

En logotyp som enda bild

En logotyp på 180 × 180 är mindre än 200 × 200 px, så många appar visar ingen bild. Använd i stället en större, bred banner som innehåller logotypen.

Kontrollera titelns längd

En og:title på 90 tecken radbryts över tre rader i förhandsvisningen av det stora kortet. Korta ner den till cirka 60 tecken så håller sig kortet prydligt i de flesta appar.

Vanliga frågor

Varför ser min länk olika ut på Facebook, LinkedIn och X?

Varje plattform återger kort med sin egen layout, beskärning och textbegränsningar, och vissa visar beskrivningen medan andra inte gör det. Den här förhandsvisningen är en generell uppskattning, inte en kopia av någon plattforms design.

Jag har ändrat og:image men den gamla bilden visas fortfarande. Varför?

Plattformar cachelagrar länkförhandsvisningar. Använd plattformens eget delningsfelsökningsverktyg för att hämta sidan igen, eller vänta tills cachen går ut. Det hjälper också att byta namn på bildfilen.

Kan jag använda en SVG- eller WebP-bild?

SVG stöds inte av de flesta plattformar. WebP fungerar i många appar men inte alla; JPG eller PNG är det säkraste valet.

Varför kan verktyget inte läsa in min bild?

URL:en kan kräva inloggning, peka på en HTML-sida i stället för en bild, eller så kan servern blockera förfrågningar från andra webbplatser. Om webbläsaren inte kan läsa in den här kan en social plattforms sökrobot troligen inte heller göra det.

Integritet

Text du anger stannar i din webbläsare. För att kontrollera bilden hämtar webbläsaren den direkt från den URL du anger (utan att skicka någon referrer), så servern ser en vanlig bildförfrågan. Inget skickas till TIG Tools.