Open Graph Generator – OG at X Card na may Preview

Q: Bakit lumalabas pa rin ang lumang larawan ko kapag ibinahagi ang link?

Naka cache ng platform ang nakaraang bersyon. I scrape muli ang URL gamit ang debugging tool ng platform, o magdagdag ng query string sa URL ng larawan halimbawa ?v=2 para ituring itong bagong file.

Q: summary o summary_large_image ang dapat kong gamitin?

Gamitin ang "Malaking larawan summary large image " para sa artikulo, produkto at landing page na may malakas na biswal. Gamitin ang "Maliit na parisukat na larawan summary " kapag ang larawan mo ay logo o avatar na magmumukhang kakaiba kapag iniunat sa malawak na card.

Generator ng Open Graph at Social Card

Gumawa ng Open Graph at X (Twitter) card meta tag na may live na preview kung paano lumalabas ang link mo kapag ibinahagi sa Facebook, LinkedIn at X.

Pamagat Description URL ng page URL ng larawan Paglalarawan ng larawan (alt text)

Lapad ng larawan (px) Taas ng larawan (px)

Pangalan ng site Uri ng nilalaman Locale X (Twitter) card X account ng site X account ng may-akda

Larawan sa preview Pumili o i-drop ang parehong larawan para i-preview ito at basahin ang laki Nananatili sa iyong device ang iyong mga file: hindi sila kailanman ina-upload.

Preview

Facebook, LinkedIn at malaking X card

Walang larawan sa preview

Maliit na X card

Walang larawan sa preview

Tinatayang preview: bahagyang iba ang pag-crop at pagputol ng teksto ng bawat platform.

Nabuo na HTML (i-paste sa loob ng <head>)

Mga pagsusuri

Paano gamitin ang Open Graph generator

Ilagay ang Pamagat at Description na gusto mong makita ng mga tao kapag ibinahagi ang link mo. Maaaring naiiba ang mga ito sa SEO title mo: isulat ang mga ito para sa social feed.
Idagdag ang URL ng page (ang canonical address) at ang URL ng larawan. Dapat absolute ang dalawa, nagsisimula sa https://.
Ilarawan ang larawan sa Paglalarawan ng larawan (alt text) para malaman ng gumagamit ng screen reader kung ano ang ipinapakita nito.
Pumili o i-drop ang parehong larawan sa ilalim ng Larawan sa preview. Nananatili ito sa device mo: ginagamit lamang ito ng tool para iguhit ang preview at punan ang Lapad ng larawan (px) at Taas ng larawan (px).
Itakda ang Pangalan ng site, Uri ng nilalaman at Locale, tapos piliin ang istilo ng X (Twitter) card at, kung mayroon ka, ang X account ng site at ng may-akda.
Suriin ang preview at listahan ng Mga pagsusuri, tapos Kopyahin o I-download ang mga tag at i-paste sa loob ng <head> ng page.

Ano ang ginagawa ng Open Graph tag

Kapag na-paste ang link sa Facebook, LinkedIn, X, Slack, Discord, WhatsApp, iMessage at marami pang app, kinukuha ng crawler ang page at binabasa ang Open Graph (og:) meta tag nito para bumuo ng card: isang larawan, pamagat, maikling description at domain. Kung walang mga tag na ito, huhula ang app, madalas na pumipili ng logo, cookie banner o unang pangungusap ng menu.

Ang apat na pangunahing property ay og:title, og:type, og:image at og:url. Nagdadagdag din ang tool na ito ng og:description, og:site_name, og:locale at detalye ng larawan (og:image:width, og:image:height, og:image:alt). Ang pagdedeklara ng laki ng larawan ay nagpapahintulot sa ilang platform na i-render ang card sa unang pagbabahagi sa halip na maghintay hanggang ma-download ang larawan.

Binabasa ng X ang sarili nitong twitter: tag pero bumabalik sa Open Graph na pamagat, description at larawan kapag wala ang bersyon ng X, kaya idinadagdag lamang ng tool ang talagang kailangan ng X: twitter:card, ang opsyonal na account at ang paglalarawan ng larawan. Iniiwasan nito ang pag-uulit ng bawat halaga.

Laki ng larawan na gumagana kahit saan

Gamit	Inirerekomendang laki	Tala
Malaking card (Facebook, LinkedIn, malaking X na larawan)	1200 × 630 px	Ratio mga 1.91:1; ilagay sa gitna ang teksto
Maliit na X card (summary)	hindi bababa sa 144 × 144 px	Ipinapakita bilang parisukat, naka-crop mula sa gitna
Minimum sa Facebook	200 × 200 px	Maaaring balewalaan ang mas maliit na larawan

Gumamit ng JPEG o PNG, panatilihing maliit ang file (mas mababa sa 5 MB) at iwasang ilagay ang mahalagang teksto malapit sa gilid, dahil bahagyang naiiba ang pag-crop ng bawat platform. Ang preview sa tool na ito ay pagtatantya ng mga layout na iyon, hindi screenshot.

Pagkatapos mag-publish

Naka-cache ng social platform ang link preview, kung minsan sa loob ng ilang araw. Pagkatapos baguhin ang tag, hilingin sa kanila na i-scrape muli ang page gamit ang Facebook Sharing Debugger o LinkedIn Post Inspector. Dapat pampubliko ang page: hindi nakikita ng crawler ang page sa likod ng login o sa localhost.

Mga madalas itanong

Pinapabuti ba ng Open Graph tag ang SEO?

Hindi direkta. Hindi ginagamit ito ng search engine bilang ranking factor. Pinapabuti nito ang itsura ng link mo kapag ibinahagi, na maaaring magdala ng mas maraming click at bisita mula sa social network at messaging app.

Bakit lumalabas pa rin ang lumang larawan ko kapag ibinahagi ang link?

Naka-cache ng platform ang nakaraang bersyon. I-scrape muli ang URL gamit ang debugging tool ng platform, o magdagdag ng query string sa URL ng larawan (halimbawa ?v=2) para ituring itong bagong file.

summary o summary_large_image ang dapat kong gamitin?

Gamitin ang “Malaking larawan (summary_large_image)” para sa artikulo, produkto at landing page na may malakas na biswal. Gamitin ang “Maliit na parisukat na larawan (summary)” kapag ang larawan mo ay logo o avatar na magmumukhang kakaiba kapag iniunat sa malawak na card.

Pwede ba akong gumamit ng relative image URL tulad ng /images/share.jpg?

Hindi. Binabasa ng crawler ang tag nang wala sa konteksto, kaya ang og:image at og:url ay dapat absolute URL na may protocol at domain. Minamarkahan ng tool ang relative address.

Naka-upload ba ang larawan ko?

Hindi. Ang larawang pinili mo para sa preview ay binabasa lamang ng browser mo at hindi kailanman ipinapadala kahit saan. Ang mga tag mismo ay naglalaman lamang ng URL ng larawan na na-type mo.