In this tutorial, I walk you through the step by step process of how to create and publish HTML sitemap page on your blogger blog.
Having HTML sitemap page up in your blogger blog is an extremely good move to improve your blogger blog SEO.
Besides, HTML Sitemap page on your bloger blog helps your visitors navigate your bloger blog better and also help search engines discover all of your blogger blog posts by making it easier for the search engines web crawler to index all of your blogger blog posts.
But before we go into discussing the step by step processes involved in creating HTML sitemap page for your blogger blog, it is essential that we introduce you to what HTML sitemap page is and the importance of HTML sitemap page to your blogger blog.
The following info will help you understand the importance of the HTML sitemap page, why you need it on your blogger blog and how to maximise the use of it.
Got that? So, here we come;
What is Sitemap?
A sitemap which is also sometimes written as site map, is a document or file containing the full navigation of a site.
A sitemap is prepared to help human visitors (to a site) or search engine crawler (bots) visiting the site to navigate the entire site properly and accordingly. Hence, sitemap contains the link to every page including post pages on a particular site.
Therefore, site map is a visually or textually organized model of a Web site's content that allows the users to navigate through the site and find the information they are looking for, just as a traditional geographical map helps people find places they are looking for in the real world.
Typically, site maps are organized hierarchically, breaking down the Web site's information into increasingly specific subject areas.
Many sites have user-visible sitemaps that present a systematic view, typically hierarchical, of the site. These are intended to help visitors find specific pages, and can also be used by crawlers.
Meanwhile, alphabetically organized site maps, sometimes called site indexes, are a different approach.
Furthermore, it should be noted that there are types of sitemap; one specifically made for human readers and the other prepared specifically for search engines crawlers (bots).
The sitemap made for human readers is being referred to as plain HTML file with a listing of all the major pages on a site. While the other sitemap, one made for search engines crawlers is usually in an xml file format.
And this brings us to highlighting the classes of sitemaps based on their structure.
Classes of Sitemaps
- Site maps used during the planning of a Web site by its designers.
- Human-readable listings, typically hierarchical, of the pages on a site
- Structured listings intended for web crawlers such as search engines
Types of Sitemap
- XML Sitemap
- HTML Sitemap
What is XML Sitemap?
An XML sitemap is a document or file that is directly readable by search engines web spiders and contains all links to every URLs a website has. An XML sitemap is the kind of sitemap made primarily for search engine crawler (bots). An XML sitemap is not directly readable for human readers.
What is Search Engine Crawler?
Search engine crawler which is also known as web spider or bot is an Internet bot that systematically browses the World Wide Web, typically for the purpose of Web indexing.
Search engine uses their respective web crawlers (bots) to discover pages from links within every site connected to the World Wide Web.
And XML Sitemap is an XML file created manually or automatically for every website and this XML file is what supplies the data required for indexing the site to crawlers.
The content of an XML sitemap include all posts and pages URLs accompanied by other information such as post or page published dates, date last modified, author to mention a few.
What is HTML Sitemap?
An HTML sitemap is a document or a page that is humanly readable by design and contains all links to every URLs a website has. An HTML sitemap is prepared specifically for a website human visitors but it can also be accessed, read and indexed fully by search engines web spider.
The purpose of HTML based sitemap is to represent all your posts and possibly, pages in an organized manner so that your users can navigate all of your posts through a single web page.
Why Create HTML Sitemap?
-
To ensure easy navigation of your site or blog for human readers.
An HTML sitemap page makes it possible for your human readers to read and access all the pages including the post pages on your website or blog since your website HTML sitemap page should contain all the URLs leading to posts and the pages you want accessible to your readers on the website or blog.
-
Complete and wholesome index by search engines
Since search engines web spiders can also read and access HTML sitemap pages, the HTML sitemap page also makes it possible for search engines to find, locate and add all the pages found on your HTML sitemap page in their index.
This is especially good for blogger blogs.
Why?
Because blogger XML sitemap is limited in functions making it impossible for the search engines to index blogger blogs fully but with the help of an HTML sitemap, search engines can index your entire blogger blog; fully.
-
For constant and faster index
Usually for most sites, search engines have routines on when and how frequent should a domain (website) be indexed or crawled and these decisions are usually influenced by how frequent the website is updated.
In this case, having an automated functional HTML sitemap would help.
Why?
Because each time you have an added posts on your blog, your HTML sitemap is updated automatically and each time the HTML sitemap page is modified, search engines are pinged to update their records of that page.
These constant frequently changing activities would enable searching web spiders parade your blog often hence, giving your blog a priority to your advantage.
How to Maximise the Advantages of HTML Sitemap Page
When you create and publish an HTML sitemap page, you have just done half of the task. Making your HTML sitemap page publicly visible on your website is the other half of the task.
Therefore, to make use of your HTML sitemap page to its fullest advantage and gain the most from it, you ought to;
1. Link to your sitemap at the footer of your website or blog; where it would be visible to all visitors on all pages.
2. You can link to your HTML sitemap page from error 404 (not found) pages on the site. This will ensure that visitors landing on your broken links, deleted links etc have an option to navigate all your website or blog from the same error page.
How to create sitemap for blogger blog
Requirements:
Required tools:
1. Preparation
If not turned on yet, put on your desired device and ready it. If you have chosen to use Android device, iPhone or your Windows PC then, proceed accordingly by launching your browser on your device and then; login your blogger blog by visiting www.blogger.com
2. Install all the required application or software on your machine
Visit the appropriate store on your device and download and install the appropriate application on the device. If you have chosen to use Windows PC, you can install NotePad++ or sublime text editor. A simple search on Google will bring you NotePad++ or Sublime text editor download links. You can also check the download section for the download links. And if you are using Android phone or tablet, you can download and install Jota+ or Acode. For iPhone users, I find Acode to be more useful.
3. Copy the JS code for the HTML Sitemap
See the code section below and copy the entire content within the code box and paste it in your text editor.
Within the JS code you copied and pasted in the text editor, look for 'http://www.example.com' and replace the 'http://www.example.com' with your blogger blog url. If you are using https version of your blogger blog domain, remember to put https before your blogger blog domain in the blogger blog HTML sitemap JS Script you copied instead of http.
4. Go to your blogger blog dashboard
You may now visit blogger.com, login your blogger dashboard and on that page, go to Pages.
5. Create a new static page
Once you are on Pages section within your blogger blog dashboard, click Create New Page.
Then, on the page that opens, click switch HTML icon.
Give that new page a name. Thus, on the title space, enter Sitemap.
6. Paste the JS code you modified earlier
Now, you can paste the JS code you modified in your text editor and paste it on the New Page blanked space.
Under Page Settings from Readers Comment, select 'Do Not Allow'. Under Compose Mode, choose 'Use HTML Literally and under line breaks, choose 'Use <br> tag.
Finally, click publish. You may now view your blogger blog sitemap live.
Required Tools Download Links
- Jota+ or Acode text editor - for Android
- Search from Apple Store for Acode. If you have a jailbroken iPhone or iPad, an alternative could be found on Cydia also
- NotePad++ or Sublime text editor - for Windows
Blogger Blog HTML Sitemap Page JS Code
Here is the code to copy and paste
Simply copy the entire code in the code block below, make necessary adjustments as instructed in the step by step guides above and paste the modified version of the code you copied below into the empty HTML sitemap page you are creating on your blogger blog per the instruction given above.
<script type="text/javascript"> var numposts = 500; var standardstyling = true; function showrecentposts(json) { for (var i = 0; i < numposts; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } posttitle = posttitle.link(posturl); if (standardstyling) document.write('<li>'); document.write(posttitle); } if (standardstyling) document.write('</li>'); }</script> <br /><ul> <script src="https://www.example.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>
Remember to;
- Replace the "www.example.com" with your own blogger blog domain / URL.
- Use "http://" instead if your blogger blog does not use the https:// version so that the full URL of your blog in that code would now be: "http://www.example.com..."
- If you already have more than 500 published posts in your blog, replace "500" in the code above with your desired figure say; 1000.
Final Thought on HTML Sitemap
Although, this is a tiny piece of code, it holds an unimaginable benefits both for your readers, and to the search engines.
Now that you have come to know about HTML sitemap and learnt how to create and publish an HTML Sitemap page on your blogger blog, I hope you are able to maximize the HTML sitemap to its maximum potentials.
0 Comments