Berikut Tutorial Cara Memasang Https atau SSL Pada Blogger.com / Blogspot
Memasang Https memunyai beberapa kelebihan dan tetntunya akan lebih enak dilihat ketika https berwarna hijau, itu menandakan bahwa interaksi antara pengakses / pengunjung web menjadi aman
serta https terlihat lebih profesional
dan saya pernah membaca suatu artikel
apalagi untuk website toko online yang melakukan pembayaran kartu kredit atau credit card seperti Visa, mastercard ataupun yang lainnya yang berhubungan informasi sensitif
fungsi https lainya adalah search engine seperti google, bing, yahoo dll akan mengutamakan atau menilai bagus untuk yang menggunakan https
karena disni tutorial menggunakan https menggunakan cloudflare dan cloudflare sendiri menggunakan teknologi CDN dimana CDN ini membuat loading website menjadi cepat, untuk selebihnya mengenai teknologi CDN bisa dibaca di google
intinya CDN mempunyai server di beberapa tempat dan menyesuaikan dengan lokasi kita berada dan membuat loading website lebih cepat
disini saya menggunakan cloudflare yang versi gratis
selebihnya mengenai keuntungan dan kelebihan https maupun CDN bisa di cari lagi di google
catatan:
dan yang harus diperhatikan sebelum memutusakan memasang https adalah ketika dalam proses perubahan dari http ke https trafik website akan berkurangsampai google webmaster meng crawl kembali web kita
dan ketika web kita sudah terindeks google dengan https apabila menggantinya lagi ke http maka web kita akan kehilangan trafik dan https mungkin tidak bisa di redirect ke http di blogger,
berikut langkah langkahnya
#1. Daftar Cloudflare
dan setelah daftar kita diharuskan memasukan domain untuk di scan, setelah di scan kita dihadapkan dengan pengaturan Name Server maupun DNS. intinya pada tahap ini kita mengarahkan Name Server kita ke cloudflare
#2. Setting DNS Di Cloudflare
Blog kita harus sudah menggunakan Custom Domain jadi sudah tidak menggunakan .blogspot.com lagi
dan settingan DNS seperti Cname dan lain lainnya harus di pindahkan ke cloudflare berikut penampakannya
di bagian langkah #1 dan #2 ini pada intinya sama saja dengan custom domain blogger pada umumnya, dan di cloudflare juga bisa membuat subdomain jika mau, sebagai contoh diatas saya membuat subdomain "store"
#3. Langkah ke tiga ini mengaktifkan SSL atau HTTPS Pada Cloudflare
pada langkah ketiga ini membutuhkan waktu untuk mengaktifkan SSL ini, bisa dilihat di gambar berikut ini, pertama pilih Crypto dan pilih Flexible.
sambil menunggu SSL ini aktif kita setting pengaturan yang lainnya lanjut ke langkah #4
#4. Langkah Selanjutnya Purge
pada langkah ini mudah tinggal pilih Purge dan klik pilihan Purge Everything
#5. Langkah Ke lima ini bisa dibilang penting yaitu Page Rule
Pada bagian ini kita mengatur alamat web kita di arahkan ke https, lanngkah lagkahnya kita klik Page Rule ---> lalu pilih Create Page Rule ---> setelah ini akan menemukan tampilan seperti dibawah iniikuti petunjuk gambar untuk mengisiya
contoh dibawah ini saya mengisi http://*resistor.id/* dan bagian bawah pilih "Always Use Https"
masih di bagian Page Rule berikut settingan kedua dari Page Rule
Isikan seperti contoh berikut http://resistor/* ---> pilih Forrwarding Url ---> pili 301 Permanent Redirect ---> dibawahnya ketikan domain kalian https://www.resistor.id/$1
Selanjutnya Masukan https://resistor.id ---> Forwarding URL ---> pilih 301 Permanent Redirect --->
dibawahnya ketikan domain kalian ketikan https://www.resistor.id/$1
#6. Langkah ke enam ini langkah Setting Firewall di cloudflare
langkah ini mudah tinggal cari firewall dan pilih Low seperti pada gambar dibawah
langkah ini langkah terakhir dalam menyeting pengaturan di cloudflare selebihnya pengaturan di blogger
#7. Setelah langkah langkah diatas selesai, Langkah Selanjutnya Menambahkan Script
berikut ini script pelengkap, langkah langkhnya Buka Blog Template edit Html lalu cari </head>dan letakan script berikut diatas kode </head> dan jangan luapa ganti domain dengan domain anda
<script>
$(document).ready(function() {
$("a").each(function() {
var i = $(this).attr("href");
var n = i.replace(http://www.DomainAnda.com, "https://www.DomainAnda.com");
$(this).attr("href", function() {
return n
})
})
});
</script>
Setelah itu langkah selanjutnya masih tentang mengedit Kode
temukan Script dibawah ini
<b:include data='blog' name='all-head-content'/>
lalu apabila sudah ketemu hapuslah script tersebut, dan setelah dihapus , jika tidak ketemu coba cari dengan memasukan sebagian kodenya saja gunakan CTRL + F -head-content'/>
dan apabila masih tidak ditemukan kode diatas maka lewati saja dan langsung ke tutorial selanjutnya
Pastekan Kode Berikut di bawah kode <head>
dan jangan lupa ganti domain, blog ID, dan bologtitle dengan milik anda
<link href='https://www.DomainAnda.com/favicon.ico' rel='icon' type='image/x-icon'/>
<meta content='blogger' name='generator'/>
<link href='https://www.DomainAnda.com/feeds/posts/default' rel='alternate' title='BLOGTITLE - Atom' type='application/atom+xml'/>
<link href='https://www.DomainAnda.com/feeds/posts/default?alt=rss' rel='alternate' title='BLOGTITLE - RSS' type='application/rss+xml'/>
<link href='https://www.blogger.com/feeds/BLOGID/posts/default' rel='service.post' title='BLOGTITLE- Atom' type='application/atom+xml'/>
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/2591933621-ieretrofit.js"></script>
<![endif]-->
<meta expr:content='data:blog.url' name='og:url:domain'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
setelah mengikuti langkah langkah diatas Save template tersebut
#8. Menganalisa Mixed Content Agar Https / SSL Menjadi Hijau
Pada langkah ini sangat penting, karena menentukan Hijau tidaknya https kita, biasanya di browser chrome sangat sensitif diharuskan benar benar tidak ada mixed content,berikut langkah untuk mengatasi Mixed Content
1. Pertama ubah semua http:// dengan https:// pada edit template, pada langkah ini utamakan yang di ubah menjadi https adalah link gambar, kode java script, dan tempat kode java script maupun tempat menyimpan gambar tersebut harus sudah support https
2. Jika langkah pertama sudah dilaksanakan dan masih belum hijau, buka web anda dan tekan tekan tombol ini pada keyboard " CTRL + Shift + J " maka disana akan terlihat jika ada yang masih Mixed Content, lalu perbaiki mixed content yang ditemukan tersebut contoh:
“Mixed Content: The page at ‘https://<blog-anda>.com/’ was loaded over HTTPS, but requested an insecure script ‘http://<some-url>/script.js’. This request has been blocked; the content must be served over HTTPS.”
disana bisa kita lihat link kode JS tidak menggunakan https maka editlah pada template kita
hal hal lain yang penting jika https masih belum hijau
1. Terkadang jika blog kita menggunakan favicon bukan bawaan maka favicon tersebut akan terdeteksi tidak https dan menyebabkan Mixed Content, maka yang harus kita lakukan adalah meremove favicon tersebut lalu mengUpload nya lagi,
dan jangan lupa bersihkan dulu browser cookie dan yang lainya lalu buka kembali blog kita
2. Beberapa kasus pada mixed content
Mixed Content: The page at ‘http://www.resistor.id/‘ was loaded over a secure connection, but contains a form which targets an insecure endpoint ‘http://www.resistor.id/search’. This endpoint should be made available over a secure connection.
cara mengatasi masalah diatas kita harus edit template html kita, cari kode dibawah ini gunakan CTRL + F kalau tidak ditemukan gunakan kombinasi search sebagian kode tersebut seperti blog.searchUrl'>
<form expr:action='data:blog.searchUrl'>lalu jika sudah ditemukan ganti kode tersebut dengan kode berikut ini :
<form expr:action='data:blog.searchUrl.https'>Lalu save template
3. Kasus Mixed Content Lainnya
kasus Mixed Content pada blogger lainnya adalah berikut mixed karena navbar (navigasi bar)
www.blogger.com/navbar.g?targetBlogID=
dalam mengatasi mixed content ini saya mengatasinya dengan cara menghapus kode yang berkaitan dengan link tersebut, cara menghapusnya kita harus menghapus dari awal kode dari blogger navbar tersebut
#9. Langkah terakhir Setting Robots.txt dan Submit kembali ke Google webmaster
langkah terakhir ini untuk mengoptimalkan SEO setelah migrasi dari http ke https1. buka dashboard blogger ---> pergi ke setting ----> dan cari Search Preference ---> cari Crawlers and indexing ----> Custom Robots.txr ----> piliih enable lalu pastekan text berikut
jangan lupa ganti dengan domain anda lalu save
User-agent: Mediapartners-Google2. langkah kedua seperti biasa kita men submit web kita ke google webmaster tools
Disallow:
User-agent: *
Disallow: /search
Allow: /
Sitemap: https://www.DomainAnda.com/sitemap.xml
masuk ke www.google.com/webmasters/
+ di google search console, add new property
masukan domain anda
https://www,DomainAnda.com/
lalu cari crawl sitemap dan submit sitemap kita https://www,DomainAnda.com/sitemap.xml
pada langkah ini pada intinya sama dengan mensubmit ke webmaster
Catatan : semua template blogger mempunyai kendala yang berbeda beda
Akhir Kata:
Akhir kata saya menuliskan ini untuk mendokumentasikan yang menurut saya penting maupun bermanfaat karena jika ilmu atau yang kita pelajari tidak dituliskan dan tidak di amalkan mungkin ilmu yang kita pelajari akan lupa lagi, olehkarena itu ilmu atau apapun yang kita pelajari akan tersimpan jika dituliskan dan di amalkan
Sekian
