サイト全体を HTTPS化 してみた!SSL化 は必須だよ

サイトのHTTPS化を行いました。

HTTPS化とはウェブサイトを暗号化することで、SSL化とも言われています。

2015年12月、HTTPSのサイトを優先的にインデックスすると、Googleからアナウンスがありました。Googleが検索ランキングのアルゴリズムにHTTPSを導入するのは時間の問題なので、早いうちにやってしまおうということで、サイトをHTTPS化することにしたのです。

Googleより HTTPS に関するリリースがありました。 HTTPS ページが優先的にインデックスに登録されるようになります こ...

サイトのレンタルサーバーがwpXクラウドだったことも、進まなかった原因の一つです。HTTPSに全然対応してくれないんだもん・・・

ということで、レンタルサーバーをXserverへ切り替えて、当サイトのHTTPS化が完了しました。

今日のエントリーは、「サイト全体を HTTPS化 してみた!SSL化 は必須だよ」という記事タイトルのとおり、HTTPS化が必須な理由と、HTTPのサイトをHTTPS化する手順について紹介します。

スポンサーリンク
レクダンクル(大)

HTTPS化のメリット

最初にHTTPS化のメリットからお話します。

サイトをHTTPS化すると次のようなメリットがあります。

  • サイトのセキュリティが強化され、盗聴・なりすまし・改ざんを防止できる
  • サイト全体に暗号化をかけることによって、訪問するユーザーが安心してサイトを閲覧できる
  • サイトの信頼性が上がる
  • 検索エンジンに優先的にインデックスされる
  • 将来的に、Googleが検索ランキングのアルゴリズムに導入するため、上位表示されやすくなる

HTTPS化が必須な理由

2018年7月にリリースされるChrome68から、HTTPのサイトにアクセスすると、アドレスバーの横に「保護されていません」と警告が出るようになります。

7月24日、Chrome 68がリリースされました。 HTTPのサイトへアクセスすると、アドレスバーの横に「保護されていません」と警告...

以前は、お問い合わせのページだけHTTPS化をして、それ以外のページはHTTPというサイトがありましたが、検索ユーザーが安全にサイトを訪問してもらうことを重要視するならば、今後は全てのページをHTTPS化することが必須になります。

サイトのHTTPS化の手順

サイトのHTTPS化の手順を紹介します。

  1. レンタルサーバーの移行
  2. サーバー証明書を取得
  3. 内部リンクを修正
  4. WordPress URLの設定変更
  5. rel=”canonical”の更新
  6. SNSなどのパーツをHTTPSに対応
  7. 完全にHTTPSに対応したか確認
  8. 301リダイレクト
  9. Search Consoleへ「HTTPSのプロパティ」を登録
  10. サイトマップを登録
  11. HSTSの設定
  12. 外部リンクの変更
  13. SNSの引き継ぎ

1. レンタルサーバーの移行

HTTPS化を行うために、wpXクラウドからXserverへ移行しました。

wpXクラウドからXserverへ移行することに決めました。 wpXクラウドでは、HTTPS化に対応できない点とAMPのプラグインでエ...

wpXクラウドは毎月500円で月間30万PVまで対応できる優れたレンタルサーバーですが、HTTPS化に対応してないのと、AMPのプラグインでエラーが出るのがダメでした・・

Xserverは、wpXクラウドよりも細かい設定が自由にカスタマイズできるので、移行して良かったです。

Xserver の残念な点

多少不満もあります・・

  • 毎月のレンタルサーバー代が540円→1080円へ上がる
  • サイトの応答速度が0.05秒→0.2秒へ下がる

サイトの応答速度は、キャッシュ系のプラグインを導入すればwpXクラウド並に上がることはテスト環境で確認済みです。でもキャッシュ系プラグインはトラブルも多いので、まだ導入をしておりません。

2. サーバー証明書を取得

サーバー証明書を取得します。

Googleのアルゴリズムでは、サーバー証明書の種類を問わないとのことでしたので、僕は一番安いCoreSSLを取得しました。

ちなみに「Let’s Encrypt」のサーバー証明書ならば、無料で利用することが可能です。

Googleが2015年12月に、HTTPSのサイトを優先的にインデックスすると発表して以来、HTTPS化の流れは進みました。 ...

SNI SSL(ネームベース)とIPアドレスベースの違いや、サーバー証明書の詳細は過去のエントリーを見てください。

年が明けてからクライアントのサイトリニューアルでバタバタしていて、自社サイトのHTTPS化が全然進んでおりません・・ Goog...
GoogleよりHTTPSが優先的にインデックス登録されるというアナウンスが流れてから、大慌てでクライアントのSSL化を進めております。 ...

証明書の公開鍵長

Googleの推奨は2048bitです。

新規でサーバー証明書を取得するのであれば、2048bitのものが発行されるので安心してください。Xserverのサーバー証明書も2048bitです。

コモンネームは「wwwあり」にすべし

サーバー証明書のコモンネームは、「wwwあり・なし」で別のものになりますので、コモンネームは「wwwありのドメイン名」で申し込んでください。「wwwあり」「wwwなし」どちらのURLでもHTTPS通信が可能となります。

コモンネームが「wwwなしのドメイン名」で取得した場合、「wwwなし」のURLでしか利用できませんので、ご注意ください。

SANsによる2Way方式

3. 内部リンクを修正

HTTPの内部リンクや画像の参照元を修正します。

内部リンクをHTTPSに修正しないと、サーバー証明書を取得してHTTPS化したにも関わらず、ブラウザで「緑色の鍵マーク」が表示されずに、Mixed Content (複合コンテンツ) となってしまいます。

「相対URL」を使っていれば変更は必要ありませんが、WordPressのサイトでは内部リンクや画像の参照元に「絶対URL」を使っていることが多いです。

  • 「相対URL」 //ischool.co.jp/…..
  • 「絶対URL」 http://ischool.co.jp/…..

記事が多いと手動でURLを変更するのは不可能ですので、「Search Regex」というプラグインを使います。

WordPressで記事を書いていると、過去に書いた記事の文字列を、まとめて修正したいケースがありますよね? 例えば、会社名や商品名を...

このプラグインでは、データベースに書き込まれてる「内部リンクや画像の参照元」を変更してくれます。データベースを修正することになるので、必ずデータベースのバックアップは取ってから実行します。

  • 「相対URL」なら http:// → // へ変更
  • 「絶対URL」なら http:// → https:// へ変更

「Search Regex」はURLの変更後、使わない方はアンインストールして構いません。

4. WordPress URLの設定変更

ここまでの作業で、HTTPS・HTTP どちらでもアクセスできるようになります。

次は、WordPressのサイトのURLを変更します。

WordPress URL

管理画面 → 設定 → 一般 → WordPressアドレス(URL)とサイトアドレス(URL)に、httpsのURLを入力します。

5. rel=”canonical”の更新

rel=”canonical” を HTTPからHTTPSへ向けます。

canonicalとは「URLの正規化」のことです。

「URLの正規化」を行わないと、せっかくHTTPSでインデックスされても、時間が経つとHTTPへ戻ってしまいます。

WordPressの場合、「4. WordPress URLの設定変更」を行えば、canonicalはHTTPSに向きますのでご安心ください。

6. SNSなどのパーツを HTTPS に対応

SNSボタンやプラグインをHTTPSに対応させます。

SNSボタン

HTTPのコードで書かれているものをHTTPSへ書き換えます。

このサイトで設置しているSNSボタンは次の7つです。

  • Twitter・Facebook・Google+・はてなブックマーク・Pocket・Feedly・Push7

プラグイン

プラグインがHTTPSに対応しているかどうか確認します。

HTTPSに対応していない場合は、プラグインを使うのを止めるか、プラグインのコードを修正しなければなりません。

Google Analytics

HTTPSに対応しているのでサイト上での修正はいりません。

Google Analytics側で設定をHTTPSへ変更します。

Google Analytics

  • 「アナリティクス設定」→「プロパティ設定」→ デフォルトのURLを「https」に変更

Adsense

Adsenseを導入している方は、HTTPSに対応したコードに張り替える必要があります。

アフィリエイト

アフィリエイト広告をサイトに張っている方は、ASPが発行しているコードがHTTPSに対応しているかどうか確認してください。

ASPが発行しているコードがHTTPにしか対応していない場合、Mixed Content (複合コンテンツ) になってしまい、「緑色の鍵マーク」が出てこないのでご注意ください。

アフィリエイトをやっている人は、アフィリエイトリンクが HTTPSに対応しているか、ASPへ確認しましょう。

7. 完全に HTTPS に対応したか確認

完全にHTTPSに対応できると、Chromeで表示した際、「緑色の鍵マーク」が出てきます。

緑色の鍵マーク

完全にHTTPSに対応せず、HTTPを読み込むコンテンツがある場合、Mixed Content (複合コンテンツ) となります。「緑色の鍵マーク」も出てきません。

緑色の鍵マークがでない

Mixed Content (複合コンテンツ) の場合はどうすればいいのか?

Mixed Content (複合コンテンツ) となった場合、「緑色の鍵マーク」が出てきませんので、「3. 内部リンクを修正」「6. SNSなどのツールパーツをHTTPSに対応」を再度見直すことになります。

この場合、Chrome デベロッパーツールを利用して原因を突き止めます。Chrome デベロッパーツールの出し方は、次の手順で行ってください。

  • Macなら「Command」「option」「i」を押す
  • Windowsなら「F12」

8. 301リダイレクト

301リダイレクトの設定を行います。

301リダイレクトを行う理由は次の2つです。

  • http://example.com/ へアクセスしたユーザーを、https://example.com/ へ自動で転送できる
  • http://example.com/ が持っていた被リンクなどの評価を、https://example.com/ へ引き継ぐことができる

サイトの運営期間が長いと、http://example.com/をブックマークに登録しているユーザーもいると思います。サイト訪問者の利便性を考えるならば、httpへアクセスしたユーザーを、httpsへ自動で転送するのは、サイト管理者がやらなければならない仕事の一つです。

また、http://example.com/ が持っている被リンクなどの評価を、https://example.com/ へきちんと引き継ぐことも重要です。HTTPS化でよくある失敗として、301リダイレクトを行わなかったために、HTTPS化したら検索結果の順位が落ちたという話はよく聞きますので、忘れずに行うことをオススメします。

.htaccess を編集して301リダイレクトを行う

.htaccess を編集します。example.comの部分をご自身のドメインに変更してください。

RewriteEngine on

RewriteCond %{SERVER_PORT} !^443$ [OR]

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://example.com/$1 [R=301,L]

301リダイレクトをチェック

きちんと301リダイレクトしているか確認します。

Search ConsoleのHTTPのプロパティ (http://example.com/) からFetch as Googleをすれば、正常に301リダイレクトが行われているか確認できます。https://example.com/ に301リダイレクトされていればOKです。

301リダイレクトをチェック

9. Search Consoleへ「HTTPSのプロパティ」を登録

HTTPとHTTPSのサイトは別サイトの扱いになるので、Search Consoleに「HTTPSのプロパティ」を登録します。

www有無を登録するので、プロパティは4つになりました。

  • https://example.com/
  • https://www.example.com/
  • http://example.com/
  • http://www.example.com/

10. サイトマップを登録

Search ConsoleのHTTPSのプロパティにサイトマップを登録します。

僕の環境では、登録してサイトマップを送信してから、1週間で約80%がHTTPSでインデックスされました。HTTPからHTTPSへインデックスが移行していきますので、HTTPのサイトマップは削除せずに残しておきましょう。HTTPのサイトマップを残しておくことで、HTTPからHTTPSへインデックスが移行していく状況を把握することができますからね。

インデックスがHTTPSへ移行した後も、今まで使っていたHTTPのサイトマップは、そのまま残しておいて構いません。

今後、サイトマップは、 Search Consoleの HTTPSプロパティ (https://example.com/) から送信することになります。

11. HSTSの設定

HSTS (HTTP Strict Transport Security) とは、HTTPにアクセスがあった時に、強制的にHTTPSにリダイレクトして、以降の接続はHTTPSにするというものです。

.htaccessに次のコードを追加します。

Header set Strict-Transport-Security "max-age=31536000;"

HSTS Preloadの設定

HSTSには1つ問題点があって、HTTPに接続してからHTTPSにリダイレクトするまでの間、ユーザは暗号化されない接続におかれてしまいます。そこで、HSTS Preloadが登場します。Googleでは、HSTS Preload listに登録するサービスを行っています。

HSTS Preload

登録しておけば、Chrome・Safari・Firefoxのブラウザからアクセスがあった時に、初回訪問を含めて常時HTTPSでのアクセスになります。是非登録しましょう。

HSTS Preload Submission

12. 外部リンクの変更

外部リンクのURLをHTTPSに変更します。

SNSのプロフィールはすぐにでも変更した方がいいですよ。

13. SNSの引き継ぎ

HTTPSになるとURLが変わるので、SNSのカウント数はゼロからになります。

プラグインを使えば、「HTTPのカウント数」と「HTTPSのカウント数」を合算できるようです。

僕は、プラグインの動作不具合があると困るので、プラグインを導入しないことにしました。はてブやFacebookで回った記事があるので、もったいないのですがSNSのカウントは諦めました。

ちなみに、プラグインは下記のものが使えます。

SNS Count Cache — WordPress プラグイン

さいごに

以上、HTTPS化が必須な理由と、HTTPのサイトをHTTPS化する手順について紹介しました。

サイトを訪問してくれるユーザーに安心してページを閲覧してもらうには、サイトのHTTPS化は必須です。

HTTPS化したら順位が落ちたという話はよく聞きますので、HTTPS化をする際は、きちんと手順を踏んで作業することを強くオススメします。

スポンサーリンク
レクダンクル(大)
レクダンクル(大)

フォローする

Instagram

この記事をお届けした
iSchoolの最新情報を、
いいねしてチェックしよう!
スポンサーリンク