Cara Menambahkan Meta Tag Open Graph Template Blog

Dalam era media sosial yang begitu masif seperti sekarang ini, tampilan preview saat membagikan link blog sangat mempengaruhi jumlah klik dan engagement. Sayangnya, secara default platform Blogger tidak menyertakan fitur Open Graph dan Twitter Card secara otomatis. Padahal, fitur ini sangat penting agar saat artikel dibagikan di Facebook, Twitter, atau WhatsApp, tampilannya terlihat profesional dengan gambar, judul, dan deskripsi yang menarik.

Cara Menambahkan Meta Tag Open Graph dan Twitter Card di Blogger

Pada artikel ini, Sobat-Blogger akan mempelajari secara lengkap cara menambahkan Meta Tag Open Graph dan Twitter Card secara manual di platform Blogger, dilengkapi dengan penjelasan teknis, contoh kode, serta tips optimasi lanjutan.

Apa Itu Open Graph dan Twitter Card?

Mengenal Open Graph

Open Graph adalah protokol yang diperkenalkan oleh Facebook untuk memberikan kontrol penuh kepada pemilik website dalam menentukan bagaimana konten mereka akan ditampilkan saat dibagikan di media sosial.

Contohnya, ketika Sobat-Blogger membagikan link artikel di Facebook, maka Facebook akan membaca meta tag Open Graph seperti:

Judul artikel (og:title)
Deskripsi (og:description)
Gambar thumbnail (og:image)
URL (og:url)
Tipe konten (og:type)

Mengenal Twitter Card

Twitter Card adalah fitur dari Twitter yang memungkinkan link yang dibagikan tampil dengan elemen visual, hampir sama dengan Open Graph, namun dengan tag meta yang sedikit berbeda. Ada beberapa tipe Twitter Card, namun yang paling umum digunakan adalah summary card with large image.

Referensi: Twitter Developer Docs

Mengapa Blogger Perlu Menambahkan Meta Tag Ini?

Platform Blogger tidak menyediakan meta tag Open Graph dan Twitter Card secara otomatis, berbeda dengan platform seperti WordPress yang memiliki plugin SEO khusus. Akibatnya, jika Sobat-Blogger tidak menambahkan meta tag ini secara manual, maka:

Facebook dan Twitter akan menampilkan preview yang asal-asalan atau kosong.
Gambar tidak muncul atau salah gambar.
Deskripsi tidak sesuai dengan isi artikel.
CTR (Click Through Rate) dari media sosial bisa sangat rendah.

Dengan menambahkan meta tag ini, Sobat-Blogger bisa:

Meningkatkan profesionalitas tampilan saat dibagikan.
Mengontrol elemen yang muncul di preview.
Meningkatkan peluang klik dan trafik dari sosial media.

Cara Menambahkan Meta Tag Open Graph di Blogger

1. Masuk ke Dashboard Blogger dan Edit Tema

Buka dashboard Blogger
Pilih Tema
Klik tanda panah di tombol “Sesuaikan”
Pilih Edit HTML

2. Tambahkan Script Meta Open Graph di

Cari tag <head> di HTML template, kemudian tambahkan kode berikut tepat setelahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta property="og:title" content='&lt;data:blog.pageName/&gt;'/>
  <meta property="og:type" content="article"/>
  <meta property="og:url" content='&lt;data:blog.url/&gt;'/>
  <meta property="og:image" content='&lt;data:blog.postImageThumbnailUrl/&gt;'/>
  <meta property="og:description" content='&lt;data:blog.metaDescription/&gt;'/>
  <meta property="og:site_name" content='&lt;data:blog.title/&gt;'/>
</b:if>

Kode ini akan memastikan setiap artikel memiliki Open Graph yang dinamis berdasarkan kontennya.

Cara Menambahkan Twitter Card di Blogger

Setelah menambahkan Open Graph, kini tambahkan Twitter Card tepat setelahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <meta name="twitter:card" content="summary_large_image"/>
  <meta name="twitter:title" content='&lt;data:blog.pageName/&gt;' />
  <meta name="twitter:description" content='&lt;data:blog.metaDescription/&gt;' />
  <meta name="twitter:image" content='&lt;data:blog.postImageThumbnailUrl/&gt;' />
  <meta name="twitter:url" content='&lt;data:blog.url/&gt;' />
  <meta name="twitter:site" content="@akunTwitterAnda" />
</b:if>

Jangan lupa mengganti @akunTwitterAnda dengan username asli Twitter Sobat-Blogger.

Cara Mengecek dan Menguji Meta Tag Anda

1. Facebook Sharing Debugger

Gunakan Sharing Debugger Facebook untuk menguji apakah meta tag Open Graph Sobat-Blogger sudah terbaca dengan baik. Cukup masukkan URL artikel, klik “Debug”, dan lihat hasilnya.

2. Twitter Card Validator

Gunakan Twitter Card Validator untuk menguji tampilan link artikel Sobat-Blogger di Twitter. Jika berhasil, preview akan muncul di sana.

Tips Tambahan dan Optimasi Lanjutan

Menampilkan Gambar Default Jika Tidak Ada Gambar Artikel

Tambahkan pengecekan agar jika artikel tidak memiliki gambar, maka akan menggunakan gambar default.

<b:if cond='data:blog.postImageThumbnailUrl'>
  <meta property="og:image" content='&lt;data:blog.postImageThumbnailUrl/&gt;' />
  <meta name="twitter:image" content='&lt;data:blog.postImageThumbnailUrl/&gt;' />
<b:else/>
  <meta property="og:image" content='https://www.domainanda.com/default-image.jpg'/>
  <meta name="twitter:image" content='https://www.domainanda.com/default-image.jpg'/>
</b:if>

Open Graph untuk Beranda Blogger

Untuk menambahkan Open Graph di halaman depan (homepage):

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta property="og:type" content="website"/>
  <meta property="og:title" content='&lt;data:blog.title/&gt;' />
  <meta property="og:description" content='&lt;data:blog.metaDescription/&gt;' />
  <meta property="og:image" content='https://www.domainanda.com/default-home.jpg'/>
</b:if>

Kesimpulan

Menambahkan Meta Tag Open Graph dan Twitter Card di Blogger bukanlah tugas sulit, tetapi berdampak besar pada profesionalitas dan performa blog saat dibagikan ke media sosial. Dengan konfigurasi manual seperti yang telah dijelaskan, Sobat-Blogger bisa mengambil kendali penuh atas bagaimana konten ditampilkan di Facebook, Twitter, WhatsApp, dan platform lain.

Sebagai Blogger yang ingin tampil maksimal dan menjangkau audiens yang lebih luas, penting untuk tidak melewatkan aspek teknis seperti ini. Jangan ragu untuk melakukan eksperimen dan perbaikan terus-menerus agar blog Sobat-Blogger makin unggul dan kompetitif.