Skip to main content

Seo

The Seo component renders SEO information on a webpage. You can customize this component using passthrough props.

Example code​

import {Seo, useShopQuery, useRouteParams, gql} from '@shopify/hydrogen';

const QUERY = gql`
  query PageDetails($handle: String!) {
    page(handle: $handle) {
      title
      body
      seo {
        title
        description
      }
    }
  }
`;

export default function Page() {
  const {handle} = useRouteParams();
  const {data} = useShopQuery({query: QUERY, variables: {handle}});

  if (!data.pageByHandle) {
    return <NotFound />;
  }

  const page = data.pageByHandle;

  return <Seo type="page" data={page} />;
}

Props​

The Seo component has two props: type and data. The type prop accepts defaultSeo, homepage, product, collection, page, or noindex. Each type expects a different data shape.

TypeDataDescription
defaultSeoOmit&.md#60;DefaultPageType, 'url'&#62;
Data shape:
{
  title: string; 
  description: string; 
  titleTemplate?: string; 
  lang?: string;
}
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 locale within the ShopifyProvider component.
homepageOmit&#60;HomePageType, 'url'&#62;The SEO information to render on the home page of the website. Corresponds to the Storefront API's Seo object.
productOmit&#60;ComponentProps&#60;typeof ProductSeo&#62;, 'url'&#62;The SEO information to render on the product page. Corresponds to the Storefront API's Product object.
collectionOmit&#60;ComponentProps&#60;typeof CollectionSeo&#62;, 'url'&#62;The SEO information to render on the collection page. Corresponds to the Storefront API's Collection object.
pageOmit&#60;ComponentProps&#60;typeof PageSeo&#62;, 'url'&#62;The SEO information to render on pages (for example, "About" or "Shipping"). Corresponds to the Storefront API's Page object.
noindexOmit&#60;ComponentProps&#60;typeof NoIndexPageSeo&#62;, 'url'&#62;
Data shape:
{
  title: string; 
  titleTemplate?: string; 
  lang?: string;
}
Instructs bots to not index a page (for example, an authenticated account management page).

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.