LarhTech – Selamat datang di babak lanjutan pembuatan tema Blogger! Di empat seri sebelumnya, kita telah sukses membangun fondasi tata letak (layout) dan desain visual yang responsif. Namun, sebuah website yang indah tidak akan ada gunanya jika tidak bisa ditemukan oleh mesin pencari Google, atau jika tampilannya berantakan saat tautannya (link) dibagikan ke WhatsApp dan Facebook.
Di Part 5 ini, kita akan masuk ke mode Developer SEO. Kita akan menanamkan kode Meta Tags dan Open Graph ke dalam “kepala” (bagian <head>) tema XML Anda.
Kode ini berfungsi sebagai “penerjemah” otomatis. Saat bot Google datang, tema Anda akan otomatis menyajikan judul dan deskripsi yang sangat terstruktur. Dan saat Anda membagikan artikel ke media sosial, tema Anda akan otomatis memunculkan gambar thumbnail yang memancing klik!
Langkah 1: Membongkar Bagian Kepala (Head)
Buka menu Tema > Edit HTML di blog uji coba Anda.
Gulir ke bagian paling atas kode Anda, tepat di bawah tag <html>. Anda akan menemukan tag <head>. Di Part 1, bagian kepala ini masih sangat kosong dan hanya berisi kode standar
<head>
<meta content='width=device-width, initial-scale=1' name='viewport'/>
<title><data:blog.pageTitle/></title>
... (kode CSS b:skin kita) ...
</head>Kita akan merombak tag <title> bawaan tersebut dan menambahkan puluhan baris kode kecerdasan SEO di bawahnya.
Langkah 2: Membuat Judul Halaman Dinamis
Blogger secara default memiliki format judul yang kurang ramah SEO pada halaman artikel (biasanya formatnya Nama Blog: Judul Artikel). Praktik SEO terbaik adalah meletakkan Judul Artikel di depan (Judul Artikel – Nama Blog).
Hapus tag <title><data:blog.pageTitle/></title> yang lama, lalu ganti dengan kode pintar ini:
<b:if cond='data:view.isSingleItem'>
<title><data:view.title/> - <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
Langkah 3: Menambahkan Meta Deskripsi Otomatis
Meta deskripsi adalah teks cuplikan yang muncul di bawah judul pada hasil pencarian Google. Kode ini akan otomatis mengambil “Deskripsi Penelusuran” yang Anda ketik saat menulis artikel di Blogger.
Tambahkan kode ini tepat di bawah kode Judul tadi:
<b:if cond='data:view.description'>
<meta expr:content='data:view.description' name='description'/>
</b:if>
<meta content='index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1' name='robots'/>
Langkah 4: Memasang Open Graph (Untuk WhatsApp & Facebook)
Pernahkah Anda membagikan tautan blog ke grup WhatsApp, tapi gambarnya tidak muncul? Itu karena blog Anda belum memiliki tag Open Graph (OG). Kode ini akan mendeteksi gambar pertama yang ada di dalam artikel Anda dan menjadikannya thumbnail saat tautan dibagikan. Masukkan kode ini di bawah Meta Deskripsi:
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:view.url.canonical' property='og:url'/>
<b:if cond='data:view.isSingleItem'>
<meta expr:content='data:view.title' property='og:title'/>
<meta content='article' property='og:type'/>
<b:if cond='data:view.featuredImage'>
<meta expr:content='data:view.featuredImage' property='og:image'/>
</b:if>
<b:if cond='data:view.description'>
<meta expr:content='data:view.description' property='og:description'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:view.title' name='twitter:title'/>
Langkah 5: Simpan dan Uji Coba
Klik tombol Simpan (ikon disket).
Untuk membuktikan bahwa kode Anda berhasil:
- Salin tautan (URL) salah satu artikel uji coba di blog Anda.
- Paste (tempel) tautan tersebut di kolom chat WhatsApp Anda (jangan langsung dikirim, tunggu 2-3 detik).
- Anda akan melihat sebuah kotak preview muncul secara ajaib, menampilkan gambar thumbnail artikel Anda beserta judul dan cuplikan teksnya dengan sangat rapi!
Kesimpulan
Selamat! Anda baru saja menyuntikkan “steroid SEO” ke dalam tema buatan Anda sendiri.
Banyak pemula yang mengeluh blog mereka sepi pengunjung padahal artikelnya bagus. Sering kali, masalahnya ada pada struktur XML <head> yang tidak memenuhi standar mesin pencari. Dengan menanamkan Meta Tags dan Open Graph yang dinamis seperti di atas, Anda telah mempermudah pekerjaan Googlebot, yang pada akhirnya akan meningkatkan peringkat (ranking) artikel Anda di halaman pertama Google.
Baca Juga: Cara Bikin NAS dari PC Bekas
Di Part 6 nanti, kita akan menuntaskan satu lagi PR krusial untuk struktur website kita, yaitu membuat tombol Navigasi Halaman (Next/Previous Page) menggunakan CSS agar pengunjung bisa membaca artikel-artikel lama Anda.
