SEO

The Hydrogen framework includes <Seo> client and server components. This guide describes how to customize the output of SEO-related tags in your Hydrogen client and server components.

How SEO works

The Hydrogen framework includes a <Seo> client component inside your app's components which you can use to customize the output of SEO-related tags in your document head.

Hydrogen also supplies a <DefaultSeo> server component, which is responsible for fetching your shop.name and setting default values and templates for every page on your website.

Client component examples

The following example shows how to pass a product prop to the component to generate standard SEO-related tags for your product page:

If you want to add custom head tags, then you can import Helmet from Hydrogen on any client component and use the syntax described by the underlying Helmet library:

Server component examples

The following example shows how to include a catch-all SEO component (<DefaultSeo>) that queries and populates <head> tags as a server component:

Next steps