Panduan pratinjau sosial
Gambar Open Graph: uji tautan sebelum dipublikasikan
Gambar Open Graph menentukan tampilan halaman Anda saat seseorang membagikan tautan. Panduan ini menunjukkan ukuran praktis, tag, pemeriksaan desain, perbaikan cache, dan daftar periksa publikasi yang menjaga pratinjau tetap berguna.
Jawaban cepat
Pilih satu gambar Open Graph dan uji tautan sebelum dibagikan
Untuk sebagian besar halaman, mulai dengan gambar 1200 x 630, jaga teks dan logo penting dari tepi, gunakan URL gambar HTTPS absolut, dan uji URL akhir di alat debug platform. Alur kerja sederhana ini menangkap sebagian besar pratinjau rusak.
Peran pratinjau
Perlakukan gambar Open Graph sebagai aset halaman
Gambar Open Graph bukan sekadar hiasan. Ini adalah gambar yang mewakili halaman saat perayap membuat kartu tautan untuk feed sosial, aplikasi chat, dan alat kerja. Harus sesuai dengan judul, deskripsi, topik halaman yang terlihat, dan gambar data terstruktur.
Menjual klik
Gambar, judul, dan deskripsi membentuk kesan pertama sebelum pengunjung sampai ke halaman Anda.
Harus sesuai dengan konten
Gambar pratinjau yang baik sesuai dengan judul halaman, topik yang terlihat, dan janji utama pengguna, bukan menggunakan grafik merek generik.
Ini termasuk data SEO
Gambar Open Graph, gambar kartu Twitter, URL kanonis, dan gambar JSON-LD harus menggambarkan halaman yang sama.
Perlu aturan penamaan
Nama file yang jelas dan aturan pembaruan mencegah cache usang dan gambar kampanye lama muncul kembali.
Rencana ukuran
Pilih dimensi yang tahan pada pratinjau nyata
Platform berbeda memotong dan menyimpan cache pratinjau dengan cara sedikit berbeda. File 1200 x 630 adalah default kuat untuk pratinjau Open Graph, tapi aturan aman adalah desain dengan area aman di tengah dan uji URL akhir di platform penting untuk halaman.
| Platform atau penggunaan | Rencana gambar praktis | Perhatikan | Pemeriksaan publikasi |
|---|---|---|---|
| Open Graph Umum | Gunakan 1200 x 630 sebagai default praktis untuk gambar berbagi besar. | Gambar kecil bisa terlihat buram atau ditampilkan sebagai thumbnail lebih kecil. | Pratinjau URL akhir di debugger platform sebelum berbagi. |
| Facebook dan LinkedIn | Gunakan gambar gaya 1,91:1 yang sama kecuali halaman membutuhkan aset khusus platform. | Tepi bisa terpotong berbeda di berbagai tata letak feed dan perangkat. | Jaga teks dan logo penting di dalam area aman tengah. |
| Kartu besar X | Gunakan summary_large_image dan jaga visual tetap di tengah; X mendukung gambar kartu besar lebar. | Teks kecil dan detail tepi bisa hilang saat kartu dipotong atau diubah ukurannya. | Atur twitter:image dan uji dengan alat kartu X. |
| Aplikasi chat dan alat kerja | Jaga file kecil dan desain sederhana karena pratinjau sering muncul di panel kompak. | Tangkapan layar ramai, judul panjang, dan kontras rendah cepat menjadi sulit dibaca. | Tempel tautan akhir ke alat yang benar-benar digunakan audiens Anda. |
Jaga pesan utama di tengah gambar. Tepi adalah area berisiko karena kartu feed, pratinjau chat, dan tata letak ponsel bisa memotong berbeda.
HTML
Atur tag yang dibutuhkan perayap sebelum halaman dipublikasikan
Tag Open Graph harus ada di kepala HTML. Gunakan URL gambar absolut, tentukan lebar dan tinggi, tambahkan teks alt yang berguna, dan jaga URL kanonis konsisten dengan halaman yang akan dibagikan pengguna.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Mengapa ini penting | Kesalahan umum |
|---|---|---|
| og:image | Menunjukkan gambar yang harus mewakili halaman kepada perayap. | Menggunakan jalur relatif atau gambar yang diblokir oleh login, pengalihan, atau aturan robots. |
| og:image:width / og:image:height | Memberi tahu platform ukuran gambar sebelum mereka mengambil dan memeriksa file. | Meninggalkan dimensi dan membiarkan setiap perayap menebak cara menampilkan pratinjau. |
| og:image:alt | Menjelaskan gambar pratinjau untuk aksesibilitas dan memberi konteks lebih pada perayap. | Mengulang judul halaman daripada menjelaskan apa yang terlihat di gambar. |
| og:url | Menghubungkan pratinjau ke URL halaman kanonis yang harus dibagikan. | Menggunakan URL pelacakan, staging, atau budaya yang salah sebagai identitas halaman permanen. |
| twitter:card / twitter:image | Memberi X instruksi kartu besar eksplisit dan gambar khusus platform opsional. | Mengasumsikan X selalu menampilkan gambar Open Graph persis seperti platform lain. |
Jika Anda menggunakan Blazor, Komponen Metadata SEO Blazor menjaga tag Open Graph, tag kartu Twitter, URL kanonis, dan metadata JSON-LD tetap bersama.
Aturan desain
Rancang untuk kartu feed kecil terlebih dahulu
Kebanyakan orang tidak akan melihat gambar penuh. Mereka melihat kartu terkompresi di feed, pesan, atau panel pratinjau. Tata letak sederhana menang: satu subjek jelas, kontras terbaca, dan tanpa teks kecil yang hanya terlihat di file desain.
Alur kerja
Alur kerja sederhana untuk setiap halaman penting
- 1
Tulis janji pratinjau
Tentukan apa yang harus dikatakan kartu dalam satu pandangan: topik, manfaat, produk, atau sudut artikel.
- 2
Buat gambar dengan rasio yang direncanakan
Gunakan 1200 x 630 untuk file default dan jaga konten penting tetap di tengah.
- 3
Optimalkan file
Gunakan JPG atau PNG untuk gambar sosial, jaga file tetap kecil, dan hindari kerusakan kompresi yang terlihat.
- 4
Atur metadata dan skema
Perbarui tag Open Graph, tag kartu Twitter, URL kanonis, dan referensi gambar JSON-LD secara bersamaan.
- 5
Publikasikan dengan nama file stabil
Gunakan nama file yang bermakna, dan ubah saat mengganti gambar jika cache platform kemungkinan menyimpan versi lama.
- 6
Uji URL akhir
Jalankan URL halaman publik melalui alat debugger dan periksa pratinjau nyata, bukan hanya kode sumber.
Tooltip
Gunakan PixelPress setelah ukuran pratinjau ditentukan
Saat rencana gambar memberi nama file akhir, PixelPress dapat membantu konversi WebP atau AVIF lokal. Jaga file asli tetap utuh, tinjau hasil, lalu perbarui URL Open Graph.
Debugging
Segarkan cache platform sebelum mempercayai pratinjau
Platform sosial menyimpan data pratinjau dalam cache. Jika Anda mengganti gambar tapi URL tetap sama, platform bisa terus menampilkan pratinjau lama. Gunakan alat resmi dan jika perlu, ubah nama file gambar atau tambahkan URL versi.
Daftar periksa
Daftar periksa gambar Open Graph sebelum publikasi
Gunakan daftar ini sebelum artikel, halaman produk, halaman alat, atau halaman arahan tayang. Ini menangkap masalah pratinjau yang mahal untuk diketahui setelah tautan dibagikan.
Pertanyaan umum
Berapa ukuran gambar Open Graph yang ideal?
Gunakan 1200 x 630 sebagai default praktis untuk sebagian besar pratinjau Open Graph. Ukurannya cukup besar untuk layar beresolusi tinggi dan mendekati rasio pratinjau umum 1,91:1. Tetap uji URL akhir karena setiap platform bisa memotong atau menyimpan cache pratinjau berbeda.
Bisakah saya menggunakan gambar Open Graph yang sama untuk setiap halaman?
Anda bisa, tapi biasanya kurang kuat. Gambar merek generik lebih baik daripada tidak ada gambar, tapi artikel penting, halaman produk, dan alat harus memiliki gambar pratinjau yang sesuai dengan halaman spesifik.
Mengapa gambar Open Graph lama saya masih muncul?
Alasan paling umum adalah cache platform. Gunakan Facebook Sharing Debugger, LinkedIn Post Inspector, atau alat kartu X untuk menyegarkan URL. Jika file lama terus muncul, publikasikan gambar baru dengan nama file atau URL versi baru.
Apa perbedaan antara og:image dan twitter:image?
og:image adalah gambar Open Graph standar yang digunakan banyak platform. twitter:image khusus untuk kartu X. Jika Anda menyediakan twitter:image, X dapat menggunakan gambar itu daripada kembali ke og:image.
Haruskah gambar JSON-LD sesuai dengan gambar Open Graph?
Tidak harus identik, tapi harus menceritakan kisah halaman yang sama. Metadata pencarian, tag Open Graph, kartu Twitter, dan JSON-LD tidak boleh menunjuk ke gambar yang tidak terkait atau usang.
Di mana PixelPress cocok dalam gambar Open Graph?
PixelPress cocok digunakan setelah Anda menentukan ukuran gambar, nama file, dan peran. Ini dapat membantu mengonversi file akhir secara lokal sambil menjaga file asli tetap utuh. Halaman masih membutuhkan metadata yang benar dan pengujian pratinjau setelahnya.