Open Graph

Kattintás

Egy képes link-előnézet sokkal feltűnőbb, mint egy csupasz URL. Ha a megosztás kép nélküli, a kattintási arány esik. Ezt főleg hírlevélből és chat-forgalomból érkező oldalaknál érezni.

Bizalom

A hiányzó vagy hibás előnézet amatőr benyomást kelt. Rossz eset, amikor a kép a sablon logója, a cím pedig a főoldalé, miközben egy termékoldalt osztottál meg. A látogató nem tudja, hova fog érkezni.

Kontroll

OG nélkül a platform dönt helyetted. Ha megvan, te írod a címet és a leírást. Ez főleg akkor hasznos, ha a title hosszú és kulcsszavas, a megosztáshoz viszont emberi mondat kell.

Hatás

SEO-szempontból az Open Graph alacsony hatású tétel. A Google nem használja rangsorolásra. Olcsó viszont megcsinálni, és a hibája azonnal látszik minden megosztásnál.

Kikre vonatkozik

• Minden nyilvános oldalra, amit valaha linkelni fognak: főoldal, szolgáltatásoldalak, blogcikkek, termékoldalak.
• Webshopokra kiemelten: a termékoldalaknak saját képet és címet kell adniuk, nem a bolt logóját.
• Hírlevelet vagy közösségi médiát használó cégekre, ahol a forgalom nagy része megosztott linkből jön.
• Landing oldalakra, ahol a kampánypénz a kattintáson múlik.

Kikre nem

• Staging és fejlesztői környezet: ott a noindex, meta robots és X-Robots-Tag a fontos, nem az OG.
• Belépés mögötti oldalak: a robot úgysem éri el őket.
• Kosár, pénztár, fiók: ezeket nem osztja meg senki.

Régi oldalaknál gyakori, hogy csak a főoldalon van OG-adat. Az aloldalak öröklik a főoldal címét és képét. Ez rosszabb, mintha semmi nem lenne.

Lépésről lépésre

1. Nyisd meg az oldalt, és nézd meg a forrást: jobb klikk, majd "Oldal forrásának megtekintése".
2. Keress rá a forrásban az og: szövegre. A <head> részben kell lennie.
3. Ellenőrizd, hogy megvan-e az og:title, az og:description és az og:image.
4. Másold ki az og:image URL-jét, és nyisd meg külön fülön. Töltődnie kell, 200-as státuszkóddal.
5. Nézd meg ugyanezt egy aloldalon is, ne csak a főoldalon. Ha az értékek azonosak, a sablon nem dinamikus.
6. Illeszd be a linket egy privát csetbe, és nézd meg az előnézetet élőben.

Jó jel

• Minden oldaltípusnak saját og:title és og:description értéke van.
• Az og:image abszolút URL, https:// kezdettel.
• A kép legalább 1200 x 630 pixel, 1.91:1 arányban.
• Az og:url megegyezik a kanonikus címmel.

Rossz jel

• Nincs egyetlen og: tag sem.
• Az og:image relatív útvonal, például /images/logo.png.
• Minden aloldal ugyanazt a címet és képet kapja.
• A kép 404-et ad, vagy bejelentkezés mögött van.
• Az og:description üres content="" értékkel szerepel.

Mit néz ebből a riport

A riport az "Open Graph adatok" szabálynál azt vizsgálja, hogy a lekért HTML-ben megvan-e az og:title, az og:description és az og:image. A hatás alacsony, a hatókör kód. Az ajánlás ugyanez: add meg ezt a három metaadatot a szép megosztáshoz.

WordPress

1. Telepíts egy SEO-bővítményt, ha még nincs: Yoast SEO vagy Rank Math. Mindkettő generál OG-tageket.
2. A bővítmény beállításaiban kapcsold be a közösségi metaadatokat.
3. Adj meg alapértelmezett megosztási képet arra az esetre, ha egy bejegyzésnek nincs kiemelt képe.
4. Minden bejegyzéshez és oldalhoz állíts be kiemelt képet. A bővítmények ebből veszik az og:image értéket.
5. A szerkesztőben a Social fülön írd felül a címet és a leírást ott, ahol a title túl hosszú.

Shopify

1. Menj az Online Store, Themes, Edit code menüpontba.
2. Nyisd meg a theme.liquid fájlt, és keresd a <head> részt.
3. A legtöbb modern sablonban van meta-tags.liquid snippet. Ellenőrizd, hogy be van-e emelve.
4. Ha nincs, hozz létre egyet, és a termékoldalon a product.featured_image alapján add meg az og:image értéket.

Unas

1. A rendszer a termék- és kategóriaoldalakhoz maga generál alap OG-adatokat.
2. Ami hiányzik, azt a sablon fejléc-szerkesztőjében tudod pótolni saját HTML-lel.
3. Az egyedi tartalmi oldalaknál ellenőrizd külön, hogy nem a főoldal adatai öröklődnek-e.

Shoprenter

1. A sablonszerkesztőben keresd meg a head részt tartalmazó sablonfájlt.
2. A termék adataira hivatkozó változókkal töltsd fel az og:title és og:image mezőket.
3. Ha a sminked nem támogatja a szerkesztést, kérd a fejlesztődtől a snippet beillesztését.

Egyedi fejlesztés

1. Tedd az OG-tageket a layout sablon <head> részébe, változókkal.
2. Az og:image mindig abszolút URL legyen, teljes domainnel.
3. Adj meg og:image:width és og:image:height értéket, így a platform nem várja meg a kép letöltését.
4. Az og:url értékét kösd a kanonikus címhez, ne a nyers kérés URL-jéhez.
5. Ha van rá kapacitás, generálj termékenként dinamikus megosztási képet.

A módosítás után töröld a platform gyorsítótárát a Facebook Sharing Debugger eszközével. A scraper napokig tárolja a régi adatot. Érdemes egyszerre rendbe tenni a Twitter card mezőket és a favicon fájlt is, mert ugyanaz a <head> blokk érinti őket.

• Relatív kép-útvonal az og:image mezőben: a platform robotja nem oldja fel, az előnézet kép nélkül marad.
• Ugyanaz az OG-adat minden aloldalon: a megosztott termékoldalon a főoldal szövege jelenik meg, a látogató félrevezetve kattint.
• Túl kicsi vagy rossz arányú kép: 200 x 200 pixel alatt sok platform egyáltalán nem mutatja, a négyzetes képet pedig levágja.
• name attribútum property helyett: a <meta name="og:title"> forma nem szabványos, több feldolgozó figyelmen kívül hagyja.
• Kép bejelentkezés vagy tűzfal mögött: a scraper 403-at kap, és üres előnézetet készít.
• Cache-elt régi adat: a javítás után elmarad a Sharing Debugger újrakérése, és hetekig a régi kép látszik.
• A meta description másolása szó szerint: a Meta description keresőre van hangolva, a megosztáshoz emberi mondat kell.

Minimális, de teljes OG-blokk egy termékoldalon:

<head>
  <meta charset="utf-8">
  <title>Kerti pad tölgyfából - Faműhely</title>

  <meta property="og:title" content="Kerti pad tölgyfából">
  <meta property="og:description" content="Kézzel készült tölgyfa kerti pad, 160 cm, olajozott felülettel.">
  <meta property="og:image" content="https://pelda.hu/kep/kerti-pad-1200x630.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:url" content="https://pelda.hu/termek/kerti-pad">
  <meta property="og:type" content="product">
  <meta property="og:locale" content="hu_HU">
</head>

Az og:type értéke cikknél article, főoldalnál website. Az og:locale a magyar nyelvű oldalaknál hu_HU, összhangban a lang attribútummal.

Gyors ellenőrzés parancssorból, minden OG-tag kiírása:

curl -sL https://pelda.hu/termek/kerti-pad | grep -o '<meta property="og:[^>]*>'

Ha a parancs nem ad vissza semmit, az oldalon nincs Open Graph adat. Ha csak og:title jön vissza, a kép és a leírás hiányzik.