Generator tag meta Open Graph

Tag yang menjadi dasar pembuatan pratinjau tautan

Ketika seseorang menempelkan tautan Anda ke dalam postingan atau pesan, aplikasi mengirim crawler ke halaman dan membaca sejumlah tag <meta> di dalam <head>. Tag tersebut berasal dari protokol Open Graph, yang mencantumkan empat tag sebagai wajib:

• og:title: judul sebagaimana yang seharusnya tampil di pratinjau.
• og:type: jenis halaman. website cocok untuk sebagian besar halaman dan article cocok untuk postingan blog. Protokol ini juga mendefinisikan tipe seperti profile, book, video.movie dan music.song.
• og:image: URL gambar yang mewakili halaman.
• og:url: URL kanonis, yang oleh protokol disebut ID permanen objek.

Protokol ini juga mendefinisikan tag opsional, dan generator menulis yang berguna: og:description, og:site_name, serta detail gambar og:image:width, og:image:height dan og:image:alt. Soal teks alt protokol ini tegas: jika sebuah halaman menentukan og:image, ia sebaiknya menentukan og:image:alt, dan teks itu menjelaskan apa yang ada di dalam gambar, bukan keterangan gambar.

Apa yang ditambahkan X: twitter:card

X juga membaca Open Graph. Referensi markup kartunya (dokumentasi developer X, ditautkan di sini melalui Internet Archive karena halaman aslinya kini dialihkan) mencantumkan cadangan untuk setiap tag: twitter:title jatuh ke og:title, twitter:description ke og:description, twitter:image ke og:image dan twitter:image:alt ke og:image:alt. Jadi satu tag yang layak ditambahkan adalah twitter:card, yang memilih tata letak. Jika dihilangkan, referensi yang sama menyatakan X mungkin jatuh ke kartu ringkasan kecil, meskipun Anda menginginkan yang besar:

• summary_large_image: gambar selebar penuh di atas judul. Halaman kartu gambar besar X menyatakan gambar untuk kartu ini mendukung rasio aspek 2:1, dengan dimensi minimum 300 × 157 dan maksimum 4096 × 4096 piksel, di bawah 5MB, dalam format JPG, PNG, WEBP atau GIF. SVG tidak didukung.
• summary: kartu yang lebih kecil dengan gambar persegi. Halaman kartu ringkasan X menyatakan gambar mendukung rasio 1:1, dari 144 × 144 hingga 4096 × 4096 piksel, dan dipotong menjadi persegi di semua platform.

Referensi yang sama mencantumkan kartu app dan player, yang membutuhkan kolom tambahan untuk app store atau pemutar video, jadi keduanya tidak disertakan di sini. Ia juga mendokumentasikan batasan yang digunakan pemeriksaan di atas: 70 karakter untuk judul, 200 untuk deskripsi dan 420 untuk teks alt.

Ukuran gambar yang dinyatakan platform

• LinkedIn: panduannya tentang membuat situs web dapat dibagikan meminta og:title, og:image, og:description dan og:url, serta mencantumkan ukuran file maksimum 5 MB, minimum 1200 × 627 piksel dan rasio yang disarankan 1.91:1.
• Meta: praktik terbaik berbaginya menyarankan penggunaan gambar dengan lebar minimal 1080 piksel untuk layar beresolusi tinggi, dan lebar minimal 600 piksel untuk menampilkan iklan tautan gambar. Halaman yang sama meminta og:image:width dan og:image:height agar crawler dapat merender gambar langsung tanpa harus mengunduh dan memprosesnya lebih dulu.

Gambar 1200 × 630 memenuhi semuanya: minimal 1200 × 627 untuk LinkedIn, lebih lebar dari 1080 untuk Meta, dan 1.905:1, dalam selisih 5% dari rasio 2:1 milik X.

Periksa, dan segarkan pratinjau lama

Aplikasi menyimpan cache dari apa yang mereka ambil, jadi memperbaiki tag tidak memperbaiki pratinjau yang sudah tersimpan. Kedua jaringan besar menyediakan alat untuk ini:

• Sharing Debugger milik Meta menampilkan tag yang diambil crawler-nya, beserta setiap kesalahan atau peringatan, dan memicu pengambilan ulang. panduan webmaster Meta menjelaskannya, dan halaman praktik terbaik mencatat bahwa konten yang diambil jika tidak akan diperbarui dalam periode standar 24 jam.
• Post Inspector milik LinkedIn menyegarkan URL yang di-cache. halaman bantuan LinkedIn mencatat bahwa penyegaran hanya memengaruhi postingan baru: postingan yang sudah menyertakan URL tetap mempertahankan pratinjau lama.

Apa yang tidak dilakukan alat ini

Ia tidak mengambil halaman atau gambar Anda, jadi ia tidak bisa melihat apa yang sebenarnya tayang, dan pratinjau di atas adalah sketsa teks, bukan render. Ia menulis tag; situs Anda tetap harus menyajikannya di dalam <head> halaman, dalam HTML yang diterima crawler. Tag yang ditambahkan kemudian oleh JavaScript mungkin tidak pernah terlihat. Dan ia tidak menulis kartu app atau player, atau properti tambahan yang didefinisikan oleh tipe seperti book atau video.movie.

Jika Anda tidak ingin menulis ini secara manual

Hermoso adalah pemasaran dengan autopilot: ia meneliti iklan yang sudah berhasil di pasar Anda, membuat iklan gambar dan video yang sesuai merek, menjadwalkan postingan, dan menjalankan kampanye berbayar di akun iklan Anda sendiri. Ia bekerja di aplikasi web, atau di dalam Claude, ChatGPT, dan Cursor melalui server MCP miliknya.

Alat gratis: Pembuat tautan UTM · Pembuat kode QR · Panduan ukuran media sosial

Pertanyaan yang sering diajukan

Tag Open Graph mana yang wajib?

Protokol Open Graph mencantumkan empat properti wajib: og:title, og:type, og:image dan og:url. Tag og:description, og:site_name serta width, height dan alt untuk og:image bersifat opsional tetapi layak ditambahkan.

Apakah saya butuh twitter:title dan twitter:image jika sudah punya tag og:?

Tidak. Referensi markup kartu X menyatakan twitter:title, twitter:description, twitter:image dan twitter:image:alt otomatis memakai padanan og:-nya. Tag yang layak ditambahkan adalah twitter:card, yang memilih tata letak kartu.

Berapa ukuran yang seharusnya untuk gambar Open Graph?

LinkedIn meminta minimal 1200 × 627 piksel dengan rasio 1,91:1 dan di bawah 5 MB. Meta menyarankan lebar minimal 1080 piksel. Kartu gambar besar X mendukung rasio 2:1 dari 300 × 157 hingga 4096 × 4096. Gambar 1200 × 630 cocok untuk ketiganya.

Mengapa tautan saya masih menampilkan gambar lama setelah saya mengubah tag?

Aplikasi menyimpan hasil scrape lama di cache. Jalankan URL melalui Sharing Debugger Meta atau Post Inspector LinkedIn untuk mengambilnya lagi. LinkedIn mencatat bahwa postingan yang sudah membagikan URL tetap menampilkan pratinjau lama.

Mengapa tanda kutip dan ampersand berubah pada output?

Keduanya di-escape HTML agar tag tetap valid. Judul seperti Tom & Jerry's "Sale" menjadi Tom & Jerry's "Sale" di dalam atribut content, dan browser serta crawler membacanya kembali sebagai teks aslinya.

Apakah alat ini memuat gambar saya?

Tidak. Tidak ada yang Anda ketik dikirim ke mana pun dan URL gambar tidak pernah diambil, itulah mengapa pratinjau menampilkan placeholder alih-alih gambarnya.