Meta tags Blogger merupakan salah satu bagian penting dalam struktur teknis sebuah blog. Meta tag membantu memberikan informasi kepada mesin pencari dan platform lain mengenai halaman yang sedang dibuka. Dengan struktur meta tag yang tepat, Blogger dapat memiliki informasi judul, deskripsi, serta data untuk tampilan tautan ketika artikel dibagikan ke media sosial.
Bagi pengguna Blogger atau Blogspot yang ingin melakukan optimasi SEO on-page, pengaturan meta tag dapat menjadi salah satu bagian yang perlu diperhatikan. Kode yang tepat juga dapat membantu membuat informasi halaman menjadi lebih terstruktur dan konsisten.
Pada tutorial ini, kita akan membahas kumpulan kode meta tags otomatis untuk Blogger, cara memasangnya pada template, cara kerja judul dan deskripsi dinamis, serta pengaturan Open Graph dan Twitter Card untuk membantu mengoptimalkan tampilan artikel ketika dibagikan.
Apa Itu Meta Tags pada Blogger?
Meta tags adalah elemen HTML yang berisi informasi mengenai sebuah halaman web. Informasi tersebut umumnya berada di bagian <head> dan tidak ditampilkan sebagai konten utama kepada pengunjung.
Meta tag dapat memberikan informasi seperti karakter encoding, viewport, deskripsi halaman, serta metadata yang digunakan ketika halaman dibagikan melalui platform tertentu.
Dalam Blogger, metadata juga dapat dibuat dinamis menggunakan sintaks khusus Blogger seperti data:blog dan data:view. Dengan pendekatan tersebut, informasi halaman dapat menyesuaikan antara halaman beranda, postingan, dan halaman lainnya.
Mengapa Meta Tags Penting untuk SEO Blogger?
Meta tags bukan satu-satunya faktor yang menentukan posisi sebuah halaman di hasil pencarian. Namun, metadata yang disusun dengan baik dapat membantu mesin pencari memahami informasi dasar sebuah halaman dan dapat memengaruhi bagaimana informasi halaman ditampilkan.
Salah satu bagian yang penting adalah meta description. Deskripsi yang relevan dapat memberikan ringkasan mengenai isi halaman dan berpotensi membantu pengguna memahami halaman sebelum mengunjunginya.
Selain kebutuhan mesin pencari, metadata seperti Open Graph juga berguna ketika artikel dibagikan ke platform yang mendukung metadata tersebut.
Manfaat Menggunakan Meta Tags Otomatis di Blogger
- Judul halaman dapat dibuat dinamis berdasarkan jenis halaman yang sedang dibuka.
- Deskripsi halaman dapat menggunakan informasi yang relevan dari pengaturan Blogger.
- Open Graph dapat membantu mengatur tampilan tautan ketika artikel dibagikan pada platform yang mendukungnya.
- Twitter Card dapat menyediakan metadata tambahan untuk tampilan tautan pada platform yang mendukungnya.
- Mengurangi kebutuhan mengatur metadata secara berulang pada struktur template.
- Membantu menjaga struktur metadata lebih konsisten pada berbagai halaman blog.
Contoh Penggunaan Meta Tags pada Blogger
Sebagai contoh, ketika sebuah artikel dibagikan melalui aplikasi pesan atau media sosial, platform tersebut dapat mengambil informasi seperti judul, gambar, URL, dan deskripsi dari metadata halaman.
Dengan Open Graph yang sesuai, halaman artikel dapat memiliki informasi seperti:
Judul Artikel
Gambar Utama
URL Artikel
Nama Website
Jenis Konten
Namun, perlu dipahami bahwa hasil tampilan akhir tetap bergantung pada bagaimana masing-masing platform membaca dan memproses metadata tersebut.
Kumpulan Kode Meta Tags SEO Otomatis Blogger
Berikut kode yang dapat digunakan sebagai dasar pengaturan metadata pada template Blogger.
<!-- Kumpulan Meta Tags SEO Otomatis Mulai -->
<meta charset='utf-8'/>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<!-- Optimasi Judul dan Deskripsi Dinamis -->
<b:if cond='data:view.isHomepage'>
<title><data:blog.title/></title>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:elseif cond='data:view.isPost'/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.metaDescription ? data:blog.metaDescription : data:post.snippet' name='description'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
<!-- Optimasi Open Graph untuk Media Sosial -->
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image'/>
</b:if>
<!-- Optimasi Twitter Card -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
</b:if>
<!-- Kumpulan Meta Tags SEO Otomatis Selesai -->
Penjelasan Kode Meta Tags Blogger
1. Meta Charset
Baris berikut digunakan untuk menentukan karakter encoding halaman:
<meta charset='utf-8'/>
UTF-8 merupakan encoding yang umum digunakan pada halaman web dan mendukung berbagai karakter.
2. Meta Viewport
Viewport digunakan untuk membantu browser menyesuaikan tampilan halaman dengan ukuran layar perangkat.
<meta content='width=device-width, initial-scale=1' name='viewport'/>
Pengaturan ini sangat relevan untuk tampilan mobile-friendly karena smartphone memiliki ukuran layar yang berbeda dengan desktop.
3. Judul Halaman Beranda
Bagian berikut mendeteksi apakah halaman yang sedang dibuka merupakan halaman utama blog:
<b:if cond='data:view.isHomepage'>
<title><data:blog.title/></title>
</b:if>
Jika kondisi terpenuhi, judul halaman menggunakan judul blog.
4. Judul Artikel
Pada halaman postingan, kode menggunakan nama halaman dan judul blog:
<title><data:blog.pageName/> - <data:blog.title/></title>
Contoh hasilnya dapat berupa:
Judul Artikel - Nama Blog5. Meta Description
Meta description digunakan untuk memberikan ringkasan halaman:
<meta expr:content='data:blog.metaDescription' name='description'/>
Pada artikel, kode juga menyediakan fallback menggunakan snippet ketika deskripsi penelusuran tidak tersedia.
Open Graph untuk Membagikan Artikel ke Media Sosial
Open Graph merupakan metadata yang digunakan oleh berbagai platform untuk memperoleh informasi halaman ketika URL dibagikan.
Dalam kode di atas terdapat beberapa properti Open Graph.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
Properti tersebut memberikan informasi judul halaman.
Kemudian:
<meta expr:content='data:blog.url' property='og:url'/>
digunakan untuk memberikan URL halaman.
Sementara:
<meta content='article' property='og:type'/>
menentukan tipe konten sebagai artikel pada implementasi kode ini.
Open Graph Image untuk Gambar Artikel
Bagian berikut digunakan untuk menyediakan gambar utama apabila tersedia:
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image'/>
</b:if>
Gambar tersebut dapat digunakan oleh platform yang membaca metadata Open Graph ketika URL artikel dibagikan.
Karena setiap platform memiliki sistem caching dan pemrosesan metadata sendiri, perubahan gambar tidak selalu langsung terlihat setelah metadata diperbarui.
Twitter Card untuk Tampilan Tautan
Kode berikut menentukan jenis Twitter Card:
<meta content='summary_large_image' name='twitter:card'/>
Selanjutnya judul halaman diberikan melalui:
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
Sedangkan gambar utama menggunakan:
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' name='twitter:image'/>
</b:if>
Cara Memasang Meta Tags di Template Blogger
Karena kode ini berkaitan dengan struktur head template Blogger, pemasangannya perlu dilakukan melalui menu Edit HTML pada tema.
Langkah 1: Buka Dashboard Blogger
Masuk ke dashboard Blogger dan pilih blog yang ingin Anda optimalkan.
Langkah 2: Buka Menu Tema
Pilih menu Tema pada dashboard Blogger.
Langkah 3: Buka Edit HTML
Pilih opsi Edit HTML untuk membuka kode sumber template.
Langkah 4: Cari Tag Head
Gunakan fitur pencarian browser atau editor dengan menekan CTRL + F, kemudian cari:
<head>Letakkan kode metadata pada lokasi yang sesuai di dalam bagian head template.
Langkah 5: Backup Template
Sebelum melakukan perubahan, sangat disarankan untuk mencadangkan template Blogger terlebih dahulu. Hal ini berguna agar Anda dapat mengembalikan template jika terjadi kesalahan.
Langkah 6: Simpan Template
Setelah kode ditambahkan dan struktur template dipastikan valid, simpan perubahan kemudian buka blog untuk melakukan pengujian.
Aktifkan Deskripsi Penelusuran Blogger
Agar meta description artikel dapat diatur secara lebih spesifik, aktifkan fitur Deskripsi penelusuran pada pengaturan Blogger jika tersedia pada dashboard Anda.
Setelah fitur tersebut aktif, ketika membuat artikel baru Anda dapat mengisi deskripsi penelusuran melalui panel pengaturan artikel.
Gunakan deskripsi yang singkat, relevan dengan isi artikel, dan mengandung informasi yang membantu pengguna memahami topik halaman.
Cara Menguji Meta Tags Blogger
Setelah pemasangan selesai, jangan langsung menganggap kode sudah bekerja hanya karena blog dapat dibuka. Lakukan pemeriksaan terhadap source halaman untuk memastikan metadata benar-benar muncul.
Menguji Judul Halaman
Buka salah satu artikel kemudian periksa judul halaman pada tab browser. Pastikan judul menampilkan informasi yang sesuai dengan artikel.
Menguji Meta Description
Periksa source HTML halaman dan cari:
name="description"Pastikan metadata description tersedia dan isinya sesuai dengan halaman.
Menguji Open Graph
Periksa source halaman dan cari:
property="og:title"
property="og:url"
property="og:image"Pastikan nilai metadata tersebut mengarah ke informasi halaman yang benar.
Kesalahan Umum Saat Memasang Meta Tags Blogger
1. Meta Tags Dipasang Berkali-kali
Salah satu masalah yang sering terjadi adalah memasang beberapa meta tag yang memiliki fungsi sama secara berulang.
Sebelum menambahkan kode baru, periksa terlebih dahulu apakah template sudah memiliki meta description, Open Graph, Twitter Card, atau title dinamis.
2. Menghapus Kode Template Secara Tidak Sengaja
Edit HTML membutuhkan ketelitian. Kesalahan menghapus atau mengubah struktur template dapat menyebabkan halaman tidak tampil dengan benar.
Karena itu, selalu buat backup sebelum melakukan perubahan.
3. Deskripsi Penelusuran Tidak Diisi
Jika Anda mengandalkan deskripsi artikel secara manual, pastikan kolom Deskripsi Penelusuran diisi dengan ringkasan yang relevan.
4. Gambar Featured Image Tidak Terdeteksi
Jika metadata og:image tidak menghasilkan gambar yang diharapkan, periksa kembali struktur template dan ketersediaan data gambar pada halaman tersebut.
5. Menganggap Meta Tags sebagai Jaminan Ranking
Meta tags bukan jaminan artikel langsung mendapatkan peringkat tinggi di Google. SEO melibatkan banyak faktor, termasuk kualitas konten, relevansi, pengalaman pengguna, struktur situs, performa halaman, dan faktor lainnya.
Tips Optimasi SEO On-Page Blogger
Meta tags sebaiknya digunakan sebagai bagian dari strategi SEO yang lebih luas. Untuk mendapatkan struktur artikel yang lebih optimal, perhatikan beberapa hal berikut:
- Gunakan judul artikel yang jelas dan relevan.
- Gunakan struktur heading seperti H2 dan H3 secara teratur.
- Buat paragraf pembuka yang menjelaskan topik utama.
- Gunakan deskripsi penelusuran yang relevan.
- Optimalkan gambar dengan atribut alt yang sesuai.
- Gunakan internal link menuju artikel terkait.
- Pastikan blog nyaman digunakan pada perangkat mobile.
- Hindari penggunaan kode yang tidak diperlukan.
- Perhatikan kecepatan loading halaman.
- Buat konten yang benar-benar membantu pembaca.
Apakah Meta Tags Otomatis Bisa Digunakan untuk Semua Artikel?
Konsep metadata dinamis dapat digunakan untuk berbagai artikel dalam satu template. Dengan memanfaatkan data Blogger, informasi tertentu dapat disesuaikan berdasarkan halaman yang sedang dibuka.
Namun, struktur template Blogger yang berbeda dapat menggunakan variabel atau implementasi yang berbeda. Karena itu, kode sebaiknya diuji terlebih dahulu pada template yang digunakan sebelum diterapkan secara menyeluruh.
Apakah Meta Tags Bisa Meningkatkan Ranking Google?
Meta tags tidak secara otomatis membuat artikel mendapatkan peringkat tinggi di Google. Fungsinya lebih kepada memberikan informasi metadata dan membantu mengontrol beberapa aspek tampilan halaman.
Untuk mendapatkan hasil SEO yang lebih baik, fokus utama tetap pada konten yang bermanfaat, relevansi dengan maksud pencarian, struktur halaman yang baik, pengalaman pengguna, dan performa website.
FAQ Meta Tags Blogger
Apa itu meta tags Blogger?
Meta tags Blogger adalah metadata HTML yang memberikan informasi mengenai halaman kepada browser, mesin pencari, dan platform yang membaca metadata tersebut.
Apakah meta tags penting untuk SEO Blogger?
Meta tags merupakan salah satu bagian teknis SEO, terutama untuk memberikan informasi halaman seperti judul dan deskripsi. Namun, meta tags bukan satu-satunya faktor yang menentukan peringkat pencarian.
Di mana kode meta tags dipasang di Blogger?
Kode meta tags umumnya ditempatkan pada bagian head template Blogger melalui menu Tema dan Edit HTML.
Apakah harus melakukan backup sebelum edit HTML Blogger?
Sangat disarankan. Backup membantu mengembalikan template jika terjadi kesalahan ketika melakukan perubahan kode.
Apa fungsi Open Graph pada Blogger?
Open Graph menyediakan metadata seperti judul, URL, tipe konten, nama situs, dan gambar yang dapat digunakan platform pendukung ketika URL dibagikan.
Apa fungsi Twitter Card?
Twitter Card menyediakan metadata yang dapat digunakan untuk menentukan jenis kartu, judul, dan gambar ketika halaman dibagikan pada platform yang mendukung Twitter Card.
Apakah meta description menjamin artikel muncul di Google?
Tidak. Meta description tidak menjamin halaman mendapatkan peringkat tertentu. Mesin pencari dapat memilih bagaimana cuplikan halaman ditampilkan berdasarkan berbagai faktor.
Apakah semua template Blogger cocok dengan kode meta tags yang sama?
Belum tentu. Struktur template Blogger dapat berbeda sehingga kode harus diperiksa dan diuji terlebih dahulu agar tidak terjadi duplikasi atau konflik dengan metadata yang sudah tersedia.
Kesimpulan
Kumpulan kode meta tags otomatis untuk Blogger dapat membantu menata metadata penting seperti judul halaman, deskripsi, Open Graph, dan Twitter Card dalam template blog. Dengan sistem dinamis, metadata dapat menyesuaikan informasi berdasarkan halaman yang sedang dibuka.
Penggunaan kode ini dapat menjadi salah satu bagian dari optimasi SEO on-page Blogger, tetapi bukan satu-satunya strategi untuk mendapatkan trafik organik. Kualitas konten, struktur artikel, relevansi terhadap pencarian, pengalaman pengguna, responsivitas, dan performa halaman tetap perlu diperhatikan.
Sebelum memasang kode pada template utama, pastikan Anda melakukan backup template dan memeriksa apakah template sudah memiliki meta tags serupa. Hindari memasang metadata yang sama berkali-kali karena dapat membuat struktur HTML menjadi tidak rapi.
Jika seluruh pengaturan sudah dilakukan dengan benar, Anda dapat melanjutkan optimasi Blogger pada bagian konten, internal link, gambar, struktur heading, dan berbagai elemen SEO on-page lainnya agar blog memiliki struktur yang lebih baik dan mudah dipahami.