How To Create HTML Sitemap Page In Blogger in 2021 (STEP BY STEP With Infographics)
In this tutorial, I will show you how to create a sitemap page for your blogger blog. It's a shame Blogger doesn't have sitemap widgets compared to WordPress, which has a plugin called "Yoast SEO" that automatically creates and updates the sitemap for the site.
In this tutorial, we will create an HTML sitemap page for blogs. Sorted by post tag, in alphabetical order, and we will assign "New" to the ones we just posted, as another wonderful style, we will create a grid view sitemap page for Blogger. And last but not least, we will create a sitemap page sorted in reverse order, the most recent posts and the top posts. Choose the one that suits you. Before adding a sitemap page, it is very important to know the benefits of the sitemap and the difference between HTML sitemap and XML sitemap.
What Does Site Map mean in 2021?
A sitemap (or sitemap) is a list of pages on a website. A sitemap is a template of website content designed to help both users and search engines navigate the site. A sitemap is a visual or textual model of the content of a website that allows users to navigate the site to find the information they are looking for, much like a traditional geographic map helps people to find places they are searching on it. real world. world.
A sitemap is a kind of interactive table of contents, in which each item listed is linked directly to its peers' sections of the website. Sitemaps offer the same service as large mall floor plans - without them, you can explore a complex site through trial and error, but if you want to make sure you find what you're looking for, the most efficient way to do it this is to consult a model of available resources.
Typically, site maps are organized hierarchically, dividing the information on the website into increasingly specific areas. Many sites have user-visible sitemaps that present a systematic, generally hierarchical view of the site. These are intended to help visitors find specific pages and can also be used by crawlers. Alphabetical site maps, sometimes referred to as a site index, are a different approach.
When the sitemap is for users, it is simply a simple HTML file that contains a list of all the main pages on a site. This is the topic of this tutorial. There are different types of site maps: the org chart site plans are quite similar in appearance to a traditional table of contents; others, based on a perspective view of the site, are like a three-dimensional model with individual pages standing, like tabs, organized in sections and connected by lines.
There are three main types of site maps:
1. Sitemaps used by your designers when planning a website
2. Lists visible to people, generally hierarchical, of the pages of a site
3. Structured lists intended for crawlers, such as search engines
HTML and XML sitemaps and the difference
What is the HTML sitemap?
The HTML sitemap is a classic HTML page that can be read by search engine crawlers and visitors. The main purpose of using an HTML-based sitemap is to render all your posts in an organized way so that your users can navigate through all your posts on one page. Apparently website visitors use HTML sitemaps. Sitemaps include every page on the website, from the main pages to the bottom-level pages. An HTML sitemap is just a clickable list of pages on a website. This is the topic of this tutorial, we are going to create an HTML sitemap page for our blogger blog, I will give you 3 wonderful styles to choose from.
What is an XML sitemap?
In fact, the search engine uses its respective crawlers (robots) to discover pages of links within the site and other sites. The XML sitemap is an XML file attached to your website that provides this data to crawlers. The sitemap file consists of all article URLs with additional information about each URL. The search engine uses this data to index your posts in the best possible way. Using the XML sitemap file ensures that your web pages will be indexed by search engines.
The difference between an HTML and XML sitemap
The HTML sitemap is totally different from the XML sitemap. As a blogger, we submitted an XML Sitemap search engine to improve crawling speed or get quick indexing of our new blog post. The HTML sitemap shows a good organization of your published article on one page. This tutorial explains how to create an HTML sitemap page for the Blogger blog. There are many styles that we will look at, so keep going!
Benefits of a sitemap for users and search engines
Benefits of a sitemap for users
The user benefits from the sitemap because they can go there and if they cannot find a page on your site through the main navigation, they can go to your sitemap and possibly find the information there. If you have a large site, using a sitemap you can divide your site into smaller sections by categories or alphabetically, tags, authors, etc. Therefore, creating a sitemap for your site is very beneficial for your users as it helps them find information on your site.
Benefits of a sitemap for the search engine
Search engines can crawl your sitemap and find all the different pages on your site. So it will help your site get indexed and also for SEO purposes to help in ranking some pages.
How To Create An HTML Sitemap Page On A Blogger Blog Step By Step With Provided Infographics
Characteristics:
- • The list of blog posts will automatically update with the addition of new posts.
- • Automatic addition of "new" suffix to newly added messages.
- • Sorted by labels and alphabetically (ascending)
Step 1: Go To Blogger Dashboard>>Pages>>New Page
Step 2: Enter "Table Of Content" or "Sitemap" or whatever works for you in the Page Title field.
Step 3: Switch to HTML mode
Step 4: Enter the following codes in the empty field.
Note: Clear any default code in the HTML field before pasting the code provided below, if any.
Note: Ignore any type of error.
Step 5: Configuration
- Replace http://www.yourblogname.blogspot.com with the URL of your blog. If your blog URL is http, make sure it is http in the code and if it is https, make sure it is https in the code. Just copy your blog url and replace the red one in the code below, it's that easy.
var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;
function bloggersitemap(a) {
function b() {
if ("entry" in a.feed) {
var d = a.feed.entry.length;
numberfeed = d;
ii = 0;
for (var h = 0; h < d; h++) {
var n = a.feed.entry[h];
var e = n.title.$t;
var m = n.published.$t.substring(0, 10);
var j;
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "alternate") {
j = n.link[g].href;
break
}
}
var o = "";
for (var g = 0; g < n.link.length; g++) {
if (n.link[g].rel == "enclosure") {
o = n.link[g].href;
break
}
}
var c = "";
if ("category" in n) {
for (var g = 0; g < n.category.length; g++) {
c = n.category[g].term;
var f = c.lastIndexOf(";");
if (f != -1) {
c = c.substring(0, f)
}
postLabels[ii] = c;
postTitle[ii] = e;
postDate[ii] = m;
postUrl[ii] = j;
postPublished[ii] = o;
if (h < 10) {
postRecent[ii] = true
} else {
postRecent[ii] = false
}
ii = ii + 1
}
}
}
}
}
b();
sortBy = "titledesc";
sortPosts(sortBy);
sortlabel();
displayToc();
}
function sortPosts(d) {
function c(e, g) {
var f = postTitle[e];
postTitle[e] = postTitle[g];
postTitle[g] = f;
var f = postDate[e];
postDate[e] = postDate[g];
postDate[g] = f;
var f = postUrl[e];
postUrl[e] = postUrl[g];
postUrl[g] = f;
var f = postLabels[e];
postLabels[e] = postLabels[g];
postLabels[g] = f;
var f = postPublished[e];
postPublished[e] = postPublished[g];
postPublished[g] = f;
var f = postRecent[e];
postRecent[e] = postRecent[g];
postRecent[g] = f
}
for (var b = 0; b < postTitle.length - 1; b++) {
for (var a = b + 1; a < postTitle.length; a++) {
if (d == "titleasc") {
if (postTitle[b] > postTitle[a]) {
c(b, a)
}
}
if (d == "titledesc") {
if (postTitle[b] < postTitle[a]) {
c(b, a)
}
}
if (d == "dateoldest") {
if (postDate[b] > postDate[a]) {
c(b, a)
}
}
if (d == "datenewest") {
if (postDate[b] < postDate[a]) {
c(b, a)
}
}
if (d == "orderlabel") {
if (postLabels[b] > postLabels[a]) {
c(b, a)
}
}
}
}
}
function sortlabel() {
sortBy = "orderlabel";
sortPosts(sortBy);
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
firsti = a;
do {
a = a + 1
} while (postLabels[a] == temp1);
b = a;
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
function sortPosts2(d, c) {
function e(f, h) {
var g = postTitle[f];
postTitle[f] = postTitle[h];
postTitle[h] = g;
var g = postDate[f];
postDate[f] = postDate[h];
postDate[h] = g;
var g = postUrl[f];
postUrl[f] = postUrl[h];
postUrl[h] = g;
var g = postLabels[f];
postLabels[f] = postLabels[h];
postLabels[h] = g;
var g = postPublished[f];
postPublished[f] = postPublished[h];
postPublished[h] = g;
var g = postRecent[f];
postRecent[f] = postRecent[h];
postRecent[h] = g
}
for (var b = d; b < c - 1; b++) {
for (var a = b + 1; a < c; a++) {
if (postTitle[b] > postTitle[a]) {
e(b, a)
}
}
}
}
function displayToc() {
var a = 0;
var b = 0;
while (b < postTitle.length) {
temp1 = postLabels[b];
document.write("");
document.write('' + temp1 + '
');
firsti = a;
do {
document.write("");
document.write('' + postTitle[a] + "");
if (postRecent[a] == true) {
document.write(' - New!')
}
document.write("
");
a = a + 1
} while (postLabels[a] == temp1);
b = a;
document.write("");
sortPosts2(firsti, a);
if (b > postTitle.length) {
break
}
}
}
Step 6: Under Page settings,> Click on "Options" In the Search Description field, add a page description. Note: some Blogger topics these days do not have descriptions on the page of pages.
Step 7: Click on Options > under Reader comments > select Don't allow > Done.
If you haven't added the "Pages" gadget to your blog, go to step 8 below. But if you've already added gadget pages to your blog, go to step 10.
Step 8: On your blogger dashboard, go to Layout >> Add Gadget under "Cross Column. Add page gadget in the cross column just below" Header ", see the infographic below for more information.
Step 9: When you click "Add Gadget from step 8, a window will appear, scroll down until you find the" Pages "gadget among the list of gadgets, click the + sign on the far right.
Step 10: set up the page. Another window from step 9 above will appear, check the box for all the pages you want to display on your Blogger blog. Save and go! Go to your blog and click on the sitemap or name you have given it, you will have a nice sitemap.
Note: If you have already added the Pages gadget to your blog, go to Layout >> Edit the Pages gadget you already added and configure it as shown below, check the box next to the sitemap and save the file. Is over!!
If you follow the tutorial, you will have no issues, however if you have any problems, please leave your question in the comment section below and I will keep an eye on you. Enjoy blogging! And don't forget to share, see you in the next tutorial!
Post a Comment
Post a Comment