Seocomponent
component
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. Learn more about how SEO works in Hydrogen.
Note: the Seo component is deprecated - Use getSeoMeta to migrate.
Anchor to propsProps
- Anchor to debugdebugboolean
Enable debug mode that prints SEO properties for route in the console
SeoProps
- debug
Enable debug mode that prints SEO properties for route in the console
boolean
interface SeoProps {
/** Enable debug mode that prints SEO properties for route in the console */
debug?: boolean;
}Was this section helpful?
Example code
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>
);
}
examples
Example code
description
I am the default example
JavaScript
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
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> ); }