Day 4 : Demo - Creating short SEO URLs for new static views

Let us revisit and do some practical based on the concepts learned on Day 1 to Day 3.

In this demo tuturial , we will create a short SEO friendly URL for a custom view that we have created "SuggestionsComplaintsView" using the WCS 7 SEO Pattern mapping files in simple 3 steps.

We will change the long WCS URL
http://localhost/webapp/wcs/stores/servlet/SuggestionsComplaintsView?storeId=10051&catalogId=10051&langId=-1
to
Short Search Engine optimized URL
http://localhost/webapp/wcs/stores/servlet/en/madisons/suggestion-complaints

Pack up your energy drinks and lets sprint into the SEO world. I hope you will find it in useful.

Demo Video:


Help Section:

The JSPs and XMLs used in this demo can be downloaded from this link.

Pattern Definition made in the SEOURLPatterns-ext.xml

<seourl:seoUrlConfiguration
    xmlns:seourl="http://www.ibm.com/xmlns/prod/commerce/foundation/SEO/URLPattern"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://www.ibm.com/xmlns/prod/commerce/foundation/
SEO/URLPattern wc-seo-url-pattern.xsd">
    <!--
        SuggestionComplaints URL like this: http://localhost/webapp/wcs/stores/servlet/en/madisons/suggestion-complaints    -->
    <seourl:seoUrlPatternDef name="SuggestionComplaintsURL">
        <seourl:seoUrlPattern viewName="SuggestionsComplaintsView">/LanguageToken/StoreToken:CatalogToken/SuggestionComplaintsToken</seourl:seoUrlPattern>
        <seourl:urlToParamMapping>
            <seourl:mapping name="langId" value="?LanguageToken?" />
            <seourl:mapping name="storeId" value="?StoreToken?" />
            <seourl:mapping name="catalogId" value="?CatalogToken?" />
        </seourl:urlToParamMapping>
        <seourl:paramToUrlMapping>
            <seourl:mapping name="LanguageToken" value="?langId?"
                defaultValue="-1" />
            <seourl:mapping name="StoreToken" value="?storeId?" />
            <seourl:mapping name="CatalogToken" value="?catalogId?" />
            <seourl:mapping name="SuggestionComplaintsToken" value="SuggestionComplaintsToken" />
        </seourl:paramToUrlMapping>
        <seourl:usageDef CMCPrefix="true">
            <seourl:usage device="browser">
                <seourl:target>SuggestionComplaints</seourl:target>
            </seourl:usage>
        </seourl:usageDef>
    </seourl:seoUrlPatternDef>
</seourl:seoUrlConfiguration>

SQL Executed
insert into seotokenusgtype (tokenusgtype_id, tokenusgtype, primarytoken,storeent_id, isstatic) values ((select counter+1 from KEYS where tablename='seotokenusgtype') , 'SuggestionComplaints', 'SuggestionComplaintsToken',<store-id>, 1);
update KEYS set counter=counter+1 where tablename='seotokenusgtype';
insert into seourl (seourl_id, tokenname, tokenvalue) values ((select counter+1 from KEYS where tablename='seourl'), 'SuggestionComplaintsToken', 'SuggestionComplaintsToken');
insert into seourlkeyword (seourlkeyword_id, seourl_id, storeent_id,language_id, urlkeyword, status) values((select counter+1 from KEYS where tablename='seourlkeyword'), (select seourl_id from seourl where tokenname='SuggestionComplaintsToken'), <store-id>, -1, 'suggestion-complaints', 1);
update KEYS set counter=counter+1 where tablename='seourl';
update KEYS set counter=counter+1 where tablename='seourlkeyword';

Related Blogpost
Smarter SEO for Smarter Commerce

Day 1 : Introducing "wcf:url" tag

To avoid having to hard code SEO friendly URLs in the storefront pages, the WebSphere Commerce Search Engine Optimization feature provides a wcf:url tag that will construct SEO friendly URLs using the SEO pattern file(s) 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.

Incase you open any JSP , for example CachedFooterDisplay.jsp, you will notice that our old friend <c:url> tag which was used to construct the URLs in WCS6 has been replaced by <wcf:url>. So, let us spend some time leaning about the tag. 

About the wcf:url tag

The wcf:url tag builds a URL and applies the appropriate WebSphere Commerce supported rewriting rules.

It contains the following additions compared to the c:url tag:

• It builds a full path URL, rather than a relative path.
• It builds SEO compliant URLs if the feature is used in WebSphere Commerce.
• It adds a prefix to the URL with the appropriate protocol, HTTP or HTTPS, depending on the Struts configuration files.

To know more about the tag and its parameters , please refer Infocenter

Important Note for FEP3 and above

Both the new Feature Pack 3 and previous SEO implementations are supported. You can choose which SEO solution to use by updating wc-server.xml.

<SEOConfiguration enable="true" dynamicUrl="true" defaultUrl="www.madisons.com">
     <context-root-rewrite value="/shop"/>
     <mapper-class-name value="com.ibm.commerce.seo.url.helpers.SEOURLMapperImpl"/>
</SEOConfiguration>

Either value or patternName is required. If workspace is used, then both value and patternName are required. If the value parameter is provided, then URLs will be constructed based on the mapping found in SEOUrlMapper.xml file using the SEO implementation from WebSphere Commerce Version 7 to Version 7 Feature Pack 2. If patternName is provided and SEO is enabled in wc-server.xml as shown in the following example, then URLs will be constructed based on the Version 7 Feature Pack 3 SEO design, using the pattern template definitions. Preference will be given to the patternName attribute over the value attribute.

If URL construction using patternName fails (due to an invalid patternName or a missing parameter), dynamic URL's will be constructed if the dynamicUrl attribute is set to true. If dynamicUrl is set to false, then wcf:url tag returns defaultUrl specified in wc-server.xml

The URL creation order is:

1. If SEO Enabled and patternName specified, use patternName and construct new SEO URL
   1. If new SEO URL construction fails and dynamicUrl = true, a dynamic URL is constructed
   2. If dynamicUrl = false, a defaultUrl is constructed
2. Otherwise the value attribute is used an old SEO URL is constructed

The following diagram helps understand the SEO URL differences and the tag parameters :

Example

The following example forms a URL to display the shopping cart using the <wcf:url> tag. It specifies the URL type as an AJAX call.

<wcf:url var="currentShoppingCartLink" value="ShopCartPageView" type="Ajax">
   <wcf:param name="storeId"   value="${WCParam.storeId}"  />
   <wcf:param name="catalogId" value="${WCParam.catalogId}"/>
   <wcf:param name="langId" value="${WCParam.langId}" />
</wcf:url>

 
Related Blogpost
Smarter SEO for Smarter Commerce