SEO Friendly URLs

This SEO Friendly URLs feature ensures both data persistence and readability within the Unbxd SDK’s URL structure, making it easier than ever to optimize the presentation of products to your users.

This set of configurations (SEO Friendly URLs) are present in version v2.1.0 and above.

Table of contents

1. Definition
2. The Need for SEO-Friendly URLs
3. Configurations
   1. hashMode
   2. allowExternalUrlParams
   3. seoFriendlyUrl
   4. orderOfQueryParams
   5. queryParamSeparator
   6. keyValueSeparator
   7. browseQueryParam
      1. Key Terminology
      2. Configurations
      3. Usecases
   8. searchQueryParam
      1. Key Terminology
      2. Configurations
      3. Usecases
   9. pageNoParam
      1. Key Terminology
      2. Configurations
      3. Usecases
   10. pageSizeParam
       1. Key Terminology
       2. Configurations
       3. Usecases
   11. sortParam
       1. Key Terminology
       2. Configurations
       3. Usecases
   12. pageViewParam
       1. Key Terminology
       2. Configurations
       3. Usecases
   13. facetsParam
       1. Key Terminology
       2. Configurations
       3. Usecases

Definition

This feature ensures both data persistence and readability within the Unbxd SDK’s URL structure, making it easier than ever to optimize the presentation of products to your users.

SEO-friendly URLs are web addresses that are optimized for search engines and users alike. These URLs are designed to be concise, descriptive, and relevant to the content they point to. SEO-friendly URLs typically include keywords that accurately represent the page’s topic or content. They are easy to read, understand, and share, benefiting both search engines’ ability to index content and users’ experience when navigating a website. By using SEO-friendly URLs, websites can improve their search engine rankings, attract more organic traffic, and provide a more user-friendly browsing experience.

The Need for SEO-Friendly URLs

In the context of e-commerce websites, the need for SEO-friendly URLs becomes even more critical due to the competitive nature of the online retail industry and the significance of visibility in search engine results. Here’s why SEO-friendly URLs are essential for e-commerce websites:

1. Improved Search Engine Visibility: E-commerce websites rely heavily on organic search traffic to attract potential customers. SEO-friendly URLs, structured with relevant keywords and descriptive terms, make it easier for search engines to understand the content of each page. This improves the chances of your product pages appearing in relevant search results, driving more qualified organic traffic to your site.

2. Higher Click-Through Rates (CTR): When users search for specific products, they often look at the URLs displayed in search results to determine the relevance of a page. Clear and concise URLs that reflect the product or category can lead to higher CTRs. Users are more likely to click on URLs that are easy to understand and closely match their search intent.

3. User Experience: SEO-friendly URLs contribute to a positive user experience. A well-structured URL provides users with a clear idea of what to expect when they click on a link. This transparency enhances user trust and reduces the likelihood of them bouncing back to the search results, ultimately improving engagement and conversions.

4. Structured Navigation: E-commerce websites typically have numerous categories, subcategories, and product pages. SEO-friendly URLs with logical structures help both search engines and users navigate through your site seamlessly. A hierarchical URL structure aids in categorizing products and organizing content, making it easier for search engines to index and rank pages appropriately.

5. Social Sharing and Link Building: URLs are frequently shared on social media platforms and in various online forums. SEO-friendly URLs are more likely to be shared by users, as they convey a sense of professionalism and relevance. Additionally, other websites are more inclined to link to well-structured URLs, which can positively impact your site’s overall backlink profile.

6. Mobile-Friendly Consideration: With the increasing use of mobile devices for online shopping, concise and readable URLs are even more crucial. On mobile screens, limited space requires URLs to be clear and meaningful, helping users to understand the content without any confusion.

7. Reduction in Duplicate Content: Dynamic URLs generated by e-commerce platforms can sometimes lead to duplicate content issues, affecting SEO rankings. SEO-friendly URLs that include relevant keywords and avoid unnecessary parameters reduce the chances of duplicate content problems.

8. Voice Search and Natural Language Queries: As voice search becomes more prevalent, people often use natural language when searching for products. SEO-friendly URLs with clear language and descriptive terms align well with voice search queries, improving your site’s visibility in this emerging search trend.

In summary, SEO-friendly URLs are a fundamental aspect of successful e-commerce SEO. They contribute to better search engine rankings, improved user experience, increased click-through rates, and ultimately, higher sales and revenue for your online store. By optimizing your URLs to be clear, descriptive, and keyword-rich, you position your e-commerce website for greater success in the competitive online market.

Configurations

hashMode

Boolean

In Single Page Applications (SPAs), hash mode refers to the use of the “#” symbol in the URL to indicate the current state or location of the application. Instead of using traditional URLs that include a path and query parameters, SPAs use a single base URL and append a hash fragment to the end of the URL to represent different states or views within the application.

For example, a traditional URL for an e-commerce website might be “www.example.com/products/?category=shoes” while in Hash mode it could be “www.example.com/products/#category=shoes”

The search sdk adds some information to the url as params, based on the user actions, and in case of page reload scenarios, the data is read from the url.

Turn this flag on if you want the URL update to happen as hash param instead of using query params.

Default Value

hashMode: false

Scenarios

1. true - url params will be updated as hash params
2. false - url params will be updated as query params

allowExternalUrlParams

Boolean

Turn this flag on if you want to retain the external url params in the browser, that do not get added by the unbxd sdk.

Default Value

allowExternalUrlParams: false

Scenarios

1. true - External params will be retained in the browser url, so that they can be consumed by the rest of the client ecosystem.
2. false - External params will be dropped from the browser url by the unbxd search sdk

seoFriendlyUrl

Boolean

Turning this flag on , the user can customize the format of their respective urls . This Focuses on optimization of website urls for SEO purposes . This boolean is set to false by default to maintain backward compatibility.

Default Value

seoFriendlyUrl: false

Scenarios

1. true - Making the flag to true enables the user to have more configs using which more customizations can be made to the format of the urls.
2. false - Making this flag to false will follow the default format as given by the Unbxd . No further customizations can be made to the url .

When seoFriendlyUrl is true, some default configurations gets applied within seo urls config. For eg : The algo for all configs in seo urls becomes KEY_VALUE_REPLACER (if not passed otherwise ) when seoFriendlyUrl is true . Refer to the default values for the behaviour after turning seoFriendlyUrl to true.

orderOfQueryParams

Array

This configuration manages the arrangement of query parameters within the URL.

seoFriendlyUrl must be true for this to work. orderOfQueryParams array can take the query params names that are needed to be set in some order .

Default Value

seoFriendlyUrl: true, 
orderOfQueryParams: []

queryParamSeparator

String

This setting defines the delimiter used to separate individual query parameters within a URL. It allows customization of the character used to distinguish between distinct parameters, influencing how URLs are parsed and processed.

seoFriendlyUrl must be true for this to work.

Default Value

seoFriendlyUrl: true, 
queryParamSeparator: "&"

Allowed Values

The allowed values for this configuration are: "&", "~", "^", ",", "_", ":", ";", "|", "$", "@"

• If the value given by the user is not an allowed value, the default value (&) will be selected.
• The value of queryParamSeparator should not be the same as multiValueSeparator.

keyValueSeparator

String

This setting allows users to define a custom separator symbol to be used between keys and values in a URL query string.

seoFriendlyUrl must be true for this to work.

Default Value

seoFriendlyUrl: true, 
keyValueSeparator: "="

Allowed Values

The allowed values for this configuration are: "=", ":"

• If the value given by the user is not an allowed value, the default value (=) will be selected.

browseQueryParam

This will be the query param for the browse api to provide category information like category path or category id.

seoFriendlyUrl must be true for this to work.

Sample Code

url:{
    seoFriendlyUrl: true, 
    // other URL configurations...
    browseQueryParam: {
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER",
        keyReplacer: "browse"
    }
}

Key Terminology

1. addToUrl: A config that allows users to decide whether they want to append this parameter to the URL or not. Turning this to false will remove the browseQueryParam from the url and on refresh the state cannot be maintained .
2. algo: This has two options to choose from DEFAULT and KEY_VALUE_REPLACER. Applying DEFAULT option gives a default format (as given by Unbxd) for the browseQueryParam . Applying KEY_VALUE_REPLACER as the choosen algo enables user to choose further configurations to customize the browseQueryParam.
3. keyReplacer: Passing keyReplacer will use this value as browseQueryParam instead of the default value (p) in the url . This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Browse Query Param from URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    browseQueryParam: { 
       addToUrl: false
   }
}

URL:

www.example.com/washingMachine

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    browseQueryParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
   }
}

URL:

www.example.com/washingMachine?p=categoryPath%253A%2522LAUNDRY%253EWASHING%2520MACHINES%2522

Usecase 3: Custom Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    browseQueryParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "browse"
   }
}

URL:

www.example.com/washingMachine?browse=categoryPath%253A%2522LAUNDRY%253EWASHING%2520MACHINES%2522

searchQueryParam

This will be the query param for the search api to provide the query information.

seoFriendlyUrl must be true for this to work.

Sample Code

url:{
    seoFriendlyUrl: true, 
    // other URL configurations...
    searchQueryParam: {
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER",
        keyReplacer: "query"
    }
}

Key Terminology

1. addToUrl: A config that allows users to decide whether they want to append this parameter to the URL or not . Turning this to false will remove the searchQueryParam from the url and on refresh the state will not be maintained.
2. algo: This has two options to choose from DEFAULT and KEY_VALUE_REPLACER. Applying DEFAULT option gives a default format (as given by Unbxd) for the searchQueryParam . Applying KEY_VALUE_REPLACER as the choosen algo enables user to choose further configurations to customize the searchQueryParam.
3. keyReplacer: Passing keyReplacer will use this value as browseQueryParam instead of the default value (q) in the url . This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Search Query Param from URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    searchQueryParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    searchQueryParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
   }
}

URL:

www.example.com?q=black+jeans

Usecase 3: Custom Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    searchQueryParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "query"
   }
}

URL:

www.example.com?query=black+jeans

pageNoParam

The pageNoParam configuration defines how pagination data is managed in the URL for the Unbxd search SDK.

seoFriendlyUrl must be true for this to work. When the seoFriendlyUrl is turned to ture with no pageNoParam passed in , it takes the default value . See the below table for the default values.

Sample Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: 'start', 
       usePageNo: false 
   }
}

Key Terminology

1. addToUrl: A config that allows users to decide whether they want to append this parameter to the URL or not. When turned off the page number will not be added to the url .
2. usePageNo: Indicates whether to use page numbers in URL, instead of indices.This config is applicable when algo = KEY_VALUE_REPLACER else the page number will be indices only.
3. algo: This has two options to choose from DEFAULT and KEY_VALUE_REPLACER. Applying DEFAULT option gives a default format (as given by Unbxd) for the page number . Applying KEY_VALUE_REPLACER as the choosen algo enables user to choose further configurations to customize the page number param.
4. keyReplacer: Passing keyReplacer will use this value as page number param instead of the default value (start) in the url . This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Page Number from URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?

Usecase 2: Default Usecase with Index as PageNo.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
       usePageNo: false
   }
}

URL:

www.example.com?start=0

Usecase 3: Default Usecase with Page Numbers as PageNo.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
       usePageNo: true
   }
}

URL:

www.example.com?page=1

Usecase 4: Custom Usecase with Index as PageNo.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "pageNumber",
       usePageNo: false
   }
}

URL:

www.example.com?pageNumber=0

Usecase 5: Custom Usecase with Page Numbers as PageNo.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "pageNumber",
       usePageNo: true
   }
}

URL:

www.example.com?pageNumber=1

pageSizeParam

The pageSizeParam configuration allows you to control the number of products fetched in each API call within the Unbxd search SDK. This feature is particularly useful in tailoring the browsing experience for users by determining how many products are displayed on a single page.

seoFriendlyUrl must be true for this to work.

Sample Code

url:{
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageSizeParam: {
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER",
        keyReplacer: "count"
    }
}

Key Terminology

1. addToUrl: A config that allows users to decide whether they want to append this parameter to the URL or not. When turned off the page number will not be added to the url .
2. algo: This has two options to choose from DEFAULT and KEY_VALUE_REPLACER. Applying DEFAULT option gives a default format (as given by Unbxd) for the page size param . Applying KEY_VALUE_REPLACER as the choosen algo enables user to choose further configurations to customize the page size param.
3. keyReplacer: A config which allows to change the way this config is represented in the URL. This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Page Size from URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageSizeParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageSizeParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
   }
}

URL:

www.example.com?rows=12

Usecase 3: Custom Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageNoParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "products"
   }
}

URL:

www.example.com?products=12

sortParam

In this sortParam configuration, sorting preferences are managed effectively by tailoring the URL structure according to user selections. By configuring the sortParam options, you ensure both flexibility and user-friendly sorting experiences on your e-commerce site.

seoFriendlyUrl must be true for this to work.

Sample Code

url:{
    seoFriendlyUrl: true, 
    // other URL configurations...
    sortParam: { 
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER", 
        keyReplacer: "sortBy",
        valueReplacer: {
            "price desc": "price%20desc",
            "price asc": "price&20asc"
        }
    },
}

Key Terminology

1. addToUrl: A config that allows users to decide whether they want to append this parameter to the URL or not. When turned off the sort will not be added to the url.
2. algo: This has two options to choose from DEFAULT and KEY_VALUE_REPLACER. Applying DEFAULT option gives a default format (as given by Unbxd) for the sort param . Applying KEY_VALUE_REPLACER as the choosen algo enables user to choose further configurations to customize the sort param.
3. keyReplacer: A config which allows to change the way this config is represented in the URL. This config is applicable when algo = KEY_VALUE_REPLACER.
4. valueReplacer: Using this configuration , the actual value of the options for sort can be replaced. This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Sort in URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    sortParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    sortParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
   }
}

URL:

www.example.com?sort=price%20desc

Usecase 3: Custom Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    sortParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "order",
       valueReplacer: {
            "price desc": "desc"
    }
   }
}

URL:

www.example.com?order=desc

pageViewParam

In this configuration, product view preferences are effectively managed by tailoring the URL structure according to user selections. By configuring the pageViewParam options, you ensure an enhanced browsing experience for users on your e-commerce site, allowing them to choose between list view and grid view as per their preference.

seoFriendlyUrl must be true for this to work.

Sample Code

url:{
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageViewParam: { 
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER", 
        keyReplacer: "viewType", 
        valuesReplacer: {  
            "GRID": "GRID",
            "LIST": "LIST"
        }
    },
}

Key Terminology

1. addToUrl: A config that allows users to append this parameter to the URL.
2. algo: Short for algorithm, this parameter lets users choose a specific computational method or process to apply.
3. keyReplacer: A config which allows to change the way this config is represented in the URL. This config is applicable when algo = KEY_VALUE_REPLACER.
4. valueReplacer: A config which allows to change the way the selected value is represented in the URL. This config is applicable when algo = KEY_VALUE_REPLACER.

Configurations

Usecases

Usecase 1: Hide Page View in URL.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageViewParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageViewParam: { 
       addToUrl: true,
       algo: "DEFAULT", 
   }
}

URL:

www.example.com?viewType=GRID

Usecase 3: Custom Usecase.

Code:

url: {
    seoFriendlyUrl: true, 
    // other URL configurations...
    pageViewParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER", 
       keyReplacer: "pageView",
       valueReplacer: {
            "GRID": "G"
        }
   }
}

URL:

www.example.com?pageView=G

facetsParam

facetsParam configurations gives user the flexibility to customize how selected facets string look in the url. This configuration is only available when the seoFriendlyUrl flag is turned on.

Sample Code

url:{
    // other URL configurations...
     facetsParam: {
        addToUrl: true,
        algo: "KEY_VALUE_REPLACER",
        multiValueSeparator: ",",
        keyReplacer: {
                "color_uFilter": "color",
                "size_uFilter": "size"
        },
        valueReplacer: {
                "color_uFilter": {
                    "Multi_color": "multi",
                },
                "size_uFilter": {
                    "xs": "extra-small"
                }
        },
        facetsOrderInUrl: ["size","color_uFilter"],
        rangeFacets: ["price"],
        rangeSeparator: "-"
    }
}

Key Terminology

1. addToUrl: Boolean config which when turned on enables user to display all the selected facets in the url . Turn it off when facets are not to be displayed in the url.
2. algo: Option for user to switch between different customization modes / algos provided eg : DEFAULT , KEY_VALUE_REPLACER . Different type of algo provides different kind of customization for the facets string in the url.
3. multiValueSeparator: String option to provide a character that will separate the multiple values selected for a facet in the url. This config is applicable only when algo: "KEY_VALUE_REPLACER".
4. keyReplacer: Using this config user can replace the facet actual names with some custom names in the url which are more readable.For eg : colour_uFilter which is the actual name of the filter can be replaced with color instead which is more readable .This config is applicable only when algo: "KEY_VALUE_REPLACER".
5. valueReplacer: Using this config user can replacer the facet actual values with some custom values in the url .This config is applicable only when algo: "KEY_VALUE_REPLACER".
6. facetsOrderInUrl: This config orders the facets among facets string in the url .
7. rangeFacets: This is a required field if you have range facets. Declare all the range facets by passing them in this array.This config is applicable only when algo: "KEY_VALUE_REPLACER".
8. rangeSeparator: This is the separator between the range . For eg : 12-20 has “-“ as the rangeSeparator.This config is applicable only when algo: "KEY_VALUE_REPLACER".

Configurations

If the value given by the user is not an allowed value, the default value will be selected. multiValueSeparator and queryParamSeparator values cannot be same.

Usecases

Usecase 1: Hide facets in the url.

Code:

url: {
    seoFriendlyUrl : true
    // other URL configurations...
    facetsParam: { 
       addToUrl: false
   }
}

URL:

www.example.com?q=*

Usecase 2: Default Usecase.

Code:

url: {
    seoFriendlyUrl : true
    // other URL configurations...
    facetsParam: { 
       addToUrl: true,
       algo: "DEFAULT"
   }
}

URL:

www.example.com?q=*&filter=color_uFilter%3A%22Black%22%20OR%20color_uFilter%3A%22Blue%22&filter=size_uFilter%3A%22XS%22

Usecase 3: Added to URL with selected algorithm as KEY_VALUE_REPLACER and no other configs passed.

Code:

url: {
    seoFriendlyUrl : true
    // other URL configurations...
    facetsParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER"
   }
}

URL:

www.example.com?q=*&color_uFilter=Black&size_uFilter=XS&gender_uFilter=men&price=0-300,300-600

Usecase 4: Added to URL with selected algorithm as KEY_VALUE_REPLACER and other configs passed.

Code:

url: {
    seoFriendlyUrl : true
    // other URL configurations...
    facetsParam: { 
       addToUrl: true,
       algo: "KEY_VALUE_REPLACER",
       multiValueSeparator: "~",
       keyReplacer: {
        "colour_uFilter" : "color",
        "size_uFilter" : "size"
       },
       valueReplacer: {
        "colour_uFilter": {
            "Black" : "blk"
        },
        "size_uFilter" : {
            "XS": "extra-small"
        }
       },
       facetsOrderInUrl :["size_uFilter", "color_uFilter"],
       rangeFacets: ["price"],
       rangeSeparator: "-"
   }
}

URL:

www.example.com?q=*&size=extra-small&color=blk&price=0-300~300-600