Open Graph vs Twitter Card: Vad är skillnaden?
Osäker på vilka taggar din sida har?
Kontrollera dina Open Graph-taggar gratis med Proovd — klistra in en URL och se exakt hur den ser ut på X, LinkedIn, Slack, Discord, WhatsApp och Reddit.
Snabbt svar
- Open Graph (og:) skapades av Facebook 2010
- Twitter Cards (twitter:card) skapades av Twitter separat
- De flesta plattformar stöder båda, men X/Twitter föredrar twitter:card
- Ställ in båda för maximal kompatibilitet
Open Graph — Facebook-standarden
Open Graph introducerades av Facebook 2010. Innan OG-taggar, när någon delade en länk på Facebook, valde plattformen slumpmässigt en bild och text från sidan. Resultatet var oförutsägbart och ofta föga tilltalande.
Facebook sa: "Låt oss ge webbansvariga ett standardsätt att kontrollera sina länkförhandsvisningar." De skapade en uppsättning metataggar som vilken webbplats som helst kunde lägga till:
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />Andra plattformar antog standarden Open Graph. LinkedIn, Discord, Slack, WhatsApp och Reddit alla lästa og:-taggar för att rendera länkförhandsvisningar.
Twitter Cards — Twitter-standarden
Twitter skapade sitt eget system som heter "Twitter Cards" innan Open Graph blev allmänt antaget. Twitter Cards använd en annan attributnamnkonvention:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Twitter Cards har två huvudtyper:
- sammanfattning — Liten miniatyrbild på höger sida av tweeten
- summary_large_image — Stor bild som tar upp det mesta av kortet (rekommenderas)
Plattformskompatibilitet
Här är vilka plattformar som använder vilka taggar:
| Platform | Primary Tags | Fallback |
|---|---|---|
| X / Twitter | twitter:card | og: tags |
| og: tags | twitter:card tags | |
| Discord | og: tags | twitter:card tags |
| Slack | og: tags | twitter:card tags |
| og: tags | twitter:card tags | |
| og: tags | twitter:card tags |
Varför du bör ställa in båda
Även om de flesta plattformar stöder båda taggtyperna, finns det goda skäl att ställa in båda:
- X/Twitter föredrar twitter:card-taggar. Även om X kan falla tillbaka till OG-taggar, kanske det inte renderar dem korrekt. Att ställa in båda säkerställer att X visar rätt korttyp.
- Framtidssäkring. Om en ny plattform lanseras och föredrar den ena standarden framför den andra garanterar kompatibiliteten att ha båda.
- Konsistens. Att använda båda säkerställer att din förhandsvisning ser korrekt ut oavsett vilken plattform som läser vilka taggar.
Den kompletta installationen
Här är den rekommenderade inställningen för alla sidor:
<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />
<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />Quick Fix Checklista
- Ställ in alla fyra og:-taggar (titel, beskrivning, bild, url)
- Ställ in twitter:card med värdet "summary_large_image"
- Ställ in twitter:title och twitter:image
- Använd samma bildadress för både og:image och twitter:image
- Testa med Proovd för att verifiera på alla plattformar
Vanliga frågor
Kan jag bara använda OG-taggar och hoppa över Twitter Cards?
Du kan, men X/Twitter kanske inte återger ditt kort korrekt. Ställ alltid in båda för bästa resultat på alla plattformar.
Behöver jag olika bilder för OG och Twitter Card?
Nej. Använd samma bild-URL för både og:image och twitter:image. Plattformarna kommer att använda vilken tagg de föredrar.
Relaterade artiklar
Verifiera både OG- och Twitter Card-taggar
Kontrollera dina Open Graph-taggar gratis med Proovd — klistra in en URL och se förhandsvisningen på X, LinkedIn, Slack, Discord, WhatsApp och Reddit.