Cara Membuat Sitemap di Blog (WordPress & Blogger) dengan Gampang

Memudahkan Search engine dalam melakukan indexing pada blog adalah hal yang sangat penting. Salah satu caranya adalah dengan membuat sitemap. Lalu bagaimana cara membuat sitemap di blog?

Sebentar lagi kamu bisa dapatkan panduannya…

Tapi sebelumnya, perlu kamu pahami bahwa search engine adalah salah satu jalan yang digunakan oleh orang-orang untuk mengakses berbagai situs.

Jika situs kamu ingin banyak didatangi oleh pengunjung, maka website atau blog kamu harus bersahabat dengan cara kerja search engine.

Salah satu caranya adalah dengan menerapkan sitemap di situs kamu.

Mengenal Apa itu Sitemap

Sitemap adalah suatu alat yang digunakan webmaster untuk memudahkan indexing ke website atau blog milik mereka.

Sitemap akan membantu Google melakukan crawl ke situs milik kamu. Visibilitas website kamu di mesin pencari akan lebih mudah ditemukan. Dengan demikian situs kamu akan cepat terindex di mesin pencarian Google.

Sebagai catatan, sitemap tidak akan meningkatkan peringkat situs kamu di mesin pencarian.

Dalam sebuah Sitemap terdapat algoritma yang bisa menunjukan link utama dan link-link baru di suatu situs.

Dari situlah mesin pencari bisa mengindex situs berikut setiap update kontennya, kemudian menampilkannya di SERP.

Perbedaan Sitemap XML & Sitemap HTML

Ada 2 jenis sitemap yang saat ini dikenal secara umum, yaitu:

• Sitemap XML. Sitemap XML berisi metadata dan URL website. Metadata tersebut berisi informasi tentang update terakhir, rutinitas update, dan waktu update dari suatu situs. Sitemap ini ditujukan untuk search engine. Sitemap inilah yang akan memudahkan situs kamu terindex di search engine.
• Sitemap HTML. Sitemap HTML akan menyediakan navigasi yang akan memudahkan pengunjung web untuk memahami berbagai halaman dalam suatu situs. Sitemap ini bisa meningkatkan user experience dari suatu situs.

Oke, selanjutnya kita akan membahas cara membuat sitemap HTML dan XML di blog dengan platform Blogger dan WordPress.

Cara Membuat Sitemap HTML di Blog

Membuat Sitemap HTML Blogger

Ikuti langkah-langkah berikut ini:

• Masuk ke akun Blogger milik kamu.
• Anda perlu membuat Page atau halaman baru.
• Di halaman administrator, pilih menu Page -> New Page.

• Setelah halaman baru berhasil dibuat, masuk ke HTML Editor.
• Caranya, klik icon seperti di gambar berikut.

• Setelah itu klik HTML View

• Copy kode berikut ini, kemudian paste di halaman tersebut. Code tersebut adalah template Sitemap HTML. Visualisasi dari sitemap HTML ini akan menyesuaikan code yang kamu input.
  

<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}
@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: "https://bloganda.com/", // 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>

• Di antara code tersebut, cari code bertuliskan blogurl:
• Ganti link https://bloganda.com/ dengan nama domain dari blog kamu.

• Klik Publish. Selesai. Halaman sitemap HTML di blog kamu sudah jadi.

Kamu bisa melakukan konfigurasi untuk membuat menu Sitemap tampil di footer atau sidebar, atau tempat lain yang kamu inginkan.

Membuat Sitemap HTML WordPress

Membuat sitemap HTML di wordpress lebih mudah karena kamu hanya perlu menginstall plugin.

• Masuk ke halaman wp-admin dari blog wordpress milik kamu.
• Pilih menu Plugin -> Add New
• Di kolom search cari, WP Sitemap Page. Setelah ketemu, klik Install -> Activate.

• Buat Pages baru: Klik Pages -> Add New.
• Di halaman baru tersebut, masukan code [wp_sitemap_page]. Kamu bisa copy code itu, kemudian langsung paste di halaman baru tersebut.

• Setelah selesai klik publish.
• Sitemap HTML sudah jadi.

Visualisasi sitemap HTML WordPress dari plugin ini tidak terlalu cantik. Tapi sudah cukup fungsional sebagai pemetaan.

Kamu bisa melakukan konfigurasi untuk memunculkan menu sitemap di halaman web. Kamu bisa meletakkannya di footer atau sidebar sesuai selera kamu.

Tapi hindari untuk meletakkannya di menu bar karena navigasi web kamu akan tampak aneh.

Cara Membuat Sitemap XML

Membuat XML Blogger

Ikuti langkah-langkah berikut ini:

• Masuk ke Google Search Console, kamu bisa klik di sini.
• Jika kamu sudah pernah masuk dan melakukan indexing blog sebelumnya, kamu harus menambah blog baru milik kamu. Pada bagian atas sebelah kiri klik Add Property. Jika kamu belum pernah melakukan indexing, kamu akan langsung masuk tahap setelah ini.

• Kamu akan diminta memasukan nama domain Kamu. Pilih di salah satu kolom. Klik Continue -> Done.

• Setelah selesai, kamu akan kembali ke halaman Google Search Console.
• Klik menu Sitemap. Pada kolom “Enter Sitemap URL” masukan code: sitemap.xml. Kemudian klik Submit.

• Pada tabel di bawahnya, seharusnya pada bagian status tertulis succes.
• Lakukan cara barusan, dengan code berbeda, yaitu:
  atom.xml?redirect=false&start-index=1&max-results=500
• Ulangi lagi cara barusan, dengan code berbeda lagi, yaitu:
  feeds/posts/default?max-results=400
• Coba cari XML Generator di Google. Masukan domain kamu di XML Generator tersebut. kamu akan mendapatkan sejumlah kode. Copy code tersebut.
• Di halaman administrator, klik menu Settings. Scroll sampai section Crawlers & Indexing.
• Klik opsi Enable Custom Robot txt. Kemudian, klik Custom robot.txt.

• Paste code dari XML generator ke Custom robot.txt, setelah selesai klik Save.

• Selesai.

Sitemap XML di blog Blogger kamu sudah selesai.

Membuat XML WordPress

Ikuti langkah berikut ini:

• Masuk halaman dashboard blog WordPress kamu.
• Pilih menu Plugin -> Add New -> di Search Bar masukan Google XML Sitemaps -> Install -> Activate.

Sebenarnya ada beberapa plugin yang bisa digunakan untuk membuat sitemap di WordPress, tapi kali ini saya hanya akan menggunakan Google XML Sitemaps.

• Setelah plugin ini diaktifkan, sitemap untuk situs Anda akan otomatis dibuat.
• Kamu bisa melakukan konfigurasi melalui menu Setting -> XML-Sitemaps.
• Kamu juga perlu submit sitemap ke Google Search Console.
• Masuk ke Google Search Console seperti cara sebeumnya di atas. Pastikan blog kamu di WordPress sudah menggunakan self hosting dan memiliki domain.
• Klik menu Sitemap. Pada kolom “Enter Sitemap URL” masukan code: sitemap.xml. Kemudian klik Submit.

Situs WordPress kamu sudah memiliki sitemap sekarang.

Baca Juga:

• Tutorial Cara Upload Web ke Hosting! Lengkap, Full Gambar!
• Cara Membuat Blog di Blogger untuk Pemula (Gratis + Dilengkapi Gambar)
• 5 Perbedaan Website dan Blog, dari Definisi hingga Kontennya

Kesimpulan

Itulah sedikit panduan mengenai cara membuat sitemap di blog. Meski tidak wajib, sitemap adalah elemen penting untuk pertumbuhan blog Kamu.

Kamu bisa meningkatkan pengalaman pengguna dengan sitemap HTML. Dengan sitemap XML, kamu juga bisa meningkatkan visibilitas blog kamu di search engine. Hal ini akan memudahkan dan mempercepat proses indexing oleh search engine.

Tanpa menggunakan sitemap, blog kamu akan sangat lama untuk bisa terindex oleh search engine.

Semoga Bermanfaat