OG és Twitter kártyagenerátor – Meta Tag Builder, Auditor és Előnézet
Készítsen beillesztésre kész Open Graph és Twitter kártya <meta> címkéket egy űrlapról, vagy illesszen be egy meglévő <head> címkét, hogy ellenőrizze a hiányzó címkéket, a cím/leírás hosszát és a twitter:kártya érvényességét – majd tekintse meg mindkettőt eredetileg átszabott Twitter/X, Facebook, LinkedIn és Discord linkkártya maketten.
Eredmény
Az Open Graph és a Twitter Card metatagek határozzák meg, hogy nézzen ki egy link, amint beillesztik a Slack-be, az iMessage-be, egy tweetbe vagy egy Discord-csatornába – a címet, a leírást és a képet az oldal saját <feje> választja ki, nem pedig az, amit a platform történetesen kikapar a látható törzsszövegből. Ez az eszköz építő és auditor, nem pedig általános sablonkitöltő. ÉPÍTÉS módban töltse ki a címet, a leírást, a kép URL-jét, a gyűjtő URL-t, a tartalomtípust és a Twitter-kártya típusát, és ez összeállítja a pontos <meta property="og:..."> és <meta name="twitter:..."> címkeblokkot, amely készen áll arra, hogy beillessze az oldal <head> részébe, kihagyva az üresen hagyott mezőket, ahelyett, hogy üres tartalommal üreges címkéket bocsátana ki.
AUDIT módban illessze be a meglévő <head> jelölést vagy egy teljes oldal HTML-kódját, és az eszköz elemzi azt a böngésző natív DOMParser-jével, hogy kibontsa az összes már meglévő og: és twitter: metacímkét, majd lefutja a ténylegesen fontos ellenőrzéseket: a négy általánosan szükséges címke (og:title, og:description, ogged:ull; hiányzik) Az og:title-t ahhoz a nagyjából 60 karakteres ponthoz viszonyítják, ahol egyes platformok elkezdik csonkolni, és ahhoz a nagyjából 90 karakteres ponthoz, ahol a legtöbb platform megteszi; og:description a legtöbb platform által megengedett durván 155-200 karakteres tartományhoz viszonyítva, mielőtt levágná; A twitter:card ellenőrzi a valódi négy értéket, amelyet a Twitter kártyaellenőrzője elfogad – összegzés, összefoglaló_nagy_kép, alkalmazás, lejátszó –, és megjelöli, ha bármi másról van szó; és a duplikált címkéket (ugyanaz a tulajdonság kétszer deklarálva, meglepően gyakori másolás-beillesztés hiba) név szerint hívják ki.
A képméretek becsületes bánásmódban részesülnek: ez az eszköz nem tudja ellenőrizni a kép tényleges pixelméretét anélkül, hogy lekérné azt, és ezt szándékosan soha nem teszi meg, és megfelel ennek a webhelynek a külső kérés tilalmára vonatkozó irányelvének. Ha a HTML-kód már deklarálja az og:image:width és og:image:height értékeket, akkor ezeket a deklarált számokat a rendszer összeveti a széles körben ajánlott 1200 × 630-as minimummal; ha nem, akkor egyértelmű útmutatást kap a koholt pass vagy fail helyett. Mindkét mód ugyanazt a négy hivatkozás-előnézeti makett jeleníti meg – Twitter/X (váltás a kompakt "összefoglaló" miniatűr elrendezése és a teljes szélességű "összefoglaló_nagy_kép" elrendezés között a twitter:kártya értékétől függően), Facebook, LinkedIn és Discord - mindegyik valóban át lett alakítva, hogy egyértelműen megfeleljen a platform saját címkéinek és logóinak elrendezésének és elrendezésének. tervezési célú szemléltető közelítésként, mivel a valódi platformok idővel átformálják előnézeti krómjukat, és ez az eszköz soha nem kéri le vagy kaparja le őket az ellenőrzéshez.
A fájljaid és bemeneteid soha nem hagyják el ezt az eszközt. A feldolgozás teljesen offline módon történik. 100% biztonságos.
Elfogadott formátumok és szabályok
- A BUILD mód az og:title, og:description, og:image, og:url, og:type, og:site_name és a megfelelő twitter:card/twitter:site/twitter:title/description/image címkéket állítja össze, minden üresen hagyott mezőt kihagyva a beillesztésre kész blokk egy kattintással történő másolatával.
- Az AUDIT mód kibont minden og:/twitter: <meta> címkét a beillesztett HTML-ből a böngésző DOMParser segítségével, megjelöli a hiányzó címkéket (og:title/description/image/url), a duplikált címkéket és az érvénytelen twitter:card értékeket.
- A hosszra vonatkozó útmutatás a valódi, gyakran idézett küszöbértékeket használja: az og:title körülbelül 60 karaktert, mielőtt egyes platformok elkezdenék csonkolni (legfeljebb 90-ig a legmegengedőbben), og:description körülbelül 155-200 karakter.
- A Twitter/X kártyát a deklarált kártyatípusnak megfelelő elrendezésben jeleníti meg – egy kompakt „összefoglaló” kártya kis négyzet alakú bélyegképpel vagy a teljes szélességű „summary_large_image” elrendezés – a Facebook, LinkedIn és Discord előnézetek mellett.
Főbb előnyök
Felhasználási területek
- • Küldjön új blogbejegyzést megfelelő közösségi kártyákkal: töltse ki a címet, a leírást és a tárolt borítóképet, hozza létre az og:/twitter: címkeblokkot, és illessze be közvetlenül az oldal <fejébe>.
- • Vizsgálja meg egy meglévő céloldal <head> értékét a CMS-migráció után, hogy elkapja a hiányzó og:image-t, egy og:title-t, amely elég hosszú ahhoz, hogy bizonyos platformokon csonkolásra kerüljön, vagy egy megmaradt érvénytelen twitter:card értéket.
- • Hasonlítsa össze, hogy ugyanaz a cím és kép hogyan olvasható a Twitter/X kompakt összefoglaló kártyáján a teljes szélességű summary_large_image elrendezéssel, mielőtt eldönti, melyik twitter:kártya típust kívánja deklarálni.
Értékelje ezt az eszközt
