Table of Contents
📊まとめ：JavaScript SEOで勝つECサイトの共通点──Chewy・Harrods・Under Armourに学ぶ5つの実践戦略【2026】
「JavaScript SEO問題は、もう解決済みのはずだった」
しかし2026年現在でも、多くのECサイトは：
- クロール遅延
- render問題
- index漏れ
- JS依存コンテンツ
- headless構成
- AI推薦エンジン
によってSEO課題を抱えています。
特に最近は：
- React
- Next.js
- Astro
- Nuxt
- Hydrogen
などモダンフレームワークの普及によって、
👉 “高UX”と“検索エンジンへの見え方”
のバランスが極めて重要になっています。
そんな中、Chewy、Myprotein、Harrods、Under Armourなどの大手ECサイトは、
「JavaScriptを使いながらSEOを壊さない設計」
を実践しています。
今回は、彼らの事例から：
- JavaScript SEOで重要な考え方
- Googlebotとの向き合い方
- AI時代のレンダリング戦略
- ECサイトでの最適解
を整理して見ていきましょう。
🚀 JavaScript SEOは「JavaScript禁止」ではない
まず重要なのはここです。
GoogleはJavaScriptを処理できます。
しかし：
HTMLを読む方が、圧倒的に速く・確実
です。
つまり問題は：
👉 「JavaScriptを使っていること」
ではなく、
👉 「重要情報をJS依存にしていること」
なのです。
今回紹介されている成功事例はすべて、
“JSは体験向上に使う”
という思想を徹底しています。
① Chewy：重要コンテンツは最初のHTMLで返す
米大手ペットEC「Chewy」は、
Next.jsを利用しています。
重要なのは：
- 商品名
- 商品説明
- 価格
- レビュー
- パンくず
- FAQ
などが、
初回HTMLに含まれている
点です。
つまりGooglebotは：
👉 JavaScriptレンダリングを待たなくても情報取得できる
のです。
🧠 なぜ重要？
GooglebotはJavaScriptを後からレンダリングします。
つまり：
- HTML取得
- 後日JSレンダリング
という二段階。
ここで：
- JSエラー
- render失敗
- blocked JS
- rendering queue遅延
が起きると、
SEO情報を取得できない可能性があります。
🎯 Chewyの上手い点
ただしChewyは、
すべてをSSRしているわけではありません。
例えば：
👉 「類似商品カルーセル」
はクライアント側JSです。
つまり：
- SEO重要部分 → 初回HTML
- UX部分 → JS
で役割分離しているのです。
② Myprotein：ナビゲーションをクロール可能にする
ここはかなり重要です。
MyproteinはAstroを利用。
Astroは：
👉 “ゼロJSデフォルト”
思想が強いフレームワークです。
🔍 Myproteinが優秀な理由
カテゴリリンクやメニューが：
最初のHTMLに存在する
点です。
つまり：
<a href="/protein/">Protein</a>
として出力されている。
⚠️ やってはいけない例
記事ではこれも紹介されています👇
<div onclick="navigate('/protein')">
これはGooglebotがリンクとして認識しづらい。
つまり：
JSクリックで擬似ナビを作るな
という話です。
🧠 AI時代は「HTMLが再評価」される
これは非常に重要。
最近は：
- AIクローラー
- LLM crawler
- ChatGPT系bot
の中に、
👉 JavaScriptを完全にはレンダリングしないもの
もあります。
つまり：
“HTMLで存在する”価値が再び上がっている
のです。
③ Harrods：構造化データをHTML内に埋め込む
HarrodsはNuxtを利用。
特に優秀なのが：
JSON-LDを初回HTMLに直接埋め込んでいる
点です。
例えば：
<script type="application/ld+json">
内に：
- 商品名
- 価格
- 在庫
- ブランド
- seller
などが存在。
⚠️ よくある危険
最近多いのが：
- JS実行後にschema生成
- GTM経由schema
- client-side JSON-LD
です。
しかしこれだと：
👉 Googleがrenderしないと読めない
可能性がある。
特に：
- 商品価格
- 在庫
など頻繁更新データでは危険です。
④ Under Armour：フィルタURL設計が綺麗
ECで超重要なのが：
ファセットナビゲーション
です。
例えば：
- サイズ
- 色
- ブランド
- 価格帯
フィルタですね。
Under Armourの良い点
URLが：
?prefn1=size&prefv1=10
のように綺麗。
つまり：
- hashではない
- JS artifactではない
- 読みやすい
- share可能
⚠️ ダメな例
#size=10
Googleはhashを無視しやすい。
つまり：
URL状態をサーバー側でも理解できる設計
が重要です。
⑤ Manors Golf：外部スクリプトをasyncで制御
ECサイトは：
- レビュー
- チャット
- TikTok
- Clarity
- personalization
- analytics
など外部JSだらけです。
しかし：
render-blocking JS
はCore Web Vitalsを悪化させます。
特に：
LCP（Largest Contentful Paint）
に直撃。
Manors Golfの工夫
外部scriptを：
<script async>
で読み込み。
つまり：
👉 HTMLレンダリングを止めない
のです。
🚀 JavaScript SEOで本当に重要なこと
この記事全体を通して重要なのは👇
❌ JavaScriptを消すことではない
✅ 「何をJSに依存させるか」を設計すること
です。
🧠 SEOで重要なものは“最初に見せる”
特に重要なのは：
- title
- main content
- navigation
- schema
- internal links
- canonical
- metadata
など。
これらは：
初回HTMLで存在するべき
です。
⚠️ JSに依存しすぎると何が起きる？
- クロール遅延
- index漏れ
- render failure
- AI crawler未対応
- CWV悪化
- link discovery低下
などです。
📈 AI時代ほど「HTMLファースト」が強くなる
ここは非常に重要。
AI時代は：
- AI crawler
- answer engine
- LLM retrieval
が増えています。
しかし：
👉 “完全なJSレンダリング”
を前提にしていないケースも多い。
つまり今後は：
「まずHTMLで伝える」
思想が再び重要になる可能性があります。
🚀 まとめ
今回紹介されたECサイトは、
どこもモダンJSフレームワークを使っています。
しかし共通しているのは👇
“SEO重要部分をJS依存にしていない”
という点です。
つまり：
- UXはJavaScript
- SEO基盤はHTML
という役割分離です。
JavaScript SEO時代に本当に必要なのは、
「どこまでをインタラクション化し、どこを静的に残すか」
を判断する設計力なのかもしれません。
