How-To: SEO Friendly JS pages – Navigate Between App States With Kendo Router

In this post we learn how to make our Javascript pages SEO friendly.

With Javascript, we can render different content on the same URL. Search engines expect each URL to host unique content. This presents a dilemma for the search engine robots who see different content at different times for the same URL. This can lower the ranking of the page significantly. The solution is to have a unique link for each application “state”.

An interesting byproduct is that now each resource on your webpage gets its own URL to deeplink with.

The Kendo UI Router class is responsible for tracking and navigating between different states of application. It is very useful in making application states book-markable and linkable.

1. Kickstart

Instantiate a new router object with Router class.

const router = new kendo.Router();

Add default route handler, i.e. route handler for / route.

router.route('/', () => {
  console.log('/ URL was loaded');
  // Change state
});

Start router after document is ready (through jQuery).

$(() => {
  router.start();
});

The above code goes into the main logic of the app.


  const router = new kendo.Router();
  router.route('/', () => {
    console.log('/ URL was loaded');
    // Change state
  });
  $(() => {
    router.start();
  });

This was a very basic example of routing using Kendo Router.

2. Parameters

Parameters can be used in route handlers to handle a diversity of routes. Parameters are prefixed with a : (colon) to differentiate between hardcoded segments and parameter segments.

router.route('/api/:id', (id) => {
  console.log('id: ', id);
  // Change state
});

In the above example, id is a parameter. It’s value is passed to the callback function, and is used in the function to change app state, if required.

2a. Optional Segments

Optional segments can be used in URL to avoid 404 error in case of absence of parameter.

router.route('/api/:id/(:name)', (id, name) => {
  console.log('id: ', id, ', name:', name);
  // Change state
});

In the above example, name is an optional parameter. Both of the below URLs will invoke above route handler.

/api/1
/api/1/abc

2b. Globbing

Globbing means invoking route handler for every URL, in layman terms. It uses regular expression * to capture the whole URL after the *.

router.route('/api/*anything', (anything) => {
  console.log('anything: ', anything);
  // Change state
});

The above route handler gets invoked for anything after /api/. For example:

/api/123
/api/123/abc
/api/xyz123
and so on...

2c. Query String Parameters

In addition to route parameters, query string parameters can be used in routes. Route callback function receives a params object with query string parameters.

router.route('/api', (params) => {
  console.log(params.id, params.name);
  // Change state
});

The above route handler gets invoked with the following routes.

/api?id=2
/api?id=3&name=abc
and so on...

The parameters id and name can be accessed with the params object as params.id and params.name.

3. Navigate

The navigate method is used to navigate to a particular route and invoke its handler, and change the current state of app.

$(() => {
  router.start();
  router.navigate('/api');
});

The navigate method can be used only after starting the router. The above router.navigate(‘/api’) will invoke the respective route handler.

Missing Routes

What if a route is missing? We can handle missing routes by defining routeMissing method while creating the router object.

const router = new kendo.Router({ 
  routeMissing: (e) => { console.log(e.url); }
});

Note: This post is authored by Mr. Abhay Kumar, interning with GTM Catalyst (distributor of Telerik controls in India).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s