無料SSL証明書でサイトをHTTPSに移行しました

https image

Googleのランキングにも良い影響があると言われているSSL化を私のサイトでも行いました。SSLの導入からhttpsでアクセスするための設定まで、一連の導入手順をご紹介します。

最近ではSSLが使えないサイトではブラウザから「安全ではないサイト」などと言われるようになりました。SSLをサイトに導入して、httpsプロトコルで通信ができるようになれば、アクセスするユーザの通信を安全に保護することができます。

コンテンツ

https化の手順

サイトをhttpsでアクセス可能にするには以下のようなステップを踏みます。

  1. SSL証明書の有効化
  2. WordPress URLの変更
  3. 内部リンクのhttps化
  4. 外部リンクのhttps化
  5. 301リダイレクト設定
  6. Google Analyticsの設定
  7. Search Consoleの設定

以下順番に説明していきます。

SSL証明書の有効化

サイトをhttps化するためにはサイトのSSL証明書が必要です。

最近は無料のものも提供されており、ちょうど私が使っているホスティングサービスであるBluehostからも提供が開始されましたのでそれを利用しました。

具体的な手順は以下の説明が詳しいのですが、自サイトのcpanelにログインし、securityの項目からSSLを選択、「Free SSL」のスイッチをonにするだけです。

https://my.bluehost.com/cgi/help/free-ssl

証明書のインストールと有効化には数時間かかるという記載もありましたが、以降の設定はそれほど時間をおかずに順次行っていきました。

WordPress URLの変更

WordPressのダッシュボードからサイトのURLにhttpsを使うように設定します。

ダッシュボードの「設定」→「一般」を選択して現れる一般設定画面で、WordPress アドレスとサイトアドレスを変更します。

具体的には以下のように、今までhttpであったものをhttpsに変更することになります。

WordPressのURL変更

内部リンクのhttps化

記事の中で自サイト向けURLをhttpを含めて記載していればこれをhttpsに変更します。

サイト内へのリンクであれば、httpといったプロトコル部分の記載を省くプロトコル相対URLやドメイン部分を省く相対URLで記載しても良いでしょう。

私の場合は記事数が少なかったので自分で編集して更新しましたが、数が多い場合はReally Simple SSLといったプラグインを使う手もあるようです。

なお、サイト内の画像リンク(imgタグのsrc)も変更が必要かと思いましたが、これはWordPress側で変更してくれていました。

外部リンクのhttps化

内部リンクと同様、サイト外へのリンクも可能な範囲でhttpsに置き換えます。

テキストウィジェット中に記載している外部リンクにも注意しましょう。私の場合、サイドバーに表示しているfeedlyの登録ボタン中のsrcタグにhttpを指定したままで、当初はページが完全httpsにならず悩みました。

301リダイレクト設定

これまでの設定で、httpsのアドレス指定で正しくブログにアクセスできることが確認できたら、元のhttpプロトコルでアクセスしてくるトラフィックをhttpsに誘導します。このためには「301リダイレクト」という設定を行います。

具体的には、WebサーバーのDocument Rootディレクトリにある .htaccess に以下の内容を記載します。

RewriteEngine On
RewriteCond %{HTTPS} !=on [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
RewriteBase /

1行目の設定など、すでに記載されている場合は変更する必要はありません。

正常にリダイレクトされているかどうかはURLにhttpプロトコルを指定してアクセスしてみると良いでしょう。正しくリダイレクトされhttpsのサイトが表示されればOKです。より詳しい方法は、本記事末尾の最終確認の項目でも紹介しました。

Google Analyticsの設定

Googleが提供しているこれらのツールはサイト表示に直接関わるものではありませんが、https化に当たって設定の変更が必要になります。

Google Analyticsはサイトのプロパティ設定で「デフォルトのURL」をhttpsに変更します。下図のようにURL表記のすぐ左のプルダウンメニューからhttpsを選択します。

Google Analyticsの設定

Search Consoleの設定

Google Search Consoleについては新たにサイトを登録することが必要です。

Search Consoleのホーム画面で「プロパティの追加」を選択、現れる画面で以下の様にhttps付きの新しいURLを登録します。

Search Consoleの設定

最終確認

完全httpsアクセスの確認

ページ上のすべてのコンテンツにhttpsでアクセスできているかの確認です。

ページのhttps化がうまく行われていれば、ブラウザのアドレスバーの左側に以下のような表示が出ています。(ブラウザがchromeの場合です)

正常なHTTPS

一方、下の画像の様にhttpsでアクセスしているにもかかわらず、「保護された通信」の表示が出ない場合があります。

不完全なHTTPS

これはページ上でhttpsとhttpのコンテンツが混在しており、完全httpsになっていない状態です。外部リンクや内部リンクがhttpのままになっていないか、再度チェックしてみましょう。外部リンクのhttps化の項目でも述べましたが、特にウィジェットで指定しているリンク先の修正は見落としがちです。

301リダイレクトの確認

最後に、httpからhttpsページに301リダイレクトが行えているかどうか確認します。これにはGoogle Search Consoleのフェッチ機能を使うと便利です。

もとのhttpアドレスで登録しているサーチコンソール画面から、左側にあるメニューの「クロール」→「Fetch as Google」と進み該当するアドレスを入力してページを取得します。

正常にリダイレクトされていれば、リダイレクトされた旨の表示がされるはずです。詳細画面を見ると、例えば以下のような感じで301リダイレクトされていることが分かります。

301 Redirect Message

おわりに

以上サイトをhttps化するための手順についてご紹介しました。

SSL化によりサイトの安全性が向上すると、Googleのランキングにも良い影響があると言われています。皆さまのサイトでも試してみてはいかがでしょうか。


[参考]

How to Add Free SSL in WordPress with Let's Encrypt
Do you want to add a free SSL certificate to your WordPress site? Learn how to easily add free SSL in WordPress with Let's Encrypt.