Open Graph vs Twitter Card: Hva er forskjellen?

Begge kontrollerer forhåndsvisninger av lenker på sosiale medier. Men de er ikke det samme. Her er når du skal bruke hver - og hvorfor du bør bruke begge.

Open Graph — Facebook-standarden

Open Graph ble introdusert av Facebook i 2010. Før OG-tagger, når noen delte en lenke på Facebook, valgte plattformen tilfeldig et bilde og en tekst fra siden. Resultatet var uforutsigbart og ofte lite tiltalende.

Facebook sa: "La oss gi webansvarlige en standard måte å kontrollere forhåndsvisningene av koblinger på." De opprettet et sett med metakoder som ethvert nettsted kunne legge til:

<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" />

Andre plattformer tok i bruk Open Graph-standarden. LinkedIn, Discord, Slack, WhatsApp og Reddit alle leste og:-tagger for å gjengi forhåndsvisninger av koblinger.

Twitter Cards — Twitter-standarden

Twitter opprettet sitt eget system kalt "Twitter Cards" før Open Graph ble bredt adoptert. Twitter Cards bruk en annen navnekonvensjon for attributter:

<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 to hovedtyper:

• sammendrag — Lite miniatyrbilde på høyre side av tweeten
• summary_large_image — Stort bilde som tar opp det meste av kortet (anbefalt)

Plattformkompatibilitet

Her er hvilke plattformer som bruker hvilke tagger:

Hvorfor du bør angi begge

Selv om de fleste plattformer støtter begge tagtypene, er det gode grunner til å angi begge:

1. X/Twitter foretrekker twitter:card-tagger. Selv om X kan falle tilbake til OG-tagger, kan det hende den ikke gjengir dem riktig. Innstilling av begge sikrer at X viser riktig korttype.
2. Fremtidssikring. Hvis en ny plattform lanseres og foretrekker den ene standarden fremfor den andre, sikrer det kompatibilitet å ha begge.
3. Konsistens. Å bruke begge sikrer at forhåndsvisningen din ser riktig ut uavhengig av hvilken plattform som leser hvilke tagger.

Det komplette oppsettet

Her er det anbefalte oppsettet for alle sider:

<!-- 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 Sjekkliste

Ofte stilte spørsmål