Shopify themes, liquid, logos, and UX
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
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:
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.
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 %}
Okay, thank you. I'll experiment with this and see if I can get it to work
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.
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.
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
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>
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!
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 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.
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>
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.
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.
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>
Thanks! Exactly what I was looking for.
How can I give it some format on the page though?
This is great @JonWright . Thanks. Do you also have code for the Content Pages to be added or should we just add those manually?
Also @JonWright , do you have a code to add for blog posts? Then it will be a full html sitemap
Yes please how to add plog post in html sitemap
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.
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.
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.
Hey dude. I downloaded an app called StoreSEO. I got the free version. It's okay but it's will create an HTML site map and put the in your footer. I found this thread trying to figure out how to print it out. Hope that helped.
Tim,
Paint Me twisted
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024