feat: add title and description templates for product listing pag…

…es (#2643)

## What's the purpose of this pull request?

Use templates for `title` and `description` on PLP for SEO purposes.

## How it works?

The store will be able to define their templates through the
`discovery.config.js` file just like the example on
`discovery.config.default.js` file in this PR.

## How to test it?

Check if the metatags for title and description are being built
correctly on a Collection page.
For example, for the `Just Arrived` collection on the `storeframework`
account:

| Before | After |
| ---- | ---- |
| <img width="963" alt="Screenshot 2025-01-28 at 16 33 51"
src="https://github.com/user-attachments/assets/4c4146ac-5c46-417b-85f7-59d42a0b645e"
/> | <img width="985" alt="Screenshot 2025-01-28 at 16 35 24"
src="https://github.com/user-attachments/assets/ed23cb35-9bcf-48f8-8e6f-1bc67b25b6bb"
/> |

### Starters Deploy Preview

https://storeframework-cm652ufll028lmgv665a6xv0g-omqh42rt5.b.vtex.app/
([PR](vtex-sites/starter.store#659))

## References

- [Jira
task](https://vtex-dev.atlassian.net/jira/software/c/projects/SFS/boards/1051?selectedIssue=SFS-2052)
- [Slack
thread](https://vtex.slack.com/archives/C089H46Q3B7/p1738074195806699)

packages/core/discovery.config.default.js

@@ -4,6 +4,10 @@ module.exports = {
     description: 'Fast Demo Store',
     titleTemplate: '%s | FastStore',
     author: 'Store Framework',
+    plp: {
+      titleTemplate: '%s | FastStore PLP',
+      descriptionTemplate: '%s products on FastStore Product Listing Page',
+    },
   },
 
   // Theming

packages/core/src/components/templates/ProductListingPage/ProductListingPage.tsx

@@ -12,7 +12,7 @@ import type { ServerCollectionPageQueryQuery } from '@generated/graphql'
 import { ITEMS_PER_PAGE } from 'src/constants'
 import { useApplySearchState } from 'src/sdk/search/state'
 
-import { PLPContentType } from 'src/server/cms/plp'
+import type { PLPContentType } from 'src/server/cms/plp'
 
 import storeConfig from '../../../../discovery.config'
 import ProductListing from './ProductListing'
@@ -68,8 +68,16 @@ export default function ProductListingPage({
     sort: settings?.productGallery?.sortBySelection as SearchState['sort'],
   })
 
-  const title = collection?.seo.title ?? storeConfig.seo.title
-  const description = collection?.seo.description ?? storeConfig.seo.title
+  const {
+    seo: { plp: plpSeo, ...storeSeo },
+  } = storeConfig
+  const title = collection?.seo.title ?? storeSeo.title
+  const titleTemplate = plpSeo?.titleTemplate ?? storeSeo.titleTemplate
+  const description =
+    collection?.seo.description || // Use description that comes from the Checkout API
+    plpSeo?.descriptionTemplate?.replace(/%s/g, () => title) || // Use description template from the SEO config for PLP
+    storeSeo.description // Use default description from the store SEO config
+
   const [pathname] = router.asPath.split('?')
   const canonical = `${storeConfig.storeUrl}${pathname}`
   const itemsPerPage = settings?.productGallery?.itemsPerPage ?? ITEMS_PER_PAGE
@@ -84,7 +92,7 @@ export default function ProductListingPage({
       <NextSeo
         title={title}
         description={description}
-        titleTemplate={storeConfig.seo.titleTemplate}
+        titleTemplate={titleTemplate}
         canonical={canonical}
         openGraph={{
           type: 'website',