エックスサーバーとWordPressを用いたサイトの常時SSL化設定方法

エックスサーバーを用いたサイトの常時SSL化設定方法についてご説明いたします。


はじめに


Googleでは米国時間の2017年10月24日からGoogle Chromeでサイトを表示した際にすべてのHTTPページに「Not secure」と表示する計画を発表しています。


今後はサイトを常時SSL化しておかないと、ユーザーがサイトを訪問した際にはブラウザでセキュアなサイトではありませんと表示されることになるため、Googleの評価はもとより、ユーザーからも避けられてしまうことが起こりえます。


そこで、常時SSL化をエックスサーバーで私が実際に行った方法についてご説明したいと思います。


常時SSL化設定作業の詳細


常時SSL化の設定作業を以下の順番でご紹介したいと思います。


  1. エックスサーバー上での独自SSL設定の追加作業
  2. WordPressサイトのURL変更作業
  3. Google Chromeのデベロッパー・ツールを利用したサイトの改修作業
  4. エックスサーバー上での301リダイレクト設定作業
  5. Google Search Consoleへのサイト登録作業


エックスサーバー上での独自SSL設定の追加作業


エックスサーバーの管理画面にログイン後SSL設定を行いたいドメインを選択し、「設定する」ボタンをクリックしてください。





ドメインの選択が完了後ドメイン欄にある、「SSL設定」をクリックしてください。





SSL設定画面が表示されますので、「独自SSL設定の追加」タブをクリックしてください。





SSL設定を行いたいドメインの情報を確認後、「独自SSL設定を追加する(確定)」ボタンをクリックしてください。





設定が完了すると以下の赤枠で囲まれた位置に情報が表示されますのでしばらく待ちます。





取得作業が完了すると設定を追加したことを示す画面が表示されますので、「SSL設定の一覧」タブをクリックしてください。





無料独自SSL一覧の中に以下のようにサイト情報が表示されていることを確認してください。





※SSL設定の情報が反映されるまで、30分から1時間程度かかります。


そのため、設定が反映される前にhttpsのURLでサイトにブラウザでアクセスすると以下の画面が表示されます。


◆Google Chromeでアクセスした場合



◆Firefoxでアクセスした場合



おおよそ1時間後にhttpsのURLでサイトにアクセスするとこれらの警告ページは表示されなくなります。


以上で、エックスサーバー上での独自SSL設定の追加作業は完了です。


WordPressサイトのURL変更作業


※以下の作業はSSL設定の情報が反映されたことを確認後に行うようにしてください。


SSL設定が反映されていない状態でWordPressサイトのURLをhttpからhttpsに変更してしまうと、以下のようなエラー画面が表示されてしまい、サイトが表示されなくなります。





必ずエックスサーバーのSSL設定状況が反映された後に行うようにしてください。


SSL設定の情報が反映されたことを確認後、WordPressの管理画面にログインし、「設定」>「一般」をクリックしてください。





一般設定の画面が表示されますので、「WordPressアドレス(URL)」「サイトアドレス(URL)」の2箇所のURLを書き換えます。





URLを、

http://?

から

https://?

とhttpの後にsの文字を追加してhttpsとしてください。





変更作業が完了しましたら、「変更を保存」ボタンをクリックしてください。





設定が完了すると自動的にWordPressのログイン画面が表示されますので、ユーザー名とパスワードを入力して、「ログイン」ボタンをクリックしてください。





以上で、WordPressサイトのURL変更作業は完了です。


Google Chromeのデベロッパー・ツールを利用したサイトの改修作業


サイトのSSL化作業で最も手間と時間がかかるのがこのサイトの改修作業になります。


表示されている画像やリンクがhttp設定されているため、この段階でサイトを表示すると完全に保護された状態にはなっていません。


◆Google Chromeで表示した場合(改修前)



◆Firefoxで表示した場合(改修前)



こちらの表示が以下のように完全に保護された状態になるまでサイトの全ての記事の改修作業を行っていきます。


◆Google Chromeで表示した場合(改修後)



◆Firefoxで表示した場合(改修後)



しかし、どの箇所を修正すればよいかがわからないと修正を行うことができません。


そこで、Google Chromeに付属されているデベロッパー・ツールを利用して作業を行っていきます。


これはGoogle Chromeを立ち上げてWindowsを利用している場合には、「F12」キーを押してあげることで起動します。


起動後以下のような画面の赤枠で囲まれた位置にある、「Security」をクリックしてください。





すると、表示しているサイトのページのSSL設定の状況が表示されます。


SSL設定が完了していないページの場合には以下のような画面が表示されます。





こちらの表示が以下の図のように、「This page is secure (valid HTTPS).」になるように改修を行います。





このデベロッパー・ツールでは、以下の位置にエラーを起こしている数が表示されますのでこちらをクリックしてください。





クリック後は赤枠で囲まれた位置にどの位置でエラーが起きているかの詳細が表示されます。





こちらの情報を確認しながら1箇所ずつ修正を行っていくことで、保護された状態に改修を行うことができます。


なお、経験上以下の手順で行うと効率的に作業をすすめることができます。


1.トップページから作業を開始する

トップページのサイドバー及びヘッダー画像を優先的に改修を行うことでこの後の投稿記事や固定ページの改修作業が楽になるためです。


また、古いWordPressのテンプレートを利用している場合、Jqueryなどのソースへのリンクが古くてこれが原因で保護された状態にならない場合がありますので、トップページの段階でテーマの編集からhttpsへのURL修正を行ってください。


2.投稿記事及び固定ページの各ページの画像リンクをhttpからhttpsへ地道に書き換える

トップページでの改修作業が完了してると、基本的に後は個別記事の画像のURLをhttpからhttpsに変更することで作業が完了できます。


作業をする際のポイントとしては、メモ帳などに記事のソースを貼り付けて、httpからhttpsに置換すると一発で修正することができます。


ただし、置換する際にはSSL設定を行っているドメインまで含めて置換すると不要なURLまで置き換えてリンクが飛ばなくなるという状態を回避することができます。


例:http://abc.comをSSL設定する場合

置換前文字列:http://abc.com
置換文字列:https://abc.com





※サイトの記事数が多いとかなり大変ですが、地道に全てのページの表示が以下のように表示されるようになるまで改修作業を行ってください。





以上で、Google Chromeのデベロッパー・ツールを利用したサイトの改修作業は完了です。


エックスサーバー上での301リダイレクト設定作業


上記に説明をした作業を行えばSSL設定の作業自体はほぼ完了なのですが、このままですとこのサイトはhttpとhttpsの2つの同一の内容のページが表示されてしまいます。


つまりGoogleが嫌う、

「重複コンテンツが存在しているサイト」

とみなされてしまうのです。


そのためこのまま放置してしまうと最悪の場合Googleから、

「ペナルティ」

を受けてしまうことも考えられます。


このような状況にならないようにするため、httpへアクセスされた場合にはhttpsへ自動的に301リダイレクトをする設定が重要となります。


この作業はエックスサーバー上にある、「.htaccessファイル」で行っていきます。


エックスサーバーの管理画面にログイン後、SSL設定を行ったドメインを選択し、「設定する」ボタンをクリックしてください。





管理画面が表示されますのでホームページ欄にある、「.htaccess編集」をクリックしてください。





.htaccess編集画面が表示されますので、「.htaccess編集」タブをクリックしてください。





編集画面が表示されますので赤枠で囲まれた部分を書き換えて作業を行います。





注意事項!

.htaccessの編集を行う前には必ずメモ帳などに編集前の内容を保存しておいてください。記述ミスによるエラーが起きてしまうとサイトが表示されなくなりますので、エラー発生後にすぐに元に戻せるようにバックアップを必ず取っておいてください。


301リダイレクト設定では以下の記述を.htacess上に追加を行います。



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



ただし、WordPressをインストール後はすでに「RewriteEngine On」の記述は追加されていますので、以下の2行を「RewriteEngine On」の直下に追加することになります。



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



※コピーする場合は以下の記述をダブルクリックして選択後、「Ctrl」ボタンを押しながら「c」ボタンを押してソースコードをコピーしてご利用ください。
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]





追加作業が完了しましたら、「.htaccessを編集する(確認)」ボタンをクリックしてください。





確認画面が表示されますので内容を確認後、「.htaccessを編集する(確定)」ボタンをクリックしてください。





設定が完了したことを示す画面が表示されます。





設定完了後は、http://でのURLをブラウザに入力してサイトの画面を表示させようとすると自動的にhttps://のURLに変換されてサイトの画面が表示されることを確認してください。


例:http://abc.comを301リダイレクト設定した場合

http://abc.comとブラウザのURL欄に入力してリターンキーをクリックすると自動的にhttps://abc.comと表示されるようになる。


なお、301リダイレクト設定からしばらくすると、httpのURLへのアクセスがすべてhttpsのURLのサイトのみへとインデックス状況が変わっていきます。


最終的にはhttp表示経由でのサイトへのアクセスはなくなり、https表示のURLのみのアクセスになります。


以上で、エックスサーバー上での301リダイレクト設定作業は完了です。


Google Search Consoleへのサイト登録作業


ここまでの作業で常時SSL化設定の作業は完了しています。


この後はすぐにGoogleに常時SSL化設定を行ったサイトの情報をインデックスさせるためにGoogle Search Consoleに登録を行います。


httpとhttpsは同じ内容のサイトとなっているためわざわざGoogle Search Consoleに登録しなくても良さそうですが、残念ながらGoogleでは別のコンテンツとみなされています。


そのため少しでも早くGoogleに常時SSL設定の情報を伝えるためには必ず登録作業を行うようにしてください。


※Google Search Consoleの詳細については、Google Search Consoleの登録及び操作方法の記事を参考にしてください。


サイトへの登録作業が完了すると、以下の図のようにhttpとhttpsの2つのサイトが表示されるようになります。





以上で、Google Search Consoleへのサイト登録作業は完了です。


ご参考:私が常時SSL化設定をした時期


私は管理しているあらゆるサイトの常時SSL化設定作業を2017年9月上旬に全て完了させました。


しかし、この時期はGoogle順位変動を確認できるNamaz.jpで見ると、かなり変動の大きい時期に行ったことがわかります。


なお、以下の図の赤枠で囲まれた時期に設定作業を行いました。






コメントを残す

*

サブコンテンツ

プロフィール

こんにちは、やまてつです。

やまてつ

自分らしい生き方がしたいと思い、脱サラしてネットビジネスで独立を果たしました。

現在は自分の望んだ通りの自由で幸せな人生を歩んでいます。

詳しいプロフィールについてはこちらから。

お問い合わせ

疑問や質問などがございましたら、こちらからお問い合わせをお願いいたします。

お問い合せ

questionbutton

このページの先頭へ