Velo How-To: On SEO For Router Pages

Written by velo | Published 2021/05/26
Tech Story Tags: velo | software-development | backend | web-development | wix | beginners | javascript | coding-with-velo

TLDR You can define the page title, description, and social network images for router pages just like you can for regular pages. Since router pages do not contain static data, their SEO information must be set dynamically. There are two parts to setting up SEO on your router pages: Creating a sitemap for Google to use to find your pages. Each page includes information about a page, such as its URL, title, name, and name. You can also add additional information about each page such as how often its content changes.via the TL;DR App

SEO Settings for router pages vary slightly from the settings for regular pages. Learn about SEO for Wix pages here.
You can define the page title, description, and social network images for router pages just like you can for regular pages. The difference is that since router pages do not contain static data, their SEO information must be set dynamically, so they reflect the real content they will hold when they are viewed.
There are two parts to setting up SEO on your router pages:
  • Create meta tags for Google to learn about your pages.
  • Create a sitemap for Google to use to find your pages.

Meta Tags

You set SEO meta tags for your router's pages when you create the router's router() function. Within that function, you create a HeadOptions object and pass it to the page you route to using the ok() function.
For example, in the sample code that is provided when you add a router, the following code uses the data retrieved by the router to build a HeadOptions object and pass it to the page named myRouter-page.
export function myRouter_Router(request) {

  // retrieve data for the page ...
    
  let seoData = { 
    title: data.title, 
    description: "This is a description of " + data.title + " page",
    noIndex: false,
    metaTags: {
      "og:title": data.title,
      "og:image": data.image
    }
  };
       
  return ok("myRouter-page", data, seoData); 
    
  //...
}
The 
HeadOptions
 object contains several properties that you can set with relevant values using the data you retrieve in your 
router()
 function. The
title
 and 
description
 properties contain the page's title and description that are used for SEO purposes. The object can also contain a
noIndex
flag that tells Google whether it should index your page. Additional meta tags can be added to the 
metaTags
 property.
The 
HeadOptions
 object can also contain a keywords property, but Google ignores your site's keywords.

Sitemap

Your site's sitemap is what Google uses to find all your site's pages. Pages on your site that don't belong to a router are added to your site's sitemap for you. However, since you fully control what pages are available through your router, including all of their dynamically different versions, you need to create a sitemap that contains all possible URLs that are connected to your router's prefix so Google can find them.
To add your router's pages to your site's sitemap, you create a sitemap() function for the router. Within that function, you create a WixRouterSitemapEntry object for each URL the router can possibly route to. Each 
WixRouterSitemapEntry
 includes information about a page, such as its URL, title, and name. You can also add additional information about each page, such as how often its content changes, when the last change was, and its relative priority within your site. Google uses the sitemap entries to discover all the pages in your site.
For example, in the sample code that is provided when you add a router, the following code uses the data retrieved by the router to build a
HeadOptions
 object and pass it to the page named myRouter-page.
export function myRouter_SiteMap(sitemapRequest) {

  //Convert the data to site map entries
  let siteMapEntries = Object.keys(peopleData).map( (name) => {
    const data= peopleData[name];
    let entry = new WixRouterSitemapEntry(name);
    entry.pageName = "myRouter-page";
    entry.url = "/myRouter/" + name ;
    entry.title = data.title;
    return entry;
  } );

  // Wrap in asynchronic Promise
  return Promise.resolve(siteMapEntries);
}
To ensure that your sitemap is working properly, you can get the sitemap from your published site. In a web browser, go to your published site's URL and append /sitemap.xml to it.
For example, for premium sites, if your site's published URL is: https://mysite.com
Go to: https://mysite.com/sitemap.xml
For free sites, if your site's published URL is: https://username.wixsite.com/site-name
Go to: https://username.wixsite.com/site-name/sitemap.xml

Written by velo | Velo is a full-stack development platform that empowers you to rapidly build, manage and deploy professional web apps.
Published by HackerNoon on 2021/05/26