Libreng Converter

Tag ng OG Generator

Bumuo ng Open Graph meta tag para sa Facebook, Twitter, at LinkedIn. Libreng OG tag generator na may live na social card preview.

0/95
0/200

Preview ng Facebook

YOURWEBSITE.COM
Pamagat ng iyong page (max 95 chars)
Isang maikling paglalarawan ng iyong pahina (max 200 chars)

Binuo ng HTML

<!-- Open Graph Tags -->
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

Tungkol sa tool na ito

Kinokontrol ng mga Open Graph (OG) tag kung paano lumalabas ang isang page kapag ibinahagi sa mga social platform. Ang Facebook, LinkedIn, Slack, Discord, at marami pang iba ay nagbabasa ng mga tag ng OG upang bumuo ng mga preview card. Kung walang wastong mga tag ng OG, magmumukhang sira ang mga nakabahaging link — mga generic na favicon, nawawalang mga larawan, mga pinutol na pamagat. Sa kanila, ang mga pagbabahagi ay mukhang pinakintab at ang mga click-through rate ay bumubuti nang malaki.

Ang karaniwang mga tag ng OG: og:title (ang pamagat na ipinapakita sa preview), og:description (ang snippet ng text), og:image (ang preview na larawan, ideal na 1200×630), og:url (canonical URL), og:type (karaniwang 'website' o 'article'). Layer ng mga tag ng Twitter Card sa itaas: twitter:card, twitter:title, twitter:description, twitter:image. Karamihan sa mga tool ay bumabalik sa OG kapag wala ang mga tag na partikular sa Twitter.

Gumagawa ang generator na ito ng kumpletong hanay ng mga tag ng OG at Twitter Card mula sa iyong input. I-paste ang nagresultang HTML sa <head> ng pahina. Ang resulta ay tamang pag-render ng preview sa lahat ng pangunahing social platform.

Bakit Gumamit ng OG Tag Generator

Ang mga page na walang OG tag ay mukhang masama kapag ibinahagi. Walang laman na larawan, generic na pamagat, nawawalang paglalarawan — ang preview ay hindi mahusay na nakikipagkumpitensya laban sa maayos na na-tag na mga pahina sa mga feed. Para sa marketing ng nilalaman at pagbabahagi ng link, direktang nakakaapekto ito sa click-through rate.

Paulit-ulit ang pagsulat ng kamay na mga tag ng OG. Ang bawat pahina ay nangangailangan ng sarili nitong hanay. Ang isang generator na gumagawa ng mga tamang tag mula sa ilang mga input ay nag-iwas sa mga typo at napalampas na mga katangian na sumisira sa mga social preview.

Paano gamitin

Punan ang mga input, kunin ang mga tag.

  1. Ilagay ang pamagat at paglalarawan: Ito ang mga lumalabas sa preview ng pagbabahagi. Panatilihing wala pang 60 character ang pamagat at wala pang 200 character ang paglalarawan para sa malinis na display sa mga platform.
  2. Magbigay ng URL ng larawan: 1200×630 pixels ang karaniwang sukat. Gumamit ng ganap na URL (https://example.com/og-image.png). Ang imahe ay dapat na ma-access ng publiko — ang mga napatotohanang larawan ay masira ang mga preview.
  3. Itakda ang canonical URL: Ang URL ng mismong pahina. Ginamit bilang og:url at tumutulong sa mga platform na matukoy ang canonical na mapagkukunan kahit na ibinahagi sa pamamagitan ng mga redirect URL.
  4. Pumili ng uri ng pahina: website para sa mga pangkalahatang pahina, artikulo para sa mga post sa blog at balita, produkto para sa e-commerce. Nakakaapekto sa kung paano nire-render ng ilang platform ang preview.
  5. Kopyahin ang nabuong mga tag: Ang tool ay gumagawa ng mga HTML link tag na handang i-paste sa <head> ng pahina. Mag-apply sa pamamagitan ng iyong CMS, template engine, o direkta sa HTML.

Mga Karaniwang Paggamit

Mga Detalye ng Teknikal

Ginagamit ng mga tag ng OG ang katangian ng meta property (hindi pangalan): <meta property="og:title" content="..." />. Kinakailangan ang katangian ng property para sa OG; tinatanggap ng ilang parser ang pangalan bilang fallback ngunit tama ang property.

Mga kinakailangan sa larawan: 1200×630 pixels para sa retina rendering, 1.91:1 aspect ratio. Ang og:image:width at og:image:height tag ay tumutulong sa mga platform na mag-cache ng mga larawan nang tama. Ang og:image:alt ay nagbibigay ng accessibility text.

Gumagamit ang mga tag ng Twitter Card ng name attribute: <meta name="twitter:title" content="..." />. Bumabalik ang Twitter sa mga tag ng OG kapag wala ang partikular sa Twitter, kaya madalas sapat na ang mahusay na set ng OG. Ang pagdaragdag ng twitter:card ay tahasang pinipili ang uri ng card (summary_large_image ang pinakakaraniwan).

Pinakamahusay na Kasanayan

Mga madalas itanong

Maaari ko bang i-customize ang nabuong output?
Oo. Nagbibigay ang tool ng iba't ibang mga pagpipilian sa pagpapasadya upang maiangkop ang output sa iyong mga partikular na pangangailangan. Ayusin ang mga setting bago bumuo, o muling buuin gamit ang iba't ibang mga opsyon.
Libre bang gamitin ang nabuong nilalaman?
Oo. Ang lahat ng iyong nabuo gamit ang tool na ito ay sa iyo upang gamitin para sa personal, pang-edukasyon, o komersyal na layunin nang walang anumang mga paghihigpit o kinakailangan sa pagpapatungkol.
Nangangailangan ba ito ng account?
Hindi. Ang tool ay handa nang gamitin kaagad nang walang pag-sign-up, walang email, at walang pagpaparehistro. Buksan lamang ang pahina at simulan ang pagbuo.
Pinapanatili bang pribado ang aking data ng input?
Oo. Ang lahat ng pagproseso ay nangyayari sa iyong browser. Ang iyong input data at nabuong output ay hindi kailanman ipapadala sa anumang panlabas na server.
Maaari ko bang gamitin ang parehong imahe ng OG para sa bawat pahina?
Posible ngunit suboptimal. Ang mga larawang tukoy sa pahina ay higit sa mga generic na larawan sa buong site para sa click-through. Gumamit ng default para sa fallback ngunit gumawa ng mga per-page na larawan para sa mahalagang content.
Kailangan ba ang deklarasyon ng dimensyon ng larawan?
Nakatutulong ngunit hindi mahigpit na kinakailangan. og:image:width at og:image:height hayaan ang mga platform na mag-cache ng mga larawan nang hindi muling kinukuha upang matukoy ang mga dimensyon. Pinapabilis ang mga kasunod na pagbabahagi.
Na-upload ba ang aking data?
Hindi. Nangyayari ang pagbuo sa iyong browser.
Paano ko susubukan ang mga tag ng OG?
Ang Facebook Sharing Debugger, Twitter Card Validator, at LinkedIn Post Inspector ang bawat isa ay kumukuha at nagpapatunay. Gamitin ang mga ito pagkatapos mag-deploy ng mga bagong OG tag.