Penjana Tag Meta Open Graph

Tag Open Graph ialah serpihan kecil HTML yang menentukan bagaimana halaman anda kelihatan apabila seseorang berkongsinya di Facebook, LinkedIn, Slack, Discord atau X (Twitter). Isikan tajuk, penerangan, URL, imej dan beberapa pilihan di bawah, lihat pratonton kad perkongsian dikemas kini serta-merta, dan salin tag <meta> yang dijana terus ke dalam <head> halaman anda. Semuanya berlaku dalam penyemak imbas anda — tiada apa-apa dihantar ke pelayan.

Apakah alat ini?

Open Graph ialah protokol yang asalnya dicipta oleh Facebook, yang membolehkan mana-mana laman web menerangkan dirinya sendiri dengan sekumpulan kecil tag <meta property="og:..."> yang diletakkan dalam <head> HTML. Apabila seseorang menampal pautan anda ke dalam aplikasi sosial, klien sembang atau alat pemesejan, aplikasi itu membaca tag ini untuk membina kad pratonton — tajuk, penerangan dan imej kecil — dan bukannya meneka daripada kandungan halaman.

Twitter (X) menggunakan set tag yang berkaitan tetapi berasingan, <meta name="twitter:...">, untuk mengawal bagaimana pratonton pautan kelihatan khusus pada platformnya. Kebanyakan laman menetapkan kedua-duanya: tag Open Graph untuk keserasian luas, dan tag Twitter Card untuk menghalusi pratonton X (contohnya, memilih kad imej besar berbanding kad ringkasan kecil).

Tanpa tag ini, pautan yang dikongsi sama ada tidak menunjukkan sebarang pratonton, atau platform cuba meneka tajuk dan imej daripada kandungan mentah halaman anda — sering memilih tajuk utama yang salah, imej sisipan rawak, atau tiada langsung. Menetapkan og:title, og:description dan og:image secara jelas memberi anda kawalan penuh terhadap cara kandungan anda dipersembahkan sebelum sesiapa mengklik.

Kenapa guna alat ini?

Pratonton langsung — lihat dengan tepat bagaimana kad perkongsian akan kelihatan semasa anda menaip, sebelum anda menerbitkan apa-apa.
Menjana kedua-dua tag Open Graph (og:title, og:description, og:image, og:url, og:type, og:site_name) dan tag Twitter Card dalam satu langkah.
Merangkumi medan yang benar-benar dibaca oleh platform: tajuk, penerangan, URL kanonik, imej, nama laman, jenis kandungan, dan gaya kad Twitter.
Berjalan sepenuhnya di sisi klien — tajuk, penerangan dan URL anda tidak pernah meninggalkan penyemak imbas anda.
Percuma, tiada log masuk, tiada had kadar — salin output dan tampalkannya ke dalam HTML anda.

Cara menggunakannya

Masukkan tajuk halaman anda dan penerangan ringkas (sasarkan kurang daripada ~60 aksara untuk tajuk, ~155–160 untuk penerangan).
Masukkan URL kanonik halaman dan URL mutlak imej pratonton (URL imej mestilah lengkap sepenuhnya, cth. https://example.com/image.jpg, bukan laluan relatif).
Secara pilihan tetapkan nama laman, pilih og:type (website, article, product, profile, video, music), dan pilih jenis Twitter Card (summary atau summary_large_image).
Semak kad pratonton langsung untuk memastikan tajuk, penerangan dan imej kelihatan sesuai bersama-sama.
Klik "Salin" dan tampalkan tag <meta> yang dijana ke dalam <head> halaman anda, sebelum tag penutup </head>.

Contoh

Input

Tajuk: "10 Alat Pembangun Percuma yang Anda Akan Benar-Benar Gunakan"
Penerangan: "Senarai pilihan alat berasaskan pelayar untuk JSON, regex, UUID dan banyak lagi — tiada pemasangan diperlukan."
URL: https://example.com/blog/dev-tools
Imej: https://example.com/images/dev-tools-cover.jpg

Hasil

<meta property="og:title" content="10 Free Developer Tools You'll Actually Use" />
<meta property="og:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta property="og:url" content="https://example.com/blog/dev-tools" />
<meta property="og:image" content="https://example.com/images/dev-tools-cover.jpg" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="10 Free Developer Tools You'll Actually Use" />
<meta name="twitter:description" content="A curated list of browser-based tools for JSON, regex, UUIDs and more — no install required." />
<meta name="twitter:image" content="https://example.com/images/dev-tools-cover.jpg" />

Hanya medan yang anda isi disertakan, jadi meninggalkan nama laman kosong hanya akan menghilangkan og:site_name daripada output.

Kesilapan biasa yang perlu dielakkan

og:image ketiadaan sepenuhnya — tanpanya, kebanyakan platform sama ada tidak menunjukkan sebarang imej pratonton atau kembali kepada imej rawak yang diimbas daripada halaman, yang biasanya kelihatan rosak atau tidak profesional.
Menggunakan laluan imej relatif seperti /images/cover.jpg dan bukannya URL penuh seperti https://example.com/images/cover.jpg — perangkak sosial secara amnya tidak dapat menyelesaikan laluan relatif.
Nisbah bidang imej yang salah — imej segi empat sama atau potret dipangkas secara janggal apabila platform memaksanya ke dalam bingkai landskap 1.91:1; sentiasa reka bentuk imej perkongsian anda pada atau berhampiran 1200×630.
Tajuk atau penerangan yang dipotong — pastikan og:title di bawah ~60 aksara dan og:description di bawah ~155–160 aksara supaya ia tidak dipotong dengan elipsis pada kebanyakan platform.
Terlupa mengemas kini pratonton yang di-cache — selepas menukar tag og pada halaman langsung, pratonton lama boleh berterusan dalam cache Facebook atau LinkedIn sehingga anda memaksa imbasan semula secara manual dengan alat penyahpepijatan mereka.

Di mana setiap tag digunakan

og:title, og:description dan og:image ialah tiga tag yang hampir setiap platform baca untuk membina pratonton. og:url memberitahu perangkak pautan kanonik yang mana untuk dikaitkan dengan pratonton, yang penting jika kandungan yang sama boleh dicapai melalui pelbagai URL. og:site_name memaparkan label kecil (seperti nama penerbitan atau jenama) di atas tajuk pada sesetengah platform, seperti Facebook.

og:type mengubah jenis objek yang diwakili oleh halaman kepada perangkak yang menyokong model objek Open Graph yang lebih kaya — sebagai contoh, article membuka kunci og:article:published_time dan og:article:author pada platform yang membacanya, walaupun kebanyakan pratonton sosial mengabaikan medan tambahan ini dan hanya menggunakan trio asas tajuk/penerangan/imej.

twitter:card mengawal susun atur khusus pada X: summary menunjukkan lakaran kecil segi empat sama di sebelah teks, manakala summary_large_image menunjukkan imej lebar penuh di atas teks — pilihan kedua hampir selalu menjadi pilihan yang lebih baik untuk kandungan dengan imej kulit yang bermakna.

Soalan lazim

Berapakah saiz yang sepatutnya untuk og:image saya?

1200×630px ialah saiz yang disyorkan — cukup besar untuk paparan DPI tinggi dan sepadan dengan nisbah bidang lebih kurang 1.91:1 yang digunakan oleh Facebook, LinkedIn dan X untuk memangkas imej. Pastikan fail di bawah 5–8MB, gunakan JPG atau PNG, dan pastikan URL imej ialah URL mutlak yang lengkap, bukan laluan relatif — kebanyakan perangkak tidak dapat menyelesaikan laluan imej relatif dengan betul.

Mengapakah pratonton saya tidak muncul apabila saya berkongsi pautan?

Punca paling biasa ialah: og:image tiada, URL imej relatif dan bukannya mutlak, perangkak disekat oleh robots.txt, atau platform menunjukkan versi cache pratonton lama. Facebook dan LinkedIn kedua-duanya menyimpan cache pratonton yang diimbas secara agresif — gunakan Sharing Debugger Facebook atau Post Inspector LinkedIn untuk memaksa imbasan semula selepas anda mengemas kini tag anda.

Apakah perbezaan antara tag og: dan tag twitter:?

Tag og: (og:title, og:description, og:image, dll.) ialah standard Open Graph, yang dibaca oleh Facebook, LinkedIn, Slack, Discord, WhatsApp dan kebanyakan platform lain. Tag twitter: ialah format tersendiri Twitter/X. Jika twitter:title atau twitter:image tiada, X secara automatik akan kembali kepada tag og: yang setara — tetapi menetapkan kedua-duanya secara jelas memberi anda lebih kawalan, termasuk memilih summary_large_image untuk imej pratonton yang besar.

og:type manakah yang perlu saya gunakan?

"website" ialah pilihan lalai yang selamat untuk kebanyakan halaman, termasuk laman utama dan kandungan umum. Gunakan "article" untuk catatan blog dan artikel berita (ia membuka kunci tag khusus artikel tambahan seperti masa penerbitan), "product" untuk halaman e-dagang, dan "profile" untuk halaman profil peribadi atau pengguna. Jenis ini terutamanya menjejaskan sifat Open Graph tambahan yang sah, bukan bagaimana kad pratonton asas kelihatan.

Adakah alat ini menyimpan atau menghantar data saya ke mana-mana?

Tidak. Semua penjanaan berlaku secara tempatan dalam penyemak imbas anda menggunakan JavaScript biasa. Tiada apa yang anda taip dihantar, dilog atau disimpan — menutup tab akan mengosongkan semuanya.