A Twitter card (ma X-kártya) az a meta-tag készlet, amely megmondja az X-nek, hogyan jelenjen meg a linked a posztokban: milyen címmel, leírással és képpel. A twitter: előtagú tagek a <head>-ben ülnek, és csak a megosztás vizuális megjelenítését szabályozzák, a rangsorolást nem.
Hogyan működik
Amikor valaki beilleszt egy linket egy posztba, az X robotja (Twitterbot) lekéri az oldalt. Elolvassa a <head>-ben található twitter:card, twitter:title, twitter:description és twitter:image tageket, majd ezekből épít előnézetet. A twitter:card érték dönti el a kártya formátumát: a summary kis négyzetes képet ad, a summary_large_image széles, nagy bannert.
A rendszer visszaesésre épül. Ha hiányzik egy twitter: tag, az X az Open Graph megfelelőjét használja: az og:title, og:description és og:image kitölti a lyukat. Ezért nem kötelező mind a négy taget duplikálni. Egy twitter:card sor plusz teljes Open Graph blokk a legtöbb oldalon elég.
Miért nem mindegy a képméret
A summary_large_image kártya 2:1 arányú képet vár, legalább 300x157 pixel, ajánlottan 1200x628 körül. Ha az arány eltér, az X levágja a képet, jellemzően középről. A riportokban rendszeresen látunk olyan oldalt, ahol a megosztott kép közepén egy szolgáltatás-ikon fele látszik. A fájl legyen JPG, PNG vagy WEBP, és maradjon 5 MB alatt.
Mit néz ebből a riport
Az audit megnézi, van-e twitter:card tag, és hogy van-e mögötte érvényes kép: vagy saját twitter:image, vagy Open Graph fallback. Hiányzó kártyánál jelzi, hogy a link szöveges URL-ként jelenik meg megosztáskor. Ez nem kritikus hiba, de olcsón javítható.
Röviden: a Twitter card a linked kirakata az X-en, és Open Graph nélkül a legtöbb esetben nincs mit kirakni.
Technikai példa
Minimális, működő fejléc-blokk. A twitter:card adja a formátumot, a többit az Open Graph tagek fedik le:
<head>
<title>Ipari szellőzőrendszer tervezés - Pelda Kft.</title>
<meta name="description" content="Csarnokok és üzemek szellőzésének tervezése, kivitelezése Pest megyében.">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:type" content="website">
<meta property="og:url" content="https://pelda.hu/szellozes-tervezes">
<meta property="og:title" content="Ipari szellőzőrendszer tervezés">
<meta property="og:description" content="Csarnokok és üzemek szellőzésének tervezése, kivitelezése Pest megyében.">
<meta property="og:image" content="https://pelda.hu/img/szellozes-1200x628.jpg">
</head>
Figyelj a különbségre: a twitter: tagek name attribútumot használnak, az og: tagek property attribútumot. Ez gyakori elgépelés-forrás.
Gyors ellenőrzés parancssorból:
curl -sL https://pelda.hu/ | grep -iE 'twitter:|og:'
Ha a parancs üres, a tagek nincsenek a nyers HTML-ben. Ilyenkor vagy hiányoznak, vagy JavaScript írja be őket, és a robot nem látja.
A kép elérhetőségét külön is nézd meg:
curl -sI https://pelda.hu/img/szellozes-1200x628.jpg | head -n 1
A válasz HTTP/2 200 legyen. Bármi más azt jelenti, hogy a kártya kép nélkül marad.
Gyakori kérdések
Kell külön Twitter card, ha már van Open Graph?
Elég egyetlen twitter:card sor. Az X a hiányzó twitter: tageket az og: megfelelőikkel tölti ki, tehát a címet, leírást és képet nem kell duplikálni. Ha viszont az X-en más képet akarsz mutatni, mint a Facebookon, írd ki külön a twitter:image taget.
Befolyásolja a Twitter card a Google rangsorolást?
Nem. A Google nem használja rangsorolási jelzésként a
twitter: tageket. A megosztásokon keresztül érkező forgalom és linkek közvetve segíthetnek, de a tag önmagában nem rangsorolási tényező. A
title és a
Meta description viszont közvetlenül számít a találati oldalon.
Frissítettem a képet, de az X még a régit mutatja. Miért?
Az X gyorsítótárazza a lekért kártyákat, jellemzően napokig. Ha a régi kép ragad be, tedd új URL-re a képet, például verziószámmal a fájlnévben. Ez megkerüli a cache-t, és a következő megosztáskor már az új kép jön be.
Milyen képméret a legjobb?
A summary_large_image típushoz 1200x628 pixel körüli, 2:1 arányú kép a biztos választás. A minimum 300x157 pixel, a fájlméret maradjon 5 MB alatt. A lényeget tedd középre, mert a levágás onnan hagyja meg a legtöbbet.
A bővítményem és a témám is kiírja a tageket. Baj ez?
Igen, érdemes megszüntetni a duplikációt. Ha két twitter:card tag van a <head>-ben, nem garantált, melyiket veszi figyelembe a robot. Nézd meg a forráskódot, és kapcsold ki az egyik forrást, jellemzően a téma sablonjában lévő hardkódolt blokkot.
