テクニカル
SPA
1つのHTMLでJSが画面を書き換えるWebアプリ構成。SEOにはレンダリング配慮が必要。
SPAとは？
SPA（Single Page Application）は、最初に1つのHTMLを読み込み、以降はJavaScriptが必要な部分だけを書き換えて画面遷移を実現するWebアプリの構成です。
React・Vueなどで作られます。
操作がなめらかで高速な反面、初期状態のHTMLに本文が無く、JS実行後に内容が描画されるため、検索エンジンが内容を取得できないJavaScript SEOの課題を抱えやすい構成です。
SPAの使い方・実践方法
SPAでSEOを成立させる方法は次のとおりです。
- SSRやプリレンダリングで初期HTMLに本文を含める
- URLを
history APIで正しく切り替え、各ページに固有URLを付与 - ダイナミックレンダリングは移行措置として限定利用
- メタタグ・構造化データを各ルートで動的に出力
SPAで押さえるべきポイント
「SPAだからSEOに弱い」は半分正解で半分誤りです。
クライアント描画だけに頼ると不利ですが、SSRやプリレンダリングを併用すれば検索エンジンに優しいSPAは十分実現できます。
設計段階での判断が重要です。
SPAを実践するなら
Saguru なら、月額270円から、SEOキーワード調査・上位サイト分析・自サイトSEO診断のすべてが使えます。
「SPA」を理解した上で、すぐに実践に移せます。
登録なしで1日5回まで無料 ／ メール登録で1日30回 ／ ベーシック月額270円 ／ 自サイトをSEO診断
SPAについてよくある質問
SPAはSEOに不利？
クライアント描画のみだと不利ですが、SSRやプリレンダリングを使えば解消できます。
Googleはda JSを実行する？
実行しますが遅延やレンダリング失敗のリスクがあります。
初期HTMLに本文がある方が確実です。
初期HTMLに本文がある方が確実です。
SPAでも各ページにURLは必要？
必須です。
history APIで固有URLを割り当て、共有・インデックスできるようにします。
history APIで固有URLを割り当て、共有・インデックスできるようにします。