Cara Membuat Gambar & Deskripsi Otomatis Saat Share Link Blogspot
Pernah nggak bro, waktu share link blog atau website di WhatsApp, Facebook, atau Twitter, ternyata yang muncul cuma link polos tanpa gambar dan deskripsi? Nah, supaya blog kamu terlihat lebih profesional dan menarik ketika dibagikan, kamu perlu menambahkan Open Graph (OG) meta tags ke template Blogspot.
Dengan OG tags, setiap kali link kamu dishare:
- Kalau link artikel → otomatis muncul judul artikel, snippet, dan featured image.
- Kalau link homepage → muncul logo dan deskripsi website.
Apa Itu Open Graph?
Open Graph adalah standar dari Facebook (sekarang Meta) untuk menampilkan preview ketika sebuah link dibagikan di media sosial.
Meta tag OG ini dibaca oleh:
- Facebook & WhatsApp
- Twitter (dengan tambahan Twitter Card)
- Telegram
- LinkedIn dan platform lainnya.
Manfaat Open Graph untuk Blogspot
Meningkatkan Click-Through Rate (CTR) – orang lebih tertarik klik link dengan thumbnail.
Branding – logo atau featured image bikin blog lebih profesional.
SEO Sosial Media – meskipun nggak langsung ke ranking Google, tapi engagement dari share bisa bantu traffic.
Kode Open Graph untuk Blogspot
Kamu bisa menambahkan kode berikut di dalam <head> template Blogspot:
<b:if cond='data:view.isHomepage'>
<!-- OG untuk homepage -->
<meta property="og:title" content="Reins.id - Tutorial Blogspot & Teknologi"/>
<meta property="og:description" content="Panduan lengkap Blogspot, SEO, dan teknologi terkini dari Reins.id."/>
<meta property="og:image" content="https://www.reins.id/og-reins.png"/>
<meta property="og:url" content="https://www.reins.id"/>
<meta property="og:type" content="website"/>
<meta property="og:site_name" content="Reins.id"/>
</b:if>
<b:if cond='data:view.isPost'>
<!-- OG untuk artikel/postingan -->
<meta property="og:title" expr:content='data:post.title'/>
<meta property="og:description" expr:content='data:post.snippet'/>
<meta property="og:image" expr:content='data:post.featuredImage'/>
<meta property="og:url" expr:content='data:post.url'/>
<meta property="og:type" content="article"/>
<meta property="og:site_name" content="Reins.id"/>
</b:if>
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:title" expr:content='data:post.title ?: "Reins.id - Tutorial Blogspot & Teknologi"'/>
<meta name="twitter:description" expr:content='data:post.snippet ?: "Panduan lengkap Blogspot, SEO, dan teknologi terkini dari Reins.id."'/>
<meta name="twitter:image" expr:content='data:post.featuredImage ?: "https://www.reins.id/og-reins.png"'/>
Penjelasan:
- Homepage: otomatis ambil logo + deskripsi website.
- Postingan: otomatis ambil judul, snippet, dan featured image.
- Twitter Card: biar ketika link dibagikan ke Twitter/X tampilannya juga keren.
- og:site_name: buat nambah identitas blog kamu.
Tips Tambahan
- Gunakan gambar OG ukuran 1200x630 px supaya tidak pecah.
- Uji coba dengan Facebook Debugger: https://developers.facebook.com/tools/debug/ Kalau ada error fb:app_id, cukup hapus meta fb:app_id karena itu opsional.
- Gunakan deskripsi yang relevan & mengandung keyword untuk mendukung SEO.
Dengan menambahkan OG meta tags ke Blogspot, tampilan link blog kamu akan lebih menarik dan profesional saat dishare di media sosial.
Homepage bisa menampilkan logo & deskripsi brand, sementara artikel otomatis pakai gambar dan snippet artikel.
Simple, tapi powerful untuk meningkatkan branding dan klik organik dari media sosial. 🚀
Posting Komentar untuk "Cara Membuat Gambar & Deskripsi Otomatis Saat Share Link Blogspot"
Posting Komentar