Adding HTML Sitemap to Footer of Website?

Gary_Glandon
Tourist
5 0 2

Hello All,

I have read that having a sitemap page linked on your website can help with SEO by making it easier to crawl. In addition, I have looked at a number of websites from large companies and found that many have a sitemap page linked in the footer of their websites. Believing that these large companies most likely know what they're doing in terms of SEO, I would like to add one to my website, linked in my footer. Unfortunately, I can't find any easy way to go about this. The only info I can find about sitemaps on Shopify is how to submit the XML sitemap to Google. I have already done this but would now like it on my actual website. Does anyone have an easy solution to this? Thank you

Replies 22 (22)

Nick_Atkinson
Pathfinder
83 1 35

Hi Gary,

Usually those site maps are just a giant categorized link list check out how this successful clothing company displays their sitemap: https://www.express.com/g/site-map

A few more examples:

Macys
Nordstrom

Gary_Glandon
Tourist
5 0 2

Yes, that's basically what I had in mind. I can't figure out an automatic way of doing this. It would be a pain to add all of those manually and then alter it every time I add or delete a page.

Nick_Atkinson
Pathfinder
83 1 35

You could in theory get this automated by using a for loop like the one below:

{% for collection in collections %}
    https://mystore.myshopify.com/collections/{{ collection.handle }}<br>
{% endfor %}

Gary_Glandon
Tourist
5 0 2

Okay, thank you. I'll experiment with this and see if I can get it to work

kbihm
New Member
6 0 0

Hi Gary.

If you are using shopify store then you don't need to create any sitemap

All Shopify stores automatically generate a sitemap.xml

The sitemap file is located at the root directory of your Shopify store's Primary domain name. For example: 

example.com/sitemap.xml

Replace example.com with your domain name to check the url is working.

IF its not on Shopify, Still no need to worry every Cms like Wordpress, Magento etc has there own Plugins, extentions etc for site map which are Userful and free available.

You just need to ADD that Plugin into your website and its linked.

kbihm
New Member
6 0 0

Hi Gary,

If you are using Shopify store then there is no need to create or submit any sitemap.

Because, All Shopify stores automatically generate a sitemap.xml

The sitemap file is located at the root directory of your Shopify store's.

You can check through url by entering into the Url into address bar like below example.

example.com/sitemap.xml

Here example.com is your website domain name 

If your website is not in shopify. Still no need to worry just use the plugin or extension which are free to download as per the website created on.

Like if the Website is on Wordpress then you can go to plugins menu in admin and Add the most useful one (Check reviews for best).

and the rest is done.

Mujji
Visitor
3 0 0

Yes, it is the best strategy to add your HTML sitemap in website footer to allow Google to find your site pages faster and also add sitemap URL into your robot.txt file 

Robert_Lickley
Tourist
9 0 14

Create a Template page called sitemap-html (for example)

Copy the basic code from your default page.liquid so it shows the same as your existing site.

Where the section for content goes replace it with something like this - sorry its messy!

Now make a new page in the admin screen with the name Site Map and select "site-map" as the template for this page.

Voila - you have a list of all collections and all products on a page.

It wont be the neatest, but it will help with SEO as now every product and every collection will have a link on the site.

Why bother paying for something when it is easy to do for free!

(Oh btw I incorporated some basic bootstrap into my theme - youll have to change the div classes to get two columns if you want it to show like that)

        <div class="row">
<div class="col-md-6">
  <h2>Collections</h2>
       <ul>
  {% for c in collections %}
  <li>
    <a href="{{ c.url }}">{{ c.title }}</a>
  </li>
  {% endfor %}
</ul> 
        </div>
          <div class="col-md-6">
            <h2>Products</h2>
            <ul>
  {% for product in collections.all.products %}
  <li>
    <a href="{{ product.url }}">{{ product.title }}</a>
  </li>
  {% endfor %}
</ul> 
          </div>
    </div>
bestdealonline5
Tourist
5 0 0

It's a great solution my friend, and it works for me .... almost!

Actually, I can see only a part of the "all products" say the first 40's - and there are 300. 

Do you have any idea why the others don't appear?

You talked about 2 columns and I m not so good in codes. May you explain me better how to do it?

 

Thank you very much!

Jonasskalbo
Visitor
2 0 0

Hi all,

 

I had the same problem, and i've found a guide here: https://answers.squarespace.com/questions/21067/generate-html-sitemap.html

 

You can follow this method to get all of your links properly extracted, but you do need to organize and style it afterwards.

Jonasskalbo
Visitor
2 0 0

@Jonasskalbo wrote:

Hi all,

 

I had the same problem, and i've found a guide here: https://answers.squarespace.com/questions/21067/generate-html-sitemap.html

 

You can follow this method to get all of your links properly extracted, but you do need to organize and style it afterwards.


Found out that this is not optimal, but it's the best i've got so far.

Used it on Snippet SEO and WEIZ but you'll need to update it every now and then.

JonWright
Shopify Partner
818 123 361

Hi - it's because Shopify limits 'for loops' to return a max of 50 results. You can get around this by adding a pagination limit. Here's the section of amended code which will return up to 1000 products:

 

{% paginate collections.all.products by 1000 %}
  {% for product in collections.all.products %}
  	<li>
    <a href="{{ product.url }}">{{ product.title }}</a>
 	 </li>
  {% endfor %}
{% endpaginate %}

You just change the number in {% paginate collections.all.products by 1000 %} to whatever the max number of products you have e.g. {% paginate collections.all.products by 500%} will return up to 500 products.

 

Here's the full code:

<div class="row">
<div class="col-md-6">
  <h2>Collections</h2>
       <ul>
  {% for c in collections %}
  <li>
    <a href="{{ c.url }}">{{ c.title }}</a>
  </li>
  {% endfor %}
</ul> 
        </div>
          <div class="col-md-6">
            <h2>Products</h2>
            <ul>
              
{% paginate collections.all.products by 1000 %}
  {% for product in collections.all.products %}
  	<li>
    <a href="{{ product.url }}">{{ product.title }}</a>
 	 </li>
  {% endfor %}
{% endpaginate %}

            </ul> 
          </div>
    </div>
      </div>
    </div>
  </div>
</div>
If helpful then please Like and Accept Solution

Owner of Neuralcandy Shopify Agency
Jakobi
Tourist
10 0 5

Thank you, this works great. What is the best way to sort the products and collections by title for example? I have tried a few things but no luck. Any suggestions? Thanks.

CMcJenkin_DFW
Visitor
1 0 0

I have this code above in a template and my collections and products are displayed as they should...

but I need the articles in my store in this same template. I have tried a few things around Pagination of blog.articles, but can't seem to find a solution.

My need: This page - https://barbecueathome.com/pages/html-sitemap - needs articles below the products in the same bulleted style list as the products and collections.

Oliver_Blake
Excursionist
42 0 17

For those of you who still try to figure that out, I just made this and it seems to be working, the only thing I am trying to do is to add the rest of the pages in "other pages" category. Anyway, it displays the blogs & policies, it's also styled in a table format. It is also responsive design and mobile friendly.

example -> https://muave.co.uk/pages/sitemap

<!-- Add Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>
  body {
    font-size: 20px;
  }

  .table-cell {
    border: 1px solid #ccc;
    padding: 10px;
    vertical-align: top;
  }

  .table-cell h2 {
    margin-top: 0;
  }

  a {
    color: #cb83b5;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
</style>

<div class="container">
  <div class="row">
    <!-- Collections -->
    <div class="col-md-4 col-sm-6 table-cell">
      <h2>Collections</h2>
      <ul>
        {% paginate collections by 10 %}
          {% for c in collections %}
            <li>
              <a href="{{ c.url }}">{{ c.title }}</a>
            </li>
          {% endfor %}
        {% endpaginate %}
      </ul>
    </div>

    <!-- Products -->
    <div class="col-md-4 col-sm-6 table-cell">
      <h2>Products</h2>
      <ul>
        {% paginate collections.all.products by 1000 %}
          {% for product in collections.all.products %}
            <li>
              <a href="{{ product.url }}">{{ product.title }}</a>
            </li>
          {% endfor %}
        {% endpaginate %}
      </ul>
    </div>

    <!-- Blog Posts -->
    <div class="col-md-4 col-sm-6 table-cell">
      <h2>Blog Posts</h2>
      <ul>
        {% paginate blogs['blog'].articles by 1000 %}
          {% for article in blogs['blog'].articles %}
            <li>
              <a href="{{ article.url }}">{{ article.title }}</a>
            </li>
          {% endfor %}
        {% endpaginate %}
      </ul>
    </div>

    <!-- Policies -->
    <div class="col-md-4 col-sm-6 table-cell">
      <h2>Policies</h2>
      <ul>
        {% for link in linklists['policies'].links %}
          <li>
            <a href="{{ link.url }}">{{ link.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>

    <!-- Other Pages -->
    <div class="col-md-4 col-sm-6 table-cell">
      <h2>Other Pages</h2>
      <ul>
        {% for link in linklists['other-pages'].links %}
          <li>
            <a href="{{ link.url }}">{{ link.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</div>

 

shefsam1
Excursionist
21 0 2

Thanks!  Exactly what I was looking for.

 

How can I give it some format on the page though?

WaterBottleShop.Online
https://waterbottleshop.online
lisibisi
Visitor
2 0 3

This is great @JonWright . Thanks. Do you also have code for the Content Pages to be added or should we just add those manually?

lisibisi
Visitor
2 0 3

Also @JonWright , do you have a code to add for blog posts? Then it will be a full html sitemap 

youbix
New Member
4 0 0

Yes please how to add plog post in html sitemap

babysoftluke
Shopify Partner
11 0 2

Hey Everyone,

This should help you out: https://apps.shopify.com/the-shop-html-seo-sitemap

It generates an HTML Sitemap that lives at storename.myshopify.com/tools/sitemap and it updates whenever you update content within your website. So you don't need to worry about adding/deleting things from it. The app also gives you instructions to upload a link into the footer of your store site.

KevinW
Explorer
55 8 71

Hey @Gary_Glandon, have you figured out a solution yet?

 

I'm a technical SEO consultant with lots of experience diagnosing and fixing crawling/indexing issues and I can confirm that a HTML sitemap linked in the footer might help (and certainly can't hurt) your SEO. You can safely ignore @kbihm's misguided advice.

 

While it's true that the XML sitemap Shopify automatically generates and updates is essential for SEO, there's absolutely no reason why you shouldn't consider adding an HTML version as well. Virtually anything you do to help Googlebot efficiently discover and crawl your content is considered a technical SEO best practice. In fact, Google's Webmaster's Guidelines explicitly state "Provide a sitemap file with links that point to the important pages on your site. Also provide a page with a human-readable list of links to these pages (sometimes called a site index or site map page)." I hope this clears things up. 

 

I'm in the process of implementing an HTML sitemap solution for a client with a Shopify store. I've found 3 Shopify Apps that may do the trick. All of them charge a small monthly fee though so I'm looking into alternatives. I'll let you know what I ultimately decide on and I'll follow-up 30 days later with evidence that it either does/doesn't help.

 

Has anyone found any solutions other than the one proposed in this thread? @Robert_Lickley, could you share a live URL (or at least a screenshot) that demonstrates your solution? For example, the 2nd app listed above (which I think does the best job) provides this page as an example.

Kevin Wallner // SEO & Analytics Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Ready to accelerate your SEO growth? Let's chat!
Anttopham
Tourist
7 0 5

Hi All,

 

Found the follow FREE app that seems to do the job. 

Some decent customisation ability in terms of selecting items that you'd like in the sitemap at least. 

 

https://apps.shopify.com/magical-sitemap