# SEO Management

The SEO tags in your project should be included in the following files:

* `src/app/[commerce]/[locale]/[currency]/layout.tsx`
* `src/app/[commerce]/[locale]/[currency]/(root)/category/[pk]/page.tsx`
* `src/app/[commerce]/[locale]/[currency]/(root)/list/page.tsx`
* `src/app/[commerce]/[locale]/[currency]/(root)/product/[pk]/page.tsx`
* `src/app/[commerce]/[locale]/[currency]/(root)/special-page/[pk]/page.tsx`
* `src/app/[commerce]/[locale]/[currency]/(root)/group-product/[pk]/page.tsx`

If your project has a category landing page, you also need to edit the SEO tags for the category landing page created within the root.

* `src/app/[commerce]/[locale]/[currency]/(root)/categoryLandigPage/page.tsx`

To create metadata, first import the existing Metadata in Next.js:

```
import { Metadata } from 'next';
```

An async function named **generateMetadata** is created. This function runs before the **function root** and puts metadata in head.

The `params` and `searchParams` parameters, as well as the `props` you want to display in the metadata, can be added to the **generateMetadata** function.

Examples of **generateMetadata** function with different parameter options:

**Without parameters:**

```
export async function generateMetadata() {}
```

**With parameters:**

```
export async function generateMetadata({ params, searchParams }) {}
```

**With parameters and props:**

`<{ pk: number }>` represents a single attribute to be extracted from props.

```
export async function generateMetadata({ params, searchParams }: PageProps<{ pk: number }>) {}
```

SEO data such as title, description, canonical, openGraph can also be added to **metadata**.

Example **Metadata** variable:

```
const result: Metadata = {
  title: 'title',
  description: 'description',
  keywords: 'keywords',
  viewport:
    'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0',
  twitter: {
    title: 'title',
    description: 'description'
  },
  alternates: {
    canonical: 'canonicalUrl'
  },
  openGraph: {
    title: 'title',
    description: 'description',
    images: 'image'
  },
};
```

Example of the **generateMetadata** function for `src/app/[commerce]/[locale]/[currency]/(root)/product/[pk]/page.tsx`:

```
export async function generateMetadata({
  params,
  searchParams
}: PageProps<{ pk: number; locale: string }>) {
  const nextHeaders = pzUrl();
  const pageUrl = new URL(
    nextHeaders.get('pz-url') ?? process.env.NEXT_PUBLIC_URL
  );

  const canonicalUrl = `${process.env.NEXT_PUBLIC_URL}${pageUrl?.pathname}`;
  let result: Metadata = {};

  try {
    const {
      data: { product }
    } = await getProductData({
      pk: params.pk,
      searchParams
    });
    result = {
      title: product.name,
      description: product.attributes.description,
      twitter: {
        title: product.name,
        description: product.attributes.description
      },
      openGraph: {
        title: product.name,
        description: product.attributes.description,
        images: product.productimage_set?.map((item) => ({
          url: item.image
        }))
      },
      alternates: {
        canonical: canonicalUrl
      }
    };
    // eslint-disable-next-line no-empty
  } catch (error) {}

  return result;
}
```