Pada kesempatan kali ini saya akan membagikan artikel Cara Membuat Halaman Sitemap Di Blogger Yang Bisa Menampilkan Gambar Thumbnail Artikelnya Juga Secara Otomatis.
 |
| Membuat Sitemap Dengan Thumbnail Otomatis Di Blogger/Blogspot |
Cara Membuat Halaman Sitemap dengan Thumbnail Otomatis di Blogger
Menyusun halaman sitemap (peta situs) di Blogger bukan hanya memudahkan pengunjung dalam menavigasi situs Anda, tetapi juga membantu mesin pencari seperti Google untuk memahami struktur situs Anda. Salah satu fitur yang menarik adalah menampilkan thumbnail atau gambar kecil di samping setiap judul artikel di sitemap, sehingga pengunjung dapat lebih tertarik dan lebih mudah mengenali konten yang tersedia di blog Anda. Dalam artikel ini, kita akan membahas cara membuat halaman sitemap dengan thumbnail otomatis di Blogger menggunakan kode HTML dan JavaScript.
Mengapa Sitemap Penting?
Sitemap adalah halaman di mana semua tautan menuju konten atau artikel di situs Anda disusun secara rapi. Beberapa alasan mengapa sitemap penting antara lain:
1. Memudahkan Pengunjung: Sitemap menyediakan cara cepat bagi pengunjung untuk menemukan artikel tertentu. Dengan menampilkan seluruh daftar artikel, sitemap bisa menjadi navigasi tambahan yang sangat membantu.
2. Mempercepat Pengindeksan: Sitemap memungkinkan mesin pencari untuk lebih mudah dan lebih cepat mengindeks halaman Anda, yang pada akhirnya bisa membantu meningkatkan SEO.
3. Tampilan Profesional: Menyediakan sitemap yang rapi dan terstruktur membuat blog Anda terlihat lebih profesional dan terorganisir.
Namun, satu masalah umum yang dihadapi banyak pemilik blog di Blogger adalah bahwa Blogger sendiri tidak menyediakan fitur sitemap otomatis, sehingga Anda harus membuatnya sendiri. Kabar baiknya, dengan menambahkan sedikit kode HTML dan JavaScript, Anda bisa membuat sitemap yang tidak hanya otomatis ter-update dengan artikel terbaru tetapi juga menampilkan thumbnail untuk setiap artikel.
Langkah-Langkah Membuat Sitemap dengan Thumbnail di Blogger
Langkah-langkah berikut akan membantu Anda menambahkan halaman sitemap yang secara otomatis menampilkan semua artikel blog beserta thumbnail atau gambar kecil dari setiap artikel.
1. Buat Halaman Baru di Blogger
Langkah pertama adalah membuat halaman baru di Blogger di mana Anda akan menempatkan sitemap Anda. Ikuti langkah-langkah berikut untuk membuat halaman baru:
1. Masuk ke dasbor Blogger Anda.
2. Buka menu Halaman di sisi kiri, lalu klik Halaman Baru.
3. Beri judul halaman, misalnya "Sitemap" atau "Daftar Isi".
4. Ubah editor dari mode Compose ke mode HTML agar Anda bisa menambahkan kode HTML dan JavaScript.
2. Tambahkan Kode HTML dan JavaScript untuk Sitemap
Setelah membuat halaman, langkah selanjutnya adalah menambahkan kode HTML dan JavaScript yang akan menghasilkan daftar artikel dengan thumbnail secara otomatis. Berikut adalah kode yang perlu Anda salin dan tempel ke halaman Blogger yang baru Anda buat.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sitemap dengan Thumbnail</title>
<style>
body {
font-family: Arial, sans-serif;
}
.sitemap {
list-style-type: none;
padding: 0;
}
.sitemap li {
display: flex;
align-items: center;
margin: 10px 0;
}
.sitemap img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 4px;
margin-right: 10px;
}
.sitemap a {
text-decoration: none;
color: #3498db;
font-size: 1em;
}
.sitemap a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Sitemap</h1>
<ul class="sitemap" id="sitemap"></ul>
<script>
const blogFeedUrl = 'https://www.hallomadiun.com/feeds/posts/default?alt=json&max-results=500';
fetch(blogFeedUrl)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const posts = data.feed.entry;
let sitemapHtml = '';
posts.forEach(post => {
const postTitle = post.title.$t;
const postUrl = post.link.find(link => link.rel === 'alternate').href;
// Cek jika post memiliki thumbnail
const thumbnailUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://via.placeholder.com/60';
sitemapHtml += `
<li>
<img src="${thumbnailUrl}" alt="Thumbnail">
<a href="${postUrl}" target="_blank">${postTitle}</a>
</li>`;
});
document.getElementById('sitemap').innerHTML = sitemapHtml;
})
.catch(error => {
console.error('Error fetching the blog feed:', error);
document.getElementById('sitemap').innerHTML = '<p>Gagal memuat sitemap. Silakan coba lagi nanti.</p>';
});
</script>
</body>
3. Penjelasan Kode
Kode di atas memiliki beberapa bagian utama yang perlu Anda pahami:
Ubah url https://www.hallomadiun.com yang ada di kode dengan url blog / website anda
1. HTML & CSS: Bagian HTML membuat elemen dasar untuk sitemap, yaitu judul dan daftar tanpa urutan (`ul`) yang diberi class `sitemap`. CSS di dalam tag `<style>` memberikan gaya pada elemen-elemen tersebut sehingga daftar artikel dengan thumbnail terlihat lebih rapi dan menarik.
2. JavaScript: Kode JavaScript di dalam tag `<script>` berfungsi untuk mengambil data feed dari Blogger Anda dan menghasilkan daftar artikel yang mencakup judul, tautan, dan thumbnail.
`const blogFeedUrl`: URL ini mengarah pada feed JSON blog Anda. Gantilah dengan URL feed blog Anda sendiri. `max-results=500` berarti feed ini akan menampilkan maksimal 500 artikel, tetapi Anda dapat mengurangi atau menambah jumlah ini sesuai kebutuhan.
Fetch API: `fetch(blogFeedUrl)` mengambil data feed dalam format JSON, yang kemudian diteruskan ke fungsi `then` untuk diproses.
Cek Thumbnail: Kode `const thumbnailUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://via.placeholder.com/60';` akan mengecek apakah artikel memiliki thumbnail. Jika tidak, gambar placeholder akan ditampilkan sebagai gantinya.
4. Publikasikan Halaman
Setelah Anda menyalin dan menempelkan kode di atas, simpan dan publikasikan halaman tersebut. Kini Anda memiliki halaman sitemap yang secara otomatis menampilkan daftar artikel lengkap dengan thumbnail di samping judul artikel.
Tips Mengoptimalkan Halaman Sitemap
Pilih Thumbnail yang Tepat: Pastikan setiap artikel memiliki gambar thumbnail yang sesuai. Ini akan membuat sitemap terlihat lebih menarik dan membantu pengunjung mengidentifikasi konten artikel dengan cepat.
Sesuaikan Jumlah Artikel: Jika blog Anda memiliki banyak artikel, Anda mungkin ingin membatasi jumlah artikel yang ditampilkan di sitemap untuk menjaga waktu pemuatan halaman tetap cepat.
Gunakan SEO-Friendly URL: Pastikan URL dari setiap artikel SEO-friendly agar membantu optimasi mesin pencari.
Menambahkan halaman sitemap yang menampilkan thumbnail setiap artikel memberikan banyak manfaat, baik dari sisi pengunjung maupun SEO. Dengan hanya sedikit kode HTML dan JavaScript, Anda bisa membuat halaman sitemap yang secara otomatis memperbarui diri dengan artikel terbaru dan menampilkan thumbnail. Pastikan untuk mengikuti langkah-langkah di atas dengan seksama, dan Anda akan memiliki halaman sitemap yang fungsional dan menarik di blog Blogger Anda.
Semoga panduan ini membantu Anda untuk membuat halaman sitemap di Blogger yang lebih informatif dan menarik!
.jpeg)
.png)