先週頃にこのサイトをSSL対応しましたのでその流れについてまとめておきます。HTTPS化にはただSSLの証明書を購入しておしまいではなく、サイト上の多くのhttpをhttpsに変更する必要があり思いのほか手間なのでSSL化する際は注意してください。
ちなみにこのサイトのサーバはさくらのレンタルサーバ
(スタンダードプラン)です。
目次
きっかけ
Google AdsenseのページにSSL化を勧める文言が出てきたので実施しました。それだけでなく、最近ではGoogleがSSLを推奨する動きがあり、SEOに影響しかねないようなので導入したいという気持ちもありました。
ただ、このサイト自体はメールアドレスやクレジット番号など扱うサイトではないので正直必要なのだろうか？という気持ちもありましたがとりあえず試してみました。
GoogleのSSL推奨とChromeにおける非SSLへの警告表示
今やるから他と差がつく! HTTPS(常時SSL)は最新のSEO対策
さくらのレンタルサーバ スタンダード
SSL購入
ラピッドSSLから購入しました。さくらインターネットの場合、基本的な流れは公式サイトのサポートに書いてあるのでそちらを参考にしてください。個人向けであれば年間1600円くらいで運用ができます。
SSL化に向けたサイト修正
動作確認方法
httpsで正常に表示されているかどうかはページを読み込んだ時のURLバーの鍵マーク付近が緑色で「保護された通信」の表示が出ているかChromeブラウザで確認しました。
灰色のままの場合は「F12」や右クリックで「検証」を選ぶと開発者モードになるのでそこの「Console」タブに表示されるエラーが無いかどうか見て一つずつ解決していきました。一部ワーニングでも緑色にならない場合があるようですので注意してください。
直書き修正
httpsに変更する際に、注意すべきはimgやlink、script、iframeタグあたりのURLです。aタグは読み込んでいるわけではないので変更する必要は必ずしもあるわけではないです。私は各ブログページやテンプレート(外観>テーマの編集)で該当する箇所を一つずつhttpからhttpsに変更していきました。
ただ、後述しますが、さくらインターネットの場合Wordpress用のSSL対応プラグインが用意されており、そちらを利用すれば過去記事のhttpはhttpsに全て勝手に書き換えてくれるみたいなのでそちらも活用してください。
また、「ACR WEB アクセスランキング」など他サイトのサービスの読み込みもURLがhttpsではない場合変更が必要です。このサービスの場合SSL対応しているようなので問題ないですが、https未対応のサービスの場合はあきらめるという選択肢もやむを得ないと思います。
Zenback修正
このサイトはZenbackという自サイトや他サイトを相互リンクさせるサービスを利用していますが、自サイトのリンク表示がサムネイル表示の場合、その画像は変更前のhttpのURLを使っているため鍵が付かなくなります。これはページによってサムネイルが出る出ないがあるので気付くのに時間がかかりました。
恐らく、ずっと使っていれば勝手にhttpsに変更してくれるのではないかと思いますが、いつになるか不明のためサムネイル表示をやめてテキスト表示にZenbackのページで設定変更しました。
WordPress用SSL化さくらプラグイン適用
さくらインターネットを使用していればSSL化対応のためのアシストプラグインがあったのでそれを使いました。プラグインの検索で「sakura」などと調べると出てくるので導入しましょう。
このプラグインはhtaccessの編集や過去の投稿コンテンツの置換を全て自動で行うことができるプラグインです。ただ、固定ページやテンプレート(「外観」>「テーマの編集」)は必ずしもそうなっているわけではなさそうなのでちゃんと鍵マークが付くようになっているか確認してください。
設定の一覧に「SAKURA RS SSL」が出てくるのでそちらで設定ができます。
公式サイトに導入の方法が書かれているのでそちらをご参考ください。
htaccess修正
さくらのプラグインでhtaccessを自動で書き換えてくれているみたいですが、通常WordPressはarchivesフォルダ以下のhtaccessのみカバーしているようです。このサイトは一つ上のフォルダのindex.phpをいじることでトップページにarchivesが付かないようにしていますので、HTTPS化の際にはそのディレクトリのhtaccessをarchivesフォルダのhtaccessを参考にして変更しました。
この変更は必要な方は実施してください。
.htaccess)
# BEGIN Force SSL for SAKURA
# RewriteしてもHTTPS環境変数を有効にする
SetEnvIf REDIRECT_HTTPS (.*) HTTPS=$1
# 常時HTTPS化(HTTPSが無効な場合リダイレクト)
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{ENV:HTTPS} !on
RewriteCond %{REQUEST_URI} !/wp-cron\.php$
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END Force SSL for SAKURA
(参考：index.php)
<?php
/**
* Front to the WordPress application. This file doesn't do anything, but loads
* wp-blog-header.php which does and tells WordPress to load the theme.
*
* @package WordPress
*/
/**
* Tells WordPress to load the WordPress theme and output it.
*
* @var bool
*/
define('WP_USE_THEMES', true);
/** Loads the WordPress Environment and Template */
require( dirname( __FILE__ ) . '/archives/wp-blog-header.php' );
Google Analytics設定変更
Google Analyticsを使用している場合はアドレスをhttpsのものに変更します。
まとめ
SSL証明書を購入してサイトをHTTPS化しました。思いのほか面倒なのでこれからSSL化するという方はちゃんと心構えをしていた方がいいです。