Canonical Tags Populated With Relative Paths

This topic applies to

Applies to

SuiteCommerce Advanced | Vinson

 

In Vinson releases of SuiteCommerce Advanced, canonical URLs for commerce categories are generated as relative paths. Search engines do not index relative canonical URLs. Therefore, to ensure optimal SEO rankings, you must apply the patch described here to change your commerce category canonical URLs to use absolute paths. Best practices require customizing the existing source code using the .extend method, as detailed below.

Note

Before proceeding, familiarize yourself with the Best Practices for Customizing SuiteCommerce Advanced.


Step 1: Extend the Facets.Browse.View.js File

This step explains how to extend the Facets.Browse.View.js file, which is located in the Facets module.

  1. If you have not done so already, create a directory to store your custom module.

  2. Open this directory and create a subdirectory to maintain your customizations.

    Give this directory a name similar to the module being customized. For example:

    Modules/extensions/FacetsExtension@1.0.0

  3. In your new FacetsExtension@1.0.0 module, create a subdirectory called JavaScript.

    Modules/extensions/FacetsExtension@1.0.0/JavaScript

  4. In your new JavaScript subdirectory, create a JavaScript file to extend Facets.Browse.View.js .

    Name this file according to best practices. For example:

    Facets.Browse.View.Extension.js

  5. Open this file and extend the getPath method to modify the url as follows.

    define('Facets.Browse.View.Extension' , [ 'Facets.Browse.View' , 'underscore' ] , function ( FacetsBrowseView , _ ) { 'use strict'; _.extend(FacetsBrowseView.prototype, { getPath: function () { var base_url = window.location.protocol + '//' + window.location.hostname; if (this.model.get('category')) { var category_canonical = this.model.get('category').get('canonical') || this.model.get('category').get('fullurl'); return (category_canonical.indexOf('/') === 0 ? base_url : '') + category_canonical; } else { var canonical = base_url + '/' + Backbone.history.fragment , index_of_query = canonical.indexOf('?'); // !~ means: indexOf == -1 return !~index_of_query ? canonical : canonical.substring(0, index_of_query); } } }); } );
  6. Save the file.

Step 2: Prepare the Developer Tools for Your Extension

  1. Open the FacetsExtension@1.0.0 module.

  2. Create a file in this module and name it ns.package.json.

    Modules/extensions/FacetsExtension@1.0.0/ns.package.json

  3. Build the ns.package.json file using the following code

    { "gulp": { "javascript": [ "JavaScript/*.js" ] } }
  4. Save the ns.package.json file.

  5. Open the distro.json file.

    This file is located in the top-level directory of your SuiteCommerce Advanced source code.

  6. Add your custom module to the modules object.

    This ensures that the Gulp tasks include your extension when you deploy. In this example, the extensions/FacetsExtension module is added at the beginning of the list of modules. However, you can add the module anywhere in the modules object. The order of precedence in this list does not matter.

    { "name": "SuiteCommerce Advanced Elbrus", "version": "2.0", "buildToolsVersion": "1.3.0", "folders": { "modules": "Modules", "suitecommerceModules": "Modules/suitecommerce", "extensionsModules": "Modules/extensions", "thirdPartyModules": "Modules/third_parties", "distribution": "LocalDistribution", "deploy": "DeployDistribution" }, "modules": { "extensions/FacetsExtension": "1.0.0", "suitecommerce/Account": "2.3.0", "suitecommerce/Address": "2.4.0", ...
  7. Include the module definition (“Facets.Browse.View.Extension”) in the dependencies array of the Shopping application of the JavaScript object.

    Your distro.json file should look similar to the following:

    "tasksConfig": { //... "javascript": [ //... { "entryPoint": "SC.Shopping.Starter", "exportFile": "shopping.js", "dependencies": [ //... "Newsletter", "ProductDetailToQuote", //.. "Facets", "Facets.Browse.View.Extension" ],

    Note

    Best practice is to place any new modules at the bottom of the list in the dependencies array. In this case, FacetsBrowseExtension must be placed after Facets as there are dependencies on that module.


  8. Save the distro.json file.

Step 3: Test and Deploy Your Extension

  1. Test your source code customizations on a local server (see SCA on a Local Server) or deploy them to your NetSuite account (see Deploy to NetSuite).

    If you are currently running SCA on a local server, your changes should appear on your local site immediately.

  2. Confirm your results.

    All commerce category canonical URLs have absolute paths.

Related Topics