Manage meta tags for SEO
It's essential to optimize your website for search engines, but it's hard to always get it right. In custom storefronts using Hydrogen, it is easy to add the proper metadata to products, pages, collections, blogs, and articles so they stand out in search results.
This guide shows you how to use the
Seo component to ensure your website contains the following optimizations:
- Proper standard
linktags present in the HTML document, usually the
metatags that target a range of protocols and supported applications, such as Open Graph and Twitter.
- A well-defined object of JSON Linking Data (JSON-LD), inside a
scripttag with the type
RequirementsAnchor link to section titled "Requirements"
- You've started a new app with
@shopify/hydrogenor added the
@shopify/hydrogennpm dependency to an existing app.
- You've added the necessary environment variables to request data from your Shopify store using the Storefront API.
Step 1: Render the Seo component in the root componentAnchor link to section titled "Step 1: Render the Seo component in the root component"
Hydrogen provides an
Seo component that collects the data defined in the
handle export of each route module. You can add this component in the
<head> tag of the
Step 2: Define global SEO values in the root componentAnchor link to section titled "Step 2: Define global SEO values in the root component"
After you've rendered the
Seo component in your root component, each
route module can define an
seo object inside of the
handle export, which is part of the Remix Route Module API.
To reduce duplication on each route, you can define the shared global values in the root file.
seo key on the
handle export from the page. If the module doesn't already have a
handle export, then you can define it and add the
seo key. The following is an example:
The values for
description generate the SEO metadata in the
head of the HTML document, and define the default global values. In the next step, you'll override these values to make them specific to each route.
Step 3: Override SEO values on the product details pageAnchor link to section titled "Step 3: Override SEO values on the product details page"
In the previous step, you defined the
seo key as a plain object, but you can also pass a function that receives the
loader data as an argument. This enables you to have dynamic values that are informed by a Storefront API GraphQL query.
Inside the product details page, you can override the
description keys with the SEO information that's defined in the Shopify admin for each product.
The following example shows how to request the SEO data in the
PRODUCT_QUERY and return the values on the
product key of the
loader's return object. With the
seo key now defined as a function, you have access to those values. If any data is missing, then the values you defined in your
root file are used instead.
Step 4: Define more granular metadataAnchor link to section titled "Step 4: Define more granular metadata"
So far, you've made changes to the
description values on the
seo object. While these two values alone will add the
meta tags for Open Graph and Twitter, and some basic JSON-LD, you can take these concepts much further to provide additional SEO metadata for each route.
Using the same concept of requesting data using the
loader and the GraphQL Storefront API, you can do the following tasks:
mediato display when the page is shared on social media.
- Specify the Twitter
handleof your brand.
- Provide mobile and language
- Define additional custom
For detailed examples, refer to the route modules in the Hydrogen
demo-store template on GitHub.
- Add SEO information to the rest of the routes in your app.
- View the type information of the
generateSeoTagsfunction for the full list of possible values that you can add.