2017/11/07

ロリポップで提供されているSSLサーバ証明書を取得して常時SSL化をしたときの手順

Googleが推奨している常時SSL化ですが、面倒くさそうだとか、しなくても別に大丈夫だと思っていませんか?そんな常時SSL化を絶対に間違わない手順を説明します。

こんにちは、Webエンジニアのぷに(@DesignPuni)です。

僕はこのブログのサーバーをロリポップを使用しているのですが、なんと!2017年7月11日より無料で独自SSLが利用可能になりました。

これまで常時SSL化をするための証明書を取得するためには、年間数千円から数十万円もの費用が必要で1サイトごとに証明書が必要になるので多数のサイトを運営している場合、そこそこな固定料金となっていました。

無料で取得できるのならと、重たい腰を上げて、常時SSL化の対応に踏み切ったのです。

常時SSL化の手順

手順を間違えると、http//のページとhttps//のページが複数できてしまい、Googleから重複しているコンテンツとみなされインデックスや画像が消えてしまう事もあるので下記手順通り正しく丁寧に、1つずつしていきましょう。

「SSLサーバー証明書」の取得

まずは自身のサイトを常時SSL化をするためのSSLサーバー証明書を取得します。今回はロリポップにて無料で提供されているSSL証明書「Let’s Encrypt」を取得します。

ロリポップにログインして、サイドメニューのセキュリティー>独自SSL証明書導入をクリックします。

公式 : ロリポップ

ひとつの独自ドメインに対して、サブドメインも含め100件のSSLを設定できます。とあるので、ドメインとそのドメイン配下のサブドメインすべてにチェックを入れて独自SSL(無料)を設定するをクリックします。

5分ほどでSSL保護されるようになるのでURLをhttp://からhttps://に変更して確認しましょう。問題なければURLの左に鍵マークがつくようになり、安全なサイトである一つの指標にもなります。

Google chromeでの表示

Microsoft Edgeでの表示

WordPressの設定変更

WordPressを利用してWEBサイトを作っている場合、WordPress側にもURLが変わったことを伝える必要があります。

WordPressの設定>一般をクリック

WordPress アドレス (URL)とサイトアドレス (URL)のURLを「http://」から「https://」に変更します。※ここでの注意がsを大文字や記入間違えをするとWordPressにログインできなくなってしまうので間違いがないか必ず確認してから変更してください。

間違いがなければ、左下の変更を保存をクリックして完了です。

内部リンクの修正

リンクや画像のURLを確認し、「http://」のままの場合は全て「https://」に変更します。

jQueryなどで外部から読み込んでいる場合や、Twitterなどのシェアボタンなどもすべて変更が必要になります。。読み込みに「http://」のものが残っていると「このページは承認されていないソースからのスクリプトを読み込もうとしています。」といかにも、不安心を煽るような文面が出てくるので、チェックは念入りに行いましょう。

301リダイレクト設定

SSLページを作成したとき、もともとインデックスに登録されていたページは必要なくなりますよね。

そのまま放置してると同じ内容のページが2つ存在することになり、Googleに低品質名コンテンツとみなされる場合があるみたいなので、このページ「http://」とこのページ「https://」は同じページですよとGoogleに認識させ、「http://」にアクセスがあった場合、自動的に「https://」のページにリダイレクトするように設定を行いましょう。

.htaccessの作成

通常リダイレクト設定をする場合、.htaccessを作成することでリダイレクトをするように指示を与えます。

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

上のコードを書いて.htaccessと名前を付けて保存。トップページ(indexがある場所)にアップロードします。WordPressサイトの場合は