OG- & Twitter Card -generaattori — Meta-tagien rakentaja, tarkastaja ja esikatselu
Luo valmiit Open Graph- ja Twitter Card -meta-tagit lomakkeella tai liitä olemassa oleva <head> tarkastaaksesi puuttuvat tagit, otsikon/kuvauksen pituuden ja twitter:card-arvon kelpoisuuden — ja esikatsele molempia aidosti uudelleenmuotoilluissa Twitter/X-, Facebook-, LinkedIn- ja Discord-linkkikorttihahmotelmissa.
🔒 Käsitelty kokonaan selaimessasi – mitään tähän kirjoittamaasi ei koskaan ladata.
Tulos
Open Graph- ja Twitter Card -meta-tagit määräävät, miltä linkki näyttää sinä hetkenä, kun se liitetään Slackiin, iMessageen, twiittiin tai Discord-kanavalle — otsikon, kuvauksen ja kuvan, jonka sivun oma <head> valitsee, ei sen, minkä alusta sattuu kaapimaan näkyvästä leipätekstistä. Tämä työkalu on sekä rakentaja että tarkastaja, ei yleispätevä mallipohjien täyttäjä. BUILD-tilassa täytä otsikko, kuvaus, kuvan URL, kanoninen URL, sisältötyyppi ja Twitter-korttityyppi, niin se koostaa tarkan <meta property="og:..."> ja <meta name="twitter:..."> -tagilohkon, valmiina liitettäväksi sivusi <head>-osioon, ohittaen tyhjäksi jättämäsi kentät tyhjien tagien tuottamisen sijaan.
AUDIT-tilassa liitä olemassa oleva <head>-merkintäsi tai koko sivun HTML, ja työkalu jäsentää sen selaimen alkuperäisellä DOMParserilla purkaakseen jokaisen jo olevan og:- ja twitter:-meta-tagin ja suorittaa sitten tarkistukset, joilla on oikeasti merkitystä: neljä yleisesti vaadittua tagia (og:title, og:description, og:image, og:url) merkitään, jos ne puuttuvat; og:title mitataan noin 60 merkin kohtaa vasten, jossa jotkin alustat alkavat katkaista sitä, ja noin 90 merkin kohtaa vasten, jossa useimmat alustat tekevät niin; og:description mitataan noin 155–200 merkin vaihteluväliä vasten, jonka useimmat alustat sallivat ennen katkaisua; twitter:card tarkistetaan niitä neljää todellista arvoa vasten, jotka Twitterin Card-validointi hyväksyy — summary, summary_large_image, app, player — ja merkitään, jos se on jotain muuta; ja tuplatagit (sama ominaisuus määritelty kahdesti, yllättävän yleinen kopioi-liitä-virhe) nimetään yksilöidysti.
Kuvan mittoja käsitellään rehellisesti: tämä työkalu ei voi todentaa kuvasi todellista pikselikokoa noutamatta sitä, eikä se tarkoituksella koskaan tee niin, noudattaen tämän sivuston ulkoisten pyyntöjen kieltoa. Jos HTML:äsi jo määrittelee og:image:width ja og:image:height, nämä ilmoitetut luvut tarkistetaan yleisesti suositeltua 1200×630 minimiä vasten; jos ei, saat selkeän ohjeistuksen valheellisen läpäisyn tai hylkäyksen sijaan. Molemmat tilat renderöivät samat neljä linkkiesikatseluhahmotelmaa — Twitter/X (vaihtaen tiiviin summary-pikkukuva-asettelun ja koko leveyden summary_large_image-asettelun välillä twitter:card-arvosta riippuen), Facebook, LinkedIn ja Discord — jokainen aidosti uudelleenmuotoiltuna vastaamaan kyseisen alustan omaa typografiaa ja asettelukäytäntöjä, eikä yhtenä laatikkona eri logolla, ja jokainen on selkeästi merkitty havainnollistavaksi arvioksi suunnittelutarkoituksiin, sillä todelliset alustat muotoilevat esikatselukrominsa ajan myötä, eikä tämä työkalu koskaan nouda tai kaavi niitä tarkistaakseen.