Search.../

sitemap( )

Function containing sitemap logic for a given URL prefix.

Description

The sitemap() function handles sitemap requests for pages with the specified URL prefix. Use this function to make sure search engines can find the links to your router's pages.

The sitemap() function is not a function that you call from your code. You define the function in a file named routers.js in the Code File's Backend section of the Velo Sidebar. The function is called when a sitemap request is received for the router with the specified prefix.

The function receives a WixRouterSitemapRequest object containing information about the incoming sitemap request.

The function returns an array of WixRouterSitemapEntry objects each of which includes information about a page, such as its URL, title, and name.

To create sitemap entry objects, first import WixRouterSitemapEntry from wix-router:

import {WixRouterSitemapEntry} from "wix-router";
javascript | Copy Code

The sitemap() function is also used to populate the items preview widget, allowing you to switch between URLs in preview mode.

Note: The sitemap() function also runs when you navigate to a router page in the Editor.

Syntax

function sitemap(request: WixRouterSitemapRequest): WixRouterSitemapEntry

sitemap Parameters

NAME
TYPE
DESCRIPTION
request

The sitemap request.

Returns

Fulfilled - An array of sitemap entries.

Return Type:

Promise<Array<WixRouterSitemapEntry>>

Was this helpful?

Sitemap stub

This example creates a sitemap on the myRouter prefix.

Copy Code
1// In routers.js
2
3export function myRouter_SiteMap(sitemapRequest) {
4 // sitemap code ...
5}
6
Basic sitemap

This example creates a sitemap on the myRouter prefix by looping through a data object and creating a sitemap entry for each object.

Copy Code
1// In routers.js
2
3import {WixRouterSitemapEntry} from 'wix-router';
4
5export function myRouter_SiteMap(sitemapRequest) {
6
7 let siteMapEntries = [];
8
9 // Create a sitemap entry for each item
10 for (var key in myData) {
11 let entry = new WixRouterSitemapEntry();
12 entry.pageName = "myRouter-page";
13 entry.url = "/myRouter/" + key;
14 entry.title = myData[key].title;
15 siteMapEntries.push(entry);
16 }
17
18 // Return the sitemap entries
19 return siteMapEntries;
20}
21
A sitemap with static data

This example creates a sitemap on the myRouter prefix by mapping an object's keys to an array of corresponding sitemap entries.

Copy Code
1// In routers.js
2
3import {WixRouterSitemapEntry} from 'wix-router';
4
5// Sample data
6const peopleData = {
7 "Ash": {
8 title: "Ash Stowe",
9 imageSite: "https://static.wixstatic.com/media/",
10 image: "b8f383e0fe2b478ea91362b707ef267b.jpg"
11 },
12 "Aiden": {
13 title: "Aiden Johnson",
14 imageSite: "https://static.wixstatic.com/media/",
15 image: "ca3c7ac5427e43928aa5f3f443ae2163.jpg"
16 },
17 "Jess": {
18 title: "Jess White",
19 imageSite: "https://static.wixstatic.com/media/",
20 image: "147fe6f37fe24e83977b4124e41b6d3d.jpg"
21
22 },
23 "Morgan": {
24 title: "Morgan James",
25 imageSite: "https://static.wixstatic.com/media/",
26 image: "59e1f2f4dbbc4f7c9d6e66e3e125d830.jpg"
27 }
28};
29
30export function myRouter_SiteMap(sitemapRequest) {
31
32 //Convert the data to sitemap entries
33 const siteMapEntries = Object.keys(peopleData).map( (name) => {
34 const data = peopleData[name];
35 const entry = new WixRouterSitemapEntry(name);
36 entry.pageName = "myRouter-page";
37 entry.url = `/myRouter/${name}`;
38 entry.title = data.title;
39 return entry;
40 } );
41
42 // Return the sitemap entries
43 return siteMapEntries;
44}
45
A sitemap with collection data

This example creates a sitemap on the myRouter prefix using data retrieved from a collection.

Copy Code
1// Place this code in the routers.js file
2// of your site's Backend section.
3
4import wixData from 'wix-data';
5import { WixRouterSitemapEntry } from 'wix-router';
6
7export async function myRouter_SiteMap(sitemapRequest) {
8
9 // Retrieve the sitemap data from a collection.
10 const results = await wixData.query('mySitemapProperties').find()
11 const properties = results.items
12
13 // Convert the data to site map entries.
14 const sitemapEntries = properties.map(property => {
15 const entry = new WixRouterSitemapEntry(property.title);
16 entry.pageName = 'myRouter-page';
17 entry.url = '/myRouter/' + property.slug;
18 entry.title = property.title;
19 return entry;
20 });
21
22 // Return the site map entries.
23 return sitemapEntries;
24}
Build a sitemap for the helloworld prefix

This example shows how to build a sitemap for the helloworld prefix. It begins by retrieving the items from the Greetings collection, then builds a sitemap entry for each item. It also builds one more sitemap entry for the index page. You can test out the code in our example template.

Copy Code
1// Place this code in the routers.js file
2// of your site's Backend section.
3
4import {WixRouterSitemapEntry} from "wix-router";
5import wixData from 'wix-data';
6
7
8export async function helloworld_SiteMap(sitemapRequest) {
9 const { items: greetings } = await wixData.query('Greetings').find();
10
11 // Convert the data to site map entries
12 const siteMapEntries = greetings.map(greeting => {
13 const entry = new WixRouterSitemapEntry(greeting.title);
14 entry.pageName = 'item-page'; // The name of the page in the Wix editor to render
15 entry.url = '/helloworld/' + greeting.slug; // Relative URL of the page
16 entry.title = greeting.title; // For better SEO - Help Google
17 return entry;
18 });
19
20 const indexEntry = new WixRouterSitemapEntry('Greetings Index');
21 indexEntry.pageName = 'index-page'; // The name of the page in the Wix editor to render
22 indexEntry.url = '/helloworld' // Relative URL of the page
23 indexEntry.title = 'Greetings Index'; // For better SEO - Help Google
24
25 siteMapEntries.push(indexEntry);
26
27 // Return the site map entries
28 return siteMapEntries;
29}