← Blog

Vanliga misstag med Open Graph-taggar

Även erfarna utvecklare gör dessa OG-taggmisstag. Här är de vanligaste – och hur man fixar var och en.

Kontrollera dina OG-taggar för misstag

Använd Proovd — klistra in en URL och se direkt hur den ser ut på X, LinkedIn, Slack, Discord, WhatsApp och Reddit.

Snabbt svar

  • Använda relativa webbadresser för og:image — plattformar kan inte hämta dem
  • Saknar twitter:card-taggen — X återger inte ditt kort
  • Bilden är för liten för plattformen — LinkedIn behöver minst 1200×627
  • Rensar inte cacheminnet efter uppdateringar – plattformar cachelagrar OG-taggar i dagar

Misstag 1: Använda relativa webbadresser för og:image

Detta är det enskilt vanligaste misstaget. Utvecklare skriver:

✗ Fel

<meta property="og:image" content="/images/preview.jpg" />

Plattformarnas sökrobotar kan inte lösa relativa webbadresser. De behöver en absolut URL:

✓ Rätt

<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />

Använd alltid https:// i din og:image URL. Detta påverkar alla plattformar – X, LinkedIn, Discord, Slack, WhatsApp och Reddit.

Misstag 2: twitter:card-tagg saknas

Många utvecklare ställer bara in Open Graph-taggar och hoppar över Twitter Card-taggar. X/Twitter föredrar twitter:card och kanske inte renderar ditt kort korrekt utan det.

✗ Ofullständig

<meta property="og:image" content="https://yoursite.com/image.jpg" />

✓ Komplett

<meta property="og:image" content="https://yoursite.com/image.jpg" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Ställ in både og:image och twitter:image för full täckning. Se vår Open Graph vs Twitter Card guide för detaljer.

Misstag 3: Bilden är för liten för plattformen

Varje plattform har olika minsta bildstorlekar. En bild som fungerar på Discord (minst 300×300) kanske inte fungerar på LinkedIn (minst 1200×627).

Platform Minimum Recommended
X / Twitter800 × 4181200 × 628
LinkedIn1200 × 6271200 × 627
Discord300 × 3001200 × 630
WhatsApp300 × 1571200 × 630
Reddit120 × 1201200 × 628

Att använda 1200 × 630 som standardstorlek täcker alla plattformar. Se vår Open Graph Guide för bildstorlekar för fullständig uppdelning.

Misstag 4: Rensar inte cacheminnet efter uppdateringar

Du uppdaterar dina OG-taggar. Plattformar visar fortfarande den gamla förhandsvisningen. Problemet: plattformar cachelagrar OG-taggar och hämtar dem inte igen automatiskt.

När du har uppdaterat dina taggar måste du rensa varje plattforms cache:

Se vår Hur man rensar Open Graph Cache guide för den fullständiga genomgången plattform för plattform.

Misstag 5: Saknar og:description eller trunkerad text

Vissa utvecklare ställer in og:title och og:image men hoppar över og:description. Andra skriver beskrivningar som är för långa och blir trunkerade.

Bästa metoder:

Misstag 6: Ställer inte in og:url

Utan og:url kan plattformar använda fel URL i förhandsgranskningen (t.ex. en URL med spårningsparametrar). Ställ alltid in den kanoniska webbadressen:

✓ Rätt

<meta property="og:url" content="https://yoursite.com/your-page" />

Misstag 7: Använder fel MIME-typ

Om din server returnerar fel Content-Type-huvud för din bild (t.ex. serverar en PNG med image/jpeg), kommer vissa plattformar att avvisa den. Se till att din bildserver returnerar rätt MIME-typ:

LinkedIn är särskilt strikt när det gäller validering av MIME-typ.

Misstag 8: Dynamiska sidor utan unika OG-taggar

Om du har ett SPA eller en dynamisk webbplats där varje sida delar samma OG-taggar (vanligtvis startsidestaggar), kommer plattformar att visa samma förhandsvisning för varje sida. Varje sida behöver sin egen unika titel, beskrivning och bild.

I Next.js, använd generateMetadata(). I WordPress, använd Yoast/RankMath per sida-inställningar. I vanlig HTML, ställ in taggar individuellt på varje sida.

Quick Fix Checklista

  1. Använd absoluta webbadresser (https://...) för alla og:image sökvägar
  2. Ställ in både og: och twitter: taggar
  3. Använd 1200×630 pixlar bilder för universell kompatibilitet
  4. Rensa plattformscachar efter uppdatering av taggar
  5. Ställ in unika OG-taggar för varje sida
  6. Inkludera og:description (150-160 tecken)
  7. Ställ in og:url till den kanoniska URL:en
  8. Verifiera MIME-typen matchar det faktiska bildformatet
  9. Testa med Proovd för att fånga alla misstag på en gång

Vanliga frågor

Vilket är det vanligaste Open Graph-felet?

Att använda en relativ URL för og:image istället för en absolut URL som börjar med https://. Plattformar kan inte hämta relativa URL:er, så bilden kommer aldrig att visas i förhandsgranskningen.

Varför fungerar min OG-bild på en plattform men inte på en annan?

Varje plattform har olika krav på bildstorlek. LinkedIn kräver minst 1200x627, X kräver 800x418 och Discord accepterar minst 300x300. En bild som fungerar på en plattform kan vara för liten för en annan.

Hur kontrollerar jag om mina OG-taggar har fel?

Använd Proovd för att klistra in en webbadress och se exakt hur den återges på alla sex plattformar samtidigt.

Kontrollera dina OG-taggar för misstag

Använd Proovd — klistra in en URL och se förhandsvisningen på X, LinkedIn, Slack, Discord, WhatsApp och Reddit.