Cara Membuat OG Image Dinamis di Blogger untuk Home & Postingan

Mengapa OG Image Dinamis ini Penting?

Pada halaman beranda (home), menampilkan logo blog sebagai og:image memberikan kesan branding yang kuat dan konsisten saat tautan dibagikan ke media sosial. Sementara itu, pada halaman postingan (artikel), penggunaan gambar utama dari isi artikel sebagai og:image lebih relevan karena dapat menarik perhatian pembaca dan mencerminkan isi konten yang sebenarnya saat dibagikan.

Gambar: ilustrasi OG image dinamis untuk halaman depan dan postingan.

OG Image Dinamis di Blogger bermanfaat untuk menampilkan gambar yang tepat saat artikel atau homepage dibagikan ke media sosial. Untuk halaman beranda (home), OG image bisa menampilkan logo atau gambar default brand, sedangkan untuk postingan, otomatis menampilkan gambar utama artikel. Ini meningkatkan tampilan preview link, menarik klik, dan memperkuat identitas blog saat dibagikan.

Persiapan Penting Sebelum Mengatur OG Image Dinamis

Sebelum mulai mengatur og:image agar tampil berbeda di halaman beranda dan halaman postingan, ada beberapa langkah persiapan penting yang harus kamu lakukan. Persiapan ini akan memastikan proses edit template berjalan lancar dan hasil akhirnya optimal, baik dari sisi tampilan maupun performa SEO.

1. Siapkan Logo Blog Berkualitas Tinggi

Langkah pertama adalah menyiapkan logo blog kamu dalam bentuk gambar dengan resolusi tinggi. Gambar ini akan digunakan sebagai og:image default untuk halaman beranda, jadi pastikan tampilannya mencerminkan identitas brand kamu dengan baik.

• Rekomendasi ukuran: Minimal 1600 × 900 px (rasio 16:9), agar terlihat tajam saat dibagikan di media sosial seperti Facebook dan Twitter.
• Format: Gunakan format gambar seperti .jpg atau .png yang sudah dioptimasi ukuran file-nya.

Contoh URL logo yang diunggah melalui Blogger:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/.../logo-blog-image-penaeducasi.png

📌 Tips: Kamu bisa upload logo ke salah satu postingan sebagai gambar tersembunyi, lalu salin URL-nya dari source code postingan.

2. Pastikan Setiap Postingan Memiliki Gambar Utama

Agar og:image di halaman artikel bekerja dengan baik, kamu perlu memastikan setiap artikel blog kamu memiliki minimal satu gambar utama di dalam kontennya. Blogger secara otomatis mengambil gambar pertama dalam artikel sebagai og:image.

• Pastikan gambar berada di awal paragraf atau bagian atas artikel.
• Gunakan ukuran gambar yang cukup besar dan relevan dengan isi konten.
• Jangan gunakan gambar dari URL luar yang mungkin diblokir (gunakan gambar yang diunggah ke Blogger langsung).

Ini sangat penting karena jika tidak ada gambar, preview di media sosial bisa tampil kosong atau acak.

3. Cadangkan Template Blogger Sebelum Mengedit

Sebelum kamu mengubah struktur HTML di template, selalu lakukan backup (cadangkan) tema kamu terlebih dahulu. Ini penting untuk menghindari kerusakan permanen pada tampilan blog jika ada kesalahan saat pengeditan.

Langkah mencadangkan tema Blogger:

1. Masuk ke dasbor Blogger
2. Pilih menu Tema
3. Klik ikon panah ▼ di samping tombol “Sesuaikan”
4. Pilih opsi Cadangkan
5. Klik Unduh Tema

Simpan file XML hasil backup di tempat aman. Jika suatu saat ada kesalahan dalam edit template, kamu bisa mengembalikannya hanya dengan mengunggah kembali file ini.

Langkah 3: Tambahkan Kode OG Image Dinamis ke Template Blogger

Setelah persiapan selesai, kini saatnya masuk ke tahap inti: menambahkan kode OG Image dinamis ke dalam struktur HTML blog kamu. Langkah ini bertujuan agar halaman beranda dan postingan masing-masing menampilkan gambar yang sesuai — logo untuk homepage, dan gambar artikel untuk setiap postingan.

Untuk melakukannya, kamu perlu masuk ke editor HTML template Blogger dan menyisipkan kode khusus tepat sebelum tag penutup </head>. Berikut panduan lengkapnya:

Cara Membuka Editor HTML Template Blogger:

1. Masuk ke dasbor Blogger
2. Pilih menu Tema
3. Klik ikon panah ▼ di sebelah kanan tombol Sesuaikan
4. Pilih opsi Edit HTML

Download atau copy kode didalam OG Image didalam bok dibawah ini, letakkan kode dibagian <head> letakkan sebelum penutup </head>. Biasanya, letakkan kode dibawah kode meta berikut ini:

<meta expr:content='data:view.title.escaped' property='og:title'/>
      <meta expr:content='data:blog.url.canonical' property='og:url'/>
      <meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:blog.title.escaped' property='og:site_name'/> 

XML

<b:if cond='data:blog.pageType == "index"'>
  <!-- OG image untuk Home/beranda: pakai logo -->
  <meta content='https://your-logo-url.png' property='og:image'/>
  <meta content='https://your-logo-url.png' name='twitter:image'/>
  <meta content='https://your-logo-url.png' property='og:image:secure_url'/>
  <link href='https://your-logo-url.png' rel='image_src'/>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
  <!-- OG image untuk postingan: pakai gambar artikel -->
  <b:if cond='data:blog.postImageUrl'>
    <meta expr:content='data:blog.postImageUrl' property='og:image'/>
    <meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
    <meta expr:content='data:blog.postImageUrl' property='og:image:secure_url'/>
    <link expr:href='data:blog.postImageUrl' rel='image_src'/>
  </b:if>
</b:if>
    

Ganti URL Logo dengan Logo Blog Kamu Sendiri

Pada bagian kode OG image yang kamu sisipkan ke dalam template, terdapat baris yang berisi URL berwarna merah  seperti link berikut:

https://your-logo-url.png

URL tersebut hanyalah placeholder, dan wajib kamu ganti dengan URL logo blog kamu sendiri agar gambar yang muncul di halaman beranda benar-benar mencerminkan identitas visual blog kamu.

Sebagai contoh, kamu bisa menggantinya dengan URL gambar yang telah kamu unggah ke Blogger, seperti berikut:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/.../logo-blog-image-penaeducasi.png

Dengan mengganti URL logo secara tepat, kamu memastikan OG image pada homepage menampilkan citra brand yang konsisten dan terlihat profesional saat dibagikan ke media sosial.

Langkah 4: Simpan Template Setelah Pengeditan

Setelah kamu selesai menambahkan kode OG image dinamis ke dalam template Blogger, langkah penting berikutnya adalah menyimpan perubahan yang telah dilakukan. Ini memastikan semua pengaturan baru diterapkan ke blog kamu secara permanen.

Untuk menyimpannya, cukup klik tombol Simpan Tema yang berada di bagian kanan atas editor HTML. Setelah itu, sistem akan secara otomatis memeriksa apakah ada kesalahan dalam penulisan kode.

Validasi dan Preview OG Image Blog Kamu

Setelah semua kode OG image dinamis berhasil disimpan di template, langkah penting selanjutnya adalah melakukan validasi. Ini bertujuan untuk memastikan bahwa gambar yang akan muncul saat tautan dibagikan ke media sosial telah sesuai — baik di halaman beranda maupun di setiap artikel.

Kamu bisa melakukan pengecekan dengan mudah menggunakan alat bantu online berikut:

OG Image Checker – ogstudio.app

Cukup salin dan tempelkan URL halaman blog atau postingan yang ingin kamu uji, lalu klik tombol cek. Alat ini akan menampilkan preview OG image, termasuk judul, deskripsi, dan gambar yang ditangkap oleh metadata.

Dengan validasi ini, kamu dapat memastikan bahwa perubahan OG image dinamis sudah berhasil diterapkan dan tampil optimal di platform seperti Facebook, Twitter, WhatsApp, dan lainnya.

blogger widget OG Image Blogger Gambar Blogger SEO Blogger Thumbnail Postingan Edit Template Blogger