Help Center

Menu

Create dynamic title tags using Server Side JavaScript (SSJS)

Title tags (<title>) are an important part of the page structure when it comes to SEO and bookmarking. The website moz.com suggests that the optimal format for this is Primary Keyword - Secondary Keyword | Brand Name

8-foot Green Widgets - Widgets & Tools | Widget World

Printing the Primary Keyword and Brand Name (most often the site name) values from Matrix is already catered for with the %frontend_asset_name% and %globals_site_name% keywords.

However, when it comes to the secondary keyword ("Widgets & Tools" in the example above), it can sometimes be difficult to have a fixed value for this depending on your site’s hierarchy and various sections that might have different structures.

You can create page titles by combining Matrix keywords with custom Server Side JavaScript (SSJS) logic. This how-to article uses the Matrix Community website to demonstrate how this works.

Starting point

The site structure of the Matrix Community website uses SSJS to display a different format for the title tag based on various factors such as the site section of the page and how far down the hierarchy it sits.

This site design has a standard page asset nested into the Design that holds all of the content for the <head> section of the source code, like this:

<head>
  <mysource_area id_name="head" design_area="nest_content"/>
<head>

The nested standard page then has some static content for the <title> tag:

<title>%frontend_asset_name% | %globals_site_name%</title>

This <title> tag content is the part that you can replace with a more dynamic format using Server Side JavaScript (SSJS).

Create global variables

You need to create some global variables that the SSJS can perform some conditional checks on to decide how you want to structure the title format.

  1. Create a new SSJS block within the same standard page that has the code for the <head> tag. Place this code before the existing <title> tag.

  2. In this code block, add global variables that let you do some conditional checks to decide how to structure the title format.

    <script runat="server">
//Global variables
var _siteSection = '%frontend_asset_url_path^explode:/^index:1^empty:home%'; (1)
var _pageType    = '%frontend_asset_assetid^replace:{globals_site_assetid}|{globals_site_index_id}:H^eq:H:home:inside%'; (2)
var _pageLevel   = %frontend_asset_url_path^explode:/^count^subtract:1%; (3)
var _titleTag    = '%frontend_asset_name^escapequotes% | %globals_site_name%'; (4)
</script>
    1 _siteSection is the first level section of the website the page is in, based on its URL. For example, if a page has a URL of https://matrix.squiz.net/manuals/concepts/chapters/admin-mode, the section becomes "manuals."
    2 _pageType determines whether the current page is the homepage or an inside page. This variable prints either "home" or "inside."
    3 _pageLevel determines the number of levels down a site hierarchy the current page is, based on its URL path. For example, a page with a path of /manuals/concepts/chapters/admin-mode would have a page level of 4. This keyword returns an integer so it does not need to be quoted.
    4 _titleTag is the default title value used on all other pages that do not match any of the specific conditions. Using ^escapequotes in the asset name escapes apostrophes so your JavaScript strings remain valid when parsed.

  3. Open https://matrix.squiz.net/manuals/concepts/chapters/admin-mode?SQ_VIEW_SERVER_JS to view the generated JavaScript code and check that your keyword variables are working correctly.

    //Global vars
var _siteSection    =   'manuals'; //Get the 1st level section of the current page based on it's URL
var _pageType       =   'inside';
var _pageLevel      =   4;
var _titleTag       =   'Admin Mode | Squiz Matrix Community';

Now these variables are set correctly, you can begin writing your own code for changing the _titleTag based on these values.

Build the title

Now that your variables in place, you can start to run conditional logic to create the title format.

This code extends the SSJS block created in the previous section. 
//Alter title tag based on section of the site we are in
if(_pageType == 'home'){ (1)
  //We're on the home page, just print the site name
  _titleTag = '%globals_site_name%';
}else if(_siteSection == 'tutorials' && _pageLevel > 1){ (2)
  //We are in the Tutorials section and we're at least 2 levels deep, include "Tutorials" in the title
  _titleTag = '%frontend_asset_name^escapequotes% - Tutorials | %globals_site_name%';
}else if(_siteSection == 'manuals'){ (3)
  //We are in Manuals section, start with the page name
  _titleTag = '%frontend_asset_name^escapequotes%';
  if(_pageLevel > 3){
    //We are also at least 4 levels down, add the sub-section as well
    _titleTag = _titleTag + ' - %frontend_asset_linking_lineage^index:2^as_asset:asset_name%';
  }
  //Finish by adding "Manuals" and the site name
  _titleTag = _titleTag + ' - Manuals | %globals_site_name%';
}
1 Determine whether or not the current page is the homepage. If it is, print the site name in the title.
2 Check if the page is in the Tutorials section and at least two levels deep in the hierarchy. If it is, add "Tutorials" as the title’s secondary keyword.
3 Check for the Manuals section. Add the sub-section of the page (the name of the second level page) to the title as well, but only for pages that are at least four levels deep.

Now you have defined the rules to validate a title, you can print this new value into the title tag.

The last thing to do is replace the keyword-based <title> tag with the new SSJS version.

Old keyword <title> tag
<title>%frontend_asset_name% | %globals_site_name%</title>
New SSJS <title> tag
<title><script runat="server">print(_titleTag);</script></title>

Load https://matrix.squiz.net/manuals/concepts/chapters/admin-mode (minus the ?SQ_VIEW_SERVER_JS query string) you can see the title prints as follows:

<title>Admin Mode - Concepts - Manuals | Squiz Matrix Community</title>

Summary

You now have a fundamental understanding about how you can use SSJS to dynamically generate your titles based on their position in your site.