WCS and mobile SEO
Search Engine Optimization nowadays is definitively something that we have to care about. In a recent implementation of WCS, we were able to bring the search engine results for a Brazilian retailer from the twentieth to the first page in google’s organic searches.
As we know, since FEP 3, WCS bring some features that help with Search Engine Optimization issues.
Out of the box, we have some cool features like:
With that, we can easily replace “webapp/wcs/stores/servlet” by a token, like “shop”.
Improvements like Page title, Meta description, Meta Keywords (Keywords have no influence in page ranking) and Image alt text. Automatically added by the template or managed by the business user through Management Center.
Site map generation by WebSphere Commerce job.
Product, category and static pages keywords URL, managed by the business user in the Management Center.
Extended Site support.
If an extended site demands a different keyword for a product or a category, the business user can change this keyword in the store.
Automatically 301 redirects for changed URLs.
If a business user change a product or a category keyword, the old URL still works with 301 redirect, avoiding score problems with index engines.
Better 404 error handling.
The ability to forward customers that landed in a nonexistent page to the home page (default) or a search page for example.
As we know, web sites loses score when they have multiple URLs to the same content. With the ability to define the canonical URL, the search engine bots understand that all URLs should be mapped to a single (canonical) URL.
All these features are OK when we are talking about desktop, but there are several things that we have to keep in mind when we talk about mobile.
Building Smartphone-Optimized Websites
Tablets are not Mobile – According to google, Tablets users expect to see tablet optimized pages, or desktop-optimized pages, due to some reasons, such as the large screen. So, if you are developing a mobile page for your site, do not redirect tablet traffic to this new store, unless your entire site is responsive.
Strategy – We have 3 different ways to build specific (mobile / tablet) contents for our website. Some require more, some require less effort.
Responsive: Serves the same HTML for one URL and uses CSS media queries to determine how the content is rendered on the client side. This removes the possible glitches of user-agent detection and frees users from redirects. This method does not require different sitemaps, or extra attention with canonical URL. This is the recommended approach by Google, but can be a challenge in terms of code.
According to the official announcement for WCS FEP 7, the Starter store will come with a responsive design.
Dynamic serving: serves different HTML for an URL depending on the user-agent. Use the Vary HTTP header to indicate you’re doing this. This method does not require different sitemaps, or extra attention with canonical URL.
To manage that in WCS, my suggestion is to use struts, to create device groups (User agent groups), and route these groups to the correct view.
Device group creation in wc-devices.xml:
<_config:DeviceGroup impl="com.ibm.commerce.foundation.server.services.httpdevice.CookieDeviceGroupImpl" keyName="WC_MOBILEDEVICEID"> <_config:Device name="Forced Desktop" value="0" internalID="-1" channelID="-1"/> <_config:Device name="Forced Smartphone" value="1" internalID="-21" channelID="-6"/> <_config:Device name="Forced Tablet" value="2" internalID="-31" channelID="-6"/> </_config:DeviceGroup>
Creating the detection and redirects to specific views and JSP’s
<forward className="com.ibm.commerce.struts.ECActionForward" name="GenericProductPageLayoutView/10101" path="/Layouts/ProductDisplay.jsp"/> <forward className="com.ibm.commerce.struts.ECActionForward" name="GenericProductPageLayoutView/10101/-21" path="/mobile20/ShoppingArea/CatalogSection/CatalogEntrySubsection/ProductDisplay.jsp"/> <action path="/GenericProductPageLayoutView" type="com.fastshop.commerce.action.ExtendedBaseAction"> <set-property property="credentialsAccepted" value="10101:P"/> </action>
Separate mobile site: redirects users to a different URL depending on the user-agent. Use bidirectional link annotations to indicate the relationship between the two URLs for search engines. Requires a specific sitemap, and an extra attention with canonical URL tag.
In this approach, my suggestion is that we have to check if all keywords point to the same page. For example, “m.domain.com/ProductA“, should point to the same product / content (in the mobile version) of “www.domain.com/ProdctA“. We lose score if we do not do that. We should also avoid multiple keywords for the same page.
We should also guarantee that in our desktop pages, we will insert the special link rel=”alternate” tag pointing to the corresponding mobile URL. This helps Googlebot discover the location of your site’s mobile pages. The Sitemap will also help with this.
Likewise, to avoid losing points by duplicated contents, our mobile pages should have the link rel=”canonical” tag pointing to the corresponding desktop URL.
Defined the strategy, we should guarantee some points, that will help us increase our score with search engines:
When we have multiple URL’s to the same content, or product page, we lose score in the search engines. The way to avoid this is using the Canonical Tag.
This tag will tell the bots to identify what is the “canonical” or “preferred” version of the page.
According to Google, the canonical link element is not considered to be a directive, but a hint that the web crawler will “honor strongly”. So, the best thing to do is avoid multiple URL to the same page / content as much as possible, even using the canonical tag.
URL Parameters are indexed!
Instead of what most of people think, search engines care about and index the URL variables. If you have all canonical tags defined, this should not be a problem. But anyway, I recommend that we set all variables our page have to not be indexed in the Webmaster Tools.
Besides all these rules, my recommendation for mobile pages is: Be SoLoMo!
SoLoMo is the acronym to Social + Local + Mobile., so, you are developing your mobile store now, keep that in mind. People use mobile devices because this is fun, doesn’t matter if they are, or aren’t at home. They want to have a good time; Then, create something funny, relaxing and integrated with all social medias, location services etc. In the mobile device, an app notification is enough to remove the user attention from your store.
Keep your Telesales number accessible every time. If the customer for any reason don’t close an order on your site, they can “click” in your number and buy by phone. This is Omni channel!
Be social, integrate your pages with Pinterest, Facebook, Twitter etc.
Create a mobile APP, use worklight for this!
If you have any question, please let me know! Leave a comment!