Open Graph meta žymų generatorius

Open Graph žymos — tai maži HTML fragmentai, lemiantys, kaip jūsų puslapis atrodys, kai kas nors juo pasidalins Facebook, LinkedIn, Slack, Discord ar X (Twitter) platformose. Žemiau įveskite pavadinimą, aprašymą, URL, paveikslėlį ir kelias parinktis, stebėkite, kaip dalijimosi kortelės peržiūra atsinaujina akimirksniu, ir nukopijuokite sugeneruotas <meta> žymas tiesiai į savo puslapio <head> skiltį. Viskas vyksta jūsų naršyklėje — į serverį niekas nesiunčiama.

Kas yra šis įrankis?

Open Graph — tai protokolas, iš pradžių sukurtas Facebook, leidžiantis bet kuriam tinklalapiui apibūdinti save nedideliu <meta property="og:..."> žymų rinkiniu, esančiu HTML <head> skiltyje. Kai kas nors įklijuoja jūsų nuorodą į socialinę programėlę, pokalbių klientą ar žinučių programą, ta programa perskaito šias žymas, kad sukurtų peržiūros kortelę — pavadinimą, aprašymą ir miniatiūrą — vietoj to, kad spėtų iš puslapio turinio.

Twitter (X) naudoja giminingą, bet atskirą žymų rinkinį, <meta name="twitter:...">, kuris konkrečiai valdo, kaip atrodo nuorodos peržiūra šioje platformoje. Dauguma svetainių nustato abu rinkinius: Open Graph žymas platesniam suderinamumui ir Twitter Card žymas, kad tiksliau sureguliuotų peržiūrą X platformoje (pavyzdžiui, pasirenkant didelio paveikslėlio kortelę vietoj mažos santraukos kortelės).

Be šių žymų, pasidalinta nuoroda arba visai nerodo peržiūros, arba platforma bando atspėti pavadinimą ir paveikslėlį iš neapdoroto puslapio turinio — dažnai parinkdama netinkamą antraštę, atsitiktinį įterptą paveikslėlį arba nieko. Aiškiai nustatę og:title, og:description ir og:image, gaunate visišką kontrolę, kaip jūsų turinys pateikiamas dar prieš kam nors paspaudžiant.

Kodėl jį naudoti?

Gyva peržiūra — pamatykite tiksliai, kaip atrodys dalijimosi kortelė dar rašydami, prieš ką nors publikuodami.
Vienu metu sugeneruoja tiek Open Graph žymas (og:title, og:description, og:image, og:url, og:type, og:site_name), tiek Twitter Card žymas.
Apima laukus, kuriuos platformos iš tikrųjų skaito: pavadinimą, aprašymą, kanoninį URL, paveikslėlį, svetainės pavadinimą, turinio tipą ir Twitter kortelės stilių.
Veikia visiškai jūsų naršyklėje — jūsų pavadinimas, aprašymas ir URL niekada nepalieka jūsų naršyklės.
Nemokamas, nereikia prisijungti, jokių apribojimų — nukopijuokite rezultatą ir įklijuokite jį į savo HTML kodą.

Kaip naudoti

Įveskite savo puslapio pavadinimą ir trumpą aprašymą (siekite mažiau nei ~60 simbolių pavadinimui, ~155–160 aprašymui).
Įveskite kanoninį puslapio URL ir absoliutų peržiūros paveikslėlio URL (paveikslėlių URL turi būti visiškai kvalifikuoti, pvz., https://example.com/image.jpg, o ne santykinis kelias).
Pasirinktinai nustatykite svetainės pavadinimą, pasirinkite og:type (website, article, product, profile, video, music) ir Twitter Card tipą (summary arba summary_large_image).
Patikrinkite gyvos peržiūros kortelę, kad įsitikintumėte, jog pavadinimas, aprašymas ir paveikslėlis gerai dera kartu.
Spustelėkite „Kopijuoti“ ir įklijuokite sugeneruotas <meta> žymas į savo puslapio <head> skiltį, prieš uždaromąją žymą </head>.

Pavyzdys

Įvestis

Pavadinimas: „10 nemokamų kūrėjų įrankių, kuriuos iš tiesų naudosite“
Aprašymas: „Atrinktas naršyklėje veikiančių įrankių sąrašas, skirtas JSON, reguliariosioms išraiškoms, UUID ir kt. — įdiegti nereikia.“
URL: https://example.com/blog/dev-tools
Paveikslėlis: https://example.com/images/dev-tools-cover.jpg

Išvestis

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Į rezultatą įtraukiami tik jūsų užpildyti laukai, todėl palikus svetainės pavadinimą tuščią, og:site_name tiesiog neįtraukiama į rezultatą.

Dažnos klaidos, kurių reikėtų vengti

Visiškai trūksta og:image — be jo dauguma platformų arba visai nerodo peržiūros paveikslėlio, arba naudoja atsitiktinį iš puslapio paimtą paveikslėlį, kuris paprastai atrodo netvarkingai ir neprofesionaliai.
Santykinio paveikslėlio kelio, pvz., /images/cover.jpg, naudojimas vietoj pilno URL, pvz., https://example.com/images/cover.jpg — socialinių tinklų tikrintuvai paprastai negali išspręsti santykinių kelių.
Netinkamas paveikslėlio kraštinių santykis — kvadratinis arba stačias paveikslėlis nepatogiai apkerpamas, kai platformos priverstinai jį pritaiko prie 1,91:1 gulsčio rėmo; dalijimosi paveikslėlį visada projektuokite kuo arčiau 1200×630.
Pavadinimai ar aprašymai, kurie sutrumpinami — laikykite og:title trumpesnį nei ~60 simbolių, o og:description trumpesnį nei ~155–160 simbolių, kad daugumoje platformų jie nebūtų nukirsti su daugtaškiu.
Užmirštama atnaujinti talpykloje išsaugotas peržiūras — pakeitus og žymas veikiančiame puslapyje, sena peržiūra gali išlikti Facebook ar LinkedIn talpykloje, kol rankiniu būdu priversite pakartotinį nuskaitymą naudodami jų derinimo įrankius.

Kur naudojama kiekviena žyma

og:title, og:description ir og:image yra trys žymos, kurias beveik kiekviena platforma skaito, kurdama peržiūrą. og:url praneša tikrintuvams, su kokia kanonine nuoroda sieti peržiūrą, o tai svarbu, jei tas pats turinys pasiekiamas keliais URL adresais. og:site_name kai kuriose platformose, pvz., Facebook, virš pavadinimo rodo mažą etiketę (pvz., leidinio ar prekės ženklo pavadinimą).

og:type keičia, kokio tipo objektą puslapis atstovauja tikrintuvams, palaikantiems turtingesnį Open Graph objektų modelį — pavyzdžiui, article atrakina og:article:published_time ir og:article:author platformose, kurios juos skaito, nors dauguma socialinių peržiūrų ignoruoja šiuos papildomus laukus ir naudoja tik pagrindinį trejetą — pavadinimą, aprašymą, paveikslėlį.

twitter:card valdo išdėstymą specifiškai X platformoje: summary rodo mažą kvadratinę miniatiūrą šalia teksto, o summary_large_image rodo viso pločio paveikslėlį virš teksto — pastarasis beveik visada yra geresnis pasirinkimas turiniui su prasmingu viršelio paveikslėliu.

Dažniausiai užduodami klausimai

Kokio dydžio turėtų būti mano og:image?

1200×630 px — rekomenduojamas dydis: pakankamai didelis didelio pikselių tankio ekranams ir atitinka maždaug 1,91:1 kraštinių santykį, pagal kurį Facebook, LinkedIn ir X apkerpa paveikslėlį. Failą laikykite mažesnį nei 5–8 MB, naudokite JPG arba PNG ir įsitikinkite, kad paveikslėlio URL yra pilnas absoliutus adresas, o ne santykinis kelias — dauguma tikrintuvų teisingai neišspręs santykinių paveikslėlių kelių.

Kodėl mano peržiūra nerodoma, kai dalinuosi nuoroda?

Dažniausios priežastys: trūksta og:image, paveikslėlio URL yra santykinis, o ne absoliutus, tikrintuvas blokuojamas robots.txt failo, arba platforma rodo talpykloje išsaugotą seną peržiūros versiją. Ir Facebook, ir LinkedIn agresyviai talpina nuskaitytas peržiūras — atnaujinę žymas, naudokite Facebook Sharing Debugger arba LinkedIn Post Inspector, kad priverstumėte pakartotinį nuskaitymą.

Kuo skiriasi og: žymos ir twitter: žymos?

og: žymos (og:title, og:description, og:image ir kt.) yra Open Graph standarto dalis, kurią skaito Facebook, LinkedIn, Slack, Discord, WhatsApp ir dauguma kitų platformų. twitter: žymos yra Twitter/X nuosavas formatas. Jei trūksta twitter:title arba twitter:image, X automatiškai naudoja atitinkamą og: žymą — tačiau aiškiai nustatę abi žymas gaunate daugiau kontrolės, įskaitant galimybę pasirinkti summary_large_image dideliam peržiūros paveikslėliui.

Kokį og:type turėčiau naudoti?

„website“ yra saugi numatytoji reikšmė daugumai puslapių, įskaitant pagrindinius puslapius ir bendrą turinį. Naudokite „article“ tinklaraščio įrašams ir naujienų straipsniams (tai atrakina papildomas, straipsniams būdingas žymas, pvz., publikavimo laiką), „product“ — el. prekybos puslapiams, o „profile“ — asmeniniams ar naudotojo profilio puslapiams. Tipas daugiausia įtakoja, kurios papildomos Open Graph savybės galioja, o ne tai, kaip atrodo pagrindinė peržiūros kortelė.

Ar šis įrankis kur nors saugo ar siunčia mano duomenis?

Ne. Visas generavimas vyksta vietoje, jūsų naršyklėje, naudojant paprastą JavaScript. Niekas, ką įvedate, nėra perduodama, registruojama ar saugoma — uždarius skirtuką viskas išvaloma.