Megosztási kártyák: Open Graph címkék és a megosztási kép

Mi a linkelőnézet

Amikor valaki megoszt egy linket egy közösségi hálózaton vagy egy üzenetküldőben, a platform beolvassa az oldalt, és egy kis kártyát készít: egy képet, egy címet, egy rövid szöveget és a domaint. A legtöbb platform ehhez az Open Graph protokoll címkéit olvassa, amelyek meta elemek az oldal head részében. Az X, korábban Twitter, a twitter: előtaggal kezdődő saját címkéit is beolvassa. Minden platform maga tervezi meg a kártyáját, és maga dönti el, mennyi szöveget mutat. Te azt döntöd el, mit mond az oldal a platformoknak.

Az alapcímkék

Az ogp.me oldalon közzétett Open Graph protokoll négy tulajdonságot nevez meg, amely minden oldalon legyen meg: og:title, og:type, og:image és og:url. Az og:url az oldal kanonikus címe. Opcionális, de hasznos az og:description, az og:site_name és az og:locale, azaz a címkék nyelve és régiója, például de_DE.

<meta property="og:title" content="Summer sale: all mugs reduced">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Six blue mugs on a wooden table">
<meta property="og:description" content="Until 31 August: lower prices on mugs and plates.">
<meta property="og:site_name" content="Example Shop">
<meta name="twitter:card" content="summary_large_image">

Minden címet teljes egészében írj ki, https://-sel. A protokoll a címet olyan URL-ként határozza meg, amely http:// vagy https:// előtagot használ, így egy /img/sale.jpg-hez hasonló útvonal nem érvényes érték. Az og:url egyezzen meg az oldal kanonikus linkjével. Ha egy címke kétszer szerepel eltérő értékkel, a protokoll az elsőt részesíti előnyben.

A megosztási kép

A legtöbb előnézet szélesen mutatja a képet. Általában nagyjából 1,91 : 1 arányú képet ajánlanak, például 1200 × 630 pixelest, amely a legtöbb kártyába vágás nélkül belefér. A négyzetes képeket gyakran levágják felül és alul, ezért a fontos tartalom legyen középen. A Google Discoverhez a Google legalább 1200 pixel széles képeket ajánl, a max-image-preview:large beállítással engedélyezett nagy előnézetet, valamint og:image vagy schema.org jelöléssel megadott képet. A Google azt is tanácsolja, hogy ne használj általános képeket, például a webhely logóját.

Az og:image:width és az og:image:height a kép méretét adja meg pixelben. Az og:image:alt azt írja le, mi látható a képen, nem képaláírás. A protokoll szerint az og:image címkével rendelkező oldalnak og:image:alt címkét is meg kell adnia.

Cím és leírás

Az og:title eltérhet a title elemtől. Nem kell benne a weboldal neve, mert azt az og:site_name hordozza. A platformok a hosszú szövegeket a saját hosszukra vágják, ezért a fontos szavak kerüljenek előre. Az Open Graph címkék a közösségi hálózatokon túl is számítanak. A Google az og:title tartalmát a keresési találatok címlinkjeinek egyik forrásaként nevezi meg, a webhely nevénél figyelembe veszi az og:site_name értéket, és az og:image címkét az előnyben részesített kép megadásának egyik módjaként sorolja fel.

Címkék az X-hez

A twitter:card címke a kártya típusát választja ki. A summary_large_image érték nagy, széles képet kér, a summary kicsit. Ha az oldaladon már vannak Open Graph címkék, gyakran elég a twitter:card hozzáadása. Az X fejlesztői oldalait ehhez az útmutatóhoz nem tudtuk beolvasni, ezért mielőtt egy részletre támaszkodnál, ott nézd meg az aktuális szabályokat.

Oldalanként egy kártya

Sok weboldal minden oldalon ugyanazt a címet és képet állítja be, gyakran a témán keresztül. Ilyenkor minden megosztott link egyformán néz ki. Minden fontos oldalnak adj saját og:title, og:description és og:image értéket: egy termékoldalnak a termékfotót, egy cikknek a fő képét. Az og:type esetében a protokoll egyebek mellett a website értéket használja általános oldalhoz és az article értéket cikkhez. Egy webshop- vagy tartalomkezelő rendszer ezeket a címkéket automatikusan kitöltheti az egyes oldalak címéből, összefoglalójából és fő képéből. Változtatás után minden sablonból ellenőrizz egy oldalt.

Miért nem változik az előnézet

Sok platform eltárolja a kártyát, miután egyszer elkészítette. Ha később módosítod a képet vagy a címet, az emberek egy ideig még a régi kártyát láthatják. Egy új kép új fájlneve segít, mert a platform ekkor új címet lát. Egyes platformok olyan eszközt kínálnak, amely újra lekéri az oldalt.

Mielőtt megosztasz egy oldalt

• Megvan az og:title, az og:type, az og:image és az og:url, és az og:url a kanonikus cím?
• Minden cím teljes, https://-sel?
• Elég széles a kép, betöltődik, és középen van a fontos tartalom?
• Be van állítva az og:image:alt, az og:image:width és az og:image:height?
• Van twitter:card címke, és elég rövid a cím?

Munka a Do4U-val

A Megosztási kártya ellenőrzése megmutatja, hogyan néz ki egy oldal, amikor a linkjét megosztják, és ellenőrzi az előnézet mögötti címkéket. Egy címet adsz meg. A Do4U beolvassa az oldalt és a megosztási kép elejét. A kód összegyűjti az Open Graph címkéket, a Twitter/X kártyacímkéket és a tartalékokat, vagyis a címet, a meta leírást és az első képet, valamint a kanonikus linket és a nyelvet. A kép valódi formátumát és méretét a fájlból olvassa ki, és összeveti a címkékkel. Semleges előnézetet, az összes címke táblázatát, rövid indoklással ellátott megállapításokat és másolható címkejavaslatokat kapsz. A csak JavaScripttel beállított címkéket nem látja. Nem használ AI-t, és az ellenőrzés ingyenes, napi korláttal.

A Do4U tippeket ad, te ellenőrzöl és döntesz. Az előnézet semleges vázlat: hogy egy platform hogyan jeleníti meg a linket, azt a platform dönti el.