Search Engine Optimization for Hydrogen
Optimizing Hydrogen for search engines and social media requires configuring the following things:
This guide walks you through the process of setting up each one.
Hydrogen uses Remix's built-in meta
features for SEO tags, and includes the getSeoMeta
utility, which makes it easier and more consistent to render SEO meta tags.
The getSeoMeta
utility accepts SEO metadata about the current route, then renders the corresponding HTML meta tags in your document <head>
:
It includes support for titles, descriptions, images, canonical URLs, JSON-LD and more. Check the getSeoMeta reference for a complete list of supported features.
Step 1: Import getSeoMeta
and use it in your meta
exports
Anchor link to section titled "Step 1: Import getSeoMeta and use it in your meta exports"The SEO data you want will vary by route. For example, you'll want to render different tags on a product page versus the home page. The following example code shows how the basic pattern applies across all your storefront routes:
Step 2: Merge SEO data from nested routes
Anchor link to section titled "Step 2: Merge SEO data from nested routes"Often, two or more nested routes are returning SEO data. In general, you'll want to use the most specific SEO tags available for your route.
For example, if you're on the product page, you want to show a title and description of your product, not the store name and description from the root route.
The following code examples show how to return SEO data from a nested product route, then merge it with SEO data from the root route. By mapping over SEO data returned by all nested routes, The most specific SEO data "wins", overwriting SEO data from higher in the routing structure:
Step 3 (Optional): Intercept and override route SEO data
Anchor link to section titled "Step 3 (Optional): Intercept and override route SEO data"You can implement your own logic inside meta
exports to customize the SEO metadata that each route returns.
As an example, by default Hydrogen removes query parameters from canonical URLs. If you wanted to add them back, the following is an example of how you could do that:
sitemap.xml
Anchor link to section titled "sitemap.xml"Hydrogen's base template includes a sitemap.xml
route by default. If your project doesn't already have a sitemap.xml
file, you can generate a new one with the following Shopify CLI command:
By default, Hydrogen's sitemap.xml
file is cached for 24 hours.
Limitations
Anchor link to section titled "Limitations"- The default sitemap has a limit of 250 products, 250 collections, and 250 pages. You'll need to paginate API results if your store has more than 250 resources. If your store exceeds these limits and you haven't customized the URLs of the resources, then we recommend using the Online Store version of the sitemap at
https://{store_domain}/sitemap.xml
. - When you add or remove pages, the sitemap is automatically updated within one day. Similarly, if you unpublish a product, then the product is removed automatically from the sitemap.
- By default, the sitemap uses the
onlineStoreUrl
field from the Storefront API as the URL.
Hydrogen's base template includes a robots.txt
route by default. If your project doesn't already have a robots.txt
file, you can generate a new one with the Hydrogen CLI:
By default, Hydrogen's robots.txt
file is cached for 24 hours.
robots.txt on Oxygen
Anchor link to section titled "robots.txt on Oxygen"If you deploy to Oxygen, then your robots.txt
file is only served in your public production environment, and only if you have a custom domain set.
If you make a non-production deployment accessible with a shareable link or an auth bypass token, then Oxygen overrides the deployment's robots.txt
file with a disallow
rule for all bots and crawlers. This prevents exposing content prematurely, as well as potential SEO harm from duplicated content.