エックスサーバーが独自SSLを無料かつ無制限で利用できるようになりました。
この、エックスサーバーの「ユーザーにどんどん利便性を提供していく姿勢」には相変わらず頭が下がります。
そのSSLなんですが、何年か前なら結構なお金のかかっていたものが無制限で無料になったわけです。ここまでお膳立てされたのなら、さすがに使用してみたくなるじゃないですか。
なので、早速サブサイトのSimplicityをSSL化してみました。
今回は、その時行った手順をできる限りメモしておいたので、それについてまとめたいと思います。
目次
SSL化（http→https）の主な手順
今回僕が試した限りでは、SSL化するのに以下の手順を行いました。
- 事前にデータベースのバックアップをとる
- エックスサーバーでSSL設定を行う
- WordPressの設定からURLを変更する
- 内部リンクをSearch Regexで全て置換する
- .htaccessにリダイレクト用のコードを追記する
- SSLエラーのチェック方法
- テーマなどの設定を見直す
- その他サービス・ツールの設定の変更など
- SNSのシェアカウントを引き継ぐ
なお、今回SSL化で利用するサービスは、エックスサーバーを使用したものになります。
その他のサーバーで変更する場合は、「サーバー名 SSL化」などで検索してください。
事前にデータベースのバックアップをとる
まずは、事前にデータベースのバックアップをとっておきます。
これは、何かしら作業に手違いがあった場合でも、作業前の状態に復元できるようにしておく保険的なものです。
データベースのバックアップには、WordpressプラグインのBackWPupを利用します。
データベースのバックアップを手っ取り早く行うには、プラグインのインストール・有効化後、Wordpress管理メニューの「BackWPup → Dashboard（ダッシュボード）」メニューを選択します。
ダッシュボード画面が表示されたら、「One click backup」項目の「Download database backup」をクリックしてSQLファイルを取得してください。
すると、サイト名とデータベース名から名前が付けられた以下のようなSQLファイルがダウンロードされます。
ちなみに、これには結構時間がかかるので、しばらくお待ちください。Simplicityサイトの場合、ファイルサイズは2GBくらいになりました。
なお、今回の記事で復元方法については、話の本筋と逸れてしまうため割愛します。
もし、やり直しが必要になったときは、「BackWPup 復元」などで検索してみてください。
エックスサーバーでSSL設定を行う
次に、エックスサーバーのサーバーパネルにログインします。
ログインを終えたら、サーバーパネルから「SSL設定」をクリックします。
すると、「ドメイン選択」画面が表示されるので、SSL化するドメイン行の「選択する」リンクをクリックしてください。
すると「SSL設定」画面が表示されるので「独自SSL設定の追加」タブを選択してください。
「独自SSL設定の追加」タブでは、「サイト」を確認後、「独自SSL設定を追加する（確定）」をクリックしてください。
独自SSL設定を追加すると、「SSL新規取得申請中です。しばらくお待ちください。」と出るのでしばらく待ちます。
申請が完了すると、以下のような完了メッセージが表示されます。
「ドメイン名」に独自SSL設定を追加しました。
なお、SSL設定が反映するまで、最大1時間程度かかります。今しばらくお待ちください。
「SSL設定の一覧」タブを開くと以下のように「SSL用アドレス」が表示されているのが見て取れます。
「SSL用アドレス」をクリックすることで、サイトを開くことができます。
ただし、先程のメッセージでも出ていたように独自SSL設定を追加した後、だいたい数十分から最大1時間程度時間がかかります。
ですので、1時間ぐらい待たないと、Chromeの場合は以下のようなエラー画面が表示されます。
ちなみに、Firefoxだと以下のように表示されます。
マイクロソフトのEdgeだと以下のエラーメッセージが表示されます。
このようなエラーが出た場合は、もうしばらく待って「SSLアドレス」を開いてください。
僕の場合、数十分後「SSLアドレス」をクリックしたら、以下のようにページが表示されました。
このように「SSLアドレス」からサイトが開けるようになってから次の設定を行います。
WordPressの設定からURLを変更する
次に、Wordpress管理画面から「設定 → 一般」を開きます。
「一般設定」にある以下の項目を変更します。
- WordPressアドレス（URL）
- サイトアドレス（URL）
それぞれのURLの「http」部分を「https」に変更します。
変更後はこんな感じ。
設定を変更し終わったら「変更を保存」ボタンを押して変更内容を適用してください。
内部リンクをSearch Regexで全て置換する
次に、Wordpress本文内の内部リンクや、imgの内部画像リンクを全てhttpsに変更します。
これは、投稿や固定ページを1つ1つ開いて手作業で編集を行っても良いです。ただ、それだと余りにも時間がかかってしまうため、今回はSearch RegexというWordpressプラグインで一括変換する方法を紹介します。
Search Regexのインストール
とりあえず、Search Regexがインストールされていない場合は、プラグインをインストール画面からインストールして有効化してください。
一括置換内容の設定
本文を一括置換するには、Wordpress管理画面の「ツール → Search Regex」を選択します。
「Search Regex」画面で以下のように設定します。
- Source：Post content（デフォルト）
- Limit to：No limit（デフォルト）
- Order By：Ascending（デフォルト）
- Search pattern：http://wp-simplicity.com（SSL化する前のあなたのURL）
- Replace pattern：https://wp-simplicity.com（SSL化後のあなたのURL）
- Regex：選択不要
置換リスト一覧を確認
とりあえず設定が済んだら、一旦「Replace」ボタンを押してみてください。
この時点で、まだデータベースの内容は書き変わらないのでご安心を。
「Replace」ボタンを押すと、「こんな感じで置換を行うよ」という一覧がズラズラと表示されます。
Search Regexが置換する部分は、以下のように赤色で表示されます。
薄緑色の上が置換前の状態で、薄黄色の下が置換後のソースコードになります。
Search Regexで変換後保存を行ってしまうと、基本的に元に戻すことはできないので、こういった部分は、丹念に丹念にチェックをしておくことをお勧めします。
ちなみに、チェック項目を挙げると以下のようなものがあります。
- 置換するURLは間違っていないか？
- 置換後のURLは間違っていないか？
- 置換後のURLはアドレスとしての体（てい）をなしているか？
- 多くの結果リストをなるべくチェックしておかしな部分はないか？
ここは非常に大事な部分なので、これくらいは丹念にチェックしておいても損はないと思います。
URLを一括置換後保存する
一括置換内容に問題がないようであれば、一括置換してデータベースに保存します。
置換した結果を、データベースに保存するには、「Replace ＆ Save」ボタンをクリックしてください。
大事なことなので、何度も言いますが、このボタンを押す前に置換設定に問題がないか何度も確認してください。
全ての置換が終了したら、以下のように置換完了メッセージが表示されます。
この作業を乗り切ってしまえば、あとはそれほど難しくはありません。（以降は、失敗したとしても比較的手軽に元に戻せる変更です）
.htaccessにリダイレクト用のコードを追記する
次に、FTPでサーバーにログインして.htaccessファイルを編集します。
僕の利用しているサーバーは、エックスサーバーなので、以下ではエックスサーバーを例にして紹介したいと思います。
FTPでサーバーにログインして「public_html」ディレクトリを開いてください。
「public_html」ディレクトリの位置は以下です。
/home/サーバID/ドメイン/public_html
「public_html」ディレクトリにある.htaccessファイルをダウンロードします。
ダウンロードした.htaccessファイルをコピーして複製しておきます。
あとは、先程ダウンロードした.htaccessファイルをエディターで開きます。
あとは、エディターの先頭部分に以下のコードをコピペします。
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>あとは、編集した.htaccessファイルを保存して、サーバー上の「public_html」ディレクトリに上書きにアップロードします。
これを行うことで、これまで「http://wp-simplicity.com/」に来ていたアクセスを「https://wp-simplicity.com/」にリダイレクト（転送）してくれます。
例えば、試しに「http://wp-simplicity.com/」のリンクからサイトへ飛んでも、「https://wp-simplicity.com/」になっていることがわかると思います。
上記のコードを.htaccessに書くことで、全てのページにおいてこの転送作業を行ってくれます。
また、こうやってリダイレクトさせておくことによって、httpで得た検索エンジンの評価も、httpsアドレスに引き継がせることもできます。
FTPソフトの使い方がわからない場合は、以下の記事などを参考にしてください。
とりあえず、自分のサーバー上で行う大まかな設定はここで終了です。
FTPソフトの使い方がよくわからない場合
FTPソフトの使い方がよくわからない場合は、エックスサーバーのサーバーパネルにある「.htaccessの編集」メニューから直接編集することも可能です。
個々の編集に失敗すると、エラーでサイトが表示されなくなる可能性もあるので、編集前に一度全ての内容をコピーしてメモ帳等にバックアップとして保存しておくことをおすすめします。
セキュリティー状態のチェック
ここまでの設定を行ったところでブラウザをチェックしてみてください。
Chromeで、安全な接続になっていると、アドレスバーの左側に以下のような緑色の鍵マークが表示されます。
Firefoxで表示させると以下のように表示されます。
ただ、ほとんどのサイトは、ここまでの設定では、上記のように表示されないと思います。
ページの一部が安全でない状態
ほとんどのサイトは、コンテンツ内で、外部の安全でないサイトからの画像や、スクリプトを読み込んでいたりして、鍵が表示されていない状態かと思います。
Chromeの場合だと、サイトアドレスの左側に、鍵が表示されません。
Firefoxだと、以下のように鍵マークに！（エクスクラメーションマーク）がついたものになってしまいます。
この状態は、ページ内の一部（画像など）が安全に呼び出されていない状態になっています。
安全な接続状態
以下ではこの「ページの一部が安全でない状態」を以下のように安全な状態に戻す方法を紹介します。
Chromeで安全な接続
Firefoxで安全な接続
SSLエラーのチェック方法
ブラウザでページを表示させていて、以下のように「安全でない状態」と表示されたとします。
そのとき、「どの部分に問題があるかをチェックする方法」を紹介したいと思います。
Chromeのデベロッパーツールでチェック
Google Chromeでも、Firefoxの開発者ツールを使うときと基本的な操作は同じです。
まずは、ページ上でF12を押してデベロッパーツールを開いておきます。そして、「Console」タブを選択しておきます。
あとは、Chrome上でエラーのあるページを開きます。
すると、Console上のリストにエラー箇所が表示されます。
拡大するとこんな感じです。
Mixed Content: The page at ‘https://wp-simplicity.com/downloads/downloads2/’ was loaded over HTTPS, but requested an insecure image ‘http://wp-simplicity.com/wp-content/uploads/2015/06/2015-06-18_21h49_31.png’. This content should also be served over HTTPS
Chromeのデベロッパーツールの場合は、英語で表示されるので、日本語環境でSSLチェックをしたい場合は、Firefoxの方が良いかもしれません。
Chromeのセキュリティーオーバービューでチェック
Chromeには、その他にも「混在表示コンテンツ」を見つけるツールがあります。
そのツールを使うには、まずはSSLエラーのあるページのアドレスバーのアイコンをクリックします。
すると、以下のようなダイアログが表示されるので「詳細」をクリックします。
すると、デベロッパーツール上に「Security Overview」画面が表示されます。
「Security Overview」画面の下の方にある「Mixed Content」項目の「View requests in Network Panel」をクリックします。
すると「混合表示コンテンツ」リストが表示されるので、エラーの出ている画像を特定することができます。
インターフェースは英語ですが、SSLエラー画像の特定には、この方法が最も手軽かもしれません。
Firefoxの開発者ツールでチェック
Firefoxの開発者ツールでチェックするには、ページ上でF12キーを押してツールを立ち上げておきます。そして、コンソールタブを選択しておきます。
あとは、安全でないページを開くとコンソールに以下のようなメッセージが表示されます。
エラーメッセージ部分を拡大するとこんな感じです。
安全なページ上で (安全でない) 混在表示コンテンツ “http://wp-simplicity.com/wp-content/uploads/2015/06/2015-06-18_21h49_31.png” を読み込んでいます
このように「混在表示コンテンツ」と表示されたら、その部分のHTMLを見直します。
Firefoxのページ情報ダイアログでチェック
Firefoxの場合は、「ページ情報」ダイアログでチェックする方法もあります。
まずは、ページなどをチェックしていて以下のような「安全でない接続」マークが表示されたら、鍵マークをクリックします。
すると「この接続は安全でありません」というダイアログが表示されるので矢印部分をクリックします。
すると、またダイアログが表示されるので、「詳細を表示」をクリックします。
すると「ページ情報」ダイアログが表示されるので「メディア」タブを選択します。
メディアタブを開くと「メディアのURLリスト」が表示されるので、その中から「http://～」となっているものを選択することで、ダイアログ下部にメディアファイルのプレビューが表示されます。
このプレビュー機能により「あっ！こいつが原因か！」と原因が特定しやすくなります。
この方法が最も、エラーの出ているメディアファイルを特定しやすいかと思います。
テーマなどの設定を見直す
ブラウザのチェックツールなどの利用に慣れていない方のために、SSLエラーのでそうな場所をいくつか紹介したいと思います。
テーマのテンプレートや、設定などで、img、iframe、form、scriptからhttp://～が呼び出されていないかをチェックすることをおすすめします。
テーマ自体のチェック
あとは、テーマ内などでimgのsrc属性をhttpで呼び出していないかチェックします。
エディターのgrep検索機能などで「http://」と検索すると原因部分を特定しやすいかと思います。
ちなみに、僕が試した限りでは、現在使用しているSimplicityのテンプレートファイル自体には問題はありませんでした。
ウィジェットエリアのチェック
「外観 → ウィジェット」のウィジェットエリア内にあるテキストウィジェットなどでimgタグやiframeタグ、formタグ、scriptタグからhttpを呼び出していないかチェックします。
テキストウィジェットなどでは、Search Regexで置換が行えないため目視でチェックを行う必要があります。
アフィリエイトバナーのIMGや、Googleのサイト内検索用のタグがウィジェットなどに貼り付けてある場合は、チェックが必要です。
僕の場合、「Googleサイト内検索」を設置していて、エラーが出ていました。
なので、呼び出されているURLを「https://www.google.co.jp/cse」から「//www.google.co.jp/cse」のように変更することで対処しました。
テーマカスタマイザーのチェック
テーマカスタマイザーで以下のような設定で画像を設定している項目がある場合は画像を再設定する必要があります。
例えば、ヘッダー画像とか、ロゴ画像とか、ファビコンとか、アップルタッチアイコンとか、をテーマカスタマイザーで設定している場合は、画像の再設定をしておくことをお勧めします。
アフィリエイトタグ
SSLに対応していないASPのタグを本文中などに貼り付けている場合は、対応する必要があります。例えば、A8.netなどは、今のところSSLに対応していません。
追記（2016年7月）：既にA8.netのほとんどの広告素材や、インプレッション画像はSSLに対応しているようです。A8で生成するタグをそのまま貼り付けても、ほとんどの場合は大丈夫です。SSL化していないタグは貼り替えてください。
カエレバ・ヨメレバ等のタグ
本文中にカエレバなどのAmazonイメージタグが入っていると、SSLエラーが出ることがあります。
カエレバなどのタグは、通常はいくつもの記事に書かれていると思うので、そういった場合は、上の方でも取り上げたSearch Regexを利用して一括置換することをお勧めします。
一括置換内容は、以下のようになります。
- Search pattern：
- Replace pattern：https://images-fe.ssl-images-amazon.com
今後カエレバ・ヨメレバなどでSSL対応した画像を利用したタグを作成したいのであれば、「画像ssl化(Amazonのみ)」を「ON」にする必要があります。
ちなみに、楽天の画像はSSLに対応していないため、対応タグを生成することはできません。
SSL対応をしていないスクリプトの呼び出しを削除する
例えば、「SSLに対応していないアクセス解析のスクリプト呼び出し」などは削除する必要があります。
コード例を挙げると、以下のように解析スクリプトを呼び出す解析コードなどは削除する必要があります
<script src="http://mud.a.swcs.jp/2/j/" type="text/javascript"></script>
WordPressをログアウトした状態で、ソースコードを開いて検索機能（ Ctrl + F ）から「<script」などと検索してみて、http://のスクリプトが呼び出されていないかチェックしてみましょう。
その他サービス・ツールの設定の変更など
ここまでのサイトに関する設定で「設定は終わった」と安心してはいけません。
その他で利用しているサービス・ツールなどの設定を変更する必要もあります。
以下では、僕が設定を変更したサービス・ツールをいくつか紹介します。
Google Analytics
Google Analyticsでは、「デフォルトのURL」を変更する必要があります。
「デフォルトのURL」を変更するには、「アナリティクス設定」から「プロパティ設定」を選択して、「デフォルトのURL」の「http://」部分のドロップダウンをクリックして、「https://」をクリックしてください。
「https://」を選択したら、「保存」ボタンを押して設定を保存してください。
Google Search Console
Google Search Consoleは、これまでhttpで登録してあると、https化すると以下のように未確認サイトになってしまいます。
Google Search Consoleの再設定方法は、以下を参照してください。
GRC
GRCは、「検索設定」→「URLのhttpとhttpsの違いを無視」が有効になっていればOKです。
URLを変更する場合
URLも変更してしまいたいという場合は、以下の方法を行ってください。
サイトURLを変更するにはメインメニューの「編集 → その他の編集機能 → サイトURLの一括変更」を選択します。
すると、「サイトURLの一括変更」ダイアログが表示されるので、変更対象のURLをダブルクリックしてください。
「サイトURL入力」ダイアログが表示されるので、変更するURLを入力して「OK」ボタンを押してください。
URLの変更が確認出来れば、「OK」ボタンを押してください。
あとは、キーワード一覧リストで「サイトURL」が変更されているのを確認してください。
GRCについて詳しくは以下を参照してください。
Windows Live Writer（ブログエディター）
僕はWindowsでブログを書くのにブログエディターのWindows Live Writerを利用しているのですが、これの設定も変更する必要がありました。
再設定を行うには、「ブログアカウント」メニューから「ブログのオプション」ボタンをクリックしてください。
「ブログのオプション」ダイアログが表示されるので、「アカウント情報の更新」ボタンをクリックしてください。
「アカウント設定の更新」ダイアログが表示されるので「ブログのWebアドレス」を変更して「次へ」ボタンを押して手続きを進めればOKです。
SNSのシェアカウントを引き継ぐ
サイトをSSL化すると、アドレスが変わってしまうわけなので、それまでのシェアカウントは全てリセットされます。
ただ、SNS Count Cacheというプラグインを使用すれば、http時代に取得したカウントと、httpsで取得したカウントを合算して表示させることができます。
SNSシェアカウントを合算してキャッシュ化するには、Wordpress管理画面から「SNS Count Cache → 設定」を選択してください。
設定画面で「HTTPからHTTPSへのスキーム移行モード」を「有効」を選択して「設定の更新」ボタンを押してください。
あとは、SNSカウント表示部分のテンプレートをカスタマイズしてSNS Count Cache関数を使用するだけです。
関数の使用方法は、SNS Count Cacheの「ヘルプ」を参照してください。
このようにすることで、「HTTP＋HTTPS」のSNSシェアカウントを表示させることができます。
利点と難点
今回、自分のサイトをSSL化して気づいた利点と難点を以下でまとめたいと思います。
HTTPS化の利点
HTTPSにしたことで得られるメリットは以下。
- サイトのセキュリティが上がる
- 訪問者が安全にサイトを利用することができることによる信頼性の向上
- Googleからの評価が微妙に上がるかも
- 今後、サイトの表示速度が速くなる可能性がある（HTTP/2が利用出来れば）
SSL化した次の日あたりから、数日ほど検索順位チェックツールでチェックをしたのですが、検索順位はほとんど変わりませんでした。強いて言えば微妙ーーーーーーーーーに上がった程度です。
ただ、日々順位は上下しているので、全体の大きな流れから言えば、誤差の範囲内といった感じです。正直、効果を実感出来るほどの順位変動はなかったです。
HTTPS化の難点
HTTPS化を行った事によるデメリットは以下。
- サーバーによってはコストがかかる
- SNSシェアカウントがリセットされる
- feedlyの購読者数もリセットされる（古いURLから購読はできるけど）
- 対応していないASPのアフィリエイトタグが使用できなかったりする
- SSL対応していないアクセス解析などは使用できなくなる
- ツール（ツールの機能）などが使えなくなる可能性
- 環境によっては非常に面倒くさい
- AdSenseの収益が低下する可能性がある
- 未知の不具合を引き起こす可能性がある
- SEO的懸念（個人的経験ではほとんど影響なかった）
面倒くさい
やること自体に、難しいことはほとんどないのですが、作業は非常に面倒くさいです。
ちゃんと、「安全な接続になっているか？」のチェックには、結構な時間を要しました。それでも、全部は見てないので、まだまだSSLエラーが出ている箇所は結構あるような感じです。
今後、サイトを運営しながらエラー部分を発見したら、ちょこちょこ修正していくメンテナンスも必要になってきます。
アドセンス収益低下の可能性
現在SSL 対応の AdSense 用広告コードヘルプには記載されていないようなのですが、以前には以下のような記述があったようです。
サイトを HTTPS に対応させることを検討している場合は、オークションから SSL 非準拠の広告が除外されることによって、オークションの競争率が低下し、HTTP ページに広告を掲載する場合よりも収益が低下する可能性があることに注意してください。
実際に、僕のサイトもSSL化して5日間経過しました。
それで、SSL化前、SSL化後を比較すると、「RPM（表示回数 1,000 回あたりの見積もり収益額）」は、27％ダウンしました。
これはサンプリング期間が5日間と短いので、まだハッキリとしたことは言えないのですが、「収益減の可能性があるかもしれない」ということは考慮しておく必要はあるかもしれません。
検索エンジン（SEO）への影響
利点でも書きましたが、SSL化すると「URL変更後はしばらく順位が不安定になる」とか「順位が下がった」という声もたまに聞きます。
SEO的観点から言えば、微妙ではあっても好影響になるはずなんですが、上記のような声もあるようです。
僕が、自分の保有している2サイトをSSL化して観測した限りでは、「検索順位はほとんど上がりもしないし下がりもしない」といった感じでしょうか（2016年と2017年に施行した限りでは）。
観測していたキーワードのほとんどは、変化がありませんでした。中には、下がったり上がったりしたものもありましたが、結局元の位置に収束した感じです。
ただ、普段からキーワードの順位変動はあるので、日常変動の範囲内であるといえば、範囲内であるともいえます。とりあえず、僕の経験から言えば、検索順位の大きな変動はありませんでした。
まとめ
今回、サブサイトをSSL化しました。
それにより、得られたメリットとデメリットを合わせると、個人的には、デメリットの方が結構上回りました。
とにかく面倒くさい上に、使用できなくなったサービスもあります。シェアカウントもリセットされるし、アドセンス収益の減少も痛いです（※その後、収益は徐々に回復し以前よりは収益パフォーマンスは改善しました）。
なので、当分メインサイトはHTTPのままでいきたいと思います。※
このサイトは、サブサイト以上にいろいろな試みを行っているので、SSL化による影響がどこまで及ぶのかが想像すらできません。
今後、SEOの優遇度合いがかなり増えるようならまた考えますが、当分は状況を注視したいです。
もし自前での対応が難しいようであれば、
「サイト引越し屋さん」のようなプロに依頼すると楽です。
うまくいかない場合、無駄に時間を浪費するよりは割り切ってプロに依頼したほうがサクッと解決します。
こんにちは
アクセス解析AccessAnalyzer.comは
使えなくなりますか？
HTTPに戻すには
ほぼ逆の作業をするのでしょうか？