【初心者向け】SSL化(HTTPからHTTPS)に切り替える方法まとめ | WordPress/さくらサーバー

Yasu
こんにちは!「Tekito+Style.me」を運営しているYasu(@98nasi_nori)です。普段は都内でWebディレクターなどをしています。

本ブログは当初は「http://〜」で運営を開始してきました。しかしGoogleが常時SSL化(https://〜)を推奨している点やセキュリティ面、またサイトへの信頼性を担保するためにHTTPSに切り替えたいとずっと思ってました(本来であればサイト運営開始と同時に設定しておくべきでしたが・・)。

色々と設定や手順が面倒くさくてしばらく放置してたのですが、つい先日重い腰を持ち上げSSL化することに。

ついでにSSL化する手順を調べて整理したので、現状ワードプレスでブログを運営している方でHTTPからHTTPSに切り替えたい方(サーバーはさくらのレンタルサーバーを想定)に向けて、情報を共有できればと思います。プラグインなどを用いれば意外とサクッとできますよ!

https://〜(常時SSL化)とは?

HTTPSは「HTTP over TLS」の略で、TLS(Transport Layer Security)上でHTTPを使うプロトコルのこと。

正直よく意味が分からないかと思いますが、HTTPS通信では通信データを暗号化しデータの中身を見られなくしたり、データの改竄を防いだりと、サイトのセキュリティを向上してくれるものと、今はいったん理解しておきましょう。

「http://~」でアクセスできるページは暗号化されていない状態です。インターネット上で通信データが誰にでも見れてしまうので、セキュリティ面で好ましくありません。ですので現状多くのサイトがHTTPSに移行しています。

HTTPS化するメリットは?

SSL化(https://〜)に対応することで、ユーザーがサイト上で打ち込んだパスワードやクレジットカード情報など、重要なデータが外部に漏洩することを防いでくれます。

またHTTPSに対応しているサイトは、安全な通信ができている旨をブラウザ上に鍵のアイコンが表示されます。ですので、そのサイトを閲覧しているユーザーに安心感や信頼感を提供することに繋がります。

さらにGoogleによると、HTTPSに対応したページが優先的にインデックスに登録されるため、SEOにも多少なりとも有利に働く可能性があります。Googleとしても、ユーザーがSSL対応していないサイトを訪問することで、危険な攻撃を受けるリスクを減らしたいのでしょう。

参考: ウェブマスター向け公式ブログ

HTTPS(SSL化)に対するイメージがなんとなく掴めてきたところで、いよいよ具体的な手順についてご紹介していきます。

SSL化ステップ(1) バックアップを必ず取る

まずSSL対応する前に、一応サイトのバックアップを取っておきましょう。万が一手順を間違えてデータが吹き飛ばないように、バックアップを取っておくと安心です。

WordPressのバックアップには、「UpdraftPlus」というプラグインがおすすめです。とても簡単にデータのバックアップと復元ができるツールです。

UpdraftPlus公式サイト:https://updraftplus.com/

1-1 UpdraftPlusのインストール

UpdraftPlusのインストール

UpdraftPlus は公式プラグインとして登録されているので、WordPressの管理画面で簡単に導入することができます。
管理画面のメニュー「プラグイン」欄の「新規追加」から、UpdraftPlusで検索。「いますぐインストール」をクリックし、有効化します。

1-2 設定欄からインストールされてるか確認

UpdraftPlus Backups

インストール化完了していると、管理画面の設定欄に「UpdraftPlus Backups」が追加されているのでクリックしましょう。

1-3 さっそくバックアップ開始

UpdraftPlus Backups

UpdraftPlusを開き、「今すぐバックアップ」をクリックすると、モーダルでバックアップ内容を選択できます。

UpdraftPlus Backups

バックアップしたい項目にチェックし、バックアップを開始します。データベースとファイルの両方にチェックを入れておきましょう。

UpdraftPlus Backups

するとバックアップ完了までのゲージが表示され、完了すると通知されます。

UpdraftPlus Backups

1-4 バックアップされてるか確認

UpdraftPlus Backups

バックアップが完了すると、「バックアップ済み」の欄にバックアップした日付と項目が表示されます。これにてバックアップの下準備は完了。またデータを復元する際は、「復元」ボタンを押し、復元したい項目を選択することで簡単に復元することが可能です。

今回に限らず、バックアップはこまめに取っておくのがおすすめです。

詳細は以下から↓

バックアップ専用プラグインUpdraftPlusの使い方・設定方法まとめ

2019-09-11

SSL化ステップ(2) さくらサーバー側でSSL化の設定

バックアップの下準備が整ったら、いよいよHTTPS対応を進めていきます。ここもさくらサーバーを使っている方なら簡単に進めていくことができます。

2-1 コントロールパネルにログイン

まずはさくらサーバーのコントロールパネルに、IDとパスワードを入力しログインします。

2-2 ドメイン設定の欄「ドメイン/SSL設定」をクリック

さくらサーバーでのSSL化対応

コントロールパネスの左側メニューにある、「ドメイン設定」の欄に「ドメイン/SSL設定」の項目があるのでクリック。

2-3 ドメイン一覧の対象ドメインの「登録」をクリック

さくらサーバーでのSSL化対応

ドメイン一覧にあるSSL対応をしたいドメインを確認。そのドメインのSSL > 証明書欄にある「登録」のリンクをクリックし次に進みます。

2-4 「無料SSLの設定へ進む」をクリック

さくらサーバーでのSSL化対応

SSLサーバ証明書概要の欄にある、「無料SSLの設定へ進む」をクリックします。

2-5 無料SSL証明書について「無料SSLを設定する」へ進む

さくらサーバーでのSSL化対応

無料SSL証明書について、が表示されるので「無料SSLを設定する」へ進んで下さい。

2-6 メールでSSL証明書発行完了の連絡が来るまで待機

さくらサーバーでのSSL化対応

すると、無料SSL証明書を発行手続き中と表示されます。

さくらサーバーでのSSL化対応

発行が完了すると、登録しているメールアドレスに「[さくらインターネット]SSLサーバ証明書発行のお知らせ」というタイトルの通知が来ます。

僕は日曜の19時20分ごろに設定をし、連絡が来たのが19:30ごろだったので、通知が来るまでおよそ10分くらいでしたね。これにてサイトのHTTPS化は完了です!かなり簡単ですよね。

場合によっては通知が来るまで数時間かかることもあるみたいので、しばらく待ってみましょう。

SSL化ステップ(3) SSL証明の設定ができているか確認

上記の手順まで進めることができたら、実際にサイトがSSL対応されているか確認してみましょう。

場合によってはエラーが発生していて確認が取れないケースもあるので、その場合の対応は後ほどご紹介します。ここではいったん「https://」でアクセスできるか否かをざっと確認します。

3-1 さくらサーバーのコントロールパネルで確認

さくらサーバーでのSSL証明の確認

さくらサーバーのコントロールパネル側で、先程SSL化対応をした対象ドメインのSSL欄に「更新」が表示されているのか確認してみます。表示されていれば問題ありません。

3-2 「https://」でアクセスできるか確認

ブラウザでのSSL化対応の確認

実際にブラウザで「http://」ではなく、「https://」でアクセスすることができるか確認してみましょう。問題なければ上記のように「この接続は保護されています」を表示されます。

ブラウザでのSSL化対応の確認

HTTPSでアクセスできるものの、「このサイトへの接続は完全には保存されていません」と表示される場合は、何かしらのエラーが発生しているか、部分的にSSL化に対応できていない可能性があります。別途問題点を洗い出し個別に対応(ページごと、エラー箇所ごと)する必要がありますが、ひとまずHTTPからHTTPSへ移行はできているので、いったん次のステップに進みましょう。

SSL化ステップ(4) リダイレクト設定とリンクの置換

ここまでのステップで、レンタルサーバーにSSL証明書がインストールされ、SSLを利用できる状態になっています。ただし、「http://〜」と「https://〜」の両方のURLからアクセスできてしまうという問題があります。せっかくSSL化対応したのにhttpでアクセスできてしまえば、セキュリティ面でも意味がありません。

そこで従来のリンク「http://〜」でアクセスしてきたユーザーを、「https://〜」のURLに強制的に飛ばす処理、リダイレクト設定を行う必要があります。適切にリダイレクト処理をすることで、「http://〜」のURLが持っていたリンクパワーも、新規URLである「https://〜」の方に引き継げるので、リンクを変えたことによるSEO面でのデメリットも最小限にできるはずです。

また検索結果でヒットするページのURLも「http://〜」から徐々に「https://〜」に切り替えていくことができます。本ブログの場合は、およそ1〜2週間くらいで切り替わっていきましたね。

さくらサーバーでWordPressを運用している場合、このリダイレクト処理はプラグイン「SAKURA RS WP SSL」で簡単に行うことができますので、こちらを活用していきましょう!

プラグイン「SAKURA RS WP SSL」とは?

「SAKURA RS WP SSL」はさくらレンタルサーバー上のWordPressサイトの設定を変更して、常時SSL化を簡単に行えるプラグイン。

サイトを常時HTTPS化に対応すると同時に、初心者がとっつきにくい「.htaccess」ファイルを編集し、従来のURL「http://〜」へのアクセスを「https://〜」に自動でリダイレクトしてくれます。

またサイト内URLも画像のリンクなども含め「http」から「https」に一括置換してくれます。見落としも少なく、一気にできるので、かなり便利なプラグインです。

それでは使い方を確認していきましょう!

4-1 プラグイン:SAKURA RS WP SSLをインストール

SAKURA RS WP SSLのインストール

WordPressの管理画面のプラグイン欄から、「SAKURA RS WP SSL」で検索し、「今すぐインストール」をします。

SAKURA RS WP SSLのインストール

インストールが完了したら「有効化」しましょう。

SAKURA RS WP SSLのインストール

有効化すると、ダッシュボードの設定欄にある「SAKURA RS SSL」の項目が追加されています。

4-2 プラグインを開き、SSL化の設定

SAKURA RS WP SSLの設定

プラグインを開き、記載さてれている項目確認します。良ければ下記2つのチェックボックスにチェックを入れます。

・共有SSLを利用している、もしくはSSL証明書をレンタルサーバコントロールパネルから設定した
・実際にSSLを利用してサイトと管理画面へアクセスできる。

4-3 SSL化の実行

SAKURA RS WP SSLの実行

「SSL化を実行する」をクリック。これにてHTTPSへの変更とリダイレクトリダイレクト処理は完了です。このようにプラグインを利用すればかなり簡単に設定することができますので、初心者の方でも安心です。プラグインを利用しないで設定する方法に関しては、また別途ご紹介します。

SSL化ステップ(5) SSL化設定とリダイレクト処理の確認

WordPressのSSL化、およびリダイレクト処理が完了したら、実際に変更が反映されているのか確認してみましょう。

5-1 ダッシュボードの一般設定の確認

WordPressの一般設定

ますはWordPressの一般設定欄をクリックし、

・WordPressのアドレス
・サイトアドレス

のURLがHTTPではなく、HTTPSに変更されているかを確認します。変更されていればOKです。

5-2 リダイレクト処理の確認

実際にhttpのURLにアクセスしてみて、httpsのURLにリダイレクトされるか確認してみます。サイトTOPだけでなく、記事コンテンツのURLなども一通り確認してみて、適切にリダイレクトされていれば確認完了です。

SSL化ステップ(6) ブラウザでセキュリティー状態をチェック

ここまでの設定を行うことでhttpsにアクセスしても表示はされるのですが、サイトの状態が完全にSSL化されていない場合も多いかなと思います。

ブラウザでのSSL化の確認

httpsでGoogle Chromeなどのブラウザでアクセスしてみて、チェックしてみてください。完全にSSL化されているサイトは鍵のアイコンが表示されます。

ブラウザでのSSL化の確認

完全にSSL化対応していない場合は、上記のように「このサイトへの接続は完全には保護されていません」と表示されます。その場合、エラーを1つ1つチェックし、解決していく必要があります。

参考:Google Chrome ヘルプ「サイトの接続が安全かどうかを確認する」

6-1 デベロッパーツールを開く

Google Chrome デベロッパーツール

ここではGoogle Chromeのデベロッパーツールを使ってエラー箇所を確認してみます。完全にSSL化対応していないページを開き、

Chrome メニューの「表示」> 開発/管理 > デベロッパーツール をクリック。

6-2 console欄でエラー箇所を確認

Google Chrome デベロッパーツール

デベロッパーツールが表示されたら、「Console」の項目を確認します。エラー箇所を特定することができます。

今回TOPページで表示されているエラーメッセージを確認してみると、画像のURLでHTTPからHTTPSの変更漏れがあったようです。HTTPSでアクセスしたけど、ページ内にHTTPでアクセスできる画像URLがあったことが完全にSSL化されない要因のようです。

画像のURLをよく見てみると、

・ロゴ画像のURL
・ヒーローエリアの画像URL

がhttpになっています。この画像は記事内ではなく、WordPressのウィジットで設定した画像でした。このように、WordPressでプラグインを使いHTTPSに切り替える際によくエラーの原因になるのは、

・テーマの外観 > ウィジェット内の画像URL
・別のプラグインで設定されたURL
・記事コンテンツの中で設定したリンクや画像URL
・WordPressテーマファイル内に直接記述されたURL

などです。SSL化対応時にエラーとなる場合は、まず上記を疑ってみて下さい。

6-3 エラーの修正対応

WordPressでウィジット編集

現在僕が利用しているWordPressテーマのウィジット編集画面で、ロゴとTOPイメージを再度アップロードし公開しました。これでHTTPで登録されていた画像がHTTPSのURLに切り替わったはず。

6-4 ブラウザで再度確認

ブラウザでのSSL化の確認

改めてブラウザでHTTPSでアクセスし確認してみると、正常にSSL化されていました。このように正常にSSL化されない場合は、デベロッパーツールでエラー箇所を特定し、個別に調整していく必要があります。

このあとTOPページ以外にも、個別の記事ページで正常にSSL化されていない箇所があったので、画像URLの差し替えなど何箇所か修正対応をしました。

SSL化ステップ(7) 連携しているサービス・ツールの設定変更

サイトをHTTPS化した場合、サイトに紐づけているツールやサービスで指定しているURLも変更する必要があります。ここでは多くの人が設定しているであろう「Google Analytics」と「Google Serch Console」の設定変更方法をご紹介します。

7-1 Google Analyticsの設定変更

Google Analyticsの設定変更

Google Analyticsでは、デフォルトのURL設定を切り替える必要があります。まずアナリティクスにログインしたら、管理 > プロパティ設定を開きます。

Google Analyticsの設定変更

デフォルトのUR欄を「http」→「https」に変更し、保存をクリック。これで設定変更は完了です!

Google Analyticsの設定変更

7-2 Search Consoleの設定変更

サイトをHTTPS化した場合、Google Search Consoleではゼロから再び登録し直するしかないようです。やや手順が長くなってしまうので、別記事でまとめてご紹介させていただきます。以下記事を参考にしてみて下さい。

SSL化(HTTPからHTTPS)に伴うSearch Consoleの再設定方法まとめ

2018-11-23

SSL化ステップ(8) SNSのシェアカウントを引き継ぐ

SNS Count Cache

HTTPS化に伴いサイトのURLが変更されたことで、これまでHTTPのURL別に紐付いていたシェア数などもリセットされてしまいます。

しかしプラグイン「SNS Count Cache」を利用することで、そのSNSシェア数もHTTPからHTTPSへ簡単に引き継ぐことができます。

8-1 SNS Count Cacheのインストール

SNS Count Cache

まずは例のごとくWordPressの管理画面のプラグインの欄から、SNS Count Cache検索しインストール。インストールが完了したら、有効化しましょう。

8-2 設定画面へ

SNS Count Cache

管理画面の左メニューにあるSNS Count Cache > 設定をクリック。

8-3 設定の更新

SNS Count Cache

設定画面に来たら、「HTTPからHTTPSへのスキーム移行モード」の欄がデフォルトでは「無効」になっているので、これを「有効」に変更します。有効に変更したら「設定の更新」をクリックします。

8-4 更新されていることを確認

SNS Count Cache

更新が無事完了すると、上記の画面が表示されます。これでSNSシェア数もHTTPSのリンクに紐づけ直されているはずです。

SSL化ステップ(9) Search Console でFech as Google

Search Console でFech as Google

これで本当の最後のステップです。SSL化に伴いURLも変わっているので、SEO対策で早めにGoogleに変更されたページをクロールしてもらうべく、サーチコンソールでURLごとにFech asしておくと安心です。主要なコンテンツ、できれば全てのURLを送信しておきましょう。

サーチコンソールのメニュー > クロール > Fetch as Google を開きます。クロールさせたいURLを1件ごとに入力し、「取得」をクリックします。ここで完了ではなく、取得されたURLの横に「インデックス登録をリクエスト」と表示されるのでクリックします。するとステータス欄が「完了」となるので、これで登録されました。

一度に大量のURLは送信できないので(1日10件まで送信可能)、1日ごとにちまちま進めるのがベストです。地道な作業ですが、やっておくに越したことはないです。

まとめ

いかがでしたか?SSL対応する手順をここまで確認してきました。

やることは結構多いですが、WordPressとさくらサーバーを使っている場合は、プラグインを使うことでかなり簡単に移行することができるようになっています。ぜひ活用してみてください。

そしてそもそもサイトをリリースする前にSSL設定をしておく方が、面倒な設定をし直さなくて済むので、これから公開予定の方はぜひ早めの対応を!

また僕はSSL対応すると同時に、パーマリンクの構造も見直し設定し直したので、ぜひご参考下さい ↓↓

WordPressの記事URL(パーマリンク)を変更しリダイレクトする方法まとめ

2018-12-15

SSL化する際にサーチコンソールも再設定する必要があります ↓↓

SSL化(HTTPからHTTPS)に伴うSearch Consoleの再設定方法まとめ

2018-11-23








Aboutこの記事を書いた人

「Tekito+Style.me」の中の人。都内で働くWebディレクター/マーケター。早稲田大学卒。時々旅人な27歳です。主にサービスの企画・ディレクション、グロースハック、SEO対策、UX設計などしてます。開発やデザインも細々と挑戦してます… 学生時代は世界一周してました(過去約40ヶ国訪問)。お気に入りの国はベトナム、モロッコ、台湾など。南国のビーチでまったり余生を過ごしたい派。好物はビールと生ハム、あとカニカマ。