Saat sebuah artikel Blogger dibagikan ke Facebook, tampilan tautan yang muncul biasanya terdiri dari judul artikel, gambar, dan deskripsi singkat. Jika informasi tersebut tidak terbaca dengan baik, Facebook dapat memilih gambar atau teks yang kurang sesuai dengan isi halaman.
Salah satu cara untuk mengatur informasi tersebut adalah menggunakan meta tag Open Graph. Open Graph membantu memberikan informasi kepada platform media sosial mengenai judul, URL, deskripsi, dan gambar yang sebaiknya digunakan ketika sebuah halaman dibagikan.
Pada tutorial ini, Anda akan mempelajari cara memasang kode Open Graph di Blogger agar informasi artikel dapat disiapkan dengan lebih terstruktur saat dibagikan ke Facebook.
Apa Itu Meta Tag Open Graph?
Open Graph adalah sekumpulan meta tag yang digunakan untuk memberikan informasi tentang sebuah halaman kepada platform yang mendukung protokol tersebut. Informasi ini dapat mencakup judul halaman, URL, deskripsi, gambar, dan jenis konten.
Dengan meta tag Open Graph, pemilik blog dapat menentukan informasi yang ingin digunakan ketika sebuah URL dibagikan di media sosial. Hal ini dapat membantu membuat tampilan tautan lebih informatif dan sesuai dengan isi halaman.
Beberapa properti Open Graph yang umum digunakan antara lain:
- og:title untuk menentukan judul halaman.
- og:url untuk menentukan URL halaman.
- og:description untuk menentukan deskripsi halaman.
- og:image untuk menentukan gambar yang digunakan pada preview.
- og:type untuk menentukan jenis konten halaman.
Mengapa Open Graph Penting untuk Blogger?
Ketika artikel dibagikan ke media sosial, tampilan preview menjadi bagian penting dari informasi yang dilihat pengguna sebelum membuka tautan. Jika gambar, judul, dan deskripsi ditampilkan dengan benar, pengguna dapat lebih mudah memahami isi halaman yang akan mereka kunjungi.
Penggunaan Open Graph juga membantu blogger memberikan informasi yang lebih terstruktur kepada platform sosial ketika URL artikel dibagikan.
Namun, perlu diperhatikan bahwa Open Graph bukan jaminan peningkatan peringkat SEO di Google. Fungsi utamanya adalah membantu mengatur metadata untuk tampilan dan informasi halaman ketika URL dibagikan pada platform yang mendukung Open Graph.
Informasi yang Dapat Diatur dengan Open Graph
Dengan kode Open Graph yang sesuai, beberapa informasi utama pada artikel dapat disiapkan untuk kebutuhan preview media sosial.
1. Judul Artikel
Properti og:title digunakan untuk memberikan informasi judul halaman. Pada Blogger, judul dapat diambil secara dinamis berdasarkan halaman yang sedang dibuka.
2. Deskripsi Artikel
Properti og:description digunakan untuk memberikan ringkasan singkat mengenai isi halaman. Pada kode Blogger, informasi ini dapat mengambil nilai dari meta description blog.
3. Gambar Artikel
Properti og:image digunakan untuk menentukan gambar yang dapat digunakan pada preview tautan. Untuk artikel yang memiliki gambar utama, gambar tersebut dapat digunakan sebagai gambar Open Graph.
4. URL Halaman
Properti og:url digunakan untuk memberikan URL halaman yang sedang dibagikan.
Kode HTML Open Graph untuk Blogger
Berikut contoh kode Open Graph yang dapat digunakan pada template Blogger:
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL-GAMBAR-DEFAULT' property='og:image'/>
</b:if>
<meta content='article' property='og:type'/>Ganti bagian URL-GAMBAR-DEFAULT dengan URL gambar cadangan yang ingin digunakan. Sebaiknya gunakan gambar yang relevan dengan identitas blog agar preview tetap terlihat konsisten ketika artikel tidak memiliki gambar utama.
Penjelasan Kode Open Graph Blogger
Open Graph Title
<meta expr:content='data:blog.pageName' property='og:title'/>Bagian ini digunakan untuk memberikan judul halaman kepada platform yang membaca metadata Open Graph.
Open Graph URL
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>Kode tersebut menggunakan URL kanonis Blogger sebagai nilai untuk og:url.
Open Graph Description
<meta expr:content='data:blog.metaDescription' property='og:description'/>Bagian ini mengambil deskripsi meta yang tersedia pada halaman Blogger untuk digunakan sebagai deskripsi Open Graph.
Open Graph Image
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<meta content='URL-GAMBAR-DEFAULT' property='og:image'/>
</b:if>Bagian tersebut menggunakan gambar postingan jika tersedia. Jika tidak ada gambar postingan yang dapat digunakan, kode menyediakan gambar default sebagai alternatif.
Cara Memasang Open Graph di Blogger
Setelah kode disiapkan, Anda dapat memasangnya melalui editor HTML template Blogger. Ikuti langkah berikut secara berurutan.
1. Buka Dashboard Blogger
Masuk ke dashboard Blogger dan pilih blog yang ingin Anda optimalkan.
2. Buka Menu Tema
Pilih menu Tema, kemudian gunakan opsi Edit HTML untuk membuka kode template.
3. Cari Tag Head
Gunakan fitur pencarian pada editor untuk menemukan bagian <head>. Tempatkan kode Open Graph pada area head template sesuai struktur template yang digunakan.
4. Ganti URL Gambar Default
Pada bagian:
<meta content='URL-GAMBAR-DEFAULT' property='og:image'/>ganti URL-GAMBAR-DEFAULT dengan URL gambar yang ingin digunakan sebagai gambar cadangan.
5. Simpan Template
Setelah memastikan kode sudah ditempatkan dengan benar, simpan perubahan template Blogger. Kemudian buka salah satu artikel untuk memastikan halaman masih berfungsi normal.
Tips Agar Preview Artikel Lebih Baik
Gunakan Gambar Utama yang Relevan
Sebaiknya setiap artikel memiliki gambar utama yang relevan dengan topik pembahasan. Gambar tersebut dapat digunakan sebagai bagian dari preview ketika URL artikel dibagikan.
Buat Deskripsi Artikel yang Informatif
Pastikan artikel memiliki meta description yang relevan dan menggambarkan isi halaman secara singkat. Deskripsi yang jelas membantu memberikan konteks kepada pengguna sebelum membuka artikel.
Gunakan Gambar Default
Gambar default berguna sebagai cadangan ketika halaman tidak memiliki gambar postingan yang dapat digunakan. Dengan demikian, blog tetap memiliki aset visual yang dapat disediakan untuk preview.
Periksa Hasil Setelah Mengubah Metadata
Setelah memasang atau mengubah Open Graph, jangan langsung menyimpulkan bahwa perubahan tidak bekerja hanya karena preview lama masih muncul. Platform media sosial dapat menyimpan informasi halaman dalam cache.
Kenapa Gambar Facebook Belum Berubah?
Jika gambar atau deskripsi artikel di Facebook belum berubah setelah kode Open Graph dipasang, salah satu penyebab yang mungkin adalah cache preview. Platform media sosial dapat menyimpan data preview dari URL yang sebelumnya pernah dibaca.
Karena itu, perubahan metadata terkadang tidak langsung terlihat pada preview yang sudah pernah dibuat sebelumnya. Anda dapat menggunakan fitur pemeriksaan atau debugging yang disediakan oleh platform untuk meminta data halaman dibaca kembali.
Hal yang Perlu Diperhatikan Saat Memasang Open Graph
- Pastikan kode ditempatkan pada bagian <head> template Blogger.
- Hindari memasang beberapa meta tag Open Graph dengan properti yang sama tanpa alasan yang jelas.
- Gunakan URL gambar yang dapat diakses secara publik.
- Pastikan gambar utama sesuai dengan isi artikel.
- Periksa kembali kode setelah menyimpan perubahan template.
- Jika preview belum berubah, pertimbangkan kemungkinan adanya cache pada platform media sosial.
FAQ Open Graph Blogger
Apakah kode Open Graph aman digunakan di Blogger?
Kode Open Graph pada dasarnya hanya berupa meta tag yang memberikan informasi halaman kepada platform yang mendukung Open Graph. Pemasangannya perlu dilakukan dengan benar di dalam struktur template Blogger.
Kenapa gambar artikel tidak muncul saat dibagikan ke Facebook?
Beberapa kemungkinan penyebabnya adalah gambar postingan tidak terbaca, URL gambar tidak dapat diakses, metadata Open Graph belum sesuai, atau preview halaman masih menggunakan data yang tersimpan dalam cache.
Apakah setiap artikel wajib memiliki gambar?
Tidak wajib. Namun, menggunakan gambar utama yang relevan dapat membuat preview artikel lebih informatif. Kode Open Graph pada tutorial ini juga menyediakan gambar default sebagai alternatif ketika gambar postingan tidak tersedia.
Apakah Open Graph dapat meningkatkan SEO Blogger?
Open Graph terutama digunakan untuk mengatur informasi halaman ketika URL dibagikan ke platform media sosial. Penggunaan Open Graph tidak dapat dianggap sebagai jaminan peningkatan peringkat pencarian Google.
Apakah Open Graph hanya bisa digunakan untuk Facebook?
Tidak. Open Graph merupakan protokol metadata yang dapat digunakan oleh berbagai platform yang mendukungnya. Namun, hasil tampilan preview dapat berbeda tergantung cara masing-masing platform membaca dan menggunakan metadata tersebut.
Kesimpulan
Meta tag Open Graph di Blogger dapat digunakan untuk membantu mengatur informasi yang tersedia ketika artikel dibagikan ke Facebook dan platform media sosial lainnya. Informasi seperti judul, URL, deskripsi, dan gambar dapat disediakan melalui properti Open Graph.
Dengan memasang kode secara tepat di bagian <head> template Blogger, Anda dapat membuat metadata berbagi yang lebih terstruktur. Penggunaan gambar artikel yang relevan dan deskripsi yang informatif juga dapat membantu membuat preview tautan lebih mudah dipahami.
Jika perubahan belum terlihat setelah pemasangan, periksa kembali kode dan pertimbangkan kemungkinan cache preview media sosial. Dengan pengaturan Open Graph yang tepat, tampilan artikel ketika dibagikan dapat menjadi lebih konsisten dan informatif bagi pengguna.