← Blog

Open Graph vs Twitter Card: Mikä ero on?

Molemmat ohjaavat linkkien esikatseluja sosiaalisessa mediassa. Mutta ne eivät ole sama asia. Tässä kerrotaan, milloin kumpaakin kannattaa käyttää – ja miksi sinun tulee käyttää molempia.

Etkö ole varma, mitä tunnisteita sivullasi on?

Tarkista Open Graph-tunnisteet vapaana koodilla Proovd — liitä URL-osoite ja katso tarkalleen, miltä se näyttää kohdissa X, LinkedIn, Slack, Discord, WhatsApp ja Reddit.

Pikavastaus

  • Open Graph (og:) loi Facebook vuonna 2010
  • Twitter Cards (twitter:card) loi Twitter erikseen
  • Useimmat alustat tukevat molempia, mutta X/Twitter suosii twitter:card
  • Aseta molemmat parhaan yhteensopivuuden saavuttamiseksi

Open Graph — Facebook-standardi

Open Graph esitteli Facebook vuonna 2010. Ennen OG-tageja, kun joku jakoi linkin sivulla Facebook, alusta poimi satunnaisesti kuvan ja tekstin sivulta. Tulos oli arvaamaton ja usein epämiellyttävä.

Facebook sanoi: "Annetaan verkkovastaaville tavallinen tapa hallita linkkien esikatselua." He loivat joukon sisällönkuvauskenttiä, jotka mikä tahansa verkkosivusto voi lisätä:

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

Muut alustat omaksuivat Open Graph-standardin. LinkedIn, Discord, Slack, WhatsApp ja Reddit kaikki read og: -tunnisteet linkkien esikatselun tekemiseksi.

Twitter Cards — Twitter-standardi

Twitter loi oman järjestelmänsä nimeltä "Twitter Cards", ennen kuin Open Graph tuli laajalti käyttöön. Twitter Cards käytä erilaista attribuuttien nimeämiskäytäntöä:

<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 on kaksi päätyyppiä:

Alustan yhteensopivuus

Tässä on, mitkä alustat käyttävät mitäkin tunnisteita:

Platform Primary Tags Fallback
X / Twitter twitter:card og: tags
LinkedIn og: tags twitter:card tags
Discord og: tags twitter:card tags
Slack og: tags twitter:card tags
WhatsApp og: tags twitter:card tags
Reddit og: tags twitter:card tags

Miksi sinun pitäisi asettaa molemmat

Vaikka useimmat alustat tukevat molempia tunnistetyyppejä, on hyviä syitä asettaa molemmat:

  1. X/Twitter suosii twitter:card-tageja. Vaikka X voi palata OG-tunnisteisiin, se ei välttämättä hahmonna niitä oikein. Molempien asettaminen varmistaa, että X näyttää oikean korttityypin.
  2. Tulevaisuussuojaus. Jos uusi alusta lanseerataan ja suosii yhtä standardia kuin toista, molempien käyttö varmistaa yhteensopivuuden.
  3. Johdonmukaisuus. Molempien käyttö varmistaa, että esikatselu näyttää oikealta riippumatta siitä, mikä alusta lukee mitkä tunnisteet.

Täydellinen asennus

Tässä on suositellut asetukset mille tahansa sivulle:

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

Pikakorjauksen tarkistuslista

  1. Aseta kaikki neljä og:-tunnistetta (otsikko, kuvaus, kuva, URL-osoite)
  2. Aseta twitter:card arvolla "summary_large_image"
  3. Aseta twitter:title ja twitter:image
  4. Käytä samaa kuvan URL-osoitetta sekä og:image että twitter:image
  5. Testaa Proovd varmistaaksesi kaikilla alustoilla

Usein kysytyt kysymykset

Voinko käyttää vain OG-tageja ja ohittaa Twitter Cards?

Voit voi, mutta X/Twitter ei välttämättä renderöi korttiasi oikein. Aseta aina molemmat parhaan tuloksen saavuttamiseksi kaikilla alustoilla.

Tarvitsenko eri kuvia OG:lle ja Twitter Cardille?

Ei. Käytä samaa kuvan URL-osoitetta sekä og:image että twitter:image. Alustat käyttävät haluamansa tunnistetta.

Aiheeseen liittyvät artikkelit

Tarkista sekä OG- että Twitter Card-tagit

Tarkista Open Graph-tunnisteet vapaana koodilla Proovd — liitä URL-osoite ja katso esikatselu kohdissa X, LinkedIn, Slack, Discord, WhatsApp ja Reddit.