After drinking 2 espressos, Frank sits down, ready to chisel his new website.
He opens Squarespace, flips through his spreadsheets, and is ready to go.
Quickly, he hits a snag–
‘How will I organize my pages?’
Then more questions start to flow.
“What about SEO? How can I simplify my website pages, so they’re easily crawlable?”
And just like that, he becomes paralyzed with worry.
You see, Frank may have started with a nice spreadsheet of blueprints, but he was missing one basic ingredient:
But, what are sitemaps? And, why are sitemaps so important?
Like the good old days when we used physical maps to direct us to a certain place, sitemaps are no different for you and for helping Google make sense of everything on your website.
In fact, they are essential when creating a website and when updating it.
Without a sitemap, finding your website can be like finding a needle in a haystack for Google and other search engines.
So let’s peel back the layers of a sitemap and discuss different types of action so you can understand how to organize and use yours.
Different types of sitemaps
Most humans are visual by nature, so a visual sitemap might be your cup of tea if that sounds like you.
An HTML sitemap is a clickable link of pages on your site, which can be useful for users, while an XML sitemap is written so that Google can easily find all of your pages.
Now you might still be scratching your head mumbling “HTM-what!?”
So, let’s get into the juicy details.
Just as we might use Airtable or Asana as visual project management software, we can use a visual flowchart to organize website navigation.
This way it is easy for everyone to understand.
A visual sitemap (sometimes also called a “site structure”) is the foundation of website management.
It guarantees a clean website hierarchy and page taxonomy ensuring that your content is organized properly and easily searchable. Think of it as the bare bones of your site.
To create your visual sitemap, use a free tool like PowerPoint, as they have a useful flowchart feature.
Here’s what you’ll want to set up:
- Home page – Typically displayed at the top of a sitemap
- Primary Navigation – Also called “parent pages”, considered the main navigation of your website
- Secondary navigation – Also called “child pages” or “secondary pages”, most often displayed in a drop-down menu
- Tertiary pages – Located one level lower than your secondary navigation pages. Often not visible in site navigation (e.g. product pages on e-commerce sites)
- Special buttons/CTA (call to action) – Sometimes there are direct links to “book a demo” or “contact us” in the menu; be sure to include them as well.
An HTML sitemap is an organized table of contents for your website, accessible to users. When building your audience, website credibility, and SEO strategy, there’s nothing worse than a poor user experience.
Although it has become a bit dated (in my personal opinion), to ensure the best possible interaction with the website when growing your audience, consider an HTML sitemap.
HTML sitemaps make it easy to interact with your site and find exactly what they’re looking for. This is especially useful for e-commerce brands with many product pages or blog posts.
To start creating one, check if there is a plugin for your CMS (content management system) such as WordPress that can automate this process for you.
Check out this list of different WordPress HTML site plugins you can use!
An XML sitemap is a standardized URL format submitted to search engines for ease of crawling.
Basically, its main purpose is for Google to recognize and index your content. An XML sitemap is generally not visible to users.
If you care about getting search engines to find your website and show it to your customers, this is the type of sitemap you’ll want to pay attention to.
This is because they:
- Help search engines understand your site structure and index your web pages.
- Tell Google that you have new or updated content that needs to be indexed, which helps shorten the time it takes for that to happen.
There are many ways to create one which is quite simple.
5 Sitemap Examples Demonstrating Best Practices in Action
Now you have the tools you need and some of the steps under your belt, but most of us learn best with examples.
So let’s put these sitemaps into action!
There’s nothing worse than manually updating your sitemaps as your content or website plan changes, so save yourself the time (and headache) by integrating automation.
If your website is on WordPress, Yoast is the best way to automate sitemap updates.
Using the easily understandable sitemap from Yoast themselves, below is an overview of what a XML Sitemap with Yoast looks like:
On a quick note, in case you aren’t using a tool that automates sitemap submission, you can always manually submit your sitemap via Google Search Console or follow these instructions on manual sitemap submission from Yeast.
2. LinkedIn People Directory
Most books have a table of contents right in front, so readers know exactly what they’re getting into.
Much like a table of contents, your HTML sitemap should be placed conveniently somewhere where your audience doesn’t have to click away.
A solid website structure can increase accessibility and visibility.
And, when it comes to the length of your HTML sitemap, there really is no magic number. As long as the taxonomy of the page is clear and concise, you’ll be good to go!
Let’s take a look at a networking site we all love, LinkedIn.
They do a superb job of displaying their HTML sitemap and linking to over a million user pages through their people directory.
When developing a sitemap for Kindly, we focused on the balance between website user experience and SEO scalability.
These elements go together because SEO brings users to your website from the SERPs, while the website experience is what keeps them coming back for more.
The best long-term scenario is to create your sitemap (site structure) solely based on SEO through the keyword mapping process.
This process is what builds your “content verticals”, or in sitemap terms, the sections of your website that contain specific URL structures and have a home in your navigation menu.
Repeat this over time, and this is how you can create a win-win by adjusting SEO and having an easily searchable website.
You can review the Kindly sitemap by directly browsing their navigation menu:
4. The good guys
Here is an example of an e-commerce HTML sitemap from good guysa distribution chain in Australia:
The handy thing here is that they have a pretty massive website.
So, this HTML sitemap helps users manually skim through the sections most relevant to them, rather than using search filters, which can end up sending you in the wrong direction.
5. Toggle Ranking
A B2B marketing agency, Break out the leaderboardshas a fantastic XML sitemap which is automatically updated with the Yoast plugin in WordPress.
A few points to highlight that they did correctly are:
- Separate sections for blog posts, pages, and case studies.
- Recently Modified Content (which shows search engines that the website is up to date and therefore still authoritative).
- Correct URL structures with rocktherankings.com/parent-page/child-page.
Here you can see the URL structure and XML sitemap for their case studies:
See the full XML sitemap file here.
Key points to always keep in mind:
- Consider the three different types of sitemaps and choose the one that best suits your situation.
- Do the heavy lifting with sitemap automation tools.
- Think about all the moving parts, like content strategy and the people involved in that process, before creating your sitemap.
- When in doubt, keep your internal sitemap clean and easy to use.
If you forget everything else, remember this:
By automating with dynamic sitemap generators, you’ll spend a lot of time tinkering with development and maintenance.
Software and systems are our friends!
Featured image: fourSage/Shutterstock