Understanding HTML Sitemaps as well as XML Sitemaps and How They Benefit Your Shopify Store
Have you ever spent more time navigating a website than actually using it? Maybe you were trying to find a phone number, buried like treasure at the bottom of the sea.
When you visit a website, you expect to find a site’s pages listed in the menu at the top of the home page. It’s easy to navigate and find what you’re looking for.
However, some websites are complex. They may not show all of their pages in the menu. Some may have hundreds, if not thousands of pages.
No matter how big or complex it is though, a Shopify HTML sitemap as well as XML sitemap are great for your store. Here’s why:
- Users of all ability levels can find what they are looking for easier.
- Search engines can index your website quicker.
But there are many types of sitemaps. Each has a different purpose for your website. In this article, I’ll:
- Define what a sitemap is
- Outline the different types of sitemaps
- Explain why sitemaps are so important
As a sales and marketing specialist at Magical Apps, I’ve helped over 250 Shopify merchants set up and launch their websites.
Before launching a new website, my team and I would set up and configure their sitemaps. Most of them might not realize it today, but these sitemaps are important for their Shopify store. In fact, most of them might not even know what a sitemap is, or what types of sitemaps exist.
Are you building a website on your own? Do you want to learn more about what your web team is doing? In either case, it’s important to have a baseline understanding of what a sitemap is.
This is the first step in our Guide to Shopify XML & HTML Sitemaps. By the end of it, you’ll have mastered the basics. You will be ready to move on to the next step: finding a solution on how to add a sitemap to your website.
What is a sitemap?
According to Google’s definition:
A sitemap is a file where you provide information about the pages, videos, and other files on your site, and the relationships between them.
A good way to think of sitemaps is to compare them to mall directories at shopping malls that show you the floor plan where all the stores, food court, and restrooms are located.
Most malls will prioritize updating this directory so that customers know when stores move or when new stores open.
If the mall doesn’t update it, customers will end up lost, and they won’t know when new stores open, meaning those new stores will be left to rely on foot traffic.
The sitemap file on your website operates similarly. The visual layout makes it easier for people to navigate the mall, makes them want to shop there, customers can plan the most efficient route to the store they want to go to, and directories are updated to reflect new stores, relocated stores, or any changes in the mall’s layout.
It organizes all the website’s pages neatly in a hierarchical order. This lets people find what they’re looking for at a glance. Sitemaps also let search engines like Google know more about these pages, like when it was last updated, how often they change, and how important they are relative to each other.
What types of sitemaps exist?
There are two main types of sitemaps: XML sitemaps and HTML sitemaps. There are also some variations of these which have more niche usage cases.
XML Sitemaps
An XML Sitemap is a file that lists a website’s pages in a way that makes it easy for search engines to find them all. These are very important, so much so that Shopify automatically generates this for its users and keeps it updated regularly.
HTML Sitemaps
An HTML sitemap is a page on a website that lists all of the website’s pages plainly in an organized hierarchy. You might also find smaller sitemaps in the footer of the website.
These are typically designed to improve the user experience and make it easier for people to use your website, but they also come with other benefits such as better SEO support and better accessibility.
Image Sitemaps
An image XML sitemap provides search engines with information about the images on your website. This helps search engines better index the images.
These are ideal websites with JavaScript-loaded images as these are difficult for search engine crawlers to detect and index.
Image sitemaps are also ideal for websites where images play a large role in user experience, such as e-commerce, travel and tourism, and photography.
Image sitemaps can be created independently, or you can add image sitemap tags to your existing sitemap. Google has published instructions for Adding Images to your Sitemaps which go over how you can add <image:image> tags to your existing XML sitemap.
Video Sitemaps
Similarly to image sitemaps, video sitemaps provide search engines with information about the videos on your website.This helps search engines better index videos.
Video sitemaps are ideal for websites that host a large number of videos, have complex structures, or frequently update their video content.
According to Google, “You can create a separate sitemap or mRSS feed just for video, or you can add video sitemap tags within an existing sitemap, whichever is more convenient for you.”
If you add video tags, there is a list of required tags that can be viewed here.
News Sitemaps
A news sitemap is an XML Sitemap that lists all of URLs on a website that contain news content, which is then submitted to search engines. This is important for news-based websites because this type of content is time-sensitive and can quickly become irrelevant if search engines do not properly index it.
Mobile Sitemaps
A mobile sitemap is a version of an XML sitemap that helps search engines understand the structure and organization of a website for mobile users.
The need for mobile sitemaps has declined over the years. These sitemaps were more important when websites had separate URLs for desktop and mobile versions. Responsive website designs have become the standard today, and most websites no longer need a separate mobile version.
You might find mobile sitemaps on larger-scale websites like major news sites or huge ecommerce platforms where the mobile version might significantly change the way the site is navigated. You might also find it on websites that have mobile-only content or mobile-only elements.
Examples of sitemaps
XML Sitemaps
These days you’ll find most e-commerce platforms and website builders will automatically generate XML sitemaps for websites hosted on their platforms, and that includes Shopify.
To view an XML Sitemap on Shopify, all you have to do is enter /sitemap.xml as the suffix to your domain in the URL.
For example, domain.com/sitemap.xml
Here is an example of a Shopify XML Sitemap for a Shopify store.
https://sitemap.magicalapps.com/sitemap.xml
Looking at this probably isn’t very useful to you or your website’s visitors. This information is primarily for search engine crawlers to locate and identify the pages on your website.
Over time, search engines will be able to find this information, but if you have a newer website and you’d like to speed this process up you can submit your XML Sitemap to Google.
HTML Sitemaps
Not all websites will have a visible HTML sitemap, but it’s a good idea to consider adding one. Typically you’ll find the sitemap on a dedicated page or in the footer of the website if it’s simple enough.
View this demo site to see an example of an HTML sitemap.
HTML sitemaps are not available by default in Shopify, so you’ll need to create one or use an app to add on.
Using an app is the fastest and easiest way to add an HTML sitemap to your website.
Using an app is the fastest and easiest way to add an HTML sitemap to your website. Compare the 4 Best Shopify Sitemap Apps here.
Image Sitemaps
Image sitemaps are similar to XML sitemaps. They are purpose-built for search engines to help crawl your site better, so they aren’t useful to your website users.
In this example of an image sitemap, you can see where each image is located, when it was last modified, and the image title. These parameters are useful to search engines and help your website rank well for image searches.
News Sitemaps
It’s probably rare to find news sitemaps on Shopify websites, but if you manage a Blog with regularly updated articles or a news section that covers industry news, product launches, or other content that could be considered timely and relevant, then a news sitemap might be for you.
Google News sitemaps are not the same as “standard” Google Search sitemaps so you’d need to create a new one if you want to submit your site to Google News.
In this example of a Google News sitemap, you can see the title of each article, the URL where each article lives, and the date it was published.
In this example, you can also see the required tags outlined by Google including news, publication, name, language, publication date, and title tags.
What are the top reasons to use sitemaps?
Some sitemaps, such as the XML sitemap, are critical for all websites. Others are recommended only for certain types of websites.
I’ll review the sitemaps that are most important for Shopify stores, XML and HTML sitemaps:
XML Sitemap
Get found by search engines
The main purpose of an XML sitemap is to help your website get found by search engines. This is a critical element of a website, especially if your website is newer or if the page structure has recently changed.
Surface buried content
XML Sitemaps also makes it possible to find pages that are not linked from the main menu or that are several layers deep. XML Sitemaps can also assign more weight to specific pages so that search engines can pick up on which pages you consider more valuable, and potentially influence crawl priority.
Improve crawling speed
An XML Sitemap is essentially a roadmap of the content on your website, letting search engines crawl your site more efficiently. Without an XML sitemap, search engines rely on their own methods to crawl your website which can be significantly slower.
The good news is that most website builders and e-commerce platforms like Shopify already have an XML Sitemap built-in.
You can learn how to submit your XML Sitemap here.
HTML Sitemap
Using an HTML sitemap on your Shopify website comes with 3 main benefits:
Improved User Navigation
An HTML sitemap will provide a clear, accessible overview of your website’s page structure which lets users find what they’re looking for at a glance. This is especially useful if your website’s content is not organized conventionally.
Personally, I know I always look at the right-hand side of a menu for the contact page, but if it’s not there for any reason I will go to a sitemap and search for “Contact”. If I can’t do either of these two things, then I’ll likely be frustrated.
One good example of a website that is hard to navigate this way is the Yale School of Art. There is no Contact page or contact information directly on the homepage. The saving grace of this website is the HTML Sitemap which lets users see all of the website’s pages in one place.
SEO Improvements
Similarly to XML Sitemaps, HTML sitemaps help search index and crawl pages that are several layers deep in your website.
Descriptive page links also tell search engines about the context of the pages on your website. The improved user experience can also lead to longer visit durations and lower bounce rates. This earns you points with search engines who see this as favourable.
Many of the Shopify merchants I’ve spoken to in the past have mentioned that getting more customers to their website is their biggest online challenge, so it’s important not to cut corners here and to give your website all of the care it needs to get found.
Improve Accessibility
The clear and hierarchical layout of these sitemaps is easier for screen readers or other assistive technologies to interpret. For those who only use keyboards and no mouse, HTML sitemaps are much easier to navigate.
Adding an HTML sitemap to your website can in part help you adhere to Web Content Accessibility Guidelines (WCAG), which recommends providing multiple ways to find pages on a website.
According to W3C standards and guidelines on How to Meet WCAG, providing a sitemap and providing a list of links to all other Web pages are 2 techniques to make your website more navigable.
To further explore why HTML sitemaps are just as important as XML sitemaps, you can read the Top 4 Reasons Why Your Shopify Store Needs A HTML Sitemap.
Shopify merchants I’ve spoken to in the past have mentioned that getting more customers to their website is their biggest online challenge, so it’s important … to give your website all of the care it needs to get found.
Further Reading
Magical XML/HTML Sitemap
Easily add customizable XML/HTML sitemaps, improve navigation, and start ranking higher on Google with the Magical XML/HTML Sitemap app.