SEO Best Practices

This guide takes you through the search engine optimization best practices for optimizing your website. Your search engine ranking factor determines how well your site ranks in the search engine results pages (SERPs) and is derived from the content and structure of your website, as well as from external factors such as the number of other sites that link to your site. This document deals specifically with on-site SEO, focusing on eCommerce sites that have a large number of products, and therefore a large number of search and navigation states.

Overview

The following points will help you to optimize your websites content and structure in order to improve your overall search engine ranking factors and boost your results in Google’s results:

1. Generate a sitemap of beautified URLs (a match in a URL is a stronger match than a match in your page content).
2. Be able to parse these incoming, beautified URLs into meaningful data (you must produce a page of content that matches the URL content).
3. Be able to generate beautified URLs as links that can be followed (creating hyperlinks between semantically related pages is important).
4. Follow best practices for your page content (H1 tags, metadata markup, etc.)
5. Preserve existing link juice.
6. Keep your site fast.

1. Sitemap Generation

In order for Google to become aware of all the distinct pages of your website it is best practice to generate and publish an XML sitemap that the Google crawlers download. The sitemap needs to follow the conventions laid out on sitemaps.org and needs to be placed in the root of your web project.

Rules of thumb for Good URLs

• Google only considers the first N characters of any URL, so long URLs with important information at the end will be useless.
• Google weights words closer to the start of your URL more heavily, so place the most important keywords of the URL as close to the beginning as possible.

Detail URLs

For example, a detail URL template like this:

http://<domain>/<product type>/<brand>/<sport>/<sku name>-<sku id>.html

which will map to:

http://www.example.com/shoes/nike/basketball/air+jordan-1263323.html

which is much better than:

http://www.example.com/product?pid=1263323

Navigation URLs

An example of the navigation template URLs might be:

http://<domain>/<product type>/<brand>/<sport>/index.html

will produce:

http://www.example.com/shoes/nike/basketball/pbs/index.html

which is much better than:

http://www.example.com/index.html?refinement=productType%3Dshoes~brand%3Dnike~sport%3Dbasketball

2. Decode a URL

The following URL

http://www.example.com/shoes/nikse/running/pbs/index.html

should become a query object with the following properties set:

Query query = new Query();
query.addValueRefinement("productType", "shoes");
query.addValueRefinement("brand", "nike");
query.addValueRefinement("sport", "running");

To achieve this functionality you need to create a UrlBeautifier object with the correct mappings.
That is, create the mappings of productType to p, brand to b, and sport to s. A mapping object is simple to create and persists for the lifetime of the JRE. You can create multiple mappers for different areas of your site. In this example we create and use a beautifier called ‘sport’.

UrlBeautifier defaultUrlBeautifier = UrlBeautifier.getUrlBeautifiers()
        .get("sport");
if (defaultUrlBeautifier == null) {
    UrlBeautifier.createUrlBeautifier("sport");
    defaultUrlBeautifier = UrlBeautifier.getUrlBeautifiers().get(
            "sport");
    defaultUrlBeautifier.addRefinementMapping('p', "productType");
    defaultUrlBeautifier.addRefinementMapping('b', "brand");
    defaultUrlBeautifier.addRefinementMapping('s', "sport");
    defaultUrlBeautifier.setAppend("/index.html");
}

Query query = defaultUrlBeautifier.fromUrl(pRequest.getRequestURI(),
        new Query());

The order in which you add the refinement mappings dictates the order that they will appear in the URL. Note, to avoid the possibility of dictionary words appearing in the lookup path segment you cannot map to vowels.

Additionally you can map the search term into a path segment as well by calling the method setSearchMapping.

defaultUrlBeautifier.setSearchMapping('q');

Quite often web applications have a prefix for example here we see ecomm in the URL

http://www.example.com/ecomm/shoes/nike

In this example ‘ecomm’ is extraneous and should be removed to optimize the value of the following path segments.

3. Encode a URL

To encode a URL there are two EL functions that are available in your JSPs.

Add a refinement to a URL

To take the current navigation state and add a refinement or query to it use the following:

<c:set var="beautifiedUrl">
  <c:url value="${b:toUrlAdd('sport', searchString, selectedRefinements, newRefinement)}"/>
</c:set>
<a href="${beautifiedUrl}">
  <c:out value="${newRefinement.value}"/> (${newRefinement['count'] })
</a>

• sport is the name of the UrlBeautified created earlier by your controller.
• searchString is the current search string, which can be null or a blank string.
• selectedRefinements are the currently selected refinements as available in the results object.
• newRefinement is the refinement to be added to the query. Typically, this is created while you iterate over the refinements in a navigation object.

Remove a refinement from a URL

To take the current navigation state and remove an existing refinement use the following:

<c:set var="beautifiedUrl">
  <c:url value="${b:toUrlRemove('sport', searchString, selectedRefinements, oldRefinement)}"/>
</c:set>
<a href="${beautifiedUrl}">x</a>
<b><c:out value="${oldRefinement.navigationDisplayName}"/></b>:
<c:out value="${oldRefinement.value}"/>

• sport is the name of the UrlBeautified created earlier by your controller.
• searchString is the current search string, which can be null or a blank string.
• selectedRefinements are the currently selected refinements as available in the results object.
• oldRefinement is the refinement to be removed from the query. Typically, this is created while you iterate over the values in a selectedRefinements object.

4. Page Content

Canonical <link> tag

If your site has identical or vastly similar content that’s accessible through multiple URLs, this meta-tag provides you with more control over the URL returned in search results.

It also helps to make sure that properties such as link popularity are consolidated to your preferred version.

You can simply add this tag to specify your preferred version:

<link rel="canonical" href="http://www.example.com/shoes/nike/running/pbs/index.html" />

inside the <head> section of the duplicate content URLs.

<h1> Tag

Every page should have an H1 tag with data that informs the user about the content of this page. Some other H1 rules that can be detrimental to your page rank.

• Do not stuff your heading tags with keywords.
• Do not use more than one H1 tag on a page.
• Do not use heading tags as hidden text. Any hidden text can result in penalties for your site, especially if the hidden part is a component that affects SEO.
• Do not repeat heading tags on different pages of your site. It is a good practice to have unique heading tags throughout your site.
• Do not use the same content in your page’s H1 tag as in your meta title tag.
• Do not use heading tags for styling text but use them for presenting organized and structured content on pages, use CSS stylesheets for the purpose of styling.

<title> Tag

Title tags, technically called title elements, define the title of a document. Title tags are often used on search engine results pages (SERPs) to display preview snippets for a given page, and are important both for SEO and social sharing.

The title element of a web page is meant to be an accurate and concise description of a page’s content. This element is critical to both user experience and search engine optimization. It creates value in three specific areas: relevancy, browsing, and in the search engine results pages.

<head>
   <title>Example Title</title>
</head>

Optimal Format

Primary Keyword - Secondary Keyword | Brand Name

Optimal Length for Search Engines: Google typically displays the first 50-60 characters of a title tag, or as many characters as will fit into a 512-pixel display. If you keep your titles under 55 characters, you can expect at least 95% of your titles to display properly. Keep in mind that search engines may choose to display a different title than what you provide in your HTML. Titles in search results may be rewritten to match your brand, the user query, or other considerations.

5. Preserve existing link juice

It is common practice to redirect one URL to another. When doing this, it is critical to observe best practices in order to maintain SEO value when a URL that needs to redirect to another address permanently.

There are multiple options for doing this, but in general, the 301 redirect is preferable for both users and search engines. Serving a 301 indicates to both browsers and search engine bots that the page has moved permanently. Search engines interpret this to mean that not only has the page changed location, but that the content, or an updated version of it, can be found at the new URL. The engines will carry any link weighting from the original page to the new URL, as below:

Be aware that when moving a page from one URL to another, the search engines will take some time to discover the 301, recognize it, and credit the new page with the rankings and trust of its predecessor. This process can be lengthier if search engine spiders rarely visit the given web page, or if the new URL doesn’t properly resolve.

6. Keep your site fast

Ideally your page load time will be under 400ms. That is, all the content that is blocking the JavaScript pageLoad event will be completely downloaded by the browser in less than 400 milliseconds.
Most websites fail to do this because they keep all their stylesheet files, and JavaScript files in a modular fashion with many files. For each CSS and JS include on the HTML page, the web browser has to initiate an expensive connection to the server which aggregates into a large amount of unnecessary connection time. As a result the page doesn’t trigger the page load event until way after the 300 millisecond boundary.

Ideally you will have less than five connections.

1. The actual html page requested.
2. A consolidated image of sprites.
3. A consolidated stylesheet file. (requested in the <head> of your document)
4. A consolidated JavaScript file. (requested just before the </body> of your document)

Consider the following network analysis of google.com loading.