Have you ever noticed the URL structure of the Blogger website? Unlike WordPress, you can not select or change the URL structure in Blogger.
So here in today's tutorial, I am going to show you how to change the structure of the Blogger website by using custom javascript and removing the date from the URL. From the thumbnail you have already seen what the customized URL gonna look like. So if you want to change the structure of your website URL then follow this step-by-step guide.
Make sure you read till the last and don't miss a single point.
Why is URL structure important?
URL structure is important for several reasons, some of which are mentioned here:
- User Experience: A well-structured URL is more user-friendly and easier to understand. It can convey information about the page's content, helping users decide if they want to click on it. A clear URL can also make it easier for users to remember and share links.
- Search Engine Optimization (SEO): Search engines like Google use URL structure as one of the factors to determine the relevance and ranking of a page in search results. A logical and descriptive URL can improve your SEO by providing context about the page's content to search engines.
- Accessibility: A well-structured URL can be more accessible to individuals with disabilities who may rely on screen readers or other assistive technologies. Descriptive URLs can provide important information about the page's content.
- Crawlability: Search engine crawlers use URL structure to navigate and index websites. A clear and logical URL structure can make it easier for search engines to crawl and understand your site's content, leading to better indexing and ranking.
- Content Organization: URL structure often reflects the organization of your website's content. It can help you create a logical hierarchy for your site, making it easier for both users and search engines to navigate and find specific information.
- Consistency: Consistent URL structure across your website can enhance the overall user experience. Users will know what to expect when they see a particular URL format, and this can build trust and familiarity.
- Link Building: When other websites link to your content, they often use the URL as the anchor text. A descriptive URL can serve as its own anchor text, providing context to users and search engines about the linked content.
- Bookmarking: Users often bookmark web pages they find valuable. A clear and concise URL makes it easier for users to remember and return to specific pages.
- Mobile Friendliness: Short and well-structured URLs are more mobile-friendly. They are easier to display on smaller screens and can improve the user experience on mobile devices.
- Internationalization: If your website serves an international audience, URL structure can play a role in supporting multiple languages and regions through techniques like hreflang tags.
How to change Blogger website's URL structure
We are going to use JavaScript code to change the structure of the Blogger website. This code is Licensed under the MIT License and the author of this code is Kenny Cruz. Now follow the below steps to implement this code on your website.
- Log in to Blogger.
- Go to Theme > Customize > Edit HTML
- Now press
Ctrl + Fand search for<head> - You will see a piece of code there which looks like similar to
<head class='notranslate'> - Now copy the below code and paste the code under it. Do not paste it under <head> tag but the code I have mentioned, paste this javascript code below that code. Because the <head> tag you are seeing most likely it is a commented code there.
- After pasting the code click the save icon and save the change. Now reload and check your website's URL.
<script type="text/javascript">
// Configuration
var config = {
postsDatePrefix: false,
accessOnly: false,
useApiV3: false,
apiKey: "YOUR-API-KEY-HERE"
}
var postsOrPages=["pages","posts"],blogId="<data:blog.blogId/>",urlTotal,fetchIndex=1,ampChar="&"[0],secondRequest=!0,feedPriority=0,nextPageToken;function urlVal(){var url=window.location.pathname;var length=url.length;var urlEnd=url.substring(length-5);if(urlEnd===".html")return 0;else if(length>1)return 1;else return 2}
function urlMod(){var url=window.location.pathname;if(url.substring(1,2)==="p"){url=url.substring(url.indexOf("/",1)+1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../"+url)}else{if(!config.postsDatePrefix)url=url.substring(url.indexOf("/",7)+1);else url=url.substring(1);url=url.substr(0,url.indexOf(".html"));history.replaceState(null,null,"../../"+url)}}
function urlSearch(url,database){var pathname=url+".html";database.forEach(function(element){var search=element.search(pathname);if(search!==-1)window.location=element})}
function urlManager(){var validation=urlVal();if(validation===0){if(!config.accessOnly)urlMod()}else if(validation===1){fetchData(postsOrPages[feedPriority],1)}else if(validation===2){if(!config.accessOnly)history.replaceState(null,null,"/")}}
function fetchData(postsOrPages,index){var script=document.createElement("script");if(config.useApiV3){var jsonUrl="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+postsOrPages+"?key="+config.apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=parseData";if(nextPageToken)jsonUrl+="#pageToken="+nextPageToken;nextPageToken=undefined}else{var jsonUrl=window.location.protocol+"//"+window.location.hostname+"/feeds/"+postsOrPages+"/summary?start-index="+index+"#max-results=150#orderby=published#alt=json-in-script#callback=parseData"}
jsonUrl=jsonUrl.replace(/#/g,ampChar);script.type="text/javascript";script.src=jsonUrl;document.getElementsByTagName("head")[0].appendChild(script)}
function parseData(json){var database=[];if(!config.useApiV3){if(!urlTotal){urlTotal=parseInt(json.feed.openSearch$totalResults.$t)}
try{json.feed.entry.forEach(function(element,index){var entry=json.feed.entry[index];entry.link.forEach(function(element,index){if(entry.link[index].rel==="alternate")database.push(entry.link[index].href)})})}catch(e){}}else{try{json.items.forEach(function(element,index){database.push(element.url)})}catch(e){}
nextPageToken=json.nextPageToken}
urlSearch(window.location.pathname,database);if(urlTotal>150){fetchIndex+=150;urlTotal-=150;fetchData(postsOrPages[feedPriority],fetchIndex)}else if(nextPageToken){fetchData(postsOrPages[feedPriority])}else if(secondRequest){nextPageToken=undefined;urlTotal=0;fetchIndex=1;secondRequest=!1;if(feedPriority===0){feedPriority=1;fetchData("posts",1)}else if(feedPriority===1){feedPriority=0;fetchData("pages",1)}}}
function bloggerJS(priority){if(priority)feedPriority=priority;urlManager()}
bloggerJS()
</script>
Only copying and pasting this code will change the URL structure of your website but it is recommended (especially for blogs with a lot of content) to configure the script to work with Blogger's API v3. Because it is much higher in performance and speed.
This is a good thing if your website is new. But if your website is old and there are already a lot of pages indexed on Google then do not try this on your website.
Configuration
You can do some tweaks in this code. Here is all the configuration you can do.
| Property | Default value | Description |
|---|---|---|
| postsDatePrefix | false | Allow the date in the URLs of the entries/posts. |
| accessOnly | false | Short URLs are only used to access the site, but not in its general operation. |
| useApiV3 | false | Use Blogger API v3. |
| apiKey | - | Key API for using Blogger's v3 API. |
Consultation
In summary, a well-thought-out URL structure can have a positive impact on user experience, SEO, accessibility, and overall website organization. It's an essential element of web design and optimization that should not be overlooked.
