See all tutorials

Tutorials » How to create SEO friendly dynamic urls

When the quantity of the information available in a web application is large and the information needs to be grouped in pages, using static urls to publish all the content might not be efficient.
For example an e-commerce website can have 10,000+ articles, having explicit defined a different url for each article is not efficient. The examples can continue with blog applications, newspapers, social networks and so on.

A dynamic urls is a url that contains a variable part, like an article id, a language identifier, a username and so on.
There are two options to consider:

  1. Using query parameters, something like: http://example.com?article=12345
  2. Using the hierarchical part of the url, something like: http://example.com/articles/12345

It is known that search engines like static urls because these can contain keywords and so the url address can tell more about the underlying content than a random id number.
To give another example, the url http://example.com/articles/world-cup-2014-final is much more SEO friendly than http://example.com/articles/12345 , assuming that 12345 is the article id about the 'World Cup 2014 Final'.

Webpagebytes CMS supports dynamic urls in the hierarchical part of the url, improving the SEO capabilities of the web applications.

With Webpagebytes CMS a web application can define a url like: /articles/{id}-{keywords}
which will match urls like /articles/12345-world-cup-2014-final or /articles/789012-NFL-2015-playoff-schedule
This will allow the web application to define dynamic urls and keep the urls SEO friendly.

To create a dynamic url, take the following tasks:

  1. Create a site page
  2. Create a dynamic site url and link it with the page created
  3. Test the dynamic url
  4. Usage of the url dynamic parameters

Create a site page

Step 1

This step is just to create a dummy web page content to be associated with the dynamic url.
In Webpagebytes CMS administration interface go to 'Site Pages' section and create a page with the following code
<html>
<body>
    Test dynamic urls
</body>
</html>

Create a site url and link it with the page created

Step 2

Create a site url by completing the following fields:
Field Description
Site url Enter /articles/{id}-{keywords} . The {id} and {keywords} are placeholders for the actual values of id and keywords
Is the url live Choose YES . If NO is selected then the HTTP request will return 404 status code
HTTP operation Choose GET . This is the HTTP verb that will be used to get the site page
Resource type Choose Site page
Resource External Key Type the name of the site page created, 'dynamic url' and select from the drop down list the External Key

Test the dynamic url

Step 3

Test the new dynamic url with data like the following:
Url Returned HTTP status code Notes
http://localhost:9090/articles/12345-world-cup-2014-final 200 'id' is matched against '12345' and 'keywords' against 'world-cup-2014-final'
http://localhost:9090/articles/789012-NFL-2015-playoff-schedule 200 'id' is matched against '789012' and 'keywords' against 'NFL-2015-playoff-schedule'
http://localhost:9090/articles/abc- 200 'id' is matched against 'abc' and 'keywords' against the empty string ''
http://localhost:9090/articles/xyz 404 The url cannot be matched against the pattern /articles/{id}-{keywords}

Usage of the url dynamic parameters

Step 4

To get access to the dynamic url parameters, these needs to be defined as customization parameters in the site urls.
Go to the site url /articles/{id}-{keywords} and create a customization parameter with the following data fields:
Field Description
Parameter name Enter id. This is the identifier from the first brackets pair {id}
Parameter value Leave empty. This is because the value will be taken from the actual request url string
Parameter overwrite from url Select YES. This means the parameter value will be taken from the actual url
Parameter Locale type Select No locale type. It means the 'id' parameter will not be matched with a supported Locale of the web application

Perform the same operations for 'keywords' parameter.

Step 5

Use the site url customization parameters in the server side controllers and the site pages or page modules. See WPBModel.URI_PARAMETERS_KEY and wpbUriParams

Change the page created at Step 1 with the following code

<html>
<body>
    <#assign param1=wpbUriParams["id"]!"" param2=wpbUriParams["keywords"]!"" >
    id=${param1} <br>
    keywords=${param2}
</body>
</html>

In a browser load the url http://localhost:9090/articles/12345-world-cup-2014-final and the following page should be displayed
Dynamic page with SEO friendly url

Fork me on GitHub