Mi az Open Graph, és hogyan tudom használni a webhelyemen?

Sok időbe telhet a tartalom elkészítése és a webhely fenntartása. Hogyan tudunk megbizonyosodni arról, hogy tartalmunk kiemelkedik-e az internetes közösségi hírcsatornákban való megosztás során?

  • Mi az Open Graph?
  • Miért van szükségem rá?
  • Mi történik, ha nincs nálam?
  • Kezdve a nyitott grafikon alapjaival
  • Webhely nyitott grafikon típusa
  • Néhány más nyitott gráf címke, amelyet érdemes hozzáadni
  • Twitter és más közösségi média hálózatok nyílt grafikon segítségével
  • Képek nyílt grafikonon
  • A nyitott gráfcímkék tesztelése
  • Kaphatok példát?

Mi az Open Graph?

Az Open Graph egy olyan internetes protokoll, amelyet eredetileg a Facebook hozott létre, hogy szabványosítsa a weboldalon belüli metaadatok használatát az oldal tartalmának ábrázolására.

Ezen belül olyan részleteket adhat meg, mint egy oldal címe, vagy olyan konkrét, mint egy videó időtartama. Ezek a darabok egymásba illeszkedve alkotják az internet minden egyes oldalának reprezentációját.

Miért van szükségem rá?

Az internetes tartalom általában legalább egy célt szem előtt tartva készül - megosztani másokkal. Ez nem feltétlenül számít, ha csak egy barátjának küldi el, de ha meg szeretné osztani, vagy azt szeretné, hogy megosszák bármelyik szociális hálózaton vagy alkalmazásban, amely gazdag előnézeteket használ, akkor azt szeretné, hogy az előnézet ugyanolyan hatékony legyen amint lehetséges.

Hogyan válhatunk teljes verem webfejlesztővé 2020-ban #javascript #fullstack //t.co/A1TsFaDguD

- Colby Fayock (@colbyfayock) 2020. március 10

Ez arra ösztönzi az embereket, hogy nézzék meg az Ön tartalmát, és elkerülhetetlenül átkattintsanak a tartalmára.

Mi történik, ha nincs nálam?

A legtöbb közösségi hálózat alapértelmezés szerint igyekszik mindent megtenni a tartalom előnézetének elkészítésében. Ez gyakran nem megy olyan jól.

Vegyük például a colbyfayock.com webhelyet.

Helyesen megragadja az oldalam címét és a leírást, de nem ez a legcsábítóbbnak tűnő tweet egy hírcsatornában.

Ezt szembeállítva egyetlen bejegyzés előnézetével, és egy másik történetet látunk.

Tehát mi történik, ha nincsenek nyitott grafikoncímkéi? Semmi rossz nem fog történni, de nem fogja kihasználni néhány olyan funkciót, amelyek segítenek kiemelni tartalmát az interneten megjelenő rengeteg más tartalom mellett.

Kezdve a nyitott grafikon alapjaival

A négy alap nyílt grafikon címkéket, amelyek szükségesek az egyes oldalak vannak og:title, og:type, og:image, és og:url. Ezeknek a címkéknek egyedinek kell lenniük minden egyes megjelenített oldalon, vagyis a kezdőlap címkéinek különbözniük kell a blogbejegyzés cikkének oldalától.

Bár meglehetősen egyszerűnek kell lennie, az alábbiakban részletezzük az egyes címkék jelentését:

  • og:title: Az oldal címe. Ez általában megegyezik a weboldal címkéjével, hacsak másképp nem szeretné bemutatni.
  • og:type: A webhely „típusa”. A következő szakaszban többet elmagyarázok, bár egy általános „típus” a „webhely”.
  • og:image: Ennek egy olyan képre mutató linknek kell lennie, amely képviselni szeretné a tartalmát. Nagy felbontású képnek kell lennie, amelyet a közösségi hálózatok felhasználnak a hírcsatornáikban.
  • og:url: Ennek az aktuális oldal URL-jének kell lennie.

Ha címkét helyez el a webhelyén, akkor azt minden más metaadattal együtt helyezze el . A használt címke címke lesz, és ennek a mintának kell kinéznie:

Tehát ha létrehoznék egy négy alap nyitott grafikon címkét a webhelyemhez, a colbyfayock.com-hoz, ez a következőképpen nézhet ki:

Webhely nyitott grafikon típusa

A nyílt gráf protokoll néhány változatot tartalmaz a támogatott webhely „típusáról”. Ide tartoznak például a webhelyek, cikkek vagy videók.

A nyílt gráfcímkék beállításakor érdemes elképzelnie, hogy melyik típusnak lenne értelme a webhelye szempontjából. Ha az oldal egyetlen videóra összpontosít, akkor valószínűleg van értelme a „video” típust használni. Ha ez egy általános webhely, amelynek nincs külön vertikálja, akkor valószínűleg csak a „website” típust szeretné használni.

A többihez hasonlóan ez minden oldal esetében egyedi. Tehát, ha a kezdőlapja "webhely", akkor mindig lehet egy másik "video" típusú oldala.

Tehát ha létrehoznék egy nyílt grafikon típust a webhelyemhez, akkor a következő lehet a kezdőlapomon:

Ha blogbejegyzésre navigál, a következőképpen néz ki:

A leggyakoribb nyílt gráf webhelytípusokat a nyílt gráf weboldalon találhatja meg: //ogp.me/#types

Néhány más nyitott gráf címke, amelyet érdemes hozzáadni

Bár általában rendben lesz az alapokkal, íme néhány további, amelyet érdemes lenne hozzáfűzni:

  • og:description: Az oldal leírása. Hasonlóan lehet og:title, hogy ez megegyezik a webhely címkéjével, kivéve, ha másképp szeretné bemutatni.
  • og:locale: Ha lokalizálni szeretné a címkéit, akkor valószínűleg ésszerű lenne a területi beállításokat is felvenni. A formátum ott van language_TERRITORY, ahol az alapértelmezett en_US.
  • og:site_name: A teljes webhely neve, amelyen a tartalma található. Ha blogbejegyzési oldalon tartózkodik, akkor lehet, titlehogy a blogbejegyzés címét használja, ahol a blog neve site_namelenne.
  • og:video: Van olyan videód, amely támogatja a tartalmadat? Itt az alkalom, hogy felvegye. Ehhez a címkéhez adj hozzá linket a videódhoz.

Ezeket a címkéket ugyanabban a mintában adjuk hozzá, mint korábban:

Twitter és más közösségi média hálózatok nyílt grafikon segítségével

A közösségi hálózatok többsége betartja a nyílt gráf szabványok alapjait, de néhány közülük saját kiterjesztést is tartalmaz, amely segít testre szabni a megjelenést és érzést ökoszisztémájukban.

A Twitter lehetővé teszi például annak megadását twitter:card, hogy milyen típusú „kártyát” használhat, amikor megjeleníti webhelyét. Jelenleg kártyatípusaik a következők:

  • összefoglaló
  • összegző_nagy_kép
  • kb
  • játékos

Ez segít kiválasztani, hogyan használják linkjeit a hírcsatornában. Ha summary_large_imagepéldául azt választja , a Twitter nagy nagy felbontású képekkel jeleníti meg a linkjeit, amennyiben azt megadja a og:imagecímkében.

Íme néhány gyors hivatkozás a nyílt gráfcímkék használatának dokumentációjára a közösségi oldalakon:

  • Twitter: //developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
  • Facebook: //developers.facebook.com/docs/sharing/webmasters/
  • Pinterest: //developers.pinterest.com/docs/rich-pins/overview/?
  • LinkedIn: //www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=hu

Képek nyílt grafikonon

Míg a kép hozzáadása, aminek og:imagegyakran elégnek lennie, néha nagy kihívást jelenthet a kép megfelelő megjelenése érdekében. Ha úgy tűnik, hogy gondjai vannak, a nyílt grafikon szabvány tartalmaz néhány képcímkét, például a og:image:urlvs og:image:secure_url, valamint a og:image:widthés a og:image:height.

Próbáljon meggyőződni arról, hogy követi-e az összes megjegyzést és példát a nyílt diagram dokumentációjában. Ezenkívül a közösségi hálózatok egy részének képi követelményei vannak. A Twitter például 2: 1 arányt igényel, minimális mérete 300x157, maximális mérete pedig 4096x4096, amely 5 MB alatt van, JPG, PNG, WEBP vagy GIF formátumban.

Ha elakadt, tesztelje címkéit a közösségi média hálózat eszközeivel, hogy lássa, megtalálja-e a problémát.

A nyitott gráfcímkék tesztelése

Szerencsére kedvenc közösségi hálózataink olyan eszközöket is kínálnak, amelyek segítenek a címkéink hibakeresésében. Miután megbizonyosodott arról, hogy a címkék valóban megjelennek a webhely forráskódjában, megtekintheti, hogyan fog kinézni webhelye a hírcsatornában.

  • Twitter: //cards-dev.twitter.com/validator
  • Facebook: //developers.facebook.com/tools/debug/
  • Pinterest: //developers.pinterest.com/tools/url-debugger/

Tovább ásni nyílt gráfcímkékbe

Míg ezek többségének egy alapwebhelyet kell lefednie, van még néhány címke, amelyek segíthetik Önt és vállalkozását a közösségi hálózatokon keresztül.

Ha többet szeretnél merülni, a dokumentáció nagyszerű munkát végez az összes elérhető címke listájának elkészítésében.

//ogp.me/

Kaphatok példát?

Ha egyszerűen csak példát keres a kezdéshez, a következőket kell megadnia a blogbejegyzések címkéinek beállításakor:

Más lehetőségeket keres a tartalma optimalizálására és elemzésére?

  • Hogyan adhatunk közösségi média képet a Github projekt-adattárához
  • Hogyan lehet érzékeltetni a Google Analytics szolgáltatást és a webhely forgalmát
  • A YouTube Channel teljesítményének beállítása és nyomon követése a Google Analytics segítségével

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? ️ Iratkozzon fel a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre