# Seo
The `<Seo />` component renders SEO meta tags in the document `head`. Add the `<Seo />` to your `root.jsx` before the `<Meta />` and `<Link />` 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).
### Example code

```js
import {Seo} from '@shopify/hydrogen';
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react';

export default function App() {
  /** ... */
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charSet="utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
        {/* Add &lt;Seo /&gt; before &lt;Meta /&gt; and &lt;Link /&gt; */}
        &lt;Seo /&gt;
        &lt;Meta /&gt;
        &lt;Links /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;Outlet /&gt;
        &lt;ScrollRestoration /&gt;
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}

```

```ts
import {Seo} from '@shopify/hydrogen';
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from '@remix-run/react';

export default function App() {
  /** ... */
  return (
    &lt;html&gt;
      &lt;head&gt;
        &lt;meta charSet="utf-8" /&gt;
        &lt;meta name="viewport" content="width=device-width,initial-scale=1" /&gt;
        {/* Add &lt;Seo /&gt; before &lt;Meta /&gt; and &lt;Link /&gt; */}
        &lt;Seo /&gt;
        &lt;Meta /&gt;
        &lt;Links /&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;Outlet /&gt;
        &lt;ScrollRestoration /&gt;
        &lt;Scripts /&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  );
}

```


## Props

### SeoProps

### debug
Enable debug mode that prints SEO properties for route in the console