Generator ng Open Graph meta tag

Ang mga tag na pinagbabasehan ng link preview

Kapag may nag-paste ng iyong link sa isang post o mensahe, nagpapadala ang app ng crawler sa page at binabasa ang ilang <meta> tag sa <head>. Nagmumula ang mga tag na iyon sa Open Graph protocol, na naglilista ng apat bilang kinakailangan:

• og:title: ang pamagat tulad ng dapat itong lumitaw sa preview.
• og:type: kung ano ang page. Ang website ay bagay sa karamihan ng page at ang article ay bagay sa isang blog post. Nagtatakda rin ang protocol ng mga type tulad ng profile, book, video.movie at music.song.
• og:image: ang URL ng larawang kumakatawan sa page.
• og:url: ang canonical URL, na tinatawag ng protocol na permanenteng ID ng object.

Nagtatakda rin ang protocol ng mga opsyonal na tag, at isinusulat ng generator ang mga kapaki-pakinabang: og:description, og:site_name, at ang mga detalye ng larawan na og:image:width, og:image:height at og:image:alt. Tuwiran ang protocol tungkol sa alt text: kung ang page ay may og:image, dapat itong magtukoy ng og:image:alt, at inilalarawan ng tekstong iyon kung ano ang nasa larawan, hindi caption.

Ang idinadagdag ng X: twitter:card

Binabasa rin ng X ang Open Graph. Ang cards markup reference nito (ang developer documentation ng X, naka-link dito sa pamamagitan ng Internet Archive dahil nagre-redirect na ang orihinal na page) ay naglilista ng fallback para sa bawat tag: ang twitter:title ay bumabalik sa og:title, ang twitter:description sa og:description, ang twitter:image sa og:image at ang twitter:image:alt sa og:image:alt. Kaya ang isang tag na sulit idagdag ay ang twitter:card, na pumipili ng layout. Alisin ito at sinasabi ng parehong reference na maaaring bumalik ang X sa maliit na summary card, kahit gusto mo ang malaki:

• summary_large_image: isang full-width na larawan sa itaas ng pamagat. Sinasabi ng large image card page ng X na ang mga larawan para rito ay sumusuporta sa 2:1 aspect ratio, may pinakamababang sukat na 300 × 157 at pinakamataas na 4096 × 4096 pixels, mas mababa sa 5MB, sa JPG, PNG, WEBP o GIF. Hindi suportado ang SVG.
• summary: isang mas maliit na card na may parisukat na larawan. Sinasabi ng summary card page ng X na sumusuporta ang larawan sa 1:1 ratio, mula 144 × 144 hanggang 4096 × 4096 pixels, at tinatabas sa parisukat sa lahat ng platform.

Naglilista rin ang parehong sanggunian ng mga app at player card, na nangangailangan ng dagdag na field para sa app store o video player, kaya hindi na kasama ang mga ito rito. Idinodokumento rin nito ang mga limitasyong ginagamit ng mga pagsusuri sa itaas: 70 character para sa pamagat, 200 para sa paglalarawan at 420 para sa alt text.

Mga laki ng larawang itinatakda ng mga platform

• LinkedIn: ang gabay nito sa paggawang maishe-share ang isang website ay humihingi ng og:title, og:image, og:description at og:url, at naglilista ng pinakamalaking laki ng file na 5 MB, pinakamaliit na 1200 × 627 pixels at inirerekomendang ratio na 1.91:1.
• Meta: ang best practices nito sa pag-share ay nagsasabing gumamit ng mga larawang hindi bababa sa 1080 pixels ang lapad para sa high-resolution na screen, at hindi bababa sa 600 pixels ang lapad para maipakita ang mga image link ad. Ang parehong pahina ay humihingi ng og:image:width at og:image:height para agad na ma-render ng crawler ang larawan nang hindi muna ito dina-download at pinoproseso.

Pasado sa lahat ng ito ang larawang 1200 × 630: hindi bababa sa 1200 × 627 para sa LinkedIn, mas malapad sa 1080 para sa Meta, at 1.905:1, nasa loob ng 5% ng 2:1 ng X.

Suriin ito, at i-refresh ang mga lumang preview

Nag-cache ang mga app ng kanilang na-scrape, kaya ang pagsasaayos ng mga tag ay hindi nag-aayos ng preview na naka-store na. Parehong nagbibigay ang dalawang malaking network ng kasangkapan para dito:

• Ang Sharing Debugger ng Meta ay nagpapakita ng mga tag na sina-scrape ng crawler nito, kasama ang anumang error o babala, at nagti-trigger ng bagong scrape. Inilalarawan ito sa gabay para sa webmaster ng Meta, at sinasabi ng pahina ng best practices na kung hindi man, nag-u-update ang na-scrape na nilalaman sa karaniwang 24 na oras.
• Ang Post Inspector ng LinkedIn ay nagre-refresh ng naka-cache na URL. Sinasabi ng pahina ng tulong ng LinkedIn na nakakaapekto lamang ang refresh sa mga bagong post: ang mga post na may kasama nang URL ay pinananatili ang lumang preview.

Ano ang hindi ginagawa ng tool na ito

Hindi nito kinukuha ang iyong pahina o larawan, kaya hindi nito makikita kung ano talaga ang live, at ang preview sa itaas ay isang text sketch sa halip na render. Isinusulat nito ang mga tag; kailangan pa ring ihain ng iyong site ang mga ito sa <head> ng pahina, sa HTML na natatanggap ng crawler. Ang mga tag na idinagdag kalaunan ng JavaScript ay maaaring hindi makita kailanman. At hindi nito isinusulat ang mga app o player card, o ang mga dagdag na property na tinutukoy ng mga uri gaya ng book o video.movie.

Kung ayaw mong isulat ito nang mano-mano

Ang Hermoso ay marketing na naka-autopilot: sinasaliksik nito ang mga ad na gumagana na sa iyong merkado, gumagawa ng on-brand na image at video ad, nag-iiskedyul ng mga post at nagpapatakbo ng mga bayad na campaign sa sarili mong mga ad account. Gumagana ito sa web app, o sa loob ng Claude, ChatGPT at Cursor sa pamamagitan ng MCP server nito.

Mga libreng tool: Gumagawa ng UTM link · QR code generator na libre · Gabay sa sukat para sa social media

Mga madalas na tanong

Aling mga Open Graph tag ang kinakailangan?

Naglilista ang Open Graph protocol ng apat na kinakailangang property: og:title, og:type, og:image at og:url. Opsyonal ang og:description, og:site_name at ang og:image width, height at alt na tag ngunit sulit idagdag.

Kailangan ko ba ang twitter:title at twitter:image kung may og: tag ako?

Hindi. Ayon sa cards markup reference ng X, bumabalik ang twitter:title, twitter:description, twitter:image at twitter:image:alt sa kanilang katumbas na og:. Ang tag na sulit idagdag ay ang twitter:card, na pumipili ng layout ng card.

Gaano kalaki dapat ang isang Open Graph na larawan?

Humihingi ang LinkedIn ng hindi bababa sa 1200 × 627 pixel sa 1.91:1 at mababa sa 5 MB. Iminumungkahi ng Meta na hindi bababa sa 1080 pixel ang lapad. Sinusuportahan ng large image card ng X ang 2:1 mula 300 × 157 hanggang 4096 × 4096. Kasya sa lahat ng tatlo ang 1200 × 630 na larawan.

Bakit lumalabas pa rin ang lumang larawan sa aking link matapos kong baguhin ang mga tag?

Naka-cache ang app sa lumang scrape. Patakbuhin ang URL sa Sharing Debugger ng Meta o Post Inspector ng LinkedIn para kunin itong muli. Binabanggit ng LinkedIn na pinapanatili ng mga post na nag-share na ng URL ang lumang preview.

Bakit binago ang mga quote at ampersand sa output?

Naka-HTML-escape ang mga ito para manatiling valid ang tag. Ang pamagat na Tom & Jerry's "Sale" ay nagiging Tom & Jerry's "Sale" sa loob ng content attribute, at binabasa ito ng mga browser at crawler pabalik bilang orihinal na teksto.

Nilo-load ba ng tool ang aking larawan?

Hindi. Walang ipinapadala kahit saan ang anumang i-type mo at hindi kailanman kinukuha ang image URL, kaya nagpapakita ng placeholder ang preview sa halip na ang larawan.