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: