SPAでtitle、meta、OGPなどHTMLヘッダを動的に変更する際のポイント
WEBZINNEトピックス編集部公開日：2020年1月17日
SPA(シングルページアプリケーション)で、titleやmetaタグ、OGPタグなどのHTMLヘッダ情報を更新する際に気をつけたいポイントを、ユーザー向け、クローラー向け、SNS向けにまとめました。
SPAページとHTMLヘッダ
React.jsやVue.jsなどのJavascriptフレームワークを使ったSPAサイトは、基本的にフレームワークでbody内のHTMLを描画しているため、HTMLヘッダは意図的に変更しない限りは変更されません。ブラウザからページをリロードしない限りは、最初に読み込まれたままになります。
ログインユーザーしか使わないようなSPAサイトであれば、titleもmetaタグもサイトで統一した一つのものでも構わないケースもあるかもしれませんが、SEOやSNSから流入を考えた時に大きなデメリットになってしまいます。この点を憂慮してSPAを導入しないという方もいるのではないでしょうか？
しかし、SPAサイトでもJavascriptで直接変更したり、プラグインを使うことでHTMLヘッダ内の値を変更することができます。
Vue JSでtitleやmetaタグを動的に変更する | codit
SPAサイトを構築する際に押さえておきたいポイント
ここからは、実際にSPAサイトでHTMLヘッダを動的に変更させる際に押さえておきたいポイントをピックアップします。
データ・ページが変更されるタイミングを意識しよう
SPAサイトにおいてデータやページが変更されるタイミングは、ロジックの組み方によって様々です。どのタイミングで、HTMLヘッダのtitleやmetaを切り替えるかは、ユーザー なのか、ログ（Google Analyticsなど）によって対応が変わります。
ユーザーに対しては「ユーザーアクションが起きる前」
ユーザーに対してHTMLヘッダを切り替える場合は、
- ユーザーアクションの前に
- ユーザーアクションの邪魔にならないタイミングで
というのが大前提となります。
ユーザーがアクション出来るようになるタイミング（レンダリング完了や、データの変更など）では、ユーザーがページの移動など製作者の意図しない動作をする可能性が高いため、仮にレンダリングが完了できる状態だったとしても、レンダリング完了の前にHTMLヘッダは変更させておくべきです。
そうしないと、意図した通りにHTMLヘッダが変更されない（ユーザーアクションに追いつかない）ケースが出てきてしまいます。
特に、HTMLヘッダの変更が必要なアクション（ページシェアやメール送信などの機能）は、HTMLヘッダが書き換わるまでストップさせるか非表示にしておくとより安全です。
ログサービスに対しては「データロード後出来るだけ速く」
逆に、Google Analyticsなどのログに対しては、
- ページが切り替わったタイミング
- 必要なデータが揃ったタイミング
でHTMLヘッダを変更し、ログへ記録させる必要があります。
ここをしっかりと設定しないと「アクセスログのページURLやページタイトルが全て同じになってしまった」「URLとタイトルが一致しない」などのトラブルの原因になります。
タイミング的にはログサービスなどの方が速いタイミングでログを送るので、そのタイミングでHTMLヘッダを切り替えておけばユーザーへの対応も同時にできます。
ただし、ロジックによっては、データの取得前にユーザー向けのレンダリングを先にしてしまうケースなどもあるかと思います。ここはそれぞれのSPAサイトで対策を考えましょう。
クローラーを意識しよう
Googleクローラーに対しては特別対策はしないでもOK
以前の記事でもご紹介しましたが、2020年現在、Googleクローラーはかなりの精度でSPAサイトをJavascriptレンダリングして中身を読み取ってくれます。
Googleクローラーに関してはそのままのSPAサイトでもHTMLヘッダの変更を読み取ってくれます。
ただし、通常のWebページと違って「どのタイミングをページロード完了」としているかは、Gooleボットにしかわからないため、なるべく速いタイミングで切り替えておくべきでしょう。
SNSのクローラーはほとんどがSPAを解釈できない
一方で、FacebookやTwitterなどのSNSのクローラー（主にリンク先のOGPタグを取得するためのクローラー）は注意が必要です。
ほとんどのSNSのクローラーはJavascrptをレンダリングしないので、フレームワークを実行する前の（多くのケースでdiv要素が一つしかないような）すっぴんのHTMLページをそのページの中身として認識します。
つまり、どのページをシェアしてもらっても、表示されるカードはトップページと同じです。
会員ページなどそれでも良い場合は別として、記事ページなどがある際はそれでも困るので、そこは別途SSR（サーバーサイドレンダリング）をするなど、対策が必要です。
どのように見られるかをきちんとテストをしよう
FacebookやTwitterなどの大手SNSサイトは、実際に自分のページがどのように表示されるかテストできるデバッカーを提供しています。
全てのページをチェックする必要はありませんが、テンプレートごとにでも良いので、公開前に必ずテストしましょう。
サイト構築前にフレームワークで簡易モックを組んでテストしよう
筆者がSPAサイトを10サイト以上組んできた中で感じたのは、先にワイヤーフレームでSPAのモックテストする方が確実ということです。
サイト構築のフローは、所属の組織や会社によってスタイルがありますし、「そもそもワイヤーフレームなんか組まないで、いきなりデザインからコーディング」というケースも多いとは思います。
しかし、SPAに関してだけはワイヤーフレームを組んでユーザーフローを確定させて、その段階で実際のSPAフレームワークでモックを組んでテストするのがおすすめです。
というのも、デザインやロジックを組んでからHTMLヘッダの変更を組み込むと、データ更新のタイミングやステートの持ち方が変わってしまったり、バラバラになってしまったりすることがあるためです。
SPAでtitle、meta、OGPなどHTMLヘッダを動的に変更する際のポイントを見てきました。
簡単に言えば、
- ユーザーアクションとクローラーを意識する
- 事前にしっかりとテストをする
- 出来上がった後もテストをする
という3点です。
SPAサイトについては、SEOやOGPタグの対策など、通常のWebサイトとは異なる点が多いため、しっかりと対策をとってサイトの露出効果を高めてみてください。