Setup with SDK

Making your SDK compatible with Long-tail SEO collections is very easy. It’s supported out of the box so you might not have to do anything at all. Still, there are some things which are good to consider and check.

​

1. Make sure your SDK has a new enough version

SEO Long-tail collections are not supported in all versions of the SDK. Check that the version listed in your package.json is compatible.

If you’re using the React SDK, make sure you’re using at least version:

"@depict-ai/react-ui": "^1.5.12"

Upgrade to the latest version by running:

npm update @depict-ai/react-ui

If you’re using the Vanilla JS SDK, make sure you’re using at least version:

"@depict-ai/js-ui": "^1.5.11"

Upgrade to the latest version by running:

npm update @depict-ai/js-ui

​

2. Consider adding a title suffix

The SDK will automatically change the <title/> of your page to an auto-generated one. Often, stores have a title suffix on all their titles, e.g. “Regular Title | My Store”. If this is the case for you, you have to configure it in the SDK.

If you’re using the React SDK:

Set the metaTitleSuffix property in the category object of the DepictProvider component.

<DepictProvider
     {/* ... */}
     category={{
       metaTitleSuffix: " | My Store",
     }}
>
    <Routes>{/* ... */}</Routes>
</DepictProvider>

If you’re using the Vanilla JS SDK:

Set the metaTitleSuffix property in the constructor object of the DepictCategoryProvider class.

const categoryProvider = new DepictCategoryProvider<YourDisplay>({
  /* ... */
  metaTitleSuffix: " | My Store",
});

​

Bonus: Understand how category id is set for Long-tail SEO collection URLs

You might be wondering how normally, you as the SDK user specify a categoryId, but the Depict generated Long-tail SEO collections are seemingly able to bypass this.

The answer lies in the Depict generated URL. The SDK has a special URL query parameter with the name query_id which will override the categoryId specified in the SDK.

Examples:

• https://example.com/collections/my_collection - You control the category id
• https://example.com/collections/my_collection?query_id=other_collection - The category id is taken from the URL. In this case it’s other_collection

Conflict case:

If your page itself sets query_id, this could cause problems with the SDK. For this reason, the SDK has an option called disableOverrideQueryId which can be found on the category object of the DepictProvider component, or the constructor object of the DepictCategoryProvider class.