Help Center

Menu

How To Create Dynamic Title Tags Using Server Side JS

Intermediate

25 Sep 2017   For version 5.4.0.1   Server Side JS

Title tags (<title>) are an important part of the page structure when it comes to SEO and bookmarking. moz.com tells us that the optimal format for this should be something like this:

Primary Keyword - Secondary Keyword | Brand Name
8-foot Green Widgets - Widgets & Tools | Widget World 

Printing Primary Keyword and Brand Name (most often the site name) values from Matrix is quite straightforward, we can simply use basic keywords for this:

%frontend_asset_name% | %globals_site_name%

However, when it comes to the Secondary Keyword, it can sometimes be tricky to have a fixed value for this depending on your site's hierarchy and various sections that might have different structures.

This tutorial will show you how you can create these types of dynamic titles using various keywords together with custom Server Side JavaScript logic.

Bookmarks

Starting Point

The example in this tutorial is based on the site structure of the Matrix Community website, which needs to have 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 nested into the Design that holds all of the content for the <head> section of the source code, like this:

The nested Standard Page then has some static content for the <title> tag:

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

This is the part that we'll want to replace with a more dynamic format using SSJS.

Creating Global Variables

First, we'll start with opening a new SSJS block within the same Standard Page that has the code for the <head> tag. Make sure this code comes before the existing <title> tag.

In this code block, we'll add some global variables generated from various keywords.

<script runat="server">
//Global variables
var _siteSection = '%frontend_asset_url_path^explode:/^index:1^empty:home%'; 
var _pageType    = '%frontend_asset_assetid^replace:{globals_site_assetid}|{globals_site_index_id}:H^eq:H:home:inside%';
var _pageLevel   = %frontend_asset_url_path^explode:/^count^subtract:1%;
var _titleTag    = '%frontend_asset_name^escapequotes% | %globals_site_name%';
</script>

These variables will let us do some conditional checks to decide how we want to structure the title format. We'll be able to do checks against 3 values:

  • _siteSection - The 1st 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 would then become "manuals".
  • _pageType - Whether the current page is the homepage or an inside page. This will simply print either "home" or "inside".
  • _pageLevel - The number of levels down of the 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.

The final _titleTag variable is simply our default title value that will be used on all other pages that don't match any of the specific conditions.

We are using ^escapequotes in the asset name in order for apostrophes in names to be escaped so that they don't break our JavaScript string.

If we now preview the page at https://matrix.squiz.net/manuals/concepts/chapters/admin-mode with ?SQ_VIEW_SERVER_JS appended in the URL, we'll be able to see what the generated JavaScript code for this looks like:

<script runat="server">
//Global vars
var _siteSection    =   'manuals';
var _pageType       =   'inside';
var _pageLevel      =   4;
var _titleTag       =   'Admin Mode | Squiz Matrix Community';
</script>

The ?SQ_VIEW_SERVER_JS query string is only available from version 5.4.2.0. If you are on an earlier version of 5.4, you can try using the ?SQ_DISABLE_SERVER_JS query instead to see what the code generates.

With these variables being populated, we can now start writing our own code for changing the _titleTag based on these values.

Building the Title

Now that we have our variables in place, we can start to run some conditions to decide the format of the title. We'll add the following code into the existing SSJS block we created in the previous section.

The first check we'll do is whether or not the current page is the homepage. If it is, then we just want to print the site name in the title.

//Alter title tag based on section of the site we are in
if(_pageType == 'home'){
  //We're on the home page, just print the site name
  _titleTag = '%globals_site_name%';
}

Next, we'll add a condition for checking if the page is in the Tutorials section and if it's at least 2 levels deep in the hierarchy. If it is, then we'll simply add "Tutorials" as the title's Secondary Keyword.

//Alter title tag based on section of the site we are in 
if(_pageType == 'home'){ 
  //We're on the home page, just print the site name 
  _titleTag = '%globals_site_name%';
}else if(_siteSection == 'tutorials' && _pageLevel > 1){
  //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%';
}

Finally, we'll do a check for the Manuals section.

In this case, we want to add the sub-section of the page (the name of the 2nd level page) to the title as well, but only for pages that are at least 4 levels down.

//Alter title tag based on section of the site we are in 
if(_pageType == 'home'){ 
  //We're on the home page, just print the site name 
  _titleTag = '%globals_site_name%';
}else if(_siteSection == 'tutorials' && _pageLevel > 1){
  //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'){
  //We are in Mauals 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%';
}

We could add more conditions for other sections, but this will do for now. Let's now see how we can print this new value into the title tag.

Printing the Title Tag

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

To do this, we simply replace:

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

with:

<title><script runat="server">print(_titleTag);</script></title>

So if we use the example of the Admin Mode page again, which has a URL of https://matrix.squiz.net/manuals/concepts/chapters/admin-mode, we would then see a title of:

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

That's it! We could add more conditions to our code to target other areas of the site as well, such as the Releases and News section, but this should hopefully be enough to give you an idea of how you can apply the same method to your own site implementation.