JavaScriptサイトのSEOでお困りですか？Googleのクローラビリティを向上させる実装術をご紹介。検索順位が下がる前に対策を。
こんな悩みありませんか？
「JavaScriptでリニューアルしたのに検索順位が下がった」 「Next.jsで作ったサイトがGoogleに正しく認識されていない」 「最新のフレームワークを使っているのに、SEO的に評価されない」
もしこのような悩みをお持ちなら、この記事はあなたのためのものです。JavaScript SEOは正しく実装すれば、従来のサイト以上の成果を出すことも可能です。
JavaScript SEOの落とし穴：あるクライアントの事例
先日、横浜の製造業のクライアントからこんな相談を受けました。
「React で作り直したコーポレートサイトが、リニューアル後に検索順位が圏外に落ちてしまいました。以前は『横浜 製造 部品』で3位だったのに...」
調査してみると、以下の問題が発見されました：
- JavaScript でレンダリングされるコンテンツがクローラーに認識されていない
- 動的なメタタグが適切に設定されていない
- 内部リンクがJavaScriptイベントに依存している
結果として、Googleのクローラーは「空っぽのページ」として認識していたのです。
なぜJavaScript SEOが重要なのか
GoogleのクローラーはJavaScriptを実行できますが、完全ではありません。特に以下の点で制限があります：
よくある失敗パターン
- クライアントサイドレンダリング（CSR）のみに依存
- 動的コンテンツの読み込み遅延
- JavaScript エラーによるレンダリング失敗
// ❌ NGパターン：すべてをクライアントサイドで処理
function loadContent() {
fetch('/api/products')
.then(response => response.json())
.then(data => {
document.getElementById('content').innerHTML = generateHTML(data);
});
}
このパターンでは、クローラーがコンテンツを認識する前にタイムアウトしてしまう可能性があります。
実装術1：サーバーサイドレンダリング（SSR）の活用
先ほどのクライアントには、Next.jsによるSSR実装を提案しました。
Next.js での実装例
// pages/products/[id].js
export async function getServerSideProps(context) {
const { id } = context.params;
const product = await fetch(`${process.env.API_URL}/products/${id}`)
.then(res => res.json());
return {
props: {
product,
meta: {
title: `${product.name} | 製品情報`,
description: product.description,
ogImage: product.image
}
}
};
}
export default function ProductPage({ product, meta }) {
return (
<>
<Head>
<title>{meta.title}</title>
<meta name="description" content={meta.description} />
<meta property="og:image" content={meta.ogImage} />
</Head>
<div>
<h1>{product.name}</h1>
<p>{product.description}</p>
</div>
</>
);
}
結果： この実装により、クローラーは完全にレンダリングされたHTMLを受け取ることができます。
実装術2：構造化データの動的生成
JavaScriptで動的コンテンツを扱う際、構造化データも忘れがちです。
// 動的な構造化データの生成
function generateStructuredData(product) {
const structuredData = {
"@context": "https://schema.org/",
"@type": "Product",
"name": product.name,
"description": product.description,
"image": product.image,
"offers": {
"@type": "Offer",
"price": product.price,
"priceCurrency": "JPY"
}
};
// サーバーサイドでscriptタグに出力
return JSON.stringify(structuredData);
}
実装術3：クローラビリティの検証方法
実装後は必ず検証が必要です。私たちが使っている検証手順をご紹介します：
1. Google Search Console の URL検査ツール
# Lighthouse CLI での検証
npx lighthouse https://yoursite.com --only-categories=seo
2. レンダリング結果の確認
// puppeteer を使った自動検証
const puppeteer = require('puppeteer');
async function checkRendering(url) {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// JavaScript無効状態をシミュレート
await page.setJavaScriptEnabled(false);
await page.goto(url);
const contentWithoutJS = await page.content();
await page.setJavaScriptEnabled(true);
await page.reload();
await page.waitForLoadState('networkidle');
const contentWithJS = await page.content();
// 差分をチェック
console.log('JS無効時のコンテンツ量:', contentWithoutJS.length);
console.log('JS有効時のコンテンツ量:', contentWithJS.length);
await browser.close();
}
成功事例：実装後の変化
前述のクライアントに SSR と構造化データを実装した結果：
- 検索順位回復： 「横浜 製造 部品」で3位→1位に上昇
- オーガニック流入： 月間2,000セッション→5,500セッションに増加
- 問い合わせ件数： 月10件→月35件に増加
なぜこの成果が出たのか？
- クローラーがコンテンツを正しく認識できるようになった
- 構造化データによりリッチスニペットが表示されるようになった
- ページ表示速度も改善され、UX向上に繋がった
よくある失敗と注意点
失敗例1：部分的なSSR実装
「トップページだけSSRにして、下層ページはCSRのまま」という中途半端な実装では効果が限定的です。
失敗例2：JavaScript エラーの見落とし
// ❌ エラーハンドリング不備
fetch('/api/data')
.then(response => response.json())
.then(data => renderContent(data));
// エラー時の処理がない
// ✅ 適切なエラーハンドリング
fetch('/api/data')
.then(response => {
if (!response.ok) {
throw new Error('データの取得に失敗しました');
}
return response.json();
})
.then(data => renderContent(data))
.catch(error => {
console.error('Error:', error);
renderFallbackContent();
});
失敗例3：メタタグの動的更新忘れ
SPA（Single Page Application）では、ページ遷移時にメタタグの更新を忘れがちです。
まとめ：今すぐ始められるアクション
JavaScript SEOで成果を出すために、まず以下をチェックしてください：
- 現状把握： Google Search Console でクロールエラーを確認
- レンダリング検証： 主要ページでJavaScript無効時の表示をチェック
- 優先順位付け： 重要なページから段階的にSSR実装
Googleのアップデートに左右されない、堅実なSEO基盤を構築しましょう。
もし「自社サイトのJavaScript SEO対策はどうすればいいの？」とお悩みでしたら、ぜひ一度ご相談ください。現状分析から改善提案まで、20年の実績に基づいたアドバイスをさせていただきます。