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
metaandlinktags present in the HTML document, usually theheadtag. - Additional
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 typeapplication/ld+json.
Requirements
Anchor 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 component
Anchor 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 root file:
Step 2: Define global SEO values in the root component
Anchor 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.
Add an 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 title and 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 page
Anchor 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 title and 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 metadata
Anchor link to section titled "Step 4: Define more granular metadata"So far, you've made changes to the title and description values on the seo object. While these two values alone will add the title tag, 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:
- Define
mediato display when the page is shared on social media. - Specify the Twitter
handleof your brand. - Provide mobile and language
alternates. - Define additional custom
jsonLddata.
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.