# SEO
URL: /docs/features/seo

SEO utilities to make sure your page is represented correctly and ranks on Google

## Utility functions

[ship.pluv.io](https://ship.pluv.io) comes with several utility functions to ensure each of your pages have the relevant SEO tags and data to be represented correctly and ranked on search engines.

### getSeoMetadata

The `getSeoMetadata` function defines a central location where your site-wide defaults for SEO metadata can be configured. The default values for this function are defined within the following config file: `/packages/configs/defaultSeoMetadata.js`.

```tsx title="page.tsx"
import { getSeoMetadata } from "@workspace/utils";
import type { Metadata } from "next";

// As a value
export const metadata: Metadata = getSeoMetadata({
    // You can provide properties to overwrite the defaults
    title: "My custom title",
    description: "My custom description",
});

// If you need to dynamically generate metadata, export `generateMetadata`
// instead, and provide a function parameter to getSeoMetadata
export const generateMetadata = getSeoMetadata(async () => {
    const details = await getMyMetadataDetails(/* ... */);

    return {
        // You can provide properties to overwrite the defaults
        title: details.title,
        description: "My custom description",
    };
});
```

#### Tips

* Next.js will [automatically merge metadata](https://nextjs.org/docs/app/api-reference/functions/generate-metadata#merging) objects shallowly for a given route. So often times, you should only need to call `getSeoMetadata` in each Next.js app's root layout. Then for all other pages/layouts, you can just export the metadata partial object containing the fields you wish to overwrite.

### JsonLd

Type-safe SEO rich snippets via the `JsonLd` component. This component can represent either a single entity or a graph containing multiple entities.

Once the `@type` property is provided, TypeScript will infer the correct attributes for that entity so you can provide the other properties of those entities confidently.

Render this in your page component wherever you wish to provide this.

```tsx title="page.tsx"
import { JsonLd } from "@workspace/ui/custom/JsonLd";

// As a single entity
<JsonLd data={{ "@type": "Person" }} />

// As a graph
<JsonLd
    graph={[
        { "@type": "Person" },
        { "@type": "Organization" }
    ]}
/>

// example of rendering in your page
const Page = () => {
    return (
        <>
            <JsonLd
                data={{ 
                    "@type": "Person",
                    // ...other properties
                }}
            />
            <div>
                {/* ... */}
            </div>
        <>
    );
}
```

#### Tips

* If you are building an application that supports user reviews for products, consider adding `JsonLd` to those product pages and include star ratings. These will appear on Google, and can make users more likely to visit your site.

### OG image generation

OG image generation is included via the [@vercel/og](https://vercel.com/docs/og-image-generation) package. OG images are generated dynamically via the `/api/og` route. Provide a custom `title` and `description` property to generate the image. The route can be called as a typesafe function via the [rpc](/features/rpc).

The included OG image template can be updated within the following component file: `/packages/og-images/src/templates/OgGlobalTemplate`.

```tsx title="page.tsx"
import { rpc } from "@/shared/rpc";
import type { Metadata } from "next";

const ogImage: URL = rpc.api.og.$url({
    query: {
        title: "How to Make Hard-Boiled Eggs",
        description: "Delicious recipes",
    },
});

// Next.js metadata export
export const metadata: Metadata = {
    // ... other metadata
    openGraph: {
        // ... other openGraph data
        images: [ogImage],
    },
};
```

### Sitemap generation

Sitemaps and robots.txt files are automatically generated for each Next.js app zone via the [next-sitemap](https://www.npmjs.com/package/next-sitemap) package each time your app is built (i.e. during automated deployments with your hosting provider).

Each Next.js app zone's sitemaps will be correctly indexed and linked together, even when deployed separately. If you wish to configure your sitemap generation, edit the `next-sitemap.config.js` files at the base of each Next.js app directory.

## Blog

SEO metadata will be taken from the `SEO Title` and `Meta Description` columns automatically from your Notion database. All other properties will be taken from the `metadata` exported from the `marketing` root layout. See the [Blog](/doccs/features/pages/blog) documentation for more details.

## Docs

SEO metadata will be taken from your [page's frontmatter](https://fumadocs.dev/docs/ui/page-conventions#file) title and description properties. All other properties will be taken from the `metadata` exported from the `docs` root layout.