SEO・i18n・パフォーマンス
テーマが自動でやっていたSEO・多言語・計測をHydrogenで自分で実装できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、テーマが自動でやっていたSEO・多言語・計測を、Hydrogenで自分で実装できるようになります。
受託では「ヘッドレスは保守が数倍」の中身がこれなので、見積もりに「SEO・i18n・計測の実装と保守」を明示します。
SEOは自分で用意する
metaエクスポートでgetSeoMetaを使い、タイトル・description・canonical・JSON-LDを返します。
sitemap（[sitemap.xml].tsxとsitemap.$type.$page[.xml].tsx）とrobots（[robots.txt].tsx）も、ルートとして実装します。shopify hydrogen generate route sitemapで生成できます。
多言語はURLで分ける
($locale)ルートでURLからロケールを判定し、Storefrontクライアントのi18n: { country, language }に渡します。
すると、全クエリに@inContextが自動で付きます。
Marketsのサブフォルダ構造と揃えます。
ページキャッシュはロケールのCookieやヘッダを見ないので、URLで分けます。
計測を省くと売上分析が欠ける
<Analytics.Provider>をrootに置くと、Shopifyの分析（管理画面のレポート）にイベントが流れます。
同意管理（Customer Privacy API）と連動させます。
サードパーティの計測はuseAnalyticsで追加します。
ここを省くと、管理画面の売上分析が欠けます。
発展：パフォーマンスの基本
エッジでのSSRに加えて、loaderからPromiseをそのまま返し<Await>で受けるストリーミングを使います（Remix時代のdeferは使いません）。<Image>のsizesと、ナビゲーションのCacheLong()も効きます。
loader内で逐次awaitするウォーターフォールは避けます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。