SEO-friendly URL construction overview

To avoid hardcoding SEO-friendly URLs in the storefront pages, the WebSphere Commerce Search Engine Optimization (SEO) feature provides a wcf:url tag that constructs SEO-friendly URLs by using the SEO pattern files and tables.

The current wcf:url tag is used by all starter stores to construct SEO-friendly URLs. The UrlTag class has been enhanced to support the use of the new URL pattern definition to create SEO-friendly URLs.

To use the wcf:url tag you need to know all of the parameters that are required for the URL; for example, categoryId, productId and langId. The following example shows how this information is used by the wcf:url tag to construct SEO-friendly URLs.

Constructing an SEO-friendly URL

When a developer is working with a store JSP that displays the header menu, the developer must create anchor tag links for all the site's categories. In this example, the developer creates a link for the coffee makers sub-category.

This example shows how an SEO-friendly URL for the coffee makers category (.../en/auroraesite/coffee-makers) is created to replace the original non SEO-friendly URL http://myhost.com/webapp/wcs/stores/servlet/CategoryDisplay?langId=-1&storeId=10001&catalogId=10002&categoryId=10024 by using the wcf:url tag with a pattern name and a series of parameters, which have values that are used to construct the keywords in the defined URL pattern.

  1. In the pattern file, locate the pattern for the type of page that you want to create. For the coffee makers subcategory example, find the pattern for categories, which is CategoryURL. The pattern includes the pattern name, and the parameters required to build the URL, as shown in the table below:
    a<seourl:seoUrlPatternDef name="CategoryURL">
		b<seourl:seoUrlPattern viewName="CategoryDisplay">
/LanguageToken/StoreToken:CatalogToken/CategoryToken</seourl:seoUrlPattern>
	 <seourl:urlToParamMapping>
			<seourl:mapping name="langId" value="?LanguageToken?" />
			<seourl:mapping name="storeId" value="?StoreToken?" />
			<seourl:mapping name="catalogId" value="?CatalogToken?" />
			<seourl:mapping name="categoryId" value="?CategoryToken?" />
	</seourl:urlToParamMapping>
 <seourl:paramToUrlMapping>
			c<seourl:mapping name="LanguageToken" value="?langId?" />
			d<seourl:mapping name="StoreToken" value="?storeId?" />
			e<seourl:mapping name="CatalogToken" value="?catalogId?" />
			f<seourl:mapping name="CategoryToken" value="?categoryId?" />
	</seourl:paramToUrlMapping>
 <seourl:usageDef>
 <seourl:usage device="browser">
			<seourl:target>Category</seourl:target>
</seourl:usage>
</seourl:usageDef>
</seourl:seoUrlPatternDef>
    Pattern Pattern Name Description
    a seoUrlPatternDef name="CategoryURL" the pattern name used in wcf:url tag
    b LanguageToken/StoreToken:CatalogToken/CategoryToken the pattern that determines how the URL will be built
    Parameter Parameter Name Description
    c langId A parameter that is represented in the URL pattern as a LanguageToken
    d storeId A parameter that is represented in the URL pattern as a StoreToken
    e catalogId A parameter that is represented in the URL pattern as a CatalogToken
    f categoryId A parameter that is represented in the URL pattern as a CategoryToken
    This example assumes that the pattern file contains a pattern definition, and that the following sample values exist in their respective tables for creating the coffee makers subcategory URL:
    Parameter Name TokenName TokenValue Keyword
    categoryId CategoryToken 10024 coffee-makers
    storeId:catalogId StoreToken:CatalogToken 10001:10002 auroraesite
    langId LanguageToken -1 en
    The sample values are found in multiple locations:
    • The SEOURLKEYWORD table
    • Static token definitions of the pattern file
    • Language information found in: LanguageRegistry.singleton().getLanguageById()
  2. To link to coffee makers, the developer inserts the wcf:url tag in the JSP for the kitchenware category by using the pattern name CatergoryURL and the values, langId, storeId, catalogId, and categoryId:
    <wcf:url patternName="CategoryURL">
  <wcf:param name="langId" value="-1" />
  <wcf:param name="storeId" value="10001" />
  <wcf:param name="catelogId" value="10002" />
  <wcf:param name="categoryId" value="10024" />
</wcf:url>
  3. WebSphere Commerce uses the contents of the wcf:url tag, plus the pattern to create the SEO-friendly URL for coffee makers:
    1. Based on the pattern for product categories, the URL is built in this format: LanguageToken/StoreToken:CatalogToken/CategoryToken
    2. The three keywords are determined by breaking down the format by the keyword separator:
      • LanguageToken, with a langId value of -1. Found in the language repository, is en.
      • StoreToken:CatalogToken, with a value of 10001:10002. Found in the SEOURLKEYWORD table, is auroraesite.
      • CategoryToken, with a value of 10024. Found in the SEOURLKEYWORD table, is coffee-makers.
    3. All these keywords are combined in the format provided by the pattern to get: en/auroraesite/coffee-makers.
    4. The wcf:url tag combines this to create the full URL of www.myhost.com/shop/en/auroraesite/coffee-makers. If the developer rewrites the context root to shorten the URL, the context root appears as shop.