Bakit mali ang lumalabas na preview ng iyong link, at paano ito ayusin gamit ang Open Graph

Nag-share ka ng link sa bago mong landing page, pero ang preview ay walang larawan, pamagat ng home page mo, o banner mula sa dalawang kampanya na ang nakalipas. Maayos naman ang mismong pahina. Ang preview ay binubuo mula sa ibang bagay: ilang linya ng code sa head ng pahina na bihirang makita ng karamihan.

Tinatalakay ng post na ito ang anim na dahilan sa likod ng karamihan ng sirang preview, ayon sa pagkakasunod na nararapat tingnan. Kung gusto mong isulat na para sa iyo ang mga tag, bubuuin ito ng libreng Open Graph generator, tama ang pag-escape nito, at titingnan laban sa mga limit sa ibaba.

Paano nabubuo ang preview ng link

Kapag may na-paste na link sa post o mensahe, nagpapadala ang app ng crawler sa pahina. Binabasa ng crawler ang mga <meta> tag sa <head> at gumagawa ng card mula sa mga ito. Galing ang mga tag na ito sa Open Graph protocol, na may apat na itinakdang kailangan:

• og:title: ang pamagat ng pahina gaya ng dapat lumabas sa card.
• og:type: kung ano ang pahina, kadalasang website o article.
• og:image: ang larawan.
• og:url: ang canonical URL ng pahina, na tinatawag ng protocol na permanent ID nito.

Idagdag ang og:description at kumpleto na ang card. Ganito ang kumpleto at minimal na set:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Dahilan 1: nawawala ang mga tag

Kapag walang og: na tag, kailangang kumapit ang bawat app sa anumang makita nito sa pahina, gaya ng <title> o unang larawan, at nasa app kung ano ang pipiliin nito. Kaya maaaring maayos ang isang link sa isang lugar pero sira sa iba. Ang ayos ay ilagay ang apat na kinakailangang tag at isang description sa bawat pahinang ibabahagi ng mga tao, hindi lang sa home page. Kapag ang product page ay na-share gamit ang tag ng home page, ang card ng home page ang lalabas.

Dahilan 2: relative ang URL ng larawan

Madaling makaligtaan ito, dahil maayos ang pahina sa sarili mong browser. Gumagana ang content="/images/og.jpg" para sa browser na nasa site mo na, pero nasa labas ng site ang crawler. Isulat ang buong address, na nagsisimula sa https:// at sa domain mo. Pareho rin ito para sa og:url.

Dahilan 3: mali ang laki o hugis ng larawan

Sinasabi ng bawat platform kung ano ang gusto nito, at nagkataong pareho sila tungkol sa malapad na larawan:

• LinkedIn ang nagsabi sa gabay nito sa paggawa ng website na madaling i-share na dapat hindi bababa sa 1200 × 627 pixels ang larawan, may rekomendadong 1.91:1, at hindi lalampas sa 5 MB.
• Meta’s sharing best practices ang nagrerekomenda ng mga larawang hindi bababa sa 1080 pixels ang lapad para sa high-resolution na screen, at hindi bababa sa 600 ang lapad para ipakita ang image link ads.
• X’s large image card ay sumusuporta sa 2:1 na ratio mula 300 × 157 hanggang 4096 × 4096 pixels, mas mababa sa 5MB, sa JPG, PNG, WEBP o GIF, at hindi sumusuporta sa SVG, ayon sa developer documentation nito (nag-redirect na ngayon ang orihinal na pahina, kaya dumadaan ang link na ito sa Internet Archive).

Isang laki ang bagay sa tatlo: 1200 × 630. Pasado ito sa minimum na 1200 × 627 ng LinkedIn, mas malapad ito kaysa 1080 ng Meta, at ang ratio nito ay 1200 ÷ 630 = 1.905, sakop sa loob ng 5% ng 2:1 ng X. Ang parisukat o matangkad na larawan ay puputulin para maging malapad na card, kaya ilagay ang mahalagang bahagi sa gitna. Ipinapakita ng aspect ratio calculator kung ano ang natitira sa center crop.

Ilagay din ang laki sa mga tag. Hinihingi ng Meta ang og:image:width at og:image:height para mai-render agad ng crawler nito ang larawan nang hindi muna dinadownload at pinoproseso. Sinasabi ito nang simple sa webmaster guide nito: itakda ang taas at lapad para tama agad na mag-load ang larawan sa unang pagbabahagi.

Dahilan 4: idinadagdag ng JavaScript ang mga tag

May ilang site builder at single-page app na nagdaragdag ng meta tag pagkatapos mag-load ang pahina, sa browser. Maaaring hindi patakbuhin ng crawler ang code na iyon kaya hindi nito nakikita ang mga tag. Tingnan ang source ng pahina (View Source, hindi ang inspector, na nagpapakita ng pahina pagkatapos tumakbo ang mga script). Kung wala ang mga tag sa source, malamang ay hindi rin ito makikita ng crawler. Nasa mga setting ng site mo o sa server-side template ang ayos.

Dahilan 5: sinira ng mga espesyal na karakter ang tag

Ang pamagat na may double quote, gaya ng The "only" linen you need, ay nagtatapos nang maaga sa content="..." na attribute kaya nawawala ang natitirang pamagat. Kailangang i-escape ang mga karakter na mahalaga sa loob ng attribute: nagiging " ang ", & ang &, at < ang <. Ibinabalik ng mga browser at crawler ang mga ito sa orihinal na karakter kapag binasa nila ang tag. Ginagawa ito ng generator para sa iyo, at isa iyon sa mga dahilan para gamitin ito.

Dahilan 6: inalala ng app ang lumang bersyon

Inayos mo ang mga tag, nag-share ka ulit, at nandiyan pa rin ang lumang card. Ito ang cache. Iniimbak ng mga app ang nakuha nilang impormasyon at muling ginagamit ito, at may tool ang dalawang malaking network para humingi ng bagong pagtingin:

• Facebook: i-paste ang URL sa Sharing Debugger ng Meta. Sinasabi ng webmaster guide ng Meta na ipinapakita nito kung aling mga tag ang nakuha ng crawler, kasama ang anumang error o babala, at nag-uudyok ito ng bagong pagkuha. Idinadagdag ng best practices ng Meta na karaniwang nag-a-update ang nakuhang nilalaman kada 24 na oras.
• LinkedIn: ipasa ang URL sa Post Inspector. Malinaw ang help page ng LinkedIn tungkol sa limitasyon: ang refresh ay nagbabago lang ng preview para sa mga bagong post. Ang mga post na may URL na na ay nananatili sa lumang preview.

Ito ang tandaan bago ang launch. Tingnan ang preview bago lumabas ang unang post, dahil hindi mo maaayos ang lumang post sa pamamagitan ng pag-ayos ng pahina.

Ang tag na twitter:card: isang linya, hindi apat

Binabasa rin ng X ang Open Graph. Nakalista sa cards markup reference nito ang fallback ng bawat tag: babalik ang twitter:title 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 hindi mo kailangang ulitin ang lahat. Ang isang linyang idaragdag ay ang twitter:card: summary_large_image para sa buong-lapad na larawan, o summary para sa maliit na parisukat. Kapag iniwan ito, sinasabi ng parehong reference na maaaring magpakita ang X ng maliit na summary card, kaya minsan lumalabas na thumbnail ang malaking larawan. Nagtatakda rin ang parehong reference ng limit na 70 karakter para sa pamagat, 200 para sa description at 420 para sa alt text.

Limang minutong pagsusuri bago mag-launch

1. Tingnan ang page source at hanapin ang mga og: na tag. Kumpleto ang apat na kinakailangan, kasama ang description.
2. Tiyaking nagsisimula sa https:// ang og:image at og:url.
3. Buksan ang URL ng larawan nang mag-isa sa browser. Dapat itong mag-load, sa 1200 × 630 o malapit doon.
4. I-paste ang URL sa Sharing Debugger at Post Inspector at basahin ang mga card.
5. Saka mo lang ito i-share.

Saan pumapasok ang Hermoso

Ang Hermoso ay isang AI marketing agent: sinasaliksik nito ang mga ad na gumagana na sa market mo, gumagawa ng on-brand na image at video ad, nag-iiskedyul ng mga post sa sarili mong account, at nagpapatakbo ng bayad na kampanya sa sarili mong ad account. Ang magandang link preview ang nagpapasulit sa mga post na iyon. Gumagana ang Hermoso sa web app, o sa loob ng Claude, ChatGPT at Cursor sa pamamagitan ng MCP server nito.

Mga madalas na tanong

Bakit walang larawan ang link ko sa Facebook o LinkedIn?

Kadalasan, nawawala ang og:image tag, gumagamit ng relative na path sa halip na buong https:// na address, o tumuturo sa masyadong maliit na larawan. Humihingi ang LinkedIn ng hindi bababa sa 1200 × 627 pixels. Pagkatapos ayusin, ipasa ang URL sa Sharing Debugger ng Meta o Post Inspector ng LinkedIn para kunin ulit nila ito.

Anong laki dapat ang Open Graph na larawan?

Gumagana ang 1200 × 630 pixels sa malalaking network. Pasado ito sa minimum na 1200 × 627 ng LinkedIn sa humigit-kumulang 1.91:1, mas malapad kaysa 1080 pixels na inirerekomenda ng Meta, at malapit sa 2:1 na sinusuportahan ng X para sa large image card.

Paano ko i-update ang link preview sa LinkedIn?

Ayusin ang mga tag sa pahina, saka ilagay ang URL sa Post Inspector ng LinkedIn. Para sa mga bagong post lang nalalapat ang na-refresh na preview. Ang mga post na naglalaman na ng URL ay nananatili sa lumang preview.

Kailangan ko ba ng twitter: na tag kung may og: na ako?

Twitter:card lang. Babalik ang X sa og:title, og:description, og:image at og:image:alt kapag wala ang mga twitter: na bersyon.