Cara Menyulap Blog Menjadi SEO Friendly Dan Responsive. Blog Seo memang salah satu tolok ukur yang bisa menjadikan konten artikel nongol di halaman utama mesin pencarian. Namun, hal ini kadang masih belum di ketahui oleh sebagaian blogger pemula. Lantas, bagaimana cara membuat blog menjadi SEO?. Untuk jawabannya silahkan baca artikel ini hingga selesai, agar dapat memahami tentang hal-hal yang perlu di perbaiki pada web/blog.
Sebelum berlanjut, agaknya kita juga perlu mengetahui apa yang di namakan Seo. SEO adalah kependekan dari "Search Engine Optimistion". Yang artinya ialah pengoptimalan mesin penelusuran. Dengan kata lain, sebagai blogger kita harus memaksimalkan segala macam hal yang berkenaan dengan syarat-syarat Seo.
Cara Membuat Blog Menjadi Responsive Dan SEO Friendly
Blog yang responsive dan Seo Friendly merupakan dambaan para blogger. Untuk menjadikannya seperti itu, ada banyak hal yang harus di lakukan. Responsive maksudnya adalah blog saat di buka dapat menyesuaikan semua perangkat seperti HP Smartphone Android, Laptop atau komputer. Seo Friendly artinya adalah blog akan mudah di telusuri oleh search engine.
Selanjutnya, di bawah ini adalah beberapa poin-poin penting yang wajib di jalani untuk menyulap blog menjadi responsive dan seo friendly.
01). Memilih Template Fast Loading
Dalam memilih template kita jangan asal comot begitu saja. Walaupun tampilan dan warnanya bagus, tapi belum tentu memenuhi syarat-syarat Seo. Sekarang ini memang banyak sekali template-template blogger yang di bagikan secara gratis. Melihat tampilannya yang bervariasi dengan warna yang menarik, membuat kita bingung untuk memilih.
Bila menemukan template gratis yang kita inginkan, maka kita harus test dahulu dari sisi kecepatan loading. Untuk menguji speed template, kita bisa manfaatkan layanan "PageSpeed Insights" milik Google. Untuk menganalisa fast loading template, silahkan masuk di website: https://pagespeed.web.dev. Setelah masuk di halaman website, maka akan tampil halaman seperti gambar di bawah ini.
Selanjutnya, masukkan alamat Url blog di dalam form dan klik button Analisis. Tunggu sampai muncul nilai skor yang akan tampil, seperti skor Performa, Aksesibilitas, Praktik Terbaik, dan SEO. Hasilnya seperti pada gambar di bawah ini.
Pada gambar di atas adalah contoh hasil nilai skor Seo dari versi perangkat mobile. Dan gambar di bawah ini adalah nilai skor SEO dengan versi Dekstop.
02). Data Struktur Blog Valid
Data struktur yang benar-benar valid merupakan salah satu syarat sebuah blog menjadi Seo 100%. Data struktur adalah berbagai susunan kode-kode yang ada di dalam template. Mulai dari penempatan tag <h1> pada judul atau nama blog di halaman beranda, lalu berurutan tag <h2> pada konten judul artikel.
Merubah kode responsive lama yang ada di antara <head>...kode...</head> seperti kode di bawah ini.
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
Maka ganti kode tersebut yang terletak di dalam template di bawah kode <head> dengan cara edit html di template blog. Lalu, ganti dengan kode di bawah ini.
<meta content='width=device-width,initial-scale=1' name='viewport'/>
Atau dengan alternatif lain, kita bisa merubah nilai angka pada kode yang atas (maximum-scale=1.0) menjadi (maximum-scale=5.0). Dengan menerapkan cara ini di jamin kode responsive akan berubah menjadi valid.
03). Menambahkan Title Dan Alt Pada Gambar
Bila pada susunan kode template belum ada (title=...judul postingan...) dan (alt=...nama gambar..) maka kita harus menambahkannya. Misalnya, pada struktur judul artikel dan gambar/thumbnail postingan seperti di bawah ini.
<h3 class='post-title entry-title' itemprop='name'><b:if cond='data:post.link'> <a expr:href='data:post.link'> <data:post.title/> </a> <b:else/> <b:if cond=' data:post.url'> <b:if cond=' data:blog.url != data:post.url'> <a expr:href='data:post.url'> <data:post.title/> </a><b:else/><data: post.title/>
Pada kode di atas itu terdapat Url judul artikel seperti ini: <a expr:href='data:post.link'> dan <a expr:href='data:post.url'>. Pada struktur kode tersebut kita harus menambah dengan kode expr:title=.... seperti contoh di bawah ini.
<a expr:href= 'data:post.link' expr:title= 'data:post.title'> dan <a expr:href= 'data:post.url' expr:title= 'data:post.title' >
Selanjutnya menambahkan expr:alt=... pada thumbnail atau gambar. Cari pada susunan kode seperti di bawah ini pada menu Edit Html template. Bila menemukan kode di mulai dari <img expr: src=.. belum ada expr:alt=... seperti di bawah ini.
<b:if cond='data:post.thumbnailUrl'> <div class='Image thumb' > <img expr:src=' data:post.thumbnailUrl'/>
Maka harus kita tambah dengan struktur kode (expr:alt=..) seperti pada contoh di bawah ini.
<b:if cond='data:post.thumbnailUrl' > <div class='Image thumb' > <img expr:alt=' data:post.title ' expr:src='data:post.thumbnailUrl'/ >
04). Mengatur Struktur Kode Halaman Postingan
Perlu di ketahui, bahwa antara halaman static (halaman depan blog) dan halaman postingan itu ada susunan kode yang berbeda. Dan biasanya yang mengurangi kecepatan loading pada halaman postingan, kita bisa lihat seperti di bawah ini atau semacamnya.
<a expr:href= 'data:post.commentFormIframeSrc' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src=' ' width='100%'/>
Atau kode semacam itu yang ada di template blogger.
Lalu bagaimana membikin kode tersebut menjadi valid?. Caranya cukup simple, kita hanya menambahkan susunan elemen kode seperti pada kotak hijau bawah ini.
Pada kode pertama <expr:href=.... lalu kita menambah kode: title='comment-editor-src' di antara kode tersebut.
Dan pada kode <iframe..... id=' comment-editor' name='comment-editor' kita tambah dengan kode title='comment-editor'...
Dan Hasilnya akan seperti contoh di bawah ini:
<a expr:href= 'data:post.commentFormIframeSrc' title='comment-editor-src' id='comment-editor-src'/> <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' expr:height='data:cmtIframeInitialHeight' frameborder='0' id='comment-editor' name='comment-editor' src=' ' title='comment-editor' width='100%'/>.
Pada contoh di atas yang ada garis bawah itu adalah elemen kode yang di tambahkan.
Selanjutnya masih tentang validasi halaman postingan yang menyangkut gambar dan link Url pada postingan. Hal ini walaupun sepele tapi kadang kita lupa, padahal masalah ini termasuk bagian dari Seo artikel blog. Lalu bagaimana caranya?.
Dalam setiap posting menggunakan gambar, kita wajib mengisi Alt=.... dan title=.... kalau dalam bentuk script Html misalnya: <a href=....alamat url gambar.jpg" lalu tambahkan title="judul postingan">, Selanjutnya <img alt="......isi judul postingan"... kemudian tambahkan ukuran gambar height="ukuran gambar". Misalnya: height="210".
Kemudian tentang link Url pada postingan, biasanya ada Anchor Text pada (Baca Juga), maka kita harus menambahkan kode title="judul/text" setelah link url. Misalnya: <a href="https://namablog.com/ ......title-judul-text.html" title="title-text">Isi Text/Title</a>.
Selain membenahi struktur seperti yang ada di atas, sebenarnya masih banyak yang perlu kita benahi pada kode template. Namun, hal tersebut bisa di cari elemen-elemen kode tertentu dan di coba sendiri, serta jangan lupa untuk menganalisanya lewat "Pagespeed Insights". Agar tahu mana yang perlu di perbaiki.
Tidak ada komentar:
Posting Komentar