Cara Membuat Sitemap SEO di Website Blogger dengan Mudah

Liputan Indonesia, - Membuat Sitemap SEO di Blogger - Dunia Blogger dan SEO tidak akan pernah lepas dengan yang namanya Sitemap. Sitemap ini memiliki banyak manfaat jika diterapkan pada sebuah website atau blog. Maka perlu untuk membuat sitemap SEO di Blogspot untuk mendongkrak artikelmu di SERP (Search Engine Result Page).

Lalu apa Sitemap itu? Sitemap di blogger sendiri ada 2 macam yaitu sitemap untuk GSC (Google Search Console) dan sitemap untuk user yang tampil di halaman/page blogspot yang Anda kelola. Masih pusing? Mari kita jabarkan lagi dengan jelas di bawah ini.

• Sitemap SEO Blogger untuk GSC (Google Search Console)

Google Search Console merupakan tools SEO milik Google yang sangat penting perannya dalam menunjang SEO di blog Anda. 

Mengapa sangat berpengaruh pada SEO? Karena fungsi tools ini adalah mempercepat index yang dilakukan oleh bot Google sehingga dapat muncul di Search Engine tanpa perlu menunggu berhari-hari.

Terus apa dampak jika kita tidak memakai tools ini? Seperti yang sudah dijelaskan diatas bahwa fungsinya adalah mempercepat index jadi jika kamu tidak menerapkannya maka blogmu akan sangat lama terindex oleh bot Google.

Singkatnya GSC adalah sinyal kepada bot Google bahwa blogmu memiliki artikel baru yang ingin cepat di index. Nah, nantinya websitemu akan melewati tahap Crawling > Indexing > Rangking.

Di tahap Rangking inilah nantinya Google akan memilih blog mana yang bagus dan relevan untuk pembacanya. Oleh karena itu pemahaman mengenai Search Intent sangat perlu bagi pemain SEO.

Jadi apa fungsi Sitemap di GSC atau biasa disebut Sitemap XML? Sitemap XML berfungsi untuk mempermudah bot Google untuk menjelajahi, membaca, dan mengindex blogmu jadi wajib ya sob untuk digunakan.

• Sitemap SEO Blogspot untuk User (Pengguna)

Sering melihat halaman info blog terdapat sitemap atau daftar isi? Singkatnya Sitemap untuk user adalah sebuah halaman/page di blog yang memuat informasi artikel kita dan dikelompokkan berdasarkan label yang ditarget sehingga memudahkan user untuk menjelajahi artikel kita baik yang lama maupun baru.

Sebenarnya di blogger sudah ada sitemap default/bawaan. Namun dari segi tampilan kurang menarik sehingga UX (User Experience) yang di berikan kurang bagus. Di artikel kali ini saya akan menjelaskan cara membuat sitemap SEO di blogger dengan tampilan yang responsive serta bagus untuk UX blogmu.

Yang paling menarik dari sitemap SEO kali ini adalah artikel akan dikelompokkan berdasarkan label. Dan postingan baru akan masuk ke dalam daftar isi tanpa perlu memasukkan satu persatu. Namun ada catatan kalian harus sedikit menguasai kode HTML basic.

DAFTAR ISI

Setelah panjang lebar menjelaskan pengertian sitemap yang dibagi menjadi 2 bentuk. Kini saatnya kita membahas manfaat sitemap terhadap blog kita.

Manfaat Sitemap SEO Blogspot

Sebelum menuju ke tutorial pembuatan sitemap alangkah baiknya jika kita membahas sejenak manfaat yang di dapat dari pembuatan sitemap di blog, untuk membuat Anda lebih yakin mengenai segudang manfaat penting dari pembuatan sitemap.

Berikut manfaat sitemap SEO untuk blog:

1. Mempercepat Index bot Google.
2. Mendongkrak SEO di blog.
3. Membantu User mempermudah mencari artikel berdasarkan label.
4. Mempermudah mengetahui postingan terbaru di blog.
5. Memberikan ruang informasi kepada pengguna.

Nah, itulah sob beberapa manfaat membuat sitemap SEO di blogspot. Selanjutnya kita menuju tutorial pembuatan sitemap yang sudah saya siapkan dengan penjelasan yang mudah di mengerti dan simpel.

Contoh Sitemap SEO di Blogger

Berikut adalah beberapa contoh sitemap responsive dan fast loading yang dapat kamu coba terapkan di blogmu. Pastikan copy kodenya dengan teliti ya sob.

1. Sitemap SEO Blogspot Versi Pertama

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style>
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script>
<script src="/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script></div>

2. Sitemap SEO Blogspot Versi Kedua

<style type="text/css">
.tabbed-toc {margin:0 auto;background-color:#2f77bd;box-shadow: 0 0 7px rgba(5, 5, 5, 0.34);overflow:hidden;
position:relative;color:#333;border: 1px solid #9C9C9C;}
.tabbed-toc .loading {display:block;padding:10px 12px;font:normal bold 12px/normal Helmet,FreeSans,Sans-Serif;
color:white;}
.tabbed-toc ul,.tabbed-toc ol,.tabbed-toc li {margin:0;padding:0;list-style:none;}
.tabbed-toc .toc-tabs {width:20%;float:left;}
.tabbed-toc .toc-tabs li a {display:block;font:normal bold 12px/28px Helmet,Freesans,Sans-Serif;overflow:hidden;text-overflow:ellipsis;color:#fff;text-transform:uppercase;text-decoration:none;
padding:7px 15px;cursor:pointer;box-shadow: 0px 1px 1px rgb(255, 255, 255);}
.tabbed-toc .toc-tabs li a:hover {background-color:#4086E0;color:white;box-shadow: 0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:#FFF;color:black;box-shadow: 0 0 7px rgba(0,0,0,.7);
z-index:5;margin:0 -1px 0 0;/* cursor:text; */}
.tabbed-toc .toc-content,.tabbed-toc .toc-line {width:80%;float:right;background-color:white;border-left:5px solid #1E84BC;box-sizing:border-box;}
.tabbed-toc .toc-line {float:none;display:block;position:absolute;top:0;right:0;bottom:0;box-shadow:0 0 7px rgba(0,0,0,.7);}
.tabbed-toc .panel {position:relative;z-index:5;font:normal normal 10px/normal Helmet,FreeSans,Sans-Serif;}
.tabbed-toc .panel li a {display:block;position:relative;font-weight:bold;font-size:12px;color:#000;line-height:20px;padding: 10px 12px;
text-decoration:none;outline:none;overflow:hidden;}
.tabbed-toc .panel li time {display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right;}
.tabbed-toc .panel li .summary {display:block;padding:10px 12px 10px;font-style:italic;
border-bottom:4px solid #275827;overflow:hidden;}
.tabbed-toc .panel li .summary img.thumbnail {float:left;display:block;margin:0 8px 0 0;padding:4px;
width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa;}
.tabbed-toc .panel li:nth-child(even) {background-color:#66A9FF}
.tabbed-toc .panel li a:hover,.tabbed-toc .panel li a:focus,.tabbed-toc .panel li a:hover time,.tabbed-toc .panel li.bold a {
background-color:#333;color:white;outline:none;}
.tabbed-toc .panel li.bold a:hover,
.tabbed-toc .panel li.bold a:hover time {background-color:#222}
.post ol li::before {content: none;}
.post ol li {margin:0;}
@media (max-width:700px) {
.tabbed-toc {border:2px solid #333}
.tabbed-toc .toc-tabs,.tabbed-toc .toc-content {overflow:hidden;width:auto;float:none;display:block;}
.tabbed-toc .toc-tabs li {display:inline;float:left;}
.tabbed-toc .toc-tabs li a,.tabbed-toc .toc-tabs li a.active-tab {background-color:#2f77bd;box-shadow:2px 0 7px rgba(0,0,0,.4);}
.tabbed-toc .toc-tabs li a.active-tab {background-color:white;color:#333;}
.tabbed-toc .toc-content {border:none}
.tabbed-toc .toc-line,
.tabbed-toc .panel li time {display:none}
.tabbed-toc .panel li a{height: auto;}
</style>
<div class="tabbed-toc" id="tabbed-toc">
<span class="loading">Memuat…</span></div>
<script>
var tabbedTOC = {
blogUrl: "/", // Blog URL
containerId: "tabbed-toc", // Container ID
activeTab: 1, // The default active tab index (default: the first tab)
showDates: false, // `true` to show the post date
showSummaries: false, // `true` to show the posts summaries
numChars: 200, // Number of summary chars
showThumbnails: false, // `true` to show the posts thumbnails (Not recommended)
thumbSize: 40, // Thumbnail size
noThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC", // A "no thumbnail" URL
monthNames: [ // Array of month names
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true, // Open link in new window?
maxResults: 99999, // Maximum post results
preload: 0, // Load the feed after 0 seconds (option => time in milliseconds || "onload")
sortAlphabetically: true, // `false` to sort posts by published date
showNew: 7, // `false` to hide the "New!" mark in most recent posts, or define how many recent posts are to be marked
newText: ' &ndash; <em style="color:red;">New!</em>' // HTML for the "New!" text
};
</script>
<script src="https://cdn.jsdelivr.net/gh/tovic/dte-project@2fd2d2971c3398029ea5e149696447243e7f4d94/tabbed-toc.min.js"></script>

Cara Membuat Sitemap SEO di Blogger untuk User

Untuk cara penerapannya silahkan simak langkah-langkahnya di bawah ini dengan teliti:

1. Pertama, Login ke akun Blogger Anda terlebih dahulu.

2. Selanjutnya pergi ke Halaman > Buat Halaman baru seperti gambar di bawah ini.

3. Kemudian jika telah masuk di dashboard Halaman. ubah mode menulis Compose ke HTML, lalu copy kode sitemap SEO diatas ke dashboard mode HTML seperti di bawah ini.

4. Setelah di Copy Paste saatnya Publish.

5. Klik Lihat untuk memastikan pemasangan benar apa tidak.

6. Copy link dari halaman sitemap dan paste di template Blogger Anda seperti gambar di bawah.

7. Setelah itu, simpan dan lihat hasil akhir pembuatan sitemap apakah sesuai dengan ekspetasi Anda.

Catatan: Jika Anda mengalami masalah atau error, copy ulang kode diatas dan paste tanpa membuat halaman baru.

Cara Membuat Sitemap XML di Google Webmaster

Nah, setelah membuat sitemap untuk User saatnya kita beralih dengan membuat sitemap XML yang akan di simpan di Google Webmaster Tools. Cara ini sangat mudah sehingga kalian tidak akan mengalami masalah. 

Berikut adalah tutorial cara membuat Sitemap XML untuk blogspot dan Blogger custom domain:

1. Tambahkan sitemap.xml di akhir domain Anda seperti:

https://www.amatiterus.com/sitemap.xml

2. Sitemap Atom dengan menambahkan feeds/posts/default?max-results=500. Jika ditambahkan pada blog akan seperti ini:

https://www.amatiterus.com/feeds/posts/default?max-results=500

3. Pasang sitemap di Google Webmaster dengan hanya menambahkan sitemap.xml di peta situs. Untuk contohnya seperti gambar di bawah ini.

4. Proses pemasangan selesai dan sitemap telah berhasil di aplikasikan.

Akhir Kata 

Gimana sob mudah bukan cara membuat sitemap SEO Blogger dan blogspot. Nah jika terjadi kegagalan kalian bisa hubungi saya via Form Kontak yang tersedia. Jangan lupa juga share artikel ini agar dapat bermanfaat bagi banyak orang. 

Sumber:

1. https://www.amatiterus.com/2020/05/cara-membuat-sitemap-seo-di-blogger.html

2. https://www.sribu.com/id/simple-web-design