Shopify Hydrogen SEO: Features Overview & Customization Explained
The reviews are in, Hydrogen is fast and customizable. But for a Hydrogen app to be successful, it needs to be Shopify Hydrogen SEO friendly!
Backlinko’s analysis of over 1,801 Google user behavior sessions revealed that 59% of users visit a single page when searching for something. Moreover, only 19% click on Google Ad results.
What does that mean for ecommerce businesses?
It means that relying solely on paid ads for sales won’t help you succeed. And that ranking organically is one of the best ways to reach your target audience and generate sales.
Fortunately, Shopify Hydrogen’s SEO features give you a solid foundation to optimize your store for search engines.
Curious to learn how?
Read the rest of our guide on Shopify Hydrogen SEO to understand how Hydrogen handles and processes data for search engines and how to customize it to help your store rank.
An Overview of Shopify Hydrogen SEO
Shopify Hydrogen relies on the Seo component to populate SEO information on a web page. This component is a Primitive shared component that renders on the server and client sides.
What’s unique about Hydrogen is that it modifies its page rendering strategy based on the user agent.
Hydrogen inspects the user-agent request header. When it detects the user agent is a search engine robot, it buffers the response. That means, it populates the content on the server before serving it to the search engine bot.
This ensures that search engine robots don’t need to render a page when they crawl it.
Hydrogen does all the heavy lifting for search engine bots so they can crawl and index your store content without errors.
Besides the Seo component, Shopify provides the following three server component files in the Hydrogen Demo Store template:
: To fetch information such as the shop name and description and set default values for all store pages.
: To generate the sitemap.xml file using the Storefront API to list all product, collection, and store page URLs for search engines.
: To generate the robots.txt file to define default rules for search engine bots.
These sample files are useful defaults that you can customize quickly to optimize your Hydrogen app for search engines.
Now that you have a basic understanding of SEO for Shopify Hydrogen, let’s explore the Seo component that makes it all work.
The Seo Component in Shopify Hydrogen
The Seo component in Shopify Hydrogen handles SEO information rendering tasks for store pages. It’s a shared react component with two props — type and data. These props are read-only components that pass arguments into the Seo component.
The Seo component fetches data from the Storefront API and generates the HTML <head> tags that store the metadata.
For instance, it uses the Product.seo field to generate the metadata for the product page. Similarly, it uses the Page.seo field to generate the head tags for other pages.
In addition to this, Hydrogen also allows you to customize head tags at the route level of each page type, such as Home, Product, Collection, and Default. Thus, you can customize the metadata for each page of your Hydrogen store individually.
Now that we’ve understood the basics of Shopify Hydrogen SEO, let’s explore how to overwrite the default title template for a Hydrogen storefront.
How To Customize Title Template in Shopify Hydrogen
You can customize the title template the the route level, i.e., individually for each page or globally for the entire storefront.
Here are the steps to change the default meta title template globally for your Hydrogen app:
Navigate to the src/components folder and edit the DefaultSeo.server.jsx file.
Search for the following code inside the file:
return ( <Seo type="defaultSeo" data={{ title: name, description, }} /> );
Add and define the titleTemplate field inside the code using the “%s” placeholder for the page title and “${name}” placeholder for the shop name as demonstrated below:
return ( <Seo type="defaultSeo" data={{ title: name, description, titleTemplate: `%s | ${name}` }} /> );
Save the file.
The changes you’ve made to the DefaultSeo.server.jsx file update instantly, and you can verify them in the browser.
The default “{page title} – {shop name}” format is replaced with “{page title} | {shop name}”.
Here’s what it looks like in real-time when you change it:
You can follow the steps described above to replace the meta title data for custom store pages and even add HTML attributes such as lang for location-specific content.
Sitemap Considerations
Shopify’s Storefront API applies resource-based rate limits on input arrays. One such limitation is that it only allows users to query 250 resources at a time to ensure their platform remains stable at all times.
Due to this limit, the Shopify Hydrogen sitemap can only list a maximum of 250 products, 250 collections, and 250 store pages. If your store has more URLs than Shopify’s limit, you will need to paginate results using the GraphQL Admin API.
Further, Hydrogen caches the sitemap for 24 hours after it’s generated. So when you add new pages, remove old ones, or unpublish products, it automatically removes them from the sitemap within 24 hours.
SEO: Smart Defaults To Help Your Store Rank on Google
Here’s a quick recap of the important points we’ve covered in this guide:
Hydrogen relies on the shared Seo component to render SEO information for all store pages.
Hydrogen renders SEO information differently for search engine robots and humans by inspecting the user-agent request header.
You can customize the default metadata for your Hydrogen app globally by editing the DefaultSeo.server.jsx file.
The Shopify Hydrogen sitemap only supports up to 250 products, 250 collections, and 250 store pages. For more URLs, you’ll need to use pagination.
Hydrogen’s SEO functionality provides everything you need to build an SEO-friendly storefront. Shopify also includes sample template files to help you start with little effort.
You can do a lot to optimize your Hydrogen app for search engines. But you need familiarity with both Shopify and React to do it correctly.
If you’d rather let the experts handle Shopify Hydrogen SEO for your online store, jump on a call with us to get started today.