How to make Sitemap or Sitemap Generator
People always search on google to generate sitemap for own website. There are two popular versions of a site map. An XML Sitemap is a structured format that a user doesn't need to see, but it tells the search engine about the pages in a site, their relative importance to each other, and how often they are updated. HTML sitemaps are designed for the user to help them find content on the page, and don't need to include each and every subpage.Here, I will not give information how to make sitemap but I will teach you how to make your own sitemap generator, So Web Developers can easily make sitemap.
Lets Make your own Sitemap Generator
Follow below steps:
Step 1:
Make HTML file with name Sitemap.html
Here is code
<!DOCTYPE html>
<html>
<head>
<title>Sitemap Ganerator</title>
</head>
<body>
<h1>Sitemap</h1>
<table>
<tr>
<td width="200px">Enter links:</td>
<td>
<Textarea name="recommend" rows="22" id="txtOutput" cols="100"></Textarea>
</td>
</tr>
</table>
<button id="DownloadButton">Create file</button>
<div id="generated" style="display:none">
<h2>sitemap.xml</h2>
<a href="#" id="DownloadLink">Download</a>
<textarea id="ResultXml" style="width: 100%; height: 30em" readonly="readonly"></textarea>
</div>
</body>
</html>
Step 2:
Put below code before </head>. Its JS source files.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javaScript" src="sitemap.js"></script>
Step 3:
Make JavaScript file with name sitemap.js
Here is code
$(function() {
$('#DownloadButton').click(update);
});
var template = [
'<?xml version="1.0" encoding="UTF-8"?>', '<urlset',
'xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"',
'xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"',
'xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9',
'http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">',
'<!-- Code by Rakesh Patil, Protected with DMCA-->',
'<?loc?>',
'</urlset>'
].join('\r\n');
function update() {
var $root = $('<XMLDocument />');
$(document).ready(function() {
var arrayOfLines = $('textarea[name=recommend]').val().split('\n');
$.each(arrayOfLines, function(index, item) {
$root.append
(
$('<url />').append
(
$('<loc />').append(item),
$('<priority />').append('1'),
$('<changefreq />').append('monthly')
)
);
var variables = {
'loc': $root.html()
};
var newXml = template.replace(/<\?(\w+)\?>/g, function(match, name) {
return variables[name];
});
$('#ResultXml').val(newXml);
$('#DownloadLink')
.attr('href', 'data:text/xml;base64,' + btoa(newXml))
.attr('download', 'sitemap.xml');
$('#generated').show();
});
});
}
if (!window.btoa) {
btoa = function (input) {
var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
var result = '';
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;
do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);
enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;
if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}
result += chars.charAt(enc1) + chars.charAt(enc2) + chars.charAt(enc3) + chars.charAt(enc4);
} while (i < input.length);
return result;
};
}
Step 4:
Save all files in one folder and open Sitemap.html in browser. Done.
Now your own sitemap generator is ready to make sitemap for your website.
If any query or problem, free to ask via comment.
Note: Don't use above code to publish on website or blog.
