Home Mga toolOpen Graph generator

Open Graph generator na may link preview

Ilagay ang title, description, URL at image — bumubuo ang tool ng Open Graph at Twitter Cards meta tag, ipinapakita kung paano lalabas ang link sa feed at sa chat, at hinuhuli ang mga karaniwang pagkakamali: relative na og:image, SVG, napakaliit na image, maling format ng og:locale.

● Libre, walang sign-upNa-update: Setyembre 17, 2026

—

Title—

Description—

Image—

Mga isyu—

Large card sa feed

Compact card

Preview sa chat

Tinatayang mockup: ang bawat social network at chat app (Messenger, Viber, Slack) ay pinuputol ang teksto at image sa sariling paraan, at iniimbak ang card sa cache kapag unang ibinahagi ang link.

Mga tag para sa <head>

Kinakalkula ang lahat sa inyong browser — hindi ipinapadala kahit saan ang inyong inilagay.

Paano gamitin

Punan ang mga fieldIsulat ang title at description para sa taong nag-i-scroll sa feed o tumatanggap ng link sa Messenger, hindi para sa search engine: maaaring naiiba sa title at meta description ng page.
Suriin ang imageIlagay ang buong URL ng og:image at i-click ang “Suriin ang image”, o pumili ng file — ipinapakita ng tool ang laki at aspect ratio.
Tingnan ang mga previewIpinapakita ng large card, compact card at chat preview kung saan pinuputol ang teksto at paano kinukrop ang image.
Kopyahin ang mga tagI-paste ang block sa <head>. Kung ang link ay naibahagi na, i-refresh ang cache sa debugger ng network — kung hindi, patuloy na ipapakita ang lumang card.

Ano ang Open Graph at anong tag ay kinakailangan

Ang Open Graph ay markup protocol na nilikha ng Facebook: sinasabi ng mga meta tag sa <head> kung anong title, description at image ipapakita kapag may nagbahagi ng link. Ngayon, halos binabasa ito ng lahat: social network, Messenger at ibang chat app, team chat at search engine.

Naglilista ang ogp.me specification ng apat na kinakailangang property: og:title, og:type, og:image at og:url. Sa praktika ay idinaragdag ang og:description, og:site_name, og:locale at og:image:alt.

Ang X (Twitter) ay may sariling twitter:* tag, ngunit gumagamit ng Open Graph kung walang mga ito. Kaya sapat na ang twitter:card — uri ng card — at opsyonal na twitter:site na may inyong account.

Laki ng og:image: 1200 × 630 at ratio 1.91:1

Para sa large card, gumamit ng image na 1200 × 630 px — rekomendasyon ng Meta para sa link share, at ratio (1.91:1) na ipinapakita ng karamihan ng serbisyo nang walang crop. Ang mga rule na sinusuri ng tool:

Buong URL. Dapat magsimula ang og:image sa https:// at domain — hindi nababasa ng network ang relative path tulad ng /og.png.
Raster format. PNG, JPEG, WebP o GIF. Hindi suportado ang SVG.
Hindi bababa sa 200 × 200 px, kung hindi ay walang large card; tinatanggap ng X ang image hanggang 4096 px bawat side at mas kaunti sa 5 MB.
Ang compact card (summary) ay nagpapakita ng square na image — gumamit ng square na image na hindi bababa sa 144 × 144 px.
Ilagay sa gitna ang mahalaga. Magkakaiba ang pag-crop ng mga feed at chat app sa gilid; huwag ilapit ang teksto sa gilid.

Sa og:image:width at og:image:height, agad na nire-render ang card bago i-download ang image. Idinaragdag ng tool ang mga ito kapag nasuri ang laki.

Mga karaniwang pagkakamali at preview cache

og:locale na may hyphen. Ang format ay wika at teritoryo na may underscore: fil_PH, en_PH. Tandaan na ang listahan ng locale ng Facebook ay gumagamit ng tl_PH para sa Filipino. Ito ay naiiba sa hreflang, na gumagamit ng hyphen — tingnan ang hreflang generator.
Isang image para sa buong site. Hindi makilala ang mga card ng iba't ibang page. Gumawa ng hiwalay na image, hindi bababa para sa mga pangunahing page.
Tag na idinagdag gamit ang JavaScript. Karamihan ng social crawler ay hindi nagpapatakbo ng script: ang mga tag ay dapat nasa HTML na ibinabalik ng server.
Lumang card pagkatapos ng edit. Iniimbak ng network ang preview sa cache. Pagkatapos baguhin ang tag, i-refresh ang data sa debugger ng network o magdagdag ng version parameter sa URL ng image (og.png?v=2).
Image sa likod ng login o naka-block para sa crawler. Tiyaking bumubukas ang file nang walang cookie at hindi naka-block sa robots.txt — tumutulong ang robots.txt tester.

Mga sanggunian

The Open Graph protocol — ogp.me.
X Developer Platform. Cards markup reference; Summary Card with Large Image — developer.x.com.
Meta for Developers. Sharing best practices for websites; Localization and translation — developers.facebook.com.

Mga madalas na tanong

Anong Open Graph tag ay kinakailangan?

Ayon sa ogp.me specification: og:title, og:type, og:image at og:url. Sa praktika ay idinaragdag din ang og:description, og:site_name, og:locale at og:image:alt, at twitter:card para sa X.

Anong laki dapat ang og:image?

1200 × 630 px, ratio 1.91:1. Kung ang isang side ay mas maliit sa 200 px, walang large card. Ang compact summary card ay nangangailangan ng square na image.

Kailangan ba ng hiwalay na Twitter (X) tag?

Hindi. Binabasa ng X ang og:title, og:description at og:image kapag walang twitter:title, twitter:description at twitter:image. Sapat na magdagdag ng twitter:card.

Bakit patuloy na ipinapakita ng network ang lumang image?

Naka-cache ang mga preview. Pagkatapos baguhin ang tag, i-refresh ang card sa debugger ng network o baguhin ang URL ng image, halimbawa magdagdag ng ?v=2.

Maaari bang gamitin ang SVG para sa og:image?

Hindi, hindi suportado ang SVG. Gumamit ng PNG, JPEG o WebP.

Anong og:locale para sa Filipino?

Wika at teritoryo na may underscore. Para sa English na page sa Pilipinas, en_PH. Para sa Filipino, gumagamit ang Facebook ng tl_PH sa listahan ng locale nito, habang ang fil_PH ay sumusunod sa BCP 47 code ng wika; parehong pinapasa ng tool ang format. Ang anyong may hyphen (fil-PH) ay para sa hreflang at lang attribute, hindi para sa Open Graph.

Ipinapadala ba sa server ang aking data?

Hindi. Binubuo ang mga tag sa inyong browser. Ang image mula URL ay nilo-load ng inyong browser direkta mula sa inyong site, at tanging kapag i-click ang button; ang napiling file ay nananatili sa inyong computer.

Higit pa sa SEO

SERP snippet preview
Paano lalabas ang title at description sa Google, at mapuputol ba ang mga ito?
Readability checker
Gaano mahirap basahin ang text na ito, at aling pangungusap ang sobrang haba?
robots.txt generator at tester
Aling rule ng robots.txt ang humaharang o nagpapahintulot sa URL na ito para sa isang crawler?
hreflang generator
Aling hreflang tag ang nag-uugnay sa mga bersiyon ng page sa iba't ibang wika?
UTM builder
Paano gumawa ng magkakatugmang UTM link para sa bawat campaign at channel?
UTM QR code generator
Aling booth, flyer o poster ang nagdala ng bisita — at paano lagyan ng tag ang QR code ng bawat isa?