Search engine optimization

Search engine optimization (SEO) allows shoppers to find your site content more effectively through search engines. The React Store application supports SEO URLs that use keywords and metadata and can be managed by business users directly from the Management Center.

Consider the following points about the SEO URLs and search engine optimization:
  • The SEO URL and page metadata information that is available in the HCL Commerce database is used by ElasticSearch (full and delta) as a new document index. All category and product URLs are indexed into the ElasticSearch Index.
  • The React SPA makes a REST service call to HCL Commerce which efficiently maps a URL request to the appropriate page and page metadata.
  • SEO ingest and decomposition also supports any redirects due to URL modifications to objects. When a URL is modified, the new URL information is added to the SEO index and an additional document is generated to indicate a redirect of old URL to new URL.
  • The SEO URL and page metadata are impacted by product and category data and store information such as name, description, and keywords. As such the SEO URL documents must be updated when SEO URL, product or category information is updated from the Management Center during delta indexing processes.
Note: The following changes are not reflected in real time as they impact all or most SEO documents:
  • Modifications to the store name.
  • Modifications to a substitution template for page metadata.
  • Expiry of redirects triggered by dbclean.

How are SEO pages handled?

When a React store URL is used in a browser, the React Router looks at the relative path and first compares it against the list of paths that are statically defined in the app. If no match is found, then a fallback handles any other URLs.

For the React Store application, most URL routing is handled directly by React Router, where a static relative path routes to a page component based on the mappings defined in src\configs\routes.ts. However, catalog browsing pages (category page, sub-category page, and product details page) have dynamic SEO relative paths. These paths and all other unknown paths are generically routed to the SEO component (src\_foundation\seo\SEO.tsx) which then determines the end component that is to be used.

The SEO component calls the urls REST API to determine which page component is to be used. The SEO relative path is passed as a parameter to the urls REST API. The API returns the page type and the page meta-data. The SEO component then uses the page type to route to the proper page component in order to display the page contents. For example, the page type CategoryPage is routed to the page component src\components\pages-seo\category.

The Reference Store application uses the Redux Saga library to call the urls REST API and uses Redux state management to store the resulting page information. The logic to resolve a list of known page types to page components is defined in the Redux reducer in the src\redux\reducers\seo.ts folder. If the page type cannot be determined, a generic Not Found component is used. The SEO component is also responsible for injecting the metadata for a page based on the data that is returned by the urls REST API. The urls REST API also provides information about the catalog object, such as category ID. This information is then forwarded to the resolved page component to fetch the catalog object details for further processing and for displaying the information about the catalog object.

For more information about Search engine optimization in HCL Commerce, see Search engine optimization (SEO).