サイトのSSL化を順序よく1つ1つずつ対応させる方法

  • 作成日:2017-5-9
サイトをSSL化するといっても単にHTTPSで呼ぶだけではありません。結構たくさん対応する項目があります。対応する項目を1つ1つ順序よく対応させていきます。

時代の波は個人ブログでもSSL対応を必須要件に

2014年、GoogleはHTTPSサイトの検索結果を優遇すると発表。サイトをSSL化するだけで検索エンジンに有利に働くという事です。1つでも上位に、1ページ目に表示されるように日々努力をしているサイトには非常に有効です。もう一つの検索エンジンの王手ヤフーも2016年4月から全サービスを常時SSL化することを決定。時代はサイトをSSL対応する方向に一直線! 今なぜ、ブログをSSL対応しなければならないのか、SSL化するメリットはこれ以上に存在する。
  1. SSLは通信を暗号化するので、途中傍受されても解読できず入力データは表示データが外部に漏れずセキュリティーが向上する。
  2. SSL化により最新のHTTP2通信プロトコルが利用出来るようになり、通信の多重化やヘッダーの圧縮で通信が高速化する
  3. 検索結果の優遇(グーグル)
  4. リファラー情報が再度引き渡し可能になり、WEB解析が向上する
このようなたくさんのメリットを享受できるようになるサイトのSSL対応ですが、もはや個人のブログといっても対応は必須要件になりつつあります。前述したグーグルの検索結果を優遇するという措置は、先行者にはメリットとなりますがこれに遅れると逆にSSL化していない個人ブログの順位は下がるという逆の結果になります。ブログのSSL化の手順はこれから順番に説明いたしますので、この記事を読んで早速SSL化してみてください。

実施環境

本記事の実施環境としましては、エックスサーバー上で実施した情報となります。もちろんWordPressで作成されたブログを対象としています。 エックスサーバーは2016年6月から独自ドメインが無料で提供されることになり、自分でSSL証明書を取得する手間や通常1個のドメイン毎に証明書を取得するため大幅な費用の軽減になります。エックスサーバーのSSL証明書はいくつドメインがあっても無制限に利用出来ます。

常時SSL化の手順

ここでは、エックスサーバー上のあるドメインを常時SSL化していく手順を説明します。SSL証明書の取得からサイトをHTTPSで呼ぶための変更まですべて網羅していくことにします。
  1. エックスサーバーでSSL証明書を取得する
  2. WordPressでの変更
  3. .htaccessでHTTPSリダイレクトを設定
  4. ブログデータの検索&置換
  5. テーマの変更
まずはエックスサーバーでSSL証明書を取得しなければなりません。

SSL証明書の取得

エックスサーバーでSSL証明書を取得するにはサーバーパネルにログインし、トップ画面からSSL設定を選択してください。 サーバーパネルからSSL設定メニューを選択 SSL証明書を取得する対象のドメインを表示されたドメイン一覧から選び右側の”選択する”をクリック SSL証明書を取得する対象のドメインを選択 画面上部にある”独自SSL設定の追加”タブを選択し、対象となるドメインまたはサブドメインをサイト右側にあるコンボボックスから選択し、すべてOKなら独自SSL設定を追加する(確定)ボタンを押してください。 入力した内容でSSL証明書を取得する(確定)ボタン ※CSR情報(SSL証明書申請情報)を入力する ー 個人で利用する場合は既に必要な情報は入力されていますので何もしなくても構いません。
実際にSSL証明書が発行されるまで時間がかかりますが、発行されたかどうかは上記画面(3番目)のSSL設定の一覧にて確認してください。
本手順のSOL証明書の取得は、エックスサーバーで利用できる無料のSOL証明書(Let’s Encrypt)の申請方法で、その他にエックスサーバーが用意するセキュアコア / ラピッドSSL / ジオトラスト / グローバルサインの各証明書を利用する場合は、インフォパネル(サーバーパネルではない)から申し込む事で利用出来るようになります。なお、エックスサーバーはSSL証明書の持ち込みには対応していません

WordPressでの変更

WordPressでもhttpsに対応するように、管理画面より設定一般とメニューを選択し、下図に示すとおりWordpressのアドレス(URLおよびサイトアドレス(URL)の2つの欄にhttps://から始まるURLに書き換えてください。 これで、httpsでよびだされた場合はhttpsで統一されるようになりました。ただし、まだこれまでどおりhttpから呼び出されてもhttpsにはなりません。これは次項の.htaccessのリダイレクトを対応すると自動でhttpsに切り替わります。 wordpress管理画面の一般設定の書き換え

.htaccessでHTTPSリダイレクトを設定

前述したとおり、これまで通りhttpで呼び出された場合でもhttpsに切り替わるようにするには、この.htaccessのリダイレクト機能を利用します。次の設定を.htaccessに追加してください。
RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
※特に赤字で示した部分の記述に注意してください。理由は後述します。

ブログデータの検索&置換

ここでおこなうのは、これまで書いた記事の中からhttpで読んでいるところをhttpsに書き換えなければなりません。特にそんな記憶がないと思いますがWordpressのエディタで画像参照すると必ずhttp://から始まるURLになっています。これらをhttpsに置き換える方法です。

Search Regexプラグインのインストール

まず、このような作業をおこなうには、ブログ内のデータを正規表現で検索し置き換えてくれるプラグインSearch&Regexが便利です。このプラグインをまずインストールしてください。Wordpressのブラグインの新規追加メニューで検索窓に、Search Regexと入力しプラグインを新規インストール&有効化してください(インストールの詳細はここでは省略します)。 Search Regexプラグインの新規追加画面

Search Regexの起動

Search Regexプラグインを有効化すると、管理メニューのツール配下にSearch Regexメニューが追加されますので、これをクリックして選択、起動してください。 ツールメニューから追加されあたSearch Regexを選択

検索&置換の実行

最初にSearch Regexプラグインの使い方を非常に簡単ですが説明します。Search Regexプラグインは、投稿記事(Post)やコメント(Comment)を正規表現を使って置換できるプラグインです。事前に検索だけや置換した結果を確認することが出来ます。下図の④におけるボタンで機能します。Searchボタンなら検索だけ実行します。Replaceボタンを検索した上に置換した結果を画面上出確認することが出来ます。まだ保存まではしてません。Replace & Saveボタンで始めて置換結果が保存される仕組みです。事前に確認できるのは便利ですね。 Search Regexプラグインの実行画面 さて、だいたいの使い方がわかったところで今回のhttpsへの置換をおこなう訳ですが、http参照しているのはなにも自分の画像だけではありません。他にも他サイトの参照するリンクやリソースリンクも混在しています。これらを一緒に置換していはいけません。httpsに対応していないサイトをhttpsで参照すると以下のようにプライバシーエラーとなり、サイトを読み込む事が出来ません。 プライバシーエラー発生画面 まずは、自分のドメインのみhttpsに置換をおこなってから残ったhttp://を検索して1つ1つ対応していきましょう。最悪httpsに対応していないサイトはリンクを外すしかありません。

テーマの変更

ここまでで常時SSL化の作業項目としてはほぼ終了し、残りは1つのみテーマの変更だけとなりました。Wordpressのテーマとして何を使っているかによりますが、後はそんなに残っていないはずです。Chrome等ののブラウザでサイトを表示し、ソースコードの表示をおこなってhttp://を検索してみてください。自分で追加したヘッダーや外部参照しているScript、Js等にhttpで呼び出しているかもしれません。基本的な対応は、https呼び出しに対応しているかどうか確認しもし対応していればそのままhttp://をhttps://に置き換えるだけですが、もし対応していなければ前述のとおり削除するか他のものに置き換える形になります。  

“リダイレクトが繰り返し行われた”

一応、ここまでの作業で起動してみましょう。たぶん問題なく起動するはずです。もし”リダイレクトが繰り返し行われた”というエラーになり表示できない場合は、こちらの記事を参照してください。エックスサーバーの場合は、ロードバランサーの特殊な設定のためにリダイレクト処理がうまくおこなわれず設定を変えなければならないようです。また、その他の表示不具合の場合は、サーバーパネルからSSL設定が無事終了しているかどうかも確認してください(SSL設定一覧にドメインが表示されていますか?)。

最終確認

Chrome等のブラウザでデバッカを起動してみる(F12キーを入力)と、Console上に”Mixed Content: ”と表示されるかもしれません。これはまだhttpで呼び出していることころが残っているということです。    
スポンサーリンク

ランキング

記事連動目次

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る