← Blog

Algeng mistök með Open Graph merkjum

Jafnvel reyndir verktaki gera þessar OG tag mistök. Hér eru þær algengustu - og hvernig á að laga hverja.

Athugaðu OG merkin þín fyrir mistök

Notaðu Proovd — límdu vefslóð og sjáðu strax hvernig hún lítur út á X, LinkedIn, Slack, Discord, WhatsApp og Reddit.

Fljótt svar

  • Notkun afstæðra vefslóða fyrir og:image — pallar geta ekki sótt þær
  • Vantar twitter:card merki — X mun ekki birta kortið þitt
  • Of lítil mynd fyrir pallinn — LinkedIn þarf að lágmarki 1200×627
  • Hreinsar ekki skyndiminni eftir uppfærslur - vettvangar geyma OG merki í marga daga

Villa 1: Notkun hlutfallslegra vefslóða fyrir og:image

Þetta er ein algengasta mistökin. Hönnuðir skrifa:

✗ Rangt

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

Skriðrar palla geta ekki leyst afstæðar vefslóðir. Þeir þurfa algera vefslóð:

✓ Rétt

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

Notaðu alltaf https:// í og:image vefslóðinni þinni. Þetta hefur áhrif á alla vettvang - X, LinkedIn, Discord, Slack, WhatsApp og Reddit.

Mistök 2: Vantar twitter:card Merki

Margir forritarar setja aðeins Open Graph merki og sleppa Twitter Card töggum. X/Twitter kýs frekar twitter:card og gæti ekki birt kortið þitt rétt án þess.

✗ Ófullnægjandi

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

✓ Lokið

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

Stilltu bæði og:image og twitter:image fyrir fulla umfjöllun. Sjá Open Graph vs Twitter Card leiðbeiningar okkar fyrir frekari upplýsingar.

Mistök 3: Myndin er of lítil fyrir pallinn

Hver pallur hefur mismunandi lágmarksmyndastærðir. Mynd sem virkar á Discord (300×300 lágmark) virkar kannski ekki á LinkedIn (1200×627 lágmark).

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

Notkun 1200 × 630 sem staðlað stærð nær yfir alla palla. Sjáðu Open Graph Myndastærðarleiðbeiningar fyrir heildar sundurliðunina.

Mistök 4: Ekki hreinsa skyndiminni eftir uppfærslur

Þú uppfærir OG merkin þín. Pallar sýna enn gamla forsýninguna. Vandamálið: pallar geyma OG merki og sækja þau ekki aftur sjálfkrafa.

Eftir að hafa uppfært merkin þín verður þú að hreinsa skyndiminni hvers vettvangs:

Sjáðu Hvernig á að hreinsa Open Graph skyndiminni leiðbeiningar okkar fyrir alla vettvang fyrir vettvang.

Villa 5: Vantar og:description eða styttan texta

Sumir forritarar stilla og:title og og:image en sleppa og:description. Aðrir skrifa lýsingar sem eru of langar og verða styttar.

Bestu starfsvenjur:

Villa 6: Stillir ekki og:url

Án og:url gætu pallar notað ranga vefslóð í forskoðuninni (t.d. vefslóð með rakningarbreytum). Stilltu alltaf kanóníska vefslóðina:

✓ Rétt

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

Mistök 7: Að nota ranga MIME-gerð myndar

Ef þjónninn þinn skilar röngum Content-Type haus fyrir myndina þína (t.d. þjóna PNG með image/jpeg), munu sumir pallar hafna því. Gakktu úr skugga um að myndaþjónninn þinn skili réttri MIME-gerð:

LinkedIn er sérstaklega strangt varðandi staðfestingu á MIME-gerð.

Mistök 8: Kvikar síður án einstakra OG-merkja

Ef þú ert með SPA eða kraftmikla síðu þar sem hver síða deilir sömu OG merkjum (venjulega heimasíðumerkjum), munu pallar sýna sömu forskoðun fyrir hverja síðu. Hver síða þarf sinn einstaka titil, lýsingu og mynd.

Í Next.js, notaðu generateMetadata(). Í WordPress, notaðu Yoast/RankMath stillingar á síðu. Í venjulegu HTML, stilltu merki fyrir sig á hverri síðu.

Gátlisti til fljótlegra laga

  1. Notaðu algjörar vefslóðir (https://...) fyrir allar og:image slóðir
  2. Stilltu bæði og: og twitter: merki
  3. Notaðu 1200×630 pixla myndir fyrir alhliða eindrægni
  4. Hreinsaðu skyndiminni vettvangs eftir að hafa uppfært merki
  5. Stilltu einstök OG merki fyrir hverja síðu
  6. Hafa og:description (150-160 stafir)
  7. Stilltu og:url á kanónísku vefslóðina
  8. Staðfestu að MIME-gerð passi við raunverulegt myndsnið
  9. Prófaðu með Proovd til að ná öllum mistökum í einu

Algengar spurningar

Hver eru algengustu Open Graph mistökin?

Notkun afstæðrar vefslóðar fyrir og:image í stað algerrar vefslóðar sem byrjar á https://. Platformar geta ekki sótt afstæðar vefslóðir, þannig að myndin mun aldrei birtast í forskoðuninni.

Af hverju virkar OG myndin mín á einum vettvangi en ekki öðrum?

Hver pallur hefur mismunandi kröfur um myndstærð. LinkedIn krefst 1200x627 lágmarks, X krefst 800x418, og Discord samþykkir 300x300 lágmark. Mynd sem virkar á einum vettvangi gæti verið of lítil fyrir annan.

Hvernig athuga ég hvort OG merkin mín séu með villur?

Notaðu Proovd til að líma hvaða vefslóð sem er og sjá nákvæmlega hvernig hún birtist á öllum sex kerfunum í einu.

Athugaðu OG merkin þín fyrir mistök

Notaðu Proovd — límdu vefslóð og sjáðu forskoðunina á X, LinkedIn, Slack, Discord, WhatsApp og Reddit.