SPA（シングルページアプリケーション）で設計されたホームページを公開する際の設定

概要

本記事ではSPA（シングルページアプリケーション）で設計されたホームページを公開する際の手順を解説いたします。

また話の内容としてはホームページをレンタルサーバにアップロードする方法（エックスサーバ）の続きになりますので、 こちらも参考にどうぞ。

検索時に表示されるタイトル（title）と説明（description）を設定

通常のサイト構成であればhtml内に存在するtitleタグやmeta name="description"のコンテンツ内にそれぞれタイトルと説明を追加すれば良いのですが、 SPAで設計されている場合原則htmlは１つになるのでページ毎にタイトル等を設定するためにはjavascriptを用いて以下の様にして動的にタイトルと説明を設定する必要があります。

React.useEffect(() => {
  document.title = "タイトル";
  document.querySelector('meta[name="description"]').setAttribute('content', '説明文');
});

上記ソースコードの様にuseEffectを用いることで画面がレンダリングされるごとにタイトルと説明が更新されます。 しかし、ホーム画面のタイトルと説明についてはpublic/index.htmlに設定されている値を優先的に処理されるようで、 以下の画像のように初期設定の値が検索画面に表示されます。

ホーム画面についてはpublic/index.htmlのtitleタグとmeta name="description"を直接以下のように設定することで検索画面での表示を変更することができます。

<meta
  name="description"
  content="説明文"
/>

<title>タイトル</title>

ページの再読み込み時に画面が正しく表示されない

SPAで設計された画面に対してページの再読み込み（F5）を行うと404エラー（Not Found）が発生する。 原因はJavaScriptで動的に生成しているURLに対して再読み込みを行っている為であり、そこにファイルが実在しない為にエラーが発生してしまいます。

ここで実際に存在しているファイルというのはpublic/index.htmlなので、 以下の様にpublic_html/.htaccessを書き換えることでファイルやディレクトリが存在しない場合にindex.htmlにリライトするように設定します。

SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode

RewriteEngine on
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

また、上記ソースコード12行目にあるようにhttps://に優先的にリダイレクトするよう追加で設定をしました。

レンタルサーバのファイルを更新時に画面が正しく表示されない

レンタルサーバのファイルを更新した後にホームページを確認すると画面が表示されなかったり、古い情報のままになっていることがあります。 これはブラウザのキャッシュを利用して画面を表示している為であり最新の情報を読み込んでいないことが原因です。 その場合には「Ctrl+F5」（スーパーリロード）を実行して最新の情報を取り込むことで画面を正しく表示することができます。

ホームページをGoogle検索結果に表示させる（Google Search Console）

レンタルサーバーにファイルをアップロードしただけではホームページを検索することができません。 Googleの検索エンジンで表示されるようにするためにはGoogle Search Consoleを使用します。

Google Search Consoleを使用するためにはGoogleのアカウントが必要になります。 アカウントがない場合には新しくアカウントを発行してください。

Google Search Consoleに入ることができたら、左上にある「プロパティを検索」を押下して「プロパティを追加」する。

今回はドメインではなくURLプレフィックスを選択、ホーム画面となるメインのURLを入力して続行する。

検索に表示させたいページのURLを「「~」内のすべてのURLを検査」に入力すると以下の画像の様に「URLがGoogleに登録されていません」と表示されるので、 「公開URLをテスト」を押下してテストを実行します。

テストに成功すると以下の画像の様に「URLはGoogleに登録できます」と表示されるので、 「インデックス登録をリクエスト」を押下してリクエストを送信します。

私の場合にはリクエストを送信して１日後に以下の画像の様に「URLはGoogleに登録されています」と表示され、 Google検索結果に表示されるようになりました。

ホームページをGoogle検索結果に表示させる（サイトマップを使用）

Google検索結果に表示させたいページが複数ある場合に先程の方法でひとつひとつ登録する以外にも、 サイトマップを使用することで複数のページを一遍に登録することができます。

サイトマップの作成方法ですが、今回はSitemap Generatorというアドオンを使用してサイトマップを生成します。 Sitemap Generatorを使用するためにはGoogle Chromeブラウザを使う必要があるのでブラウザをダウンロードしてください。 Google Chromeブラウザを開いたらChromeウェブストアからSitemap Generatorをアドオンに追加してください。 拡張機能にアドオンが追加されたら以下の画像の様にアドオンを選択して押下してください。

Website URLにホームページのURLを入力してSTARTを押下するとウェブスクレイピングが実行されます。 ホームページ内のリンクが正しく設定されていればそれらのURLが抽出されてサイトマップが生成されます。

生成されたサイトマップはダウンロードに保存されます。また、サイトマップの内容は以下の様になります。

生成されたサイトマップをレンタルサーバのpublic_htmlに配置します。

Google Search Consoleに戻り「インデックス」内にある「サイトマップ」を選択して「新しいサイトマップの追加」に先程レンタルサーバに配置したサイトマップを入力して送信を押下します。

ステータスが「取得できませんでした」と表示されてしまう場合にはそもそもファイルが存在していなかったり、 生成されたサイトマップをレンタルサーバのpublic_htmlに配置後すぐにサイトマップを送信すると上手くいかない場合があります。 後者の場合にはレンタルサーバに配置後１０分程度置いてから「新しいサイトマップの追加」を実行することで上手くサイトマップが認識されます。

ページ数が少ない場合や早くGoogle検索結果に表示（インデックスに追加）させたい場合には「インデックス登録をリクエスト」を実行してインデックス登録を促してください。