ブログをSSL化するときの失敗しないためのモロモロ注意点

くらし

最終更新日:2019/07/26

ラムネグから一言:無料アプリを3つ作りました。記事下部にリンクがあるので見てみてくださいね。さっそくみてみる

今日世間にだいぶ遅ればせながら、このブログをSSL化しました。

新規サイトを作成するときははじめからSSL化して作れるのでラクチンなんですが、すでに運営しているブログのSSL化ってメンドウだろうな~と思って今まで放っていました。

今回重い腰を上げてSSL化してみたので、失敗しないための注意点をわたしの失敗談をもとに紹介しておきますね。

  1. SSL申請とhttps置換はどっちが先?
  2. SSL化の要点!httpsにおきかえ
  3. Search Regexを使う
  4. どのURLをおきかえる?
  5. おきかえ実践
  6. htaccessの修正
  7. アナリティクスの設定
  8. サーチコンソールの再登録
  9. まとめ

SSL申請とhttps置換はどっちが先?

サイトのSSL化にはいくつか手順があって、なかでもサイト内のリンクをhttpからhttpsにおきかえる作業が主役になってきます。

あとはhtaccessの修正もかなり重要ですね。

作業はざっとこんな感じです。

  1. SSL申請
  2. ※サイト内リンクを「https」におきかえる
  3. ※htaccessでhttpからのアクセスをhttpsに固定
  4. アナリティクスの設定を「https」
  5. サーチコンソールに再登録

それで、わたしも最初わからなかったんですが、SSL申請とhttpsへのおきかえはSSL申請を先にするのがおすすめです。

先にSSL申請をすると一時的に「http」ではじまるURLと「https」ではじまるURLの両方でアクセスできるようになります。でもしばらく(数日くらい?)の間はグーグルがまだ「https」の方に気づいてなく検索で表示されるのは「http」の方。

なのでSSL化が終わるまでは「https」のURLがあったとしても問題ないと思います。

また、SSL申請はhttps置換をする数時間~1日前くらいにはちゃちゃっとしておきましょう。じゃないとなかなかhttpsが有効にならなくてヤキモキします(SSL申請は1時間くらいかかることがあります)。

SSL化の要点!httpsにおきかえ

続いてサイト内のリンクをhttpからhttpsにおきかえていきます。

おきかえないとhttps://~でサイトにアクセスしたときに「このサイトは安全ではありません」みたいなメッセージがずっと表示されて、SSL化する前よりもさらに、見てくれている人を不安にさせちゃう状態になります。

Search Regexを使う

httpsへのおきかえはワードプレスの場合だと「Search Regex」というプラグインが便利。「Search Regex」はワードプレスのぜんぶの記事から特定の文字を検索し、それを一括でおきかえられるスグレモノ!

どのURLをおきかえる?

実はサイト内の全部のURLを「http」から「https」におきかえるんじゃないんです。

というのも外部サイトへのリンクは、外部サイトがSSL化してなかったら「https」にするとマズいわけです。

SSL化していないサイトにhttpsでアクセスすると…?
SSL化していないサイトに「https://~」でアクセスすると「危険です」みたいな画面がどんっと表示されます。なんだかウイルスに感染しちゃったり…、みたいな不安をサイトに来てくれた方に与えてしまうのでやめておくのが無難です。

おきかえるのは自分のサイトへのリンクと、外部サイトの画像のURLのみでOK!

おきかえ実践

Search Regexを使って、

  • サイト内リンク
  • 外部サイトの画像URL

のURLをhttpからhttpsにおきかえていきます。

※バックアップしてから作業してください。

※Search Regexは、一番右の「Replace&Save」を押さない限り実際には置換されないので、まずは左の青い「Search」ボタンで確認しながら置換してくださいね。

サイト内リンクの置換例
Search patternhttp://〇〇.com
Replace patternhttps://〇〇.com

※〇〇はあなたのサイトのドメインが入ります。

外部サイトの画像URLの置換例

外部サイトの画像っていうのはアマゾンや楽天の商品リンクがほとんどなので、これらをしらみつぶしにおきかえていきます。

アマゾンの商品リンクの置換
Search patternhttp://ecx.images-amazon.com
Replace patternhttps://images-na.ssl-images-amazon.com
楽天の商品リンクの置換
1/2
Search patternhttp://thumbnail.image.rakuten.co.jp
Replace patternhttps://thumbnail.image.rakuten.co.jp
2/2
Search patternhttp://hb.afl.rakuten.co.jp
Replace patternhttps://hb.afl.rakuten.co.jp

※楽天は2つする必要があります。ただ、わたしは楽天の商品リンクがほとんどなかったので手作業で変えました。この方法は未確認となります。

htaccessの修正

htaccessの一番上にこれを追加します。上3行はhttpでアクセスしてきたら次からはhttpsでアクセスするように指示するためのコードで、下のはhttpからhttpsへリダイレクトするコードです。

htaccess


<IfModule mod_headers.c>
Header set Strict-Transport-Security "max-age=31536000"
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

アナリティクスの設定

アナリティクスは左下の「管理」を押して出てきた画面、真ん中の「プロパティ設定」、それから右側の「ビューの設定」からhttp→httpsに切りかえられるボタンがあるので2か所とも押すだけでOKです。

サーチコンソールの再登録

サーチコンソールにはすでにhttp版のが登録されていると思いますが、これとは別に新しくhttps版のを登録しなおします。

おんなじサイトのhttp版とhttps版の両方ができちゃうので、なんかやぼったい感じですが、これは仕方がないみたいです。どうしても2つあるのが気持ち悪くて仕方がない!という場合はhttp版の方を消してもいいですが、そうしちゃうと過去のデータが見れなくなっちゃうので消すにしても、数カ月たってからとかの方がいいと思います。

まとめ

やっぱりサイト内の内部リンクや画像URLをhttpsにおきかえるのがいちばん大変でした。

Search Regexは慎重に置換しないと、ボタン一つで記事がボロボロになっちゃうのでめちゃくちゃ注意しながら行ってくださいね。

作業前にバックアップを取っておくなどした方が安全です。

がんばってSSL化してみてくださいね。

【どどん!】ラムネグではただいまアプリを絶賛提供中!さあ、選べる3つの無料アプリ!あなたはどれにする?

【わたガチャ】

あなただけのガチャを作ろう♪

すたーと!

【みんガチャ】

みんなで一つのガチャを作りあげよう♪

すたーと!

【litty-リティ】

秘密のメッセージをフォロワーさんに送っちゃおう!

すたーと!