Jasa Edit Blog: Proses Optimasi Blog Kedinasan.com

Banyak yang menghubungi saya untuk bertanya berapa biaya JASA EDIT SEO TEMPLATE BLOG, lantas dari sekian penanya tersebut, yang benar-benar serius sampai pengerjaan blog, tidak sebanyak yang bertanya. Memang saya tidak pernah mematok harga jasa edit template blog, karena memang tidak ada standarnya. Saya biasa menilai harga jasa edit blog berdasarkan template yang telah mereka pakai, fitur-fitur yang diminta, skor awal SEO dan Best Practices dan Accessibility, atau menilai tampilan UI.

Jika customer setuju dengan harga yang saya sebutkan berdasarkan penilaian awal tadi, proses pengerjaan berlanjut sampai selesai, tapi jika calon customer tidak setuju, ya tidak sampai saya kerjakan, tapi setidaknya saya telah memberikan mereka manfaat berupa penilaian atas blog mereka. Namun bagi calon customer yang memang sangat serius ingin memperbaiki blognya menjadi lebih bagus, kebanyakan memakai jasa saya dan tidak sekedar bertanya lalu menghilang tanpa konfirmasi.

Salah satu customer saya yang serius menggunakan jasa Mas Trigus untuk edit blog adalah blog kedinasan.com, blog yang mengupas tentang informasi sekolah kedinasan, baik itu sekolah kedinasan yang ikatan dinas maupun non ikatan dinas. Pemiliknya bernama Mas Muhammad Arif Ahsan. Ia menghubungi saya melalui nomer WA 081358999660.

Penilaian Awal Blog Kedinasan.com

Awal saya membuka alamat blog tersebut, saya langsung bisa menebak bahwa ia memakai template buatan Mas Sugeng, yaitu template VioMag. Saya sudah familiar dengan template ini karena karena sudah beberapa kali mengerjakan edit SEO blog yang kebetulan memakai template VioMag. Dan untuk memastikan bahwa template tersebut resmi (asli) saya bertanya pada Mas Ahsan dari mana mendapatkan template tersebut, ia mengatakan bahwa template ini diberikan oleh temannya yang telah membeli template ini namun tidak dipakai. Saya bersyukur karena ini asli dan bukan hasil kloning. Saya pernah menolak tawaran untuk edit SEO setelah tahu bahwa template yang dipakai merupakan template hasil kloning.

Hasil penilaian dari Google Lighthouse, template tersebut sudah memiliki skor 100 yang berarti sudah di angka tertinggi, namun untuk poin lain, nilai masih di bawah standar. Untuk gambaran awal berdasarkan nilai dari Lighthouse seperti ditunjukkan pada gambar di bawah ini:

Selain itu juga ada beberapa pengaturan warna yang tidak tepat antara background dan forground sehingga menyebabkan pengaruh pada skor, seperti yang telah berlaku, bahwa antara latar belakang dan obyek depan harus kontras sehingga mudah terbaca. Pada blog ini kasus terjadi di setting warna logo dan background yang lebih didominasi oleh warna hijau.

Masuk lebih dalam ke dasbor blog, terdapat script widget sidebar yang terpasang namun tidak terlihat di homepage, mungkin karena ada kesalahan kode. Sedangkan untuk layanan HTTPS yang sebenarnya gratis dari blogspot juga belum terpasang, blog masih memakai HTTP saja. 

Secara keseluruhan saya mencatat apa saja yang harus diperbaiki, untuk perbaikan yang minor (masalah kecil) saya tidak terlalu mempersoalkan, karena mudah saya benahi, jadi tidak saya sebutkan di sini.

Proses Optimasi Blog Kedinasan.com

Yups, setelah melakukan pengecekan secara menyeluruh terhadap blog, saya melakukan optimasi. Namun yang harus anda ketahui adalah, saya akan meminta akses masuk ke dalam blog dan tahu jeroan blog tersebut, dan pasti saya menjaga kerahasiaan anda.

Proses optimasi ini saya catat dan saya pos di sini setelah mendapatkan ijin dari pemiliknya. Alih-alih penting, ini juga sebagai catatan apa yang telah saya kerjakan supaya jika anda ingin memakai jasa saya, tahu apa saja yang bisa saya lakukan.

1. Membuat Widget Artikel Terbaru

Karena blog ini belum memiliki widget sidebar, maka saya membuatkan widget artikel terbaru, dengan menambahkan style dan script artikel terbaru. Script tersebut saya dapat dari blog teman.

Jika anda berkenan dengan kode script ini untuk dipasang di blog anda silakan ikuti salin kodenya.

Sedangkan style yang dipasang di kode HTML blog adalah di bawah ini, kode ini disimpan di atas </style> :  

/* Artikel Terbaru */
.artikel-terbaru ul li {
border-bottom: 2px dotted #d0e0e3;
padding-bottom: 8px;
margin-bottom: 8px;
font-weight: 500;
}
.list-label-widget-content ul li, .LinkList ul li, .PageList ul li {
border-bottom: 2px dotted #d0e0e3;
padding-bottom: 5px;
}
.artikel-terbaru ul li:before, .list-label-widget-content ul li:before, .LinkList ul li:before, .PageList ul li:before {
content: "\f14b";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
margin-right: 6px;
}
.artikel-terbaru ul li:before {
content: "\f14b";
}
.list-label-widget-content ul li:before {
content: "\f07b";
}
.LinkList ul li:before {
content: "\f14c";
}
.PageList ul li:before {
content: "\f249";
}

Kemudian pasang kode ini (di bawah) di widget yang dikehendaki, paling pas ya di sidebar:

<div class='artikel-terbaru'>
<script>
function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>";document.write(n)}document.write("</ul>")}
</script>
<script src="/feeds/posts/summary/?max-results=9&alt=json-in-script&callback=artikelterbaru"></script>
</div>

2. Mengatur Font Blog

Semula blog ini memakai font Arial sebagai font standar, lalu saya ubah memakai font Roboto. Hal ini saya anggap perlu karena Roboto bagus untuk diterapkan di blog. Bukan cuma mengganti jenis font saja, saya juga mengatur besar kecilnya font --font size-- disesuaikan dengan tampilan yang sudah ada. Ukuran font yang proporsional dengan jenis tampilan akan menjadi lebih elegan dilihat.

3. Mengaktifkan HTTPS

Blogspot memberikan layanan HTTPS secara gratis, kita bisa mengaktifkan dengan mudah melalui dasbor blogspot.com. Karena blog ini masih memakai HTTP, maka solusi yang saya berikan untuk masalah ini adalah mengaktifkan HTTPS terlebih dahulu.

Saat hendak diaktifkan, muncul keterangan eror kode bX-gu9e7i pada dasbor blog, kesalahan ini memang jarang sekali ditemui, tapi tidak menutup kemungkinan muncul masalah. Untuk mengatasi masalah ini saya mencoba dengan cara mengubah url www.blogger.com menjadi draft.blogger.com. Namun setelah saya coba, masalah ini tetap tidak bisa diatasi. Jadi kemungkinan besar masalah ada di tempat lain.

Saya curiga masalah ini timbul dari pengaturan DNS penyedia domain, dan ternyata setelah saya masuk ke dalam dasbor penyedia domain, terdapat kejanggalan. Ada dua domain dengan nama yang sama, tapi berbeda status. Status pertama ditandai belum aktif, dan satunya masih aktif.

Saya menghubungi customer service penyedia domain dan melaporkan kejanggalan ini. Mereka melakukan penghapusan terhadap nama domain yang statusnya masih belum aktif. Saya kembali memasukkan kode DNS dari blog bersangkutan ke kolom DNS penyedia domain. Ketika saya cek setingan DNS di domain yang statusnya aktif, ada pengaturan yang salah. Untuk teks dns yang harusnya ditautkan dari blogger ke kolom DNS, tidak sama. Saya curiga ini berkaitan dengan custom domain pertama yang pernah di setting di blog berbeda sebelumnya.

Namun sampai di sini, ketika saya kembali melakukan setting di dasbor blog, domain tidak bisa disimpan, keteragannya masih sama, dan yang paling membingungkan ternyata direk dari namadomain.com ke www.namadomain.com tidak bisa bisa disave. Padahal ketika saya cek status propagrasi domain, status sudah lengkap alias sudah terdeteksi di berbagai server.

Saya kemudian melakukan improvisasi dengan cara menghapus setting custom domain sebelumnya, dan menyimpan domain bawaan blogger terlebih dahulu, kemudian saya save. Lalu kembali memasukkan custom domain dan menyimpannya kembali. Ternyata cara ini bekerja dengan baik. Lebih lagi, ternyata setting https bisa disave dengan lancar. Hasilnya baik, blog sudah memakai HTTPS.

4. Mengatur Gambar dan Teks Postingan Yang benar

Ini hanya sebagai contoh bagaimana mengatur pos blog yang baik dan benar. Misalnya menambahkan gambar yang proporsional berukuran 1280 x 720 pixel (rekomendasi). Termasuk mengaur tata letak post blog sehingga telihat menjadi lebih sempurna. Penting untuk mengatur nama dan alt tag gambar supaya lebih CEO. Jika dilakukan dengan benar, maka gambar akan mudah diindeks oleh robot pencarian google.

5. Mengedit Ulang Logo Kedinasan.com

Logo yang terpasang pada dasarnya sudah bagus dan unik, namun untuk warna yang diberikan masih belum cocok. Dengan background harusnya memakai warna yang lebih kontras, dalam kasus ini saya mengubahnya menjadi putih #ffffff sehingga terlihat lebih jelas.

6. Memasang Script Statically Untuk mempercepat Loading Image

Statically adalah layanan CDN yang dapat membantu loading web lebih cepat, biasanya untuk bisa memakai CDN ini kita harus melakukan pharse satu-persatu link image. Namun dengan bantuan Bang Adhy Suryadi, kita bisa memasang script ini sehingga secara otomatis semua image memakai CDN Statically.io. Thanks Bang Adhy, thank Statically. Jika anda menginginkannya silakan pasang kode ini di atas kode

<script>
//<![CDATA[
var images = document.getElementsByTagName('img');
  for (var i = 0; i < images.length; i++) {
    images[i].src = images[i].src.replace(/.*?:\/\//g , "https://cdn.statically.io/img/");
  };
//]]>
</script>

Secara umum saya juga melakukan edit mayor pada beberapa kode sehingga menaikkan skor pada Google Lighthouse yang tentunya tidak saya ulas di sini karena terlalu panjang. Setelah melakukan optimasi kemudian saya meminta kepada pemilik blog untuk melihat dan mengulasnya. Hasilnya alhamdulillah PUAS. Dengan ini berarti pekerjaan saya telah usai.

Terima kasih kerjasamanya, semoga ada banyak calon customer yang percaya dengan apa yang telah kerjakan di Jasa Edit Blog. Oh ya, jika anda ingin tahu bagaimana reaksi Mas Arif Ahsan, silakan baca artikel yang telah ia buat. Baca di sini: Optimasi Blog Kedinasan.com oleh Mas Trigus.