SSL化って何?ブログのURLを「http」から「https」に変えるための全手順を解説!【エックスサーバー限定】

こんにちは、ぐっきんです。

自分のブログを運営している人であれば、SSL化という言葉を一度は耳にしたことがあるかもしれません。

もしくは「そろそろSSLを導入しないとヤバイですよ」と脅しのように色々なサイトに書いてあるのを読んで、「早く導入しなきゃ!」と慌てている方もいるかもしれません。

なのでその辺りが不安になっている人に向けて以下の項目を解説していきます。

  • SSLとは何なのか?
  • SSL導入のメリット・デメリットは?
  • すぐに導入した方がよいのか?
  • どうやって導入するのか?(エックスサーバー限定)

この辺りが知りたい方はぜひこの記事を読み進めていってください。

SSLって何?

これが一番シンプルに多い疑問ですよね。

僕も最初SSLって聞いた時にはTシャツのサイズか何かだと思っていました。

でもどうやら違うようです。

詳しく調べてみたところ、

ブログの安全性を高めるためのセキュリティということが分かりました。

SSLを導入すると、暗号鍵というものがかかるようになり、ハッキングを困難にすることができるようです。

ちなみにSSLが導入されているサイトのURLにはこんなマークが表示されます↓↓

SSL

これはグーグルクロームを使っている場合の表示ですが、他のブラウザでも鍵のマークが必ず表示されるようになります。

 

SSL導入のメリットは?

メリットは大きく分けると以下の4つです。

  • サイトのセキュリティが強くなる
  • サイトの信頼性が上がる
  • SEOの高評価に繋がる
  • 表示速度が上がる(らしい)

 

サイトのセキュリティが強くなる

例えば、サイト内でクレジットカード情報を入力するとなった時に、そのページがハッキングされてたりすると情報を抜かれてしまう可能性があります。

しかしSSLが導入されているページというのは、セキュリティがかなり堅くなるので、通常のサイトよりも情報が抜かれづらくなります。

自分のサイトに来てくれたユーザーに情報漏えいのリスクを与えない

これがSSLを導入する上で一番重要なメリットとなります。

 

サイトの信頼度が上がる

SSLの鍵マークがくっつくことによって、「あ、このサイトは安全なサイトなんだな」というイメージをユーザーに与えることができます。

とはいえ、ほとんどのユーザーはセキュリティのことなんて知らないので、信頼度が上がるといってもごく一部のユーザーからという感じになります。

 

SEOの高評価に繋がる

簡単に言ってしまえば検索で上位表示しやすくなる可能性があるということです。

これに関してはグーグルが正式に発表していることです。

このランキングの変更は、グローバルでクエリの 1% 未満にしか影響しませんが、これから長い期間をかけて強化していきます。全体的に見ると、このシグナルは良質なコンテンツであるといった、その他のシグナルほどウェイトは大きくありません。HTTPS は、優れたユーザー エクスペリエンスを生み出す多くの要素のうちの 1 つです。

HTTPS をランキング シグナルに使用します-Google公式

ただし、僕の感覚では今のところSEOへの影響というのはほぼ体感できないぐらいのものだと感じています。

なのでこちらの要素に関してはおまけ程度に捉えておけばよいのではないかと思います。

あくまで大事なのは純粋にセキュリティとしての機能になります。

 

表示速度が上がる!らしい

噂によるとHTTPSにすることによってサイトの表示速度が早くなるという話もあります。

しかし、実際に僕の中では体感できるものではなかったので、ここはあまり気にしなくてもよいかと思います。

 

追記(2017/11/25)

エックスサーバーがhttpsのサイトを高速化するというサービスが始まったので、速度的にもかなり期待できる状況になりました。

デメリットは?

デメリットは以下の3つです。

  1. 単純に移行するのが面倒くさい
  2. 思わぬ不具合が出る可能性がある
  3. SNSのシェアカウント数がリセットされる(解決法ありですが僕のサイトでは失敗しました笑)

僕が感じたデメリットはこんなところです。

面倒くさいというのが一番ですが、シェアカウント数がリセットされて戻らないのも結構悲しいですね。笑

 

すぐに導入した方がいい?

これは非常によく聞かれる質問です。

僕の回答としては、ユーザーが個人情報を入力するようなサイトであればなるべく早く導入した方がいいけれど、それ以外のサイトは慌てて導入する必要はないと考えています。

上でも書いた通り、大事なのはユーザーの個人情報を守るということです。

なので、特に個人情報の入力を求めないようなサイトではすぐに必要なものではないと考えています。

これから解説していきますが、SSL化は初心者にとってはそれなりに重い作業ですからね。

僕のこのサイトはメルマガを発行しているので、この記事をきっかけにSSL化しました。(ようやく重い腰を上げました笑)

途中かなり手こずりましたが、なんとか無理やりSSL化に成功しました。笑

 

追記(2017/11/25)

高速化などのメリットも増え、導入も手軽にできるようになったので、そろそろ導入を検討していくと良いかと思います。

導入手順を解説

というわけで、実際にこのサイトにSSLを実装していく過程をここに記録していきたいと思います。

解説はエックスサーバーでの解説になります。

その他のサーバーをお使いの方は「サーバー名+SSL導入」などで検索してみてください。

ちなみにエックスサーバーは無料でSSLを導入できますが、他のサーバーは有料の場合もあるので注意してください。

 

ステップ1.バックアップを取る

作業を始める前に必ずバックアップを取ってください。

SSL化の途中でサイトにログインできなくなってしまったという事例もありますので、ここはめんどくさがらずにやっておきましょう。

バックアップを取るのにオススメのプラグインはこちらです。

 icon-hand-o-right 【重要】BackWPupを使って超簡単にWordPressブログのバックアップを取る方法!

 

ステップ2.エックスサーバーでSSLの設定をする

1.エックスサーバーの管理画面に入りSSL設定をクリック

SSL1

 

2.SSLを導入したいドメインの選択するをクリック

SSL2

 

3.独自SSL設定の追加をクリック

SSL3

 

4.独自SSL設定を追加するをクリック

※CSR情報のチェックは不要です

SSL4

 

設定が完了すると以下のような画面が出てきますので、しばらく時間をおいてみてください↓↓

SSL5

 

SSL設定の一覧に戻ると、SSL用アドレスが追加されているので、数十分ほど経ったらhttpsで自分のサイトにアクセスしてみてください↓↓

SSL6

 

グーグルクロームの場合はSSL設定がまだ反映されていない時は以下のような画面が現れますので、その時はもう少し時間を置いてからアクセスしてみてください↓↓

SSL7

※この間httpのサイトの方は普通に表示されますのでご安心ください。

 

以上でSSLの導入自体は完了です。

・・・と、ここまでの作業で全てが終わるのであれば苦労しないのがSSL導入です。

実はここからが結構大変です。

実際に鍵マークを付けてセキュリティをONにするためには全てのhttpを排除しなければなりません

これがかなり曲者です。

でもなるべく丁寧に解説していきますので、諦めずにやりきってしまいましょう。

 

ステップ3.リダイレクト設定をする

もういきなり嫌な感じですよね。笑

リダイレクト設定ってなにそれですよね。

簡単に説明しますと、

要はhttpのURLに来た人が自動的にhttpsのURLにワープする仕組みを設置しましょうということです。

例えば、このサイトをブックマークしてくださっている人なんかはhttpのURLで登録されているハズです。

なので、そのURLに飛ばれてしまうと結局セキュリティの入っていないページに来てしまうことになります。

それはマズイよねということでこのリダイレクト設定というのが必要になってきます。

以下にリダイレクトの設定方法を解説します。

1.まずエックスサーバーのインフォパネルにログイン(サーバーパネルと間違えないように気をつけてください)

 

2.SSL化したサイトが入っているサーバーのファイルマネージャへログイン

 

3.SSL化したいドメインをクリック

 

4.「public.html」をクリック

 

5.「.htaccess」の左にチェックを入れる

 

6.画面右上の方の「編集」をクリック

 

7.一番上に以下のコードを追記する

追記するコードはこちら↓↓

追記したら編集をクリックしてリダイレクト設定は完了です↓↓

 

ステップ4.ダッシュボードからサイトのURLを変更する

SSL設定とリダイレクト設定が完了したら、httpsで自分のサイトにアクセスしてダッシュボードに入りこちらでも設定をしていきます。

1.ダッシュボードから「設定」→「一般」とクリック

SSL8

 

2.WordPressアドレス(URL)とサイトアドレス(URL)のhttpをhttpsに変更する

※sは必ず半角で入れるようにしてください

SSL9

↓↓ ↓↓

SSL10

 

SSL11

 

変更を保存をクリックすると一度ログイン画面に飛ばされますので、再度IDとパスを入力しログインしてください↓↓

SSL12

これでURLの変更は完了です。

 

ステップ5.サイト内の記事に貼ってある内部リンクや画像のURLを全てhttpsに変更する

httpsに移行したことによって内部リンクや画像のURLも全て変更する必要があります。

しかしこれを手作業で全て行っていったら膨大な時間がかかってしまいます。

そこで登場するのが「Search Regex」というプラグインです。

以下に使い方を解説します。

1.Search Regexをインストールして有効化

SSL13 SSL14

 icon-hand-o-right プラグインのインストール方法が分からない方はこちら

 

2.ダッシュボードから「ツール」→「Search Regex」とクリック

SSL14のコピー

 

3.Search Regexの設定を以下のように行ってください

SSL15
  • Source:Post content(そのまま)
  • Limit to:No limit(そのまま)
  • Order By:Ascending(そのまま)
  • Search pattern:http://gukkin222.com(httpで自分のURLを入力)
  • Replace pattern:https://gukkin222.com(httpsで自分のURLを入力)
  • Regex:選択不要

※上のをコピペして僕のURLを入力しないように気をつけてください。笑

 

4.「Replace」で最終確認

一度置き換えをしたら二度と元に戻すことができなくなります。

なので、変更前と変更後のURLがしっかり合っているかどうかをしっかり確認してください。

ここでミスをすると本当に致命的になります。

SSL17

 

5.確認が完了したら「Replace & Save」をクリック

SSL16

 

完了するとこんな感じに表示されます。あっという間すぎてビックリすると思います笑↓↓

SSL19

 

ステップ6.鍵マークが付くようにする

「Search Regex」によって記事の中の内部リンクや画像のURLは差し替えることができました。

しかし、多くの場合それだけでは鍵のマークは付きません。実際にトップページに飛んでみて鍵のマークが付いているかどうか確認してみてください。

 

鍵マークが付かない場合(グーグルクローム)

SSL20

 

鍵マークが付いている場合(グーグルクローム)

 

鍵マークが表示されていない場合は、まだセキュリティは機能していないということになります。

その場合はページのどこかにhttpが隠れているということです。

それらを全て見つけ出してhttpsに変えてあげれば鍵が表示されるようになります。

全部見つけるのは結構大変ですが、間違い探しの感覚で探していきましょう〜。

ちなみに僕の場合は以下のような場所にhttpが潜んでいました。

  • ヘッダー画像のURL
  • 背景画像のURL
  • フッダー画像のURL
  • グローバルメニューのURL
  • サイドバー内のURL
  • index.phpに入れている画像のURL
  • single.phpに入れている画像のURL
  • ファビコン画像のURL
  • 引用タグのWコロン画像のURL
  • その他design.cssやstyle.css内の画像URL

僕の場合ここで少し手こずったのが、賢威のdesign.cssをいじった時に反映されるまでに半日ぐらいタイムラグがあったことです。

だから何をやっても鍵のマークが付かなくて心折れそうになりました。笑

もしCSSをいじってもダメな場合はすぐに反映されていないという可能性も疑ってみてください。

 

原因が分からない時はグーグルクロームのデベロッパーツールを使えばすぐ分かる

どこが原因か分からない場合はグーグルクロームのデベロッパーツールというのを使えばすぐに原因を特定することができます。というのを僕もやりながら知りました。

デベロッパーツールの使い方は簡単です。

1.まず鍵マークが付いていないところで右クリックし「検証」をクリック

 

2.デベロッパーツールが立ち上がるので「Console」をクリック

 

3.「Mixed Content」となっているところにhttpのURL紛れているので、そのURLを見つけ出しクリック

 

4.これで犯人画像が特定されます。

あとは、テーマ編集などから原因となるURLをhttpsに編集すればOKです!

 

ステップ7.SNSのシェアカウント数を復活させる

httpsに移行すると、http時代のSNSシェア数が0にリセットされてしまいます。

過去に沢山SNSでバズったりしている記事なんかは、それが面白い記事だというアピールにもなるのでリセットは結構イタいです。

ですが、これは「SNS Count Cache」というプラグインを使うことで復活させることができるので、そのやり方を解説します。

1.「SNS Count Cache」をインストールし有効化

 

2.「SNS Count Cache」→「設定」と移動

 

3.以下の画像の赤枠のところを有効に変えて設定の更新をクリック

あとは半日ほど経つと過去のシェア数が復活します。

の、ハズなんですが。。。

すみません、僕はこれをやってもカウント数は復活しませんでした。

なので、今は原因を追求中です。

ここに関しては分かり次第追記していきたいと思います。

 

ステップ8.アナリティクスの登録URLの変更

忘れてはならないのがサーチコンソールとアナリティクスへ登録しているURLの変更です。

まずはアナリティクスからみていきましょう。

1.アナリティクスの管理画面に入り「管理」をクリック

 

2.プロパティ設定をクリック

 

3.デフォルトのURLをhttpからhttpsに変更する

 

変更したら忘れずに保存をクリック↓↓

以上でアナリティクスの設定はOKです。

 

ステップ9.サーチコンソールを登録し直す

続いてhttpsになったサイトをサーチコンソールに新たに登録をしていきます。

1.サーチコンソールにアクセスし、プロパティの追加をクリック

 

2.httpsのURLを入力し追加をクリック

 

3.別な方法をクリック

 

4.Googleアナリティクスのところにチェックを入れ確認をクリック

 

こういった表示が出れば確認は完了です↓↓

そのままサイトマップの送信を行っていきますので、「続行」をクリックしてください。

 

5.管理画面から「クロール」→「サイトマップ」とクリック

 

6.サイトマップの追加をクリック

 

7.以下の画像の赤枠の部分に「sitemap.xml」と入力し送信

以上でサイトマップの送信は完了です。

 

SSL化に関するまとめ

SSL化のメリット

  • サイトのセキュリティが強くなる
  • ユーザーからの信頼度が上がる
  • SEOで有利になると言われている
  • サイト表示速度があがると言われている

SSL化のデメリット

  • 面倒くさい
  • 思わぬ不具合が出る可能性がある
  • SNSのシェアカウントがリセットされてしまう(解決可)

SSL化の手順

  1. サイトのバックアップを取る
  2. エックスサーバーでSSL設定をする
  3. リダイレクト設定をする
  4. サイトのURLをhttpsに変更する
  5. 記事内の内部リンクや画像URLをhttpsに変更する
  6. その他サイト内の画像や内部リンクをhttpsに変更する
  7. SNSのシェアカウント数を復活させる
  8. Googleアナリティクスの登録URLを変更する
  9. サーチコンソールへ登録し直す
  10. サーチコンソールにサイトマップを送信し直す

以上がエックスサーバーでのSSL導入に必要な全てになります。

ただし、最初の方でも書きましたが、個人情報を扱うサイトでなければ慌てて導入する必要はないのではないかと思います。

もし本当に全てのサイトに導入が迫られる日がくるとしたら、その頃までにはもっと簡単に導入できる方法が生まれるんじゃないかと思ったりもします。

やっぱり今の状態だと、初心者が簡単にできるとは思えないですからね。

ただ、まだ記事数が少なかったりする場合には、導入のリスクが低いのでやってみてもいいかもしれませんね。

もしこの記事を見てもちょっと分からないという部分があれば気軽にコメントをください。

頂いた内容を解決できるようにどんどん記事を修正していきたいと思います。

ではでは。

↓↓メルマガでは最新情報をお届けしています↓↓

コメントを残す

メールアドレスが公開されることはありません。