Mengapa pratonton pautan anda kelihatan salah, dan cara membetulkannya dengan Open Graph

Anda berkongsi pautan ke halaman pendaratan baharu dan pratonton muncul tanpa gambar, dengan tajuk halaman utama anda, atau sepanduk daripada dua kempen lalu. Halaman itu sendiri tidak bermasalah. Pratonton dibina daripada sesuatu yang lain: beberapa baris kod dalam bahagian head halaman’s yang kebanyakan orang tidak pernah lihat.

Siaran ini meliputi enam punca di sebalik kebanyakan pratonton yang rosak, mengikut urutan yang patut diperiksa. Jika anda mahu tag ditulis untuk anda, penjana Open Graph percuma akan membinanya, melarikan aksara khas dengan betul dan menyemaknya terhadap had di bawah.

Cara pratonton pautan dibuat

Apabila pautan ditampal ke dalam siaran atau mesej, aplikasi menghantar crawler ke halaman itu. Crawler membaca tag <meta> dalam <head> dan melukis kad daripadanya. Tag tersebut datang daripada protokol Open Graph, yang menamakan empat tag sebagai wajib:

• og:title: tajuk halaman seperti yang sepatutnya dipaparkan dalam kad.
• og:type: jenis halaman, biasanya website atau article.
• og:image: gambarnya.
• og:url: URL kanonikal halaman, yang dipanggil protokol sebagai ID kekal.

Tambah og:description dan anda sudah ada kad. Set minimum yang lengkap kelihatan begini:

<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">

Punca 1: tag tiada

Tanpa tag og:, setiap aplikasi terpaksa bergantung pada apa sahaja yang dijumpainya pada halaman, seperti <title> atau imej pertama, dan pilihannya bergantung pada aplikasi tersebut. Sebab itulah satu pautan boleh kelihatan elok di satu tempat dan rosak di tempat lain. Penyelesaiannya ialah menyatakan empat tag wajib tadi serta satu penerangan pada setiap halaman yang anda jangka akan dikongsi, bukan hanya halaman utama. Halaman produk yang dikongsi dengan tag halaman utama akan memaparkan kad halaman utama.

Punca 2: URL imej ialah laluan relatif

Ini mudah terlepas pandang, kerana halaman kelihatan baik dalam pelayar anda sendiri. content="/images/og.jpg" berfungsi untuk pelayar yang sudah berada di laman anda, tetapi crawler berada di luar laman itu. Tulis alamat penuh, bermula dengan https:// dan domain anda. Perkara yang sama berlaku untuk og:url.

Punca 3: imej bersaiz atau berbentuk salah

Setiap platform menyatakan apa yang dikehendakinya, dan kebetulannya mereka semua bersetuju tentang imej lebar:

• LinkedIn menyatakan dalam panduan membuat laman web boleh dikongsi bahawa imej perlu sekurang-kurangnya 1200 × 627 piksel, disyorkan pada nisbah 1.91:1, dan tidak melebihi 5 MB.
• Panduan Meta mengenai amalan terbaik perkongsian mengesyorkan imej sekurang-kurangnya 1080 piksel lebar untuk skrin resolusi tinggi, dan sekurang-kurangnya 600 lebar untuk memaparkan iklan pautan imej.
• Kad imej besar X menyokong nisbah 2:1 dari 300 × 157 hingga 4096 × 4096 piksel, di bawah 5MB, dalam format JPG, PNG, WEBP atau GIF, dan tidak menyokong SVG, menurut dokumentasi pembangunnya (halaman asal kini dialih hala, jadi pautan ini melalui Internet Archive).

Satu saiz sesuai untuk ketiga-tiga platform: 1200 × 630. Saiz ini melepasi minimum 1200 × 627 LinkedIn, lebih lebar daripada 1080 Meta, dan nisbahnya 1200 ÷ 630 = 1.905, dalam lingkungan 5% daripada 2:1 X. Imej persegi atau tinggi akan dipotong menjadi kad lebar, jadi pastikan bahagian penting berada di tengah. Kalkulator nisbah aspek menunjukkan apa yang dikekalkan oleh pemotongan tengah.

Nyatakan juga saiz dalam tag. Meta meminta og:image:width dan og:image:height supaya crawlernya boleh memaparkan imej dengan serta-merta, tanpa perlu memuat turun dan memprosesnya dahulu. Panduan webmasternya menjelaskan dengan ringkas: nyatakan tinggi dan lebar supaya imej dimuatkan dengan betul pada kali pertama halaman dikongsi.

Punca 4: tag ditambah oleh JavaScript

Sesetengah pembina laman dan aplikasi halaman tunggal menambah tag meta selepas halaman dimuatkan, dalam pelayar. Crawler yang membaca HTML yang dihantar oleh pelayan anda mungkin tidak pernah menjalankan kod itu, jadi ia tidak pernah melihat tag tersebut. Semak sumber halaman (View Source, bukan inspector, yang menunjukkan halaman selepas skrip dijalankan). Jika tag tidak ada dalam sumber, crawler berkemungkinan besar juga tidak dapat melihatnya. Pembetulannya terletak pada tetapan laman anda atau templat sebelah pelayan.

Punca 5: aksara khas merosakkan tag

Tajuk yang mengandungi tanda petikan berganda, seperti The "only" linen you need, menamatkan atribut content="..." lebih awal dan selebihnya tajuk hilang. Aksara yang bermakna dalam atribut mesti di-escape: " menjadi ", & menjadi &, dan < menjadi <. Pelayar dan crawler menukarnya semula kepada aksara asal apabila membaca tag. Penjana melakukannya untuk anda, dan itu separuh sebab untuk menggunakannya.

Punca 6: aplikasi mengingati versi lama

Anda telah membetulkan tag, berkongsi semula, dan kad lama masih ada. Itulah cache. Aplikasi menyimpan apa yang mereka kikis dan menggunakannya semula, dan kedua-dua rangkaian besar menyediakan alat untuk meminta paparan baharu:

• Facebook: tampal URL ke dalam Sharing Debugger Meta. Panduan webmaster Meta menyatakan ia menunjukkan tag mana yang dikikis oleh crawler, dengan sebarang ralat atau amaran, dan mencetuskan kikisan baharu. Amalan terbaik Meta menambah bahawa kandungan yang dikikis jika tidak akan dikemas kini mengikut tempoh standard 24 jam.
• LinkedIn: jalankan URL melalui Post Inspector. Halaman bantuan LinkedIn jelas tentang had ini: penyegaran hanya menukar pratonton untuk siaran baharu. Siaran yang sudah mengandungi URL itu kekal dengan pratonton lama.

Nota LinkedIn ini perlu diingat sebelum pelancaran. Semak pratonton sebelum siaran pertama dikeluarkan, kerana anda tidak boleh membetulkan siaran lama dengan membetulkan halaman.

Tag twitter:card: satu baris, bukan empat

X juga membaca Open Graph. Rujukan markup kadnya menyenaraikan sandaran bagi setiap tag: twitter:title jatuh kepada og:title, twitter:description kepada og:description, twitter:image kepada og:image, dan twitter:image:alt kepada og:image:alt. Jadi anda tidak perlu mengulang semuanya. Satu baris yang perlu ditambah ialah twitter:card: summary_large_image untuk gambar penuh lebar, atau summary untuk kad kecil persegi. Jika ia ditinggalkan, rujukan yang sama menyatakan X mungkin memaparkan kad ringkasan kecil, itulah sebabnya gambar besar kadangkala tiba sebagai thumbnail. Rujukan yang sama juga mengehadkan tajuk kepada 70 aksara, penerangan 200 dan teks alternatif 420.

Semakan pra-pelancaran lima minit

1. Lihat sumber halaman dan cari tag og:. Keempat-empat yang wajib, serta satu penerangan.
2. Semak bahawa og:image dan og:url bermula dengan https://.
3. Buka URL imej itu sahaja dalam pelayar. Ia sepatutnya dimuatkan, pada 1200 × 630 atau hampir.
4. Tampal URL ke dalam Sharing Debugger dan Post Inspector serta baca kadnya.
5. Barulah kongsikannya.

Di mana Hermoso sesuai

Hermoso ialah ejen pemasaran AI: ia menyelidik iklan yang sudah berjaya di pasaran anda, menghasilkan iklan imej dan video yang sesuai dengan jenama, menjadualkan siaran ke akaun anda sendiri, dan menjalankan kempen berbayar pada akaun iklan anda sendiri. Pratonton pautan yang baik ialah yang menjadikan siaran tersebut layak diklik. Hermoso berfungsi dalam aplikasi web, atau di dalam Claude, ChatGPT dan Cursor melalui pelayan MCPnya.

Soalan lazim

Mengapa pautan saya tidak menunjukkan imej di Facebook atau LinkedIn?

Biasanya tag og:image tiada, menggunakan laluan relatif dan bukannya alamat https:// penuh, atau menunjuk ke imej yang terlalu kecil. LinkedIn meminta sekurang-kurangnya 1200 × 627 piksel. Selepas membetulkannya, jalankan URL melalui Sharing Debugger Meta atau Post Inspector LinkedIn supaya mereka mengambilnya semula.

Apakah saiz yang sepatutnya untuk imej Open Graph?

1200 × 630 piksel berfungsi merentasi rangkaian besar. Ia memenuhi minimum 1200 × 627 LinkedIn pada kira-kira 1.91:1, lebih lebar daripada 1080 piksel yang disyorkan Meta, dan hampir dengan 2:1 yang disokong X untuk kad imej besar.

Bagaimana saya mengemas kini pratonton pautan LinkedIn?

Betulkan tag pada halaman, kemudian masukkan URL dalam Post Inspector LinkedIn. Pratonton yang disegarkan hanya terpakai pada siaran baharu. Siaran yang sudah mengandungi URL itu kekal dengan pratonton lama.

Perlukah saya tag twitter: jika saya sudah ada tag og:?

Hanya twitter:card. X jatuh kepada og:title, og:description, og:image dan og:image:alt apabila versi twitter: tiada.