ブログ作成

時代は常時SSL化！？サイトを常時SSL化対応する方法

時代は常時SSL化！？サイトを常時SSL化対応する方法

こんにちは。

あなたのサイト、常時SSL化してますか？

今回は常時SSL化について、常時SSL化する必要性から実際の設定方法まで説明します！

 この記事では、エックスサーバー・Cocoonテーマを利用した常時SSL化について説明しています

常時SSL化ってどういうこと？

Webサイトには通常HTTPによる接続とHTTPSによる接続があります。

HTTPとHTTPSの接続の違いは、通信が暗号化されているかどうかの違いです。

SSL化とはHTTPSによって通信を暗号化させることを指します。

インターネット上で買い物をするときなど、住所やクレジットカード情報を入力しますが、お店以外の人に見られたら嫌ですよね？

そうならないように通信を暗号化して、第三者に読み取られないようにしています。

そして常時SSL化とは、サイト全体をSSL化することを指します。

常時SSL化するといいことがあるの？

ブログなどでは常時SSL化はどんな効果があるのでしょうか。

答えは、検索エンジンからの評価が上がるんです！

Googleが常時SSL化をランキングシグナルに使用すると明言していますので、やらないよりはやった方が評価が上がります。

他にも、以下のメリットがあります。

  • HTTP/2というプロトコルを利用することになり、ページの読み込み速度が上がる
  • サイトの信頼性が上がる（ユーザ的にも検索エンジンてきにも）
  • Webサイトが本物であることを証明できる（なりすましサイト防止）

対応するとアドレスバーが緑色になります。

常時SSL化してみよう

エックスサーバーとCocoonを利用して常時SSL化してみます。

エックスサーバーの登録、Cocoonの適用方法については以下の記事で説明しています。

WordPress使うならXSERVER！...でもエックスサーバーの何がいいの？
WordPress使うならXSERVER！...でもエックスサーバーの何がいいの？
2018.4.13
ブログやサイトを作るならまずはサーバを借りる必要があります。 様々なレンタルサーバサービスがありますが、その中でもXSERVER（エックスサーバー）は、WordPressを利用する...
【まとめ】WordPress入れたら最初にやるべき3つのこと！
【まとめ】WordPress入れたら最初にやるべき3つのこと！
2018.5.1
こんにちは。 WordPressを使えるようにしたはいいけど、次に何をしたらいいのかわからない、自分の最初はそうでした。 更新日時点で調査して実際に適用しているカスタマイズについて...

無料独自SSL申請をする(エックスサーバー)

エックスサーバーのサーバーパネルにログインします。

ドメインの項目からSSL設定をクリック

SSL化したいドメインで選択するをクリック

画面右下の独自SSL設定を追加する(確定)ボタンをクリック

取得完了までお待ちください。

完了しました。

記載の通り、設定されるまで1時間ほどかかる場合があるので、次の設定を行いましょう。

HTTPの接続をHTTPSに変更リダイレクトする(エックスサーバー)

http://gorogolog.info/でアクセスがあった場合に自動的にhttps://gorogolog.info/へ接続させるように設定を変更します。

エックスサーバーのサーバーパネルにログインします。

ホームページの項目から.htaccess編集をクリック

対象のドメインの横の選択するをクリック

.htaccessタブをクリックして、以下の文字列を追加します。

# BEGIN SSL Redirect
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
# END SSL Redirect
既存の設定を削除してしまったり、誤った設定を行うとサイトが表示されなくなるなどの不具合が生じる可能性があるため、全文をコピーするなどのバックアップを取ってから実施することを推奨します

プラグインを追加したりした場合に上書きされる可能性があるので、「# END WordPress」の下に追加するとよいと思います。

修正が完了したら、画面下部の.htaccessを編集する（確認）ボタンをクリック

修正内容に間違いがないことを確認して、画面下部の.htaccessを編集する（確定）ボタンをクリック

これでリダイレクト設定は完了です。

テーマでSSLを有効化する

WordPressにログインし、Cocoon設定をクリック

上部のタブからその他タブをクリック

内部URLをSSL対応（簡易版）にチェックを入れて変更をまとめて保存ボタンを押します。

これだけ！

WordPressの設定でサイトのURLをhttpsに変更する

WordPressにログインし、設定 -> 一般をクリック

以下項目のあなたのサイトURLをhttpsに書き換えて変更を保存してください。

  • WordPressアドレス（URL）
  • サイトアドレス（URL）

常時SSL化の確認とトラブルシューティング

ここまでで常時SSL化の設定は完了しましたので、実際にアクセスして確認してみましょう！

リダイレクト設定の確認

ブラウザでhttp://あなたのサイトURL/にアクセスして、自動的にhttps://あなたのサイトURL/になるか確認しましょう。

もしリダイレクトされない場合は、.htaccessの設定を見直します。

  • .htaccessファイルの修正はできているか
  • コピーした内容に間違いはないか（タグの閉じ忘れ等がないか）

SSL状態の確認

https://あなたのサイトURL/にアクセスしたときに画像の通りになっているか確認します。

問題ないパターン

一部問題があるパターン

引用元：IDEACD

SSL化自体失敗しているパターン

もし、問題・失敗しているパターンに当てはまる場合は、それぞれ次のことを確認してください。

一部問題があるパターン

自分も最初はこちらに該当していました。

httpのままCocoonテーマでカスタマイズや記事投稿を行っていた場合、画像がhttpで保存されていることが原因です。

下記の設定項目を見直して、http://～となっている部分をhttps://～に書き換えることで解決します。

  • サイト背景画像
  • ヘッダーロゴ
  • ヘッダー背景画像
  • OGPのホームイメージ
  • アピールエリア画像
  • トップへ戻るボタン画像
  • 404ページ画像
SSL化自体に失敗しているパターン

証明書の発行自体に失敗しているケースです。

エックスサーバー側で証明書の発行がまだできていない可能性もあるので、少し時間をおいてみて、それでもだめならエックスサーバーの無料独自SSL申請をやり直してみてください。

まとめ

以上で常時SSL化設定の説明は終わりです！

自分のサイトがHTTPSに対応しているってなんだか気持ち誇らしげですが、自分だけかな？ｗ

記事自体は長いですが、手順はそんなに難しくないので良かったら試してみてくださいね！

おすすめの記事