---
title: Seo
description: The &lt;Seo /&gt; component renders SEO meta tags in the document head.
api_version: 2026-04
source_url:
  html: 'https://shopify.dev/docs/api/hydrogen/latest/components/seo'
  md: 'https://shopify.dev/docs/api/hydrogen/latest/components/seo.md'
api_name: hydrogen
---

# 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).

**Note: the Seo component is deprecated** - Use [getSeoMeta](https://shopify.dev/docs/api/hydrogen/latest/utilities/getseometa) to migrate.

#### Props

* **debug**

  **boolean**

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

Examples

### Examples

* #### Example code

  ##### JavaScript

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

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

  ##### TypeScript

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

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

***
