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

ようやくこのサイトのHTTPS化を行いました。

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

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

サイトのHTTPSへの移行を早くやらないと!
Googleより HTTPS に関するリリースがありました。 HTTPS ページが優先的にインデックスに登録されるようになります こ...

クライアントにもHTTPS化を薦めていて、今年に入って5本HTTPS化のリニューアルをしましたが、ようやく自分のサイトもHTTPSになりました。

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

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

なお移行にあたっては、SEOについて豊富な知見を持っている鈴木謙一さんの運営している海外SEO情報ブログを参考にしました。

サイトのHTTPS化の手順

今回行った手順を紹介します。

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

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

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

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

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

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

Xserver の残念な点

多少不満もあります・・

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

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

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

サーバー証明書の取得方法は、レンタルサーバー会社によって異なります。

Xserverならサイトに詳しく説明があります。

独自SSLのお申し込み

その他のレンタルサーバーの方もサポートに問い合わせれば詳しく教えてもらえます。

Googleのアルゴリズムでは、サーバー証明書の種類を問わないので、一番安いCoreSSLで大丈夫です。Xserverでは、CoreSSLの1年間無料キャンペーンを実施しています。

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

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

証明書の公開鍵長

Googleの推奨は2048bitです。

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

注意点

サーバー証明書のコモンネームは、wwwありなしで別のものになります。

通常、wwwありのサーバー証明書だと「www.ドメイン名」でSSL通信ができ、wwwなしのサーバー証明書だと「ドメイン名」でSSL通信ができます。

ところが、XserverではSubject Alternative Names(SANs)による2Way方式に対応しています。

どういうことかというと、サーバー証明書のコモンネームを「www.ドメイン名」としておけば、「wwwあり」「wwwなし」どちらのURLでもSSL通信が可能です。

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

SANsによる2Way方式

3. 内部リンクを修正

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

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

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

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

Search Regexプラグインの使い方

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

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

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

4. WordPress URLの設定変更

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

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

WordPress URL

管理画面 → 設定 → 一般 → WordPressアドレス(URL)とサイトアドレス(URL)に、https://ischool.co.jp と入力します。

5. rel=”canonical”の更新

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

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

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

WordPressの場合、「4. WordPress URLの設定変更」を行えば自動で「URLの正規化」がされます。

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

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

SNSボタン

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

このサイトで設置しているSNSボタンは、

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

当初、はてなブックマークのシェア数が表示されませんでした(ビックリマークがでてしまう)。

はてブがHTTPSに対応してないのが原因のようです。古いAPIに切り替えたところ、うまく動作するようになりました。

//b.hatena.ne.jp/entry.count?callback=?

プラグイン

わたくしが使っているプラグインは、全てHTTPSに対応していました。

Google Analytics

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

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

Google Analytics

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

Adsense

このサイトでは設置していませんが、Adsenseを導入している方は、HTTPSに対応したコードに張り替える必要があります。

アフィリエイト広告もHTTPSに対応している必要があります。

A8.netで発行されたアフィリエイトリンクはHTTPS未対応ですので、アフィリエイトをやっている人はASPへ確認しましょう。

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

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

緑色の鍵マーク

完全にHTTPSに対応せず、HTTPを読み込むコンテンツがある場合、ブラウザでエラーが表示されます。「緑色の鍵マーク」も出てきません。

緑色の鍵マークがでない

「緑色の鍵マーク」が出てこないと、「3. 内部リンクを修正」「6. SNSなどのツールパーツをHTTPSに対応」を再度見直すことになります。

この場合、Chrome デベロッパーツールを利用して原因を突き止めます。Chrome デベロッパーツールの出し方は、Chrome上で

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

8. 301リダイレクト

http://ischool.co.jp/ へアクセスがあった場合、https://ischool.co.jp/ へ自動でリダイレクトするように設定します。

.htaccess を編集します。

RewriteEngine on

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

RewriteCond %{HTTPS} off

RewriteRule ^(.*)$ https://ischool.co.jp/$1 [R=301,L]

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

きちんとリダイレクトしているかの確認を行いましょう。

Search ConsoleのFetch as Googleで確認します。

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

9. Search Consoleへ登録

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

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

  • https://ischool.co.jp/
  • https://www.ischool.co.jp/
  • ischool.co.jp/
  • www.ischool.co.jp/

10. サイトマップの更新

HTTPSのサイトマップを登録します。

今までのHTTPのサイトマップは削除しましょう

1週間で約80%がHTTPSでインデックスされました。HTTPのサイトマップの削除は、ある程度HTTPSのインデックスが確認できてからの方がいいです。

今後、サイトマップは、 Search Consoleの https://ischool.co.jp/ プロパティにだけ登録することになります。

11. HSTS Preload の設定

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

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のカウントは諦めました。

ちなみに、プラグインは下記のものが良さそうです。

[試] HTTPからHTTPSのシェア数引継ぎにもWordPressプラグイン SNS Count Cache

HTTPS化は必須

実際やってみると結構たいへんでした。

わたくしのサイトは300ページ弱なのですが、この規模でも思い通りに行かなかったりします。

大規模サイトだと苦労すると思います。

予想もしないエラーというのはありませんでしたが、それでも修正したりという作業にかなり時間を費やしました。

HTTPS化のメリット

  • 検索エンジンに優先的にインデックスされること
  • 将来的に、Googleが検索ランキングのアルゴリズムに導入するため、上位表示されやすくなる
  • サイト全体に暗号化をかけることによって、訪れてくれるユーザーが安心して利用できる

HTTPS化のデメリット

暗号化をかけるとどうしてもサイトの読み込み速度が遅くなります。

レンタルサーバーを変更したのでHTTPS化だけが原因ではありませんが、0.05秒 → 0.2秒 とだいぶ遅くなりました。

テスト環境でしばらく様子を見てからキャッシュ系プラグインの導入を検討します。

3月にSEOセミナーで鈴木謙一さんとお話する機会があって、HTTPS化は絶対にやったほうがいいよと言われていたので、無事に終わってよかったです。

WordPressならそこまで難しくないので、早くやった方がいいですよ。

フォローする

Instagram

▼このエントリーが役に立ったらいいね!
▼このエントリーが役に立ったらいいね!