Store Sitemap by vtex

The Store Sitemap app automatically generates a sitemap.xml file of your store website.

Once the app is deployed and installed in your account, your store will benefit from having a sitemap, which can lead to increased visibility of your site in search tools, such as Google.

For more information about generating a sitemap, check the following sections.

Before you begin

This app is available to stores using vtex.edition-store@3.x or a later version of the Edition App. To check which Edition App is installed on your account, run vtex edition get. If it is an older Edition, please open a ticket with VTEX Support asking for the installation of the vtex.edition-store@3.x Edition App or a newer version.

Before generating your store's sitemap, you might want to adjust whether products, navigation, apps, or custom routes will be included. If that is the case, check the Advanced Configuration section for more information.

Instructions

Using your terminal and the VTEX IO CLI, log into your account.
Run vtex use {workspaceName} --production to use a production workspace or create a production workspace from scratch.

Remember to replace the values between the curly brackets according to your scenario.
Run vtex install vtex.store-sitemap@2.x to install the Sitemap app.

If you are using vtex.edition-store@5.x, skip step 3, as the vtex.store-sitemap@2.x app is installed by default in this version. Check out our Edition App documentation to know more about its different versions.
Run vtex install vtex.admin-graphql-ide@3.x to install the GraphQL admin IDE.
In your browser, access the Admin and go to Store Setting > Storefront > GraphQL IDE.

An error occurred while loading the image https://cdn.jsdelivr.net/gh/vtex-apps/store-sitemap@main/docs/graphql-ide.png
From the dropdown list, choose the vtex.routes-bootstrap@0.x app.
If this is not the first time you are generating your store's sitemap or if your store's routes did not suffer any changes since the last time you generated your store's sitemap, go to step 8. Otherwise, run the following query:

_10{ _10 bootstrap { _10 brands _10 categories _10 } _10}

The expected response body is

_10{ _10 "data":{ _10 "bootstrap": { _10 "brands": true, _10 "categories": true _10 } _10 } _10}
Now, from the GraphQL IDE dropdown list, select the vtex.store-sitemap@2.x app.
Run the following query:

_10{ _10 generateSitemap _10}

The expected response body is

_10{ _10 "data": { _10 "generateSitemap": true _10 } _10}

This means your sitemap will be available in some minutes, after being processed and saved on our database.

Keep in mind that the time taken to generate a sitemap is proportional to the number of products. For example, the average time to generate a sitemap for a store with 60k products is 30 minutes. For 5k products, the duration should be about 5 minutes.

If you attempt to send a new request to the Sitemap API while your store's sitemap generation is already taking place, the following message will be displayed:

_10Sitemap generation already in place _10Next generation available: <End-date>

To force a restart, add the force argument to the query, as in: generateSitemap(force: true). Be aware that this will cancel the previous process.
Check the sitemap generated for the current workspace you are working on by accessing https://{workspace}--{account}.myvtex.com/sitemap.xml on your browser. Notice that if your store is a cross-border one, you will first see an index containing a website's sitemap for each locale.

Notice that different .xml files are generated according to their entity type (product, category, subcategory, user routes, brand, and department) and that each .xml file supports a maximum of 5k routes.
If you are happy with the results, run vtex promote to promote your workspace and include your sitemap in your master workspace.

Once you promoted your workspace, no further actions are needed on your part: you are ready to check out your store's sitemap by accessing https://{account}.myvtex.com/sitemap.xml on your browser.

Advanced configuration

Managing routes

You can manage if you want to include product, navigation, apps and/or routes containing your specific term in your sitemap or not. To do that, check the following instructions.

In your browser, access the account's Admin in which you are working using the Production workspace used in the step 2 of the Configuration section ({workspace}--{account}.myvtex.com/admin).
Go to Account settings > Apps > My apps and search for Sitemap app.
Enable or disable product, navigation, apps, or routes containing your specific term based on your scenario.
${"base64":" ","img":{"width":3024,"height":1885,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":478142,"url":"https://github-production-user-asset-6210df.s3.amazonaws.com/112641072/299387054-649f7dcf-583d-497f-a69c-4cfc3d8a805a.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20241122%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20241122T213725Z&X-Amz-Expires=300&X-Amz-Signature=c9b5587f6aaceaf1ae99fffce9af4c90a2d4998b235129778f4fc970fa618da9&X-Amz-SignedHeaders=host"}}$

Enabling custom routes

If you have custom pages configured in a routes.json file and want them to be included in your store's sitemap, add isSitemapEntry=true as a prop of the routes you want to include in the sitemap. Take the following example:


_10{
_10    "store.custom#about-us": {
_10      "path": "/about-us",
_10      "isSitemapEntry": true
_10  }
_10}

Once everything is set up, go back to step 4 of the Configuration section.

Extending the sitemap

To add custom routes created by an app (for example, the ones created by the store-locator) to your store's sitemap, the app must respond to an XML file containing a list of the routes created by that app. Lastly, you must include the path to the XML file that your app responds to as an index of your store's sitemap.

For implementation details, check the following instructions.

Create or modify your app to respond to the following route /sitemap/{index-name}.xml and to return an XML file containing the data that you want the search engine (e.g., Google) to index. Remember to replace the values between the curly brackets according to your scenario.

We recommend that you use a pre-created XML file. Otherwise, the XML file will be built from scratch for every request, consuming more time to complete the task.
Publish and install your app in a production workspace.
Now, to make your index available in the sitemap root file (/sitemap.xml), access your account's admin, relative to the workspace you're working on, and select the GraphQL IDE.
From the dropdown list, choose the vtex.store-sitemap@2.x app and perform the following mutation, adapting it to your scenario:

_10mutation { _10 saveIndex(index: "{index-name}") _10}

If your store is a cross-border one, note that the saveIndex mutation also accepts the binding ID as an argument. That means that by specifying the binding ID, you can add your new index to the sitemap of the desired binding. If the binding ID is not specified, the mutation will consider the store's default binding.
Check the updated sitemap for the current workspace you are working on by accessing https://{workspace}--{account}.myvtex.com/sitemap.xml in your browser.
If you are happy with the results, run vtex promote to promote your workspace and include your sitemap in your master workspace.

Removing a custom route

If you ever want to remove a custom route, you may execute the following mutation, which takes the same arguments as saveIndex:


_10mutation {
_10   deleteIndex(index: "{index-name}")
_10}