2018年7月にリリースされるChromeのバージョン68において、SSL化されていないウェブサイトでは「保護されていません」という警告を表示するとGoogle公式によるアナウンスが発表されました。URLアドレスがhttpではじまるサイトがこれにあたります。
理論的には、クレジットカード番号や個人情報を扱わないような個人ブログでそこまで必要なのかなとも思いますが、訪問してくれるユーザーに対して身元のちゃんとした人間が管理しているウェブサイトですよ、と示せるのは大事なことです。
また、記事執筆時点では日本国内に限ってもChromeはブラウザシェアの1位となっており、多くの人が訪れるたびに警告が表示されるのはイメージがあまりよろしくないです。
SSL化しているか・いないかで検索順位の結果にいくらか影響があるとも言われていますし、これを機会にいそいそと当ブログもSSL化してみました。
レンタルサーバー各社は独自のSSL証明書を用意
当ブログはエックスサーバーにWordPressをインストールして運営を行っております。エックスサーバーさんでは独自のSSLが用意されており、こちらは無料で利用できます。
簡単に調べてみましたが、主要なレンタルサーバーでは無料で使える独自SSLを用意していることがほとんどです。使ってみたい・すでに使っているレンタルサーバーがサービスを提供しているか確認してみてください。
データベースをバックアップする
手順どおりに進めればまず間違いありませんが、思わぬ事故でブログが表示されなくなったら大変です。SSL化作業の前にデータベースのバックアップをとっておきましょう。復旧に必要になります。
WordPressではデータベースバックアップ用のプラグインがいくつかありますが、当ブログはBackWPupを使用しました。
BackWPup – WordPress Backup Plugin | WordPress.org
管理画面から「BackWPup」→「ダッシュボード」をクリックすると、
「データベースのバックアップをダウンロード」ボタンが表示されるので、こちらをクリックします。記事数によっては時間がかかるかもしれません。
SQLファイルがダウンロードされるので、こちらを保存しておきます。なにかあったらこのファイルから復旧を行います。
レンタルサーバーでSSL設定を行う
サーバーパネルから設定画面にログインします。
サーバーパネル – ログイン | レンタルサーバー【エックスサーバー】
「SSL設定」をクリック。
ドメイン選択画面でSSL化したいドメインをクリックします。
「独自SSL設定の追加」タブをクリック。
ドメインの先頭にwwwが付与されることがありますが、そのままで大丈夫です。「CSR情報(SSL証明書申請情報)を入力する」にチェックは必要ありません。問題なければ「独自SSL設定を追加する」ボタンを押して確定します。
「しばらくお待ちください。」と表示されます。私の環境では20分ほどでSSL証明書が反映されました。
このページを何度か更新し、「すでに独自SSLが設定されています。」と表示されたら自分のブログを確認してください。
アドレスの先頭がhttps://～ではじまっていれば設定は完了です。
WordPressで設定を行う
WordPressの管理画面で「設定」→「一般」をクリック。
WordPressアドレスとサイトアドレスの先頭がhttpになっているので、
これをhttpsに変更します。
「変更を保存」ボタンを押して保存します。
内部リンクを修正する
記事本文から別の記事へ張ってある内部リンクやimgタグ内の画像へのリンクがhttpからはじまっているので、これを修正する必要があります。
記事数が少なければ記事投稿ページや固定ページをひとつずつ開いて手動でも行えますが、記事数が多いとすべて修正するのは大変です。
WordPressにはSearch Regexというプラグインが用意されているので、こちらを使って一括変換する方法を紹介します。
管理画面で「ツール」→「Search Regex」とクリック。
Search patternとReplace patternに次のように入力します。アドレスの先頭をhttpからhttpsに変更するだけです。ドメインについてはご自分のブログで読み替えてください。設定はデフォルトからいじる必要はありません。
「Replace」ボタンを押すと、どこが変換されるのかが表示されます。この段階ではまだ置き換わっていません。
置き換える部分に間違いがないことをよく確認したら、「Replace ＆ Save」ボタンを押します。これで内部リンクの変換は完了です。
.htaccessファイルを編集する
WordPressにSSLを適用するとアドレスの先頭がhttpからhttpsに変更されるため、このままでは検索エンジンからは別の記事と判断されてしまいます。検索エンジンからの評価を引き継ぐためには「301リダイレクト」を行わなければなりません。
エックスサーバーの場合には「public_html」フォルダに.htaccessファイルがあるはずなので、これを修正します。FTPソフトでローカル環境にダウンロードし、テキストエディタなどで開いてください。
.htaccessファイルを修正する前に、どこか別の場所へコピーしておいてください。修正に失敗してブログが表示されなくなった場合、修正前のコピーされたファイルを再度アップロードすることで復旧することができます。
追加するソースコードは次のとおりです。
1 2 3 4 5 | <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> |
先ほどダウンロードした.htaccessファイルですが、WordPressを導入してから特にいじっていなければ次のようになっていると思います。
1 2 3 4 5 6 7 8 9 10 | # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress |
たまにこのファイルに追記するプラグインもあるようですが、その場合には適宜読み替えてください。ファイルの先頭に先ほどのソースコードを追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTPS} !on RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L] </IfModule> # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule> # END WordPress |
編集後に保存し、public_htmlフォルダに.htaccessをアップロードして上書きしてください。
混在コンテンツを修正する
ここまでの設定が終わったら、ブログの記事をひとつずつ開いて確認していきます。設定によりアドレスがhttpsではじまっているにも関わらず、ウェブサイトが完全に保護されていない場合があります。
これはChromeのアドレスバーですが、このように表示されている場合にはSSL化が完全ではありません。
ちゃんとSSL化されているウェブサイトには鍵マークが表示されます。
このような状態を「混在コンテンツ」と呼びます。これはhttpsではじまる記事内にhttpリンクが張られていると起こります。SSL化されていないアフィリエイトリンクやガジェットなどを記事から呼び出していると、このような状態になります。
どのリンクが混在コンテンツの原因になっているかを確認するには、Chromeであればデベロッパーツールを使うと便利です。
混在コンテンツだった場合にはツールの上部に×マークが表示されるので、
こちらをクリックするとどの部分が原因になっているかがすぐにわかります。
現在ではほとんどのアフィリエイトサイトがSSLに対応しているので、リンクを新しく取得して張り直してください。
テーマを修正する
有名なテーマで問題になることはまずないと思いますが、テーマを自作していたりすると画像の呼び出しに絶対パスを使っていたりして、これが混在コンテンツの原因になることがあります。
このような場合にはSearch Regexの検索には引っかからないので、手動で修正をする必要があります。ヘッダー画像やサイドバーのウィジェットなどでそのようなリンクが張られていないかを確認してください。
カエレバ・ヨメレバの修正
複数のアフィリエイトリンクを張ることのできるカエレバ・ヨメレバを使っている人は多いと思いますが、これらのリンクが古いとSSLに対応されていなかったりします。現在は対応されているので、古い記事を確認してみてください。
記事数が多いのであれば、先ほどのSearch Regexプラグインを使って一括で変換することも可能です。
- Search pattern：http://ecx.images-amazon.com
- Replace pattern：https://images-fe.ssl-images-amazon.com
Googleアナリティクスの設定
このあたりのツールは表示がコロコロ変更されるので、記事執筆時点での設定方法を紹介します。
「管理」画面で「プロパティ設定」をクリック。
デフォルトのURLでhttpsを選択します。
「保存」ボタンで設定を完了します。
今度は「ビューの設定」をクリック。
こちらもウェブサイトのURLでhttpsを選択します。
「保存」ボタンで設定を完了します。
Google Search Consoleの設定
こちらはhttpsのサイトを新しく登録し直さなければなりません。「プロパティを追加」ボタンをクリック。
httpsからはじまる新しいアドレスを入力し、「追加」ボタンを押してください。
この後、登録されたアドレスの認証を行わなければなりませんが、いくつかの方法があります。私はGoogleから認証用のHTMLファイルをダウンロードし、それをレンタルサーバーにアップロードしました。
エックスサーバーなら「public_html」フォルダにアップロードします。
GRCの設定
検索順位を追跡するツールであるGRCを使っている場合、メニューで「検索設定」→「URLのhttpとhttpsの違いを無視」が有効になっているかを確認してください。
デフォルトでは有効になっているようです。
SNS Count Cacheの設定
ブログにSNSのシェア数をカウントするボタンはすっかり定番となりましたが、WordPressにはSNS Count Cacheというプラグインが用意されています。
こちらはリアルタイムでのシェアカウントには対応できませんが、カウント数をプラグイン側でキャッシュしておいて、WordPressの表示を高速化する効果があります。
また、通常ではhttpからhttpsへとアドレスが変更になるためシェアカウントがリセットされてしまうのですが、こちらのプラグインを使っている場合にはシェアカウントを引き継ぐことができるのでおすすめです。
管理画面から「SNS Count Cache」→「設定」をクリック。
「HTTPからHTTPSへのスキーム移行モード」を「有効」にして、「設定の更新」ボタンを押してください。
ただ、残念なことにFacebookのシェアカウント数は引き継ぐことができませんでした。また、Google＋は以前からカウント数をうまく取得できなかったので、いまはGoogle＋ボタンそのものを表示していません。
まとめ
クレジットカード番号や個人情報などを扱わない個人ブログであれば、理論上は慌てて対応しなくても問題はないと思います。ただ、ブラウザシェアのトップであるChromeで強制的に警告が表示されること、検索結果の順位にある程度の影響を与えることを考えれば、そろそろ対応したほうがいいのかなとも感じます。
レンタルサーバー各社が無料で使える独自SSLを用意してくれていることですし、これを機会にSSL化に挑戦してみてください。
Comment