Seo
The Seo component renders SEO information on a webpage.
Example code
Anchor link to section titled "Example code"
The Seo component has two props: type and data. The type prop accepts defaultSeo, homepage, product, collection, or page. Each type expects a different data shape.
| Type | Data | Description |
|---|---|---|
| defaultSeo | Omit<DefaultPageType, 'url'> |
The SEO information to render as default on every page of the website. This includes the defaults for title, description, and title template. The title template defaults to the pattern of %s - ${data.title}, where %s is the title of children components. You can overwrite this pattern using the data.titleTemplate prop. The language defaults to the defaultLocale value provided in hydrogen.config.js or EN-US when not specified. |
| homepage | Omit<HomePageType, 'url'> |
The SEO information to render on the home page of the website. Corresponds to the Storefront API's Seo object. |
| product | Omit<ComponentProps<typeof ProductSeo>, 'url'> |
The SEO information to render on the product page. Corresponds to the Storefront API's Product object. |
| collection | Omit<ComponentProps<typeof CollectionSeo>, 'url'> |
The SEO information to render on the collection page. Corresponds to the Storefront API's Collection object. |
| page | Omit<ComponentProps<typeof PageSeo>, 'url'> |
The SEO information to render on pages (for example, "About" or "Shipping"). Corresponds to the Storefront API's Page object. |
Component type
Anchor link to section titled "Component type"The Seo component is a shared component, which means that it renders on both the server and the client. For more information about component types, refer to React Server Components.
Storefront API data
Anchor link to section titled "Storefront API data"The Seo component includes the following types that expect a specific data shape:
The defaultSeo type is an object with the following data structure. The title and description fields correspond to the Storefront API's Seo object:
The homepage type is an object with fields that correspond to the Storefront API's Seo object:
The product type is an object with fields that correspond to the Storefront API's Product object:
The collection type is an object with fields that correspond to the Storefront API's Collection object:
The page type is an object with fields that correspond to the Storefront API's Page object: