ブログをhttpsに対応させましたよって話とちょいとした苦労

2017年06月06日(火)【
LINEで送る
Pocket

旬の時期? から少し遅れたけど、四畳半ワークスもついに常時SSL化され、URLが「https://blog.4-5matworks.com/」になるなどしたよ!

当ブログはエックスサーバーで動いてるので、無料SSLを使う分であればオプションで簡単に設定できるのだけれども、なにせ7年もやってるブログなので、すんなりというわけにもいかず…。

そんなこんなで、長くブログやってたりすると引っかかりやすいところの注意点とか諸々のことでも。

SPONSORED LINK


SSLの設定

無料SSLの場合、エックスサーバーなら簡単にできる。

コントロールパネルから管理ドメインを呼び出して、上記画像からガイドにしたがって設定するだけ。最高だぜ!

設定してから反映までに1時間程度かかるので、その間に後述する下準備でもしておこうという感じ。

https対応の準備

このブログはWordPressで動いてるのだけれども、それも5年くらいの前の話で最初の2年はFC2ブログで立ち上げ、次にアメーバブログに引っ越し、そんでもってこのドメインに引っ越してきた経緯がある。

そんなわけで、初期の記事とかに貼ってあるamazon等のアフィリエイトタグはもちろん、WordPressの知識が全然無いまま動かしていたりするため記事内のURL記述が結構杜撰になっており、この辺りを全部直しておかないとならない。

記事内は仕方ないとしても、テーマテンプレート内の記述を昔のものから引っ張ってきた形跡が多々あったりして泣ける。

なんで先にこんなことをしておくかというと、httpからhttpsの呼び出しはともかく、httpからhttpsの画像やスクリプト類を呼び出そうとすると警告が表示されて、なんか悪いことしてるんじゃないかって気にさせられてしまうから怖い。

画像やスクリプト等の呼び出しにエラーが出るとこうなる。

修正後はちゃんとこういう表記をしてくれる。

案外落とし穴なのが、アフィリエイトタグやGoogleアナリティクス、各種ASPなどから発行されるscriptタグで、古いものを使っていると警告が来る。
全部書き換えたのになんでー? って場合はこの辺りが抜け落ちてる可能性が高そう。

WordPressなら、記事内はSearchRegexというプラグインがあるので、http:// から始まる画像の呼び出しは全てhttps://に一括置換をかけてしまうのが手っ取り早い。

なにせ全然更新してないとは言っても300記事以上あるもので、これらを手作業で修正するとかやってられない。 もっと頑張ってブログ更新してる人からすれば地獄しか無いような気がする。

注意点いろいろ

主にエラーの原因となりやすいのは、外部から画像やスクリプトを呼び出してる場合で、アフィリエイトをしてるのであれば、https未対応のASPがあると切らざるを得ない。

僕が分かる範囲であれば、A8.netアフィBについては、「src=”http://〜”」表記を「src=”//〜”」に書き換えてしまえば即対応してくれたけど、amazonに関しては、使用している画像やリンク出力のサービスによって違ってきたりするから注意。

単純に従来のタグをhttpsに書き換えればいいとは限らない場合も結構あるので、下記を参考にされたし

HTTPS(SSL)でAmazonアソシエイトの広告(iframe)が表示されないときの対処法
当 Blog を SSL 対応させたので手順や修正が必要になった点などをまとめ

無事「保護された通信」が表示されたら

最後に、これまで使っていたhttpから始まるURLをhttpsにリダイレクトさせなければならない。

これを忘れると、一つのブログ内にhttpサイトとhttpsサイトが混在してしまうことになるので、http側にアクセスしてきた来訪者を自動でhttpsに移動してもらう処理をしなければならないのだけど、この場合は.htaccessを使って301リダイレクトをかけるのが王道。

リダイレクトはいろんな方法があるけれども、長くブログをしているのであれば、絶対301リダイレクトにすることをお勧めしたい。

301リダイレクトとは、これまでのサイトやブログが得てきたGoogleからの評価をそのまま引き継いで移動させることで、302リダイレクトや別の方法だと、http側のサイトとhttps側では「別々のサイト・ブログ」という扱いになってしまうため、サイト評価を1から構築しなおさなければならなくなってしまう。これまでの資産を引き継がせるためには必須とも言える。

.htaccessの書き方はサーバーや設置ディレクトリによって変わってくるのだけれども、僕はこちらを参考にしますた。
ワードプレスのSSL化でhtaccessに301リダイレクトを設定するときの記述場所

これが通れば、http〜のURLを打っても、httpsに自動で切り替わるので、これにて終了 という感じで。

WordPressを使ってる場合の落とし穴


忘れやすいのが、WordPressの設定側のURL設定。こちらもhttpsにしておくこと。

また、https化して、全部完了! と思いきや、トップページから別の記事に移動しようとしたり、新しく記事を書いた時など、リンク先は正しいのに404エラーが返ってくることがある。

これはどうも、パーマリンクの設定が反映されてないからのようで、管理ページの設定からパーマリンク設定を開き、そのまま「変更を保存」をクリックすれば解消するっぽい。このエラー割とあったりするよね…。

https化してから

こればかりは仕方ないのだけれども、前述の通りhttpサイトとhttpsサイトとでは、内容は全く同じでも検索エンジンは別サイトとして見ることになる。

ということは、これまでTwitterやフェイスブックでシェアされた数字、はてなブックマークなどは全てリセットされてしまうため、見た目の数字的な意味では結構悲しいことになる。

こんなダメブログでも、2500近いはてブ集めた記事あったんだよ…。もう全部0だよ!

とは言っても、さすがにもう数年前の記事だし、最近はダラダラ更新しかしてないので特に気にもならなかったので、このタイミングで行こうってことで、なんとか常時SSL化が完了したわけだ。

長くブログ続けていると、今更常時SSL化が主流になるとか、今後はhttpサイトは警告が出るよとか言われても知るかヴォケ! という気持ちの方が強かったりするのだけれども、まぁそうも言ってられなくなる時期もいつかは訪れるってことで、少しずつでも対応できる準備をしておいたほうがいいかもね? というお話でもあるますた。

ではさらばだ!

SPONSORED LINK


LINEで送る
Pocket

最後までここにいてくれてありがとう

よろしければ四畳半ワークスのRSS購読、SNS参加もどうぞ!

RSSリーダーに登録する

twitterでフォローする

Facebookページを見る

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です