Cara Optimasi SEO Template Viomagz ala Max Ikhsan
Salah satu faktor yang membuat blog bisa masuk ke halaman pertama google adalah dengan melakukan optimasi pada blog dengan mengikuti perkembangan SEO dari waktu ke waktu.
Blog yang sudah teroptimasi dengan baik biasanya lebih diutamakan oleh google ketimbang blog yang tidak melakukan optimasi sama sekali.
Perlu diketahui bahwa membuat blog dengan CMS Bogger.com memiliki keterbatasan tidak bisa menggunakan plugin seperti Wordpress.org. Oleh karena itu optimasi harus di lakukan secara manual dalam template yang digunakan blog.
Berhubung template yang digunakan blog saya adalah viomagz versi jadul yang sudah di redesign, maka dalam artikel ini saya akan memberikan tutorial blogger yang membahas cara melakukan optimasi template viomagz agar makin SEO.
Apa Itu SEO?
SEO adalah singkatan dari "Search Engine Optimization." SEO merupakan teknik optimasi sebuah blog atau website agar bisa mendapatkan rangking yang bagus di mesin pencarian google.
Semakin bagus ranking SEO suatu blog atau website, semakin besar pula peluang blog atau website tersebut mendapatkan posisi pertama (page one) di mesin pencari google.
Apa SEO Penting Untuk Blog?
Tentu saja SEO sangat penting untuk sebuah blog. Karena dengan melakukan optimasi, maka besar kemungkinan blog akan bisa masuk halaman pertama google.
Sebagai informasi, Sebagian pengguna internet akan lebih memilih blog atau website yang ada di nomor pertama, kedua, dan ketiga pada halaman pencarian google.
Oleh karena itu agar blog bisa ada di posisi pertama di halaman pencarian google, maka melakukan optimasi SEO pada blog sangat penting.
Bagaimana Perkembangan SEO Blog Saat ini?
Jujur saya belum terlalu paham secara garis besar mengenai SEO ini. Namun dari beberapa eksperimen yang saya lakukan, ada beberapa artikel yang baru di publikasi dalam blog ini sudah bisa masuk ke halaman pertama google.
Itu artinya sedikit besar optimasi yang saya lakukan pada blog ini sudah membuahkan hasil.
Apa Optimasi SEO Bisa Dilakukan di Template Lain?
Tentu saja bisa, namun berhubung template yang digunakan blog saya adalah viomagz, maka saya hanya akan membagikan tips melakukan optimasi secara maksimal pada template viomagz.
Cara Lengkap Optimasi Template Viomagz
Berikut ini adalah cara yang saya lakukan dalam mengoptimasi template viomagz di blog ini agar makin SEO.
A. Optimasi Kecepatan Loading
Salah satu faktor yang membuat blog bisa bersaing dengan blog lain di mesin pencari google adalah kecepatan loading blog itu sendiri. Berikut ini adalah beberapa cara yang saya lakukan dalam meningkatkan kecepatan blog ini.
1. Menonaktifkan Navbar
Navbar adalah sebuah fitur bawaan blogger yang cukup penting apabila kita menggunakan template bawaan blogger seperti PT.Keren Sekali. Namun penggunaan navbar di template viomagz justru malah menambah berat loading pada blog.
Cara menonaktifkan navbar pada blog:
- Buka Dashboard Blogger
- Pilih Tata Letak
- Pada tab Gadget Navbar klik Edit
- Pilih Nonaktif
- Simpan
Baca: Awal Mula Membuat Blog Dengan Nama Max Ikhsan
2. Memasang Lazy Load Gambar
Salah satu cara yang bisa membuat kecepatan loading blog menjadi lebih bagus adalah dengan memasang script Lazy Load. Fungsi dari Lazy Load adalah untuk menunda pemuatan gambar sebelum pengunjung melakukan scrol.
Berikut ini cara memasang Lazy Load di template viomagz.
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Pilih salah satu kode di bawah ini dan Tambahkan kodenya sebelum </body>
<script>
//<![CDATA[
// LazyLoad
function loadScript(d){var o=document.createElement("script");o.src=d,document.body.appendChild(o)}function downloadJSAtOnload(){loadScript("https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazyarlinas.js")}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>Apabila anda sudah pernah menambahkan kode Lazy Size, maka silahkan ganti dengan kode di bawah ini.
<script>
//<![CDATA[
// Lazysizes
var lazysizer=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazysizer||0!=document.body.scrollTop&&!1===lazysizer)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/phantom@master/lazysarline.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazysizer=!0)},!0);
//]]>
</script>Ingat, hanya pilih salah satu kode saja, setelah itu klik simpan.
Agar lazy load di template viomagz bekerja dengan baik, maka silahkan ikuti petunjuk pemasangannya.
Cari semua kode dengan awalan img di template viomagz. Contohnya seperti dibawah ini.
<img src='//www.blogger.com/img/icon_delete13.gif'/>Setelah ditemukan, tambahkan kode class='lazy' untuk kode pertama, dan
class='lazyload' untuk kode yang kedua setelah <img.
Setelah itu, pada bagian src tambahkan data, sampai menjadi data-src.
Maka hasilnya akan seperti ini:
<img class='lazy' expr:alt='data:post.title' expr:data-src='resizeImage(data:post.firstImageUrl, 280, "300:200")' height='186' src='data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=' width='280'/>Klik simpan dan lihat hasilnya.
Untuk result atau demo tidak saya sertakan karena sudah saya pasang dalam blog ini. Jadi apabila anda ingin melihat cara kerja lazy load di template viomagz, maka anda bisa melihatnya saat membuka blog ini.
Bentuknya seperti apa?
Saat anda membuka blog ini maka semua gambar tidak akan tampil sebelum anda melakukan scrol dalam blog ini.
Sebenarnya lazy load ini akan lebih lengkap jika digunakan dalam gambar yang ada dalam postingan. Namun dari beberapa artikel yang saya baca, efek dari pemasangan lazy load gambar dalam postingan kurang bagus untuk SEO.
Namun apabila anda ingin memasangnya maka anda harus mengganti kode s1600 atau S640 dan menambahkan -rw pada link gambar di dalam editor postingan
Lihat contoh dibawah ini!
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwtvelPAaPhK8B3J8JHA-qVdl8epjXe3wCq4kY44VJ48vNe_ytkcji17JnZi6kzgAyOJ0cWcNWdvO_OjjWo4hsEcEDZdCvCKwVkSI8xcP_H5pVsqKDvRcBBYVfrLF8DR8aCPRcFnH_GQ_e6tlELJ69XATVVdVdafdHwd5yH5RZehOozd8kN3soA/w640-h427/cara%20atasi%20leverage%20browser%20caching%20favicon%20di%20blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Mengatasi Loading Akibat Leverage Browser Caching Favicon" class="lazyload" style="border: none;" data-original-height="800" data-original-width="1200" height="426" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfwtvelPAaPhK8B3J8JHA-qVdl8epjXe3wCq4kY44VJ48vNe_ytkcji17JnZi6kzgAyOJ0cWcNWdvO_OjjWo4hsEcEDZdCvCKwVkSI8xcP_H5pVsqKDvRcBBYVfrLF8DR8aCPRcFnH_GQ_e6tlELJ69XATVVdVdafdHwd5yH5RZehOozd8kN3soA/w640-h427/cara%20atasi%20leverage%20browser%20caching%20favicon%20di%20blogger.png" title="Cara Mengatasi Loading Akibat Leverage Browser Caching Favicon" width="640" /></a></div>Berdasarkan eksperimen yang saya lakukan, untuk melakukan pemasangan lazy load pada gambar posting cukup sulit saat ini, karena format markup URL gambar pada postingan sudah berbeda.
Sehingga menurut saya meski lazy load tidak dipasang di postingan, efek lazy load utama yang dipasang di template viomagz sudah cukup signifikan untuk meningkatkan kecepatan loading.
3. Memasang Lazy Load Analytics
Lazy load google analytics bisa membantu mengurangi beban loading dengan menunda pemanggilan javascript eksternal.
Untuk lebih lengkapnya, silahkan buka artikelnya di bawah ini!
4. Menggunakan Gambar Vektor
Agar membuat template viomagz makin cepat loadingnya, maka dalam setiap postingan tutorial blogger dan komputer, saya sengaja selalu membuat gambar dengan format vektor.
Vektor yang saya maksud adalah gambar yang tidak menggunakan banyak warna. Sehingga size gambar akan jauh lebih kecil namun tidak blur. Untuk contohnya, anda bisa lihat gambar yang ada dalam setiap artikel di blog ini.
Agar anda memahami format gambar terbaik untuk blog, sebaiknya baca artikelnya di bawah ini.
5. Mengompress Gambar
Untuk melakukan optimasi pada blog tidak cukup hanya dengan memasang lazy load saja. Saya sendiri selalu berusaha membuat ukuran gambar sekecil mungkin sebelum di upload ke blogger.
Hal ini untuk mengoptimalkan gambar pada postingan agar tidak terlalu memberatkan loading. Terlebih jika gambar dalam postingan tidak menggunakan lazy load.
Untuk mengetahui cara mengompres gambar dengan lengkap, silahkan baca artikelnya di bawah ini.
6. Mengganti Font Awesome Dengan SVG
Dalam template viomagz biasanya sudah terpasang fontawesome. Silahkan cari kode kurang lebih seperti di bawah ini.
<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>Saya menghapus kode tersebut agar beban load bisa berkurang dan blog ini menjadi lebih cepat loadingnya. Namun apabila anda menghapus kode ini maka semua icon font awesome yang ada dalam template viomagz akan hilang.
Agar blog tetap bisa menggunakan icon yang menarik, maka sebagai pengganti font awesome, saya menggunakan icon svg.
Sebenarnya menonaktifkan font awesome di template viomagz tidak memberikan dampak yang signifikan untuk kecepatan loading. Sehingga saya menyarankan anda untuk tidak menghapus font awesome apabila tidak bisa menggantinya dengan icon svg.
7. Tidak Memasang Popular Posts
Salah satu cara yang bisa dilakukan untuk membuat template viomagz memiliki kecepatan loading yang bagus adalah tidak menggunakan widget popular posts.
Terbukti di blog ini kecepatan loading meningkat ketika widget popular posts ini dihilangkan. Namun tentu cara ini hanya sebagai pilihan, karena sebenarnya widget popular posts cukup penting untuk dipasang.
Fungsi popular posts adalah untuk menampilkan postingan yang paling banyak dibaca di suatu blog. Biasanya secara default di template viomagz sudah terpasang widget ini.
Apa efek jika widget popular posts tidak dipasang?
- Loading blog lebih meningkat.
- Pengunjung tidak tau artikel paling populer di blog kita.
Jadi untuk poin nomor tujuh saya kembalikan kepada anda.
8. Memasang Lazy Load Youtube
Saat ini menambahkan video yang di embed dari youtube bisa menjadi nilai lebih dalam suatu blog. Namun tahukah anda bahwa ternyata video yang di embed dari youtube bisa menambah beban loading.
Oleh karena itu saya memasang lazy load youtube di blog ini agar postingan yang menggunakan video dari youtube tidak lemot loadingnya.
Untuk lebih lengkapnya silahkan baca artikelnya di bawah ini.
9. Memasang Lazy Load AdSense
Sama seperti google analytics, google adsense pun menggunakan kode javascript eksternal yang bisa membuat loading blog menjadi lebih lambat. Oleh karena itu untuk mengurangi beban loading akibat kode javascript iklan google adsense, maka kita bisa menambahkan script lazy load adsense di template viomagz dengan cara di bawah ini.
- Buka Dashboard Blogger
- Pilih Menu Tema
- Klik Edit HTML
Tambahkan kode di bawah ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Lazy Load AdSense
var lazyadsense=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyadsense||0!=document.body.scrollTop&&!1===lazyadsense)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyadsense=!0)},!0);
//]]>
</script>Selanjutnya, hapus semua kode JS yang terpasang di unit iklan adsense. Biasanya seperti di bawah ini.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>Klik simpan dan lihat hasilnya.
Prinsip kerja lazy load adsense sama dengan lazy load gambar, yaitu iklan hanya akan muncul saat scrol dilakukan.
10. Mengatasi Leverage Caching Favicon
Salah satu optimasi yang bisa di lakukan di template viomagz adalah mengatasi masalah leverage browser caching favicon. Masalah ini biasanya terdeteksi saat blog di cek menggunakan tool GTmatrix.
Untuk tutorial mengatasi masalah tersebut, anda bisa membacanya lebih lengkap di artikel berikut.
11. Menghapus Numbered Page Navigation
Dikutip dari dirga.id, numbered page navigation adalah sebuah fitur yang memudahkan pengunjung untuk berpindah dari satu halaman ke halaman lainnya.
Sayangnya fitur numbered page navigation di template viomagz versi 2.9 ke bawah menggunakan javascript yang bisa membuat loading blog menjadi lamban.
Untuk menonaktifkan fitur numbered page navigation di template versi 3.0, maka anda tinggl mencari kode di bawah ini.
Caranya buka dashboard blogger, pilih menu tema, pilih edit HTML, dan cari kode tersebut dengan menggunakan CTRL+F. Setelah itu pastekan kode di bawah ini pada kolom pencariannya.
var numberedPagination = trueUbah true menjadi false, lalu klik simpan.
Dari eksperimen yang saya lakukan, justru di template viomagz versi jadul seperti yang digunakan blog ini, dengan mengganti fitur numbered page navigation dengan fitur load more malah membuat skor loading blog ini menjadi berkurang.
Saat menggunakan fitur numbered page bawaan template viomagz versi 2.7.5, kecepatan loading template viomagz yang digunakan blog ini mencapai 96 di web.dev.
Namun setelah mencoba mengganti fitur numbered page nation dengan fitur load more, skor web.dev (speed insight) blog ini malah menurun menjadi 94.
Jadi bagi anda yang menggunakan template viomagz versi 2.0 sebaiknya fitur numbered page nationnya tidak usah diganti dengan fitu load more. Namun untuk anda yang menggunakan template viomagz versi 3.0, mungkin cara ini bisa menambah kecepatan loading blog anda.
12. Menghapus Thumbnail Postingan
Salah satu cara yang paling cepat untuk menaikan skor kecepatan loading template viomagz adalah dengan menghapus thumbnail postingan di halaman homepage.
Cara ini bahkan bisa membuat template viomagz memiliki kecepatan loading dengan skor 99 di versi mobile dan 100 di versi desktop.
Berikut ini cara menghapus thumbnail di template viomagz.
- Buka Dashboard Blogger
- Pilih Menu Tema
- Pilih Edit HTML
Cari dan hapus Kode di bawah ini!
<b:include data='post' name='postthumbnail'/>Cari kode CSS di bawah ini!
info-1, .info-2, h2.post-title, .post-snippet {
margin-left: 275px;
}Ganti tulisan 275px; dengan 0px !important;
Klik simpan dan lihat hasilnya. Halaman homepage blog anda sudah tidak ada thumbnail postingan lagi.
Namun sejujurnya cara ini kurang saya sarankan, karena gambar memiliki peran penting dalam sebuah blog sebagai konten visual yang bisa mewakili isi topik yang di bahas.
Selain itu jika anda tidak bisa mengotak-ngatik template viomagz sendiri, maka saat anda menghilangkan thumbnail di hompage ini otomatis yang tampil di homepage hanya judul postingan saja.
Jujur untuk saya kurang menarik dan terkesan terlalu sederhana. Namun apabila anda mau mencoba ya silahkan saja ikuti cara yang sudah saya jelaskan di atas.
Nah itulah cara optimasi kecepatan loading template viomagz yang diaplikasikan dalam blog ini.
13. Menghapus Snippet Postingan
Salah satu cara yang saya lakukan untuk mempercepat loading blog yang menggunakan template viomagz adalah menghilangkan snippet atau deskripsi postingan pada halaman homepage. Sehingga yang tampil di halaman homepage hanya thumbnail dan gambar postingan saja.
Meski dampak optimasi ini tidak akan signifikan, namun terbukti cara ini bisa membuat loading template viomagz menjadi lebih cepat.
Untuk menghilangkan snippet di template viomagz versi 2.0 cukup mudah. lihat caranya di bawah ini.
- Buka Dashboard Blogger
- Pilih Tema
- Klik Edit HTML
Cari kode CSS di bawah ini!
.info-1, .info-2, h2.post-title, .post-snippet { margin-left: 11px; }
Ganti 11px menjadi 0px.
Klik simpan dan lihat hasilnya.
B. Optimasi Tampilan Template
Selain optimasi kecepatan, tampilan template viomagz yang sudah cantik dan responsif bisa dimodifikasi agar lebih menarik. Berikut ini adalah optimasi tampilan template viomagz di blog ini.
1. Memasang Fitur Dark Mode
Fitur dark mode adalah salah satu fitur yang saat ini banyak dipasang di blog. Fitur dark mode memungkinkan blog berubah warna dari putih menjadi kegelap-gelapan dalam satu kali klik.
Fitur ini tentu memiliki nilai positif bagi pembaca, karena terkadang ada pengunjung yang membaca artikel dalam keadaan low light. Nah jika anda adalah pengguna template viomagz, maka anda pasti tahu bahwa pada template viomagz tida memiliki fitur dark mode bawaan.
Untuk tutorial pemasangan fitur dark mode yang lebih lengkap, silahkan anda baca artikelnya di bawah ini.
2. Memasang Menu Profile
Dalam blog ini, anda akan menemukan sebuah tombol dengan icon logo Youtube disebelah kanan header. Sebenarnya itu adalah sebuah fitur menu profile yang saya modifikasi dari tampilan originalnya di template Ignilplex.
Untuk membuat Menu profile tersebut tidak tumpang tindih dengan menu lain, maka anda bisa melihat cara pemasangan menu profile di viomagz secara lengkap di artikelnya.
3. Mengganti Search Box
Karena template viomagz sudah banyak digunakan, maka saya ingin agar tampilan template viomagz di blog ini sedikit berbeda dari blog lain. Oleh karena salah satu optimasi tampilan yang saya lakukan di template viomagz adalah mengganti search box bawaannya dengan search box ala Ignilplex.
Untuk tutorial cara pemasangannya bisa anda baca secara lengkap di artikelnya berikut ini.
4. Memasang Animasi Header
Salah satu optimasi tampilan yang saya lakukan di template viomagz yang digunakan blog ini adalah menambahkan efek animasi dibagian header. Pemasangan animasi ini saya buat agar menambah kesan wah di blog ini.
Sebenarnya untuk optimasi ini bersifat opsional, karena terkadang ada pengunjung yang hanya mementingkan isi dari konten di blog kita dari pada melihat fitur atau animasi ini itu.
Jadi untuk optimasi nomor empat saya kembalikan lagi kepada anda. Namun apabila anda ingin memasang efek animasi yang sama dengan blog ini, maka silahkan baca artikel lengkapnya di bawah ini.
5. Membuat Tombol Buka Tutup Komentar
Selain membuat tampilan komentar menjadi lebih keren, membuat tombol buka tutup komentar di template viomagz juga bisa menambah kecepatan loading sebuah halaman.
Jika anda perhatikan, kolom komentar yang menggunakan script komentar bawaan blogger biasanya mengharuskan pengomentar login menggunakan akun google.
Biasanya orang akan memasang foto profile di akun google-nya, dan secara tidak sadar gambar profile penulis komentar di kolom komen akan tersemat.
Nah dengan menggunakan tombol buka tutup komentar ini, maka loading halaman akan lebih ringan karena tidak memuat bagian komentar yang sudah terbungkus dalam tombol buka tutup komentar.
Untuk cara pemasangan tombol buka tutup komentar yang lebih lengkap, silahkan baca artikelnya berikut ini.
6. Merubah Ukuran Thumbnail Versi Mobile
Ukuran thumbnail versi mobile tidak sama dengan versi desktop. Pada versi mobile ukuran thumbnail postingan lebih landscap seperti gepeng, sedangkan di versi desktop ukurannya landscap proporsional.
Untuk membuat tamplan thumbnail template viomagz versi mobile sama dengan versi desktop. Maka ukurannya thumbnail versi mobile harus di ubah seperti di bawah ini.
- Buka Dashboard Blogger
- Pilih Tema
- Pilih Edit HTML
Cari Kode di bawah ini!
.img-thumbnail {
width: calc(100% + 30px);
margin: 0px 0px 15px -15px;
height: 160px;
position: relative;
overflow: hidden;
}Ubah ukuran height dari 160px menjadi 250px.
Klik simpan dan lihat hasilnya.
7. Memasang Warna Address Bar di Browser Mobile
Optimasi tampilan lain yang saya lakukan pada template viomagz adalah memasang script untuk membuat warna address bar mengikuti tema warna warna blog ini.
Optimasi tampilan ini hanya bekerja saat blog di buka menggunakan perangkat mobile seperti smartphone dan tablet. Aplikasi browser yang sudah disetting untuk optimasi ini diantaranya:
- Google Chrome
- Firefox
- Opera
- Vivaldi
Untuk cara pemasangan script warna address bar yang lebih lengkap, silahkan baca artikel di bawah ini.
C. Optimasi Pemasangan Iklan
Jika blog anda sudah menjadi publisher google adsense, maka anda wajib melakukan optimasi penempatan iklan di template viomagz. Nah berikut ini adalah optimasi iklan yang saya aplikasikan di blog ini.
1. Memasang Iklan In-feed
Iklan in-feed adalah jenis iklan match ads. Iklan ini akan menyesuaikan tampilannya dengan apa yang ada di hompage blog kita, baik dalam versi mobile atau dalam versi desktop.
Perlu anda ketahui bahwa tampilan homepage versi desktop dan versi mobile template viomagz itu memiliki perbedaan. Oleh karena itu anda harus membuat iklan in-feed yang sesuai dengan kedua versi tersebut.
Untuk mengetahui cara memasang iklan in-feed di template viomagz dengan lengkap, silahkan baca artikelnya berikut ini.
2. Memasang Iklan Parallax
Iklan parallax adalah iklan yang berada di belakang lipatan artikel. Biasanya penempatan iklan ini ada dibagian tengah artikel. Namun Untuk saat ini saya hanya baru berhasil memasangnya di bagian awal artikel pada template viomagz ini.
Untuk tutorial pemasangan iklan parallax yang lebih lengkap di template viomagz. Silahkan baca artikel berikut ini.
Pada dasarnya template viomagz sudah di buat se-SEO mungkin oleh pembuatnya. Namun seiring perkembangan SEO blogger yang terus berubah, maka kita wajib melakukan optimasi semaksimal mungkin agar blog kita bisa bersaing di mesin pencari google.
Melakukan optimasi iklan adsense perlu di lakukan agar pendapatan dari iklan makin meningkat. Selain itu optimasi kecepatan dan tampilan pada template juga perlu di lakukan agar blog ramah SEO dan makin disukai oleh pengunjung.
Nah itulah cara lengkap mengoptimalkan template viomagz agar ramah SEO. Semoga bermanfaat.
Posting Komentar