Hướng dẫn tạo sơ đồ trang web HTML cho Blogspot đơn giản nhất
Mục lục bài viết
Lợi ích của việc sử dụng sitemap cho Blogspot
Trải nghiệm người dùng tốt hơn
Mặc dù sơ đồ trang web được thiết kế chủ yếu để mang lại lợi ích cho công cụ tìm kiếm nhưng chúng cũng có thể cải thiện trải nghiệm người dùng trên blog Blogspot của bạn. Bằng cách cung cấp danh sách đầy đủ tất cả các URL trong blog của bạn, khách truy cập có thể dễ dàng điều hướng qua nội dung của bạn và tìm thấy những gì họ đang tìm kiếm, cuối cùng là nâng cao sự hài lòng và mức độ tương tác của người dùng.Lập chỉ mục được cải thiện
Bằng cách cung cấp lộ trình của tất cả các trang trên blog của bạn, bạn giúp các bot công cụ tìm kiếm thu thập dữ liệu và lập chỉ mục nội dung của bạn dễ dàng hơn. Điều này có thể dẫn đến nhiều bài đăng và trang blog của bạn được đưa vào kết quả của công cụ tìm kiếm hơn, cuối cùng là tăng khả năng hiển thị cho blog của bạn.Hiệu suất SEO nâng cao
Khi các công cụ tìm kiếm hiểu rõ cấu trúc và nội dung blog của bạn, chúng có thể xác định tốt hơn mức độ liên quan của các trang của bạn đối với các truy vấn tìm kiếm cụ thể. Điều này có thể dẫn đến thứ hạng được cải thiện và tăng lưu lượng truy cập không phải trả tiền vào blog của bạn.
Cách tạo sitemap HTML cho Blogspot
Bước 1: tạo một trang mới cho blog của bạn.Bước 2: thêm tiêu đề trang, khuyên dùng tên là "sitemap".
Bước 3: copy và dán javascript bên dưới vào phần soạn thảo HTML.
<!--HTML-->
<div id="label-select">
<label>Chọn nhãn:</label>
<select id="selectlabel"></select>
</div>
<div id="daftar-isi"></div>
<div id="pagination">
<button id="prev" disabled>Trang trước</button>
<button id="next" disabled>Trang sau</button>
</div>
<!--JAVASCRIPT-->
<script>
let config = {
blogURL: "https://www.anhhiblog.net/",
labelDefault: "Blogspot",
showDate : true,
orderBy : "published",
maxResults: 25 // Số bài viết tối đa mỗi trang
};
let currentPage = 1;
let totalResults = 0;
async function fetchPosts(label, pageIndex) {
let { blogURL, maxResults, orderBy } = config;
let startIndex = (pageIndex - 1) * maxResults + 1;
let response = await fetch(`${blogURL}/feeds/posts/summary/-/${label}?alt=json&max-results=${maxResults}&start-index=${startIndex}&orderby=${orderBy}`);
return await response.json();
}
async function updatePagination(label) {
let { blogURL } = config;
let response = await fetch(`${blogURL}/feeds/posts/summary/-/${label}?alt=json&max-results=1`);
let data = await response.json();
totalResults = data.feed.openSearch$totalResults.$t;
updatePaginationButtons();
}
function updatePaginationButtons() {
let maxResults = config.maxResults;
let totalPages = Math.ceil(totalResults / maxResults);
document.getElementById("prev").disabled = currentPage === 1;
document.getElementById("next").disabled = currentPage === totalPages;
}
async function loadPosts(label, pageIndex) {
let data = await fetchPosts(label, pageIndex);
renderPosts(data);
updatePaginationButtons();
}
function renderPosts(data) {
let r = document.getElementById("daftar-isi");
let posts = data.feed.entry;
if (!posts || posts.length === 0) {
r.innerHTML = "<p>No posts.</p>";
return;
}
let html = "<ol>";
posts.forEach(post => {
let title = post.title.$t;
let link = post.link.find(l => l.rel === "alternate").href;
let updatedDate = post.updated.$t.split("T")[0].split("-");
let dateStr = `${updatedDate[2]}/${updatedDate[1]}/${updatedDate[0]}`;
html += `<li><strong><a href="${link}">${title}</a></strong> <span>(${dateStr})</span></li>`;
});
html += "</ol>";
r.innerHTML = html;
}
// Main initialization
(async function() {
let l = document.getElementById("selectlabel");
let labelDefault = config.labelDefault;
// Load labels
let s = await fetch(config.blogURL + "/feeds/posts/summary?alt=json&max-results=0");
let o = await s.json();
o.feed.category.forEach(function(e) {
let option = document.createElement("OPTION");
option.value = encodeURIComponent(e.term);
option.innerText = e.term;
labelDefault === e.term && (option.selected = true);
l.appendChild(option);
});
// Initial load
await updatePagination(labelDefault);
await loadPosts(labelDefault, currentPage);
// Listen for label change
l.addEventListener("change", async function() {
currentPage = 1;
let selectedLabel = l.value;
await updatePagination(selectedLabel);
await loadPosts(selectedLabel, currentPage);
});
// Pagination controls
document.getElementById("prev").addEventListener("click", async function() {
if (currentPage > 1) {
currentPage--;
await loadPosts(l.value, currentPage);
}
});
document.getElementById("next").addEventListener("click", async function() {
let totalPages = Math.ceil(totalResults / config.maxResults);
if (currentPage < totalPages) {
currentPage++;
await loadPosts(l.value, currentPage);
}
});
})();
</script>
<!--CSS-->
<style>
#label-select{display:flex;flex-wrap:wrap;align-items:center;gap:10px}#label-select label{font-weight:700}#label-select select{min-width:100px;padding:5px 7px;border:1px solid rgba(37,37,37,.18);border-radius:4px;background:#f5f5f5;color:#333}#daftar-isi ol{padding:0 0 0 25px;margin:10px 0}#daftar-isi ol li{padding:6px 0}#daftar-isi ol li span{opacity:.8}
#pagination {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
#pagination button {
padding: 10px 20px;
background-color: #E964A3;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#pagination button:disabled {
background-color: #CCCCCC;
cursor: not-allowed;
}
</style>Kết luận
Tạo sơ đồ trang web HTML cho Blogspot không cần phải phức tạp. Với những hướng dẫn này, bạn có thể dễ dàng tạo sơ đồ trang web HTML đơn giản và hiệu quả để cải thiện khả năng tổ chức và khả năng truy cập blog của mình.
Đăng nhận xét