---
title: Seo
description: >-
The `` component renders SEO meta tags in the document `head`. Add the
`` to your `root.jsx` before the `` and `` components.
SEO metadata is set on a per-route basis using Remix [loader
functions](https://remix.run/docs/en/v1/guides/data-loading). Learn more about
[how SEO works in
Hydrogen](https://shopify.dev/docs/custom-storefronts/hydrogen/seo).
**Note: the Seo component is deprecated** - Use [getSeoMeta](/docs/api/hydrogen/utilities/getseometa) to migrate.
api_version: 2025-07
api_name: hydrogen
source_url:
html: 'https://shopify.dev/docs/api/hydrogen/latest/components/seo'
md: 'https://shopify.dev/docs/api/hydrogen/latest/components/seo.md'
---
# Seo
The `` component renders SEO meta tags in the document `head`. Add the `` to your `root.jsx` before the `` and `` components. SEO metadata is set on a per-route basis using Remix [loader functions](https://remix.run/docs/en/v1/guides/data-loading). Learn more about [how SEO works in Hydrogen](https://shopify.dev/docs/custom-storefronts/hydrogen/seo).
**Note: the Seo component is deprecated** - Use [getSeoMeta](https://shopify.dev/docs/api/hydrogen/utilities/getseometa) to migrate.
## Props
* debug
boolean
Enable debug mode that prints SEO properties for route in the console
Examples
### Examples
* #### Example code
##### Description
I am the default example
##### JavaScript
```js
import {Seo} from '@shopify/hydrogen';
import {Links, Meta, Outlet, Scripts, ScrollRestoration} from 'react-router';
export default function App() {
/** ... */
return (
{/* Add before and */}
);
}
```
##### TypeScript
```ts
import {Seo} from '@shopify/hydrogen';
import {Links, Meta, Outlet, Scripts, ScrollRestoration} from 'react-router';
export default function App() {
/** ... */
return (
{/* Add before and */}
);
}
```