エックスサーバーのWordPressブログをSSL化してみたら案外カンタンでした

このブログはエックスサーバー&Wordpressで運用しているのですが、

実はまだSSL化していなかったんです。

 

やらなきゃなーって思いながら3,4年は経ってるかも(苦笑)

画像やCSS内のリンク等を「http」から「https」に変えなきゃいけないのかなーとか思っていたので。

面倒くさいと言うか、どうしたら良いか調べるのがそもそも面倒くさいというか。

それに、Google検索の順位落ちたりしたらイヤだなーとかも思っていたら、もうそろそろSSL化が必須になってきましたね。

 

でも、やってみたら意外とカンタンだったんですよー。

お盆休みを利用してやるぞーっと気合をいれて始めたら、半日で移行作業完了できたというお話です。

まだSSL化していない方はSSL化することをおすすめしたいです!

 

~もくじ~

スポンサーリンク

サイトのSSL化をするべき理由

そもそも、SSL化ってなんだろうというところなんですが、

SSLは「Secure Sockets Layer」の略で、通信を暗号化することでセキュリティを高めるプロトコルのこと。

サイトをSSL化するとは、サイトのアドレスの始まりを「http://」から「https://」に変更することを指します。

 

最近は、SSL化されていないサイトは、アドレスバーに

「保護されていない通信」や「安全ではありません」と表示されるようになりました。

 

MacやiPhoneのデフォルトブラウザ「サファリ」の場合は「安全ではありません」の表示

安全ではありません

Google Chromeの場合は、「保護されていない通信」って表示されます。(泣)

保護されていない通信

初めて訪れるサイトでこんな風に表示されるとちょっとドキドキしますよね。印象が良くないないですよね。うん、わかってる。でも個人ブログだとなかなか重い腰が上がらないんですよ。。。

 

GoogleサーチコンソールのヘルプにもHTTPSについて説明があります。HTTPSについて、もっと知りたい方はこちらもどうぞ。

サーバーで HTTPS を有効にする  |  Articles  |  web.dev
サーバーで HTTPS を有効にすることは、ウェブページを保護するうえで不可欠です。

 

サイトのSSL化をする手順

実際にエックスサーバーにインストールしたワードプレスのブログを、httpからhttpsにSSL化したときの手順を書いてみました。

 

まずは最初にバックアップ!(約5分)

何はともあれ、一番最初にすることはバックアップです!

とりあえず、エックスサーバーでバックアップをしておいてください。

 

バックアップするファイルは、各ディレクトリのファイル一式とデータベースの2種類あります。

エックスサーバーには自動バックアップ機能もありますが、私は手動でダウンロードしております。もし何かあったときに復元する方法がまだわかっていないので(自動バックアップができる前の手動時代に何回か復元したことがあります)

 

各ディレクトリのファイルのバックアップは、

エックスサーバーのサーバパネル>アカウント>バックアップ
該当サイトのダウンロードボタンを押すだけ

データベースのバックアップは

エックスサーバーのサーバパネル>データベース>MySQLバックアップ>現在のMySQLをダウンロード
該当サイトのデータベースのダウンロード実行ボタンを押すだけ

わたしは「圧縮しない」でダウンロードしています。

 

所有時間は5分程。

サイトのボリュームやネット環境によってはもっと時間がかかるかもしれません。

 

エックスサーバーの無料独自SSLの設定(約1時間)

バックアップが終わったら、次はエックスサーバーでSSL設定をします。

 

エックスサーバーが無料独自SSLがあります。

エックスサーバーにはオプション独自SSLという信頼性をもっとアピールできるサービスもあるのですが、個人ブログなら無料独自SSLで十分です。

もう、エックスサーバー様様です。(ありがとうーいつもお世話になっておりますー)

 

さて、手順ですが、

1.SSL設定をクリックする。

エックスサーバーのサーバーパネルから、ドメイン>SSL設定をクリックします。

エックスサーバーSSL化

 

2.SSLを設定するドメインを選択する。

設定したいドメインを選択します。

エックスサーバーSSL化

 

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

独自SSL設定追加のタブをクリックします。

エックスサーバーSSL化

 

4.サイトを確認して確認画面へ進む。

適応したいサイトを確認してから、確認画面へ進みます。

CSR情報はとくに設定なしで問題ありません。

エックスサーバーSSL化

5.追加するをクリック。

追加するをクリックすると「SSL新規取得申請中です。しばらくお待ち下さい。」と表示されます。

エックスサーバーSSL化

 

6.「独自SSL設定を追加しました」が出たら1時間待ちます!

「独自SSL設定を追加しました。」が表示されたらあとは待つだけ。

手順4のところで「最大で1時間程度かかります」と書かれていたのですが、本当に約1時間程かかりました。

エックスサーバーSSL化

 

7.SSL設定一覧で反映を確認する。

SSL設定一覧に戻り、一覧画面に反映待ちが表示されてたらOK。

反映されるまでは最大1時間ほどかかるとのことなので、1時間経ってから、画面を更新すると反映待ちがとれているはずです!

エックスサーバーSSL化

わたしの場合は、45分くらいで反映完了しました。

途中何度か更新して確認してたけど、やっぱり1時間程見ておいたほうがよさそうです。

 

8.反映待ちがとれたら設定完了!

反映待ちのアイコンがなくなったら設定完了です!!

 

エックスサーバーのマニュアルにも掲載されているのでこちらも参考にどうぞー。(先に言えー)

無料独自SSL設定 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|無料・無制限に利用可能な独自SSL「無料独自SSL」の設定手順に関するご案内です。

 

(番外編?)なぜかエラーが出たんですけど・・・

わたしの場合、最初に設定しようとしたときになぜかエラーが出てできませんでした。

エックスサーバーSSL化

サイト転送もアクセス制限もしていないのに・・・(T_T)

一旦あきらめて、2、3時間空けてから再度チャレンジしてみたら設定できました。サーバーの具合が悪かったのかな・・・とサーバーのせいにしておきます(笑)

 

httpsでアクセスしてみる(約5分)

SSLの設定で反映待ちがとれたなら、httpsでサイトにアクセスして確認してみます。

エックスサーバーSSL化

SSL設定のアドレスをクリックしてみて

サイトのアドレスの横に鍵マークがついていれば完了です。

Safariの場合

エックスサーバーSSL化

Google Chromeの場合

この接続は保護されています

 

あれ?鍵マークがついてない!?という場合は、WordPressのプラグインを使うと解決できます。

 

鍵マークがつかない場合は「Really Simple SSL」がおすすめ(約5分)

アドレスの横に鍵マークが付かない場合は、httpとhttpsの両URLが存在しているようです。(混合コンテンツ)

 

混合コンテンツについて詳しくはこちら

混合コンテンツとは  |  Articles  |  web.dev
混合コンテンツは、最初の HTML が安全な HTTPS 接続で読み込まれ、他のリソースは安全でない HTTP 接続で読み込まれるときに発生します。

 

これを解決するためには、プラグインの「Really Simple SSL」がおすすめです。こういうプラグインがあるにでワードプレスは便利ですね!

 

WordPressの管理画面のプラグイン>新規追加>キーワードに「Really Simple SSL」を入力して検索し、「今すぐインストール」を押すとインストールされます。

Really Simple SSL

プラグインを有効化し、SSLを有効化するボタンを押すと完了です。

 

Really Simple SSL

サイトを確認してみると、

エックスサーバーSSL化

鍵マークがついているはずです!

それでも鍵マークがつかなかったら・・・他の方法模索してください。(ごめんなさい。)

 

「.htaccess」ファイルを編集する(約5分)

今までのサイトのアドレス「http://~」から始まるアドレスとSSL化後の「https://」で始まるアドレスは別のページと扱われるのでリダイレクトが必要です。

リダイレクトには「.htaccess」ファイルを編集するのですが、エックスサーバーのマニュアルに設定の仕方がのっていますのでこちらの方がわかりやすいと思います。

 

Webサイトの常時SSL化

Webサイトの常時SSL化 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|Webサイトを常時SSL化する方法について記載しています。

「.htaccess編集」の設定の仕方

無料独自SSL設定 | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|無料・無制限に利用可能な独自SSL「無料独自SSL」の設定手順に関するご案内です。

 

サーバー管理の「.htaccess編集」にエックスサーバーのマニュアルの部分をコピペするだけでOKです。

ただし、一番上に入れてください!!「# BEGIN WordPress」の上に!

.htaccess編集 リダイレクト

ただし、このやり方だとサブドメインがある場合は、サブドメイン側もhttpからhttpsにリダイレクト設定されます。サブドメインがある方はもうひと工夫必要です。

 

設定完了したら次は確認ですね。

「http://~」のURLでアクセスすると、自動的に「https://~」のURLへ転送されているはず!

 

WordPress側の設定を変更する(約5分)

SSLの設定ができたら、Wordpress側の設定の変更が必要です。

 

WordPressの設定画面の設定>一般から「一般設定」画面に移動し、

WordPressアドレス(URL)サイトアドレス(URL)の「http」を「https」に変更し、設定完了ボタンを押します。

ここでうっかり間違えるとサイトや管理画面にログインできなくなる可能性があるので変更は慎重に!

Wordpress>一般設定

変更が完了すると、もう一度ログイン画面に移動されます。

 

ログイン画面や管理画面のURLもhttpsになっているはずです!

 

表示を確認する(約5分)

これでとりあえずSSL化が完了しました!

あとはサイトのデザイン等崩れていないか、混合コンテンツがないかのチェックですね。

トップページだけでなく、ブログ記事や固定ページなど、色んなページにアクセスして、鍵マークがついているか、デザイン崩れてないかなどを確認しておきましょう。

 

WordPressのサイトヘルスも今までさんざん「問題ある」って言われていたけど、「問題ない」になりました。よかったー。

WordPressサイトヘルス

 

Google Analyticsの設定を変更する(約5分)

プラグイン「Really Simple SSL」を設定したときにも言われましたが、

グーグルアナリティクスとサーチコンソール(旧ウェブマスターツール)の設定を忘れないで!

Really Simple SSL

 

グーグルアナリティクスの設定はカンタン!

URLを2ヶ所変更するだけです。

グーグルアナリティクス

1つめ:グーグルアナリティクスの管理>プロパティ設定>デフォルトのURL
2つめ:グーグルアナリティクスの管理>ビューの設定>ウェブサイトのURL

グーグルアナリティクス

どちらも「https://」を選んで保存ボタンを押して完了です。

保存を押すのを忘れずに!(忘れがち・・・)

設定したらもう一回設定内容を確認しておきましょう。

 

Google Search Consoleの設定を追加する(約5分)

グーグルアナリティクスとは違い、サーチコンソールはプロパティを追加する必要があります。

なぜならサーチコンソールのヘルプに書いてあるからです!

Search Console に HTTPS のプロパティを追加します。 Search Console では HTTP と HTTPS を別々に扱うため、このプロパティのデータは Search Console で共有されません。そのため、両方のプロトコルのページを用意する場合は、Search Console でそれぞれのプロパティを指定する必要があります。

詳しくはサーチコンソールのヘルプへどうぞ。

サイト・ホームページ移行について | Google 検索セントラル  |  ドキュメント  |  Google for Developers
ドメイン変更、URL 変更を伴うサイト移転方法をご覧ください。Google 検索結果への影響を抑えながら移行する、SEO のベスト プラクティスを解説します。

 

兎にも角にも、サーチコンソールにプロパティを追加します。

 

1.プロパティを追加を押す

グーグルサーチコンソールのプロパティを追加を押します。

サーチコンソールプロパティ

 

2.プロパティタイプを選択します。

2019年3月頃にサーチコンソールが新しくなってからプロパティを登録したことがないのでよくわからないのですが、プロパティにドメインタイプが新しく追加されました。

 

ザックリいうと、ドメインはすべてのサブドメインもあわせて管理できるというところ、URLプレフィックス(従来)は指定のアドレスのURLのみが管理できるというところが違います。

 

グーグルさん的には『今後は可能な限りドメイン プロパティを使用することをおすすめします。』とのこと。本来はドメインプロパティの方が良いかもしれませんね。

Search Console の新機能ドメイン プロパティをご紹介します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

 

私の場合はサブドメインで違う毛色のサイトを作成しており、管理は分けたいのでURLプレフィックスにしています。

サーチコンソール

URLを入力して続行を押すと

サーチコンソール

所有権を自動確認してくれました。

前のhttp://のときに所有権を確認してあるからですね。

 

一応http://www.~の方も登録しておきました。

 

Google Search Consoleのサイトマップを追加する(約5分)

グーグルサーチコンソールにサイトマップを追加するのを忘れずに!

サイトマップ

あとはデータ反映待ちですね。

検索ランキングが下がらないことを祈ります・・・ドキドキ。

 

Google AnalyticsでSearch Consoleの設定をする(約5分)

今度はグーグルアナリティクスとサーチコンソールの連携の設定を変更します。

 

サーチコンソールの変更は、グーグルアナリティクスの管理>プロパティの設定にあります。

サーチコンソールを調整

サーチコンソールの設定画面で、http://~のURLを削除し、https:~のURLに変更します。

サーチコンソールの調整

連携しているだけだから、これまでのデータが見えなくなっちゃうんですね・・・(T_T)

うーん、まぁこれまでのデータはサーチコンソール側で見えるから良いかな。

 

Googleアドセンスの設定を確認する(約5分)

一応Googleアドセンスの設定も確認しておいたほうが無難かなと確認しておきました。

確認方法は、広告の上で右クリックして要素の詳細を表示(ブラウザはSafari)で広告画像のURLがhttpsになっているかを確認しました。(めっちゃアナログ)

とくに問題なさそう。

 

おまけ:サイトヘルスでなぜか301リダイレクト無効って言われる

すべての設定が終わって、WordPressのサイトヘルスステータスを見てみると、「良好」になっているのに、なぜか「301 .htaccess リダイレクトが無効です。」って言われるんです。

 

サイトヘルス 301リダイレクト無効

http://~にアクセスしたらちゃんとhttps://~にリダイレクトされているのに。

.htaccess編集でちゃんと301リダイレクトの表記あるのにもかかわらず、です。

 

(´・ω・`)うーん、なんじゃらほい。

 

有効化のリンクを押したほうがよいのかもしれませんが、わたしはサイトヘルスチェックがおかしいんじゃないかと思うので、一旦そのまま置いています。まぁ良好だし。

プラグイン「Really Simple SSL」と「.htaccess」がケンカしてるんじゃないかなーと勝手に思っています。

 

SSL化は環境のおかげで意外とカンタンだった

今回のこのブログのSSL化ですが、調べながらでだいたい2時間位で設定できました。

これは、エックスサーバーのマニュアルがわかりやすいこと、設定がカンタンにできること、WordPressのプラグインが優秀なおかげなのかなと思っています。

 

エックスサーバーで良かったー。(謎のエラーでてたけど)

エックスサーバーは4年位利用していますが、けっこう満足しています。

シンプルなのが( ・∀・)イイ!!

 

さて、残りは・・・というか問題は、かな。

Googleサーチコンソールがどのようになるのか、Google検索がどうなるのかがちょっと心配です。

 

様子を見つつ、ある程度(1ヶ月位?)データが取れたらこの続きを書きたいと思います。

それでは、ごきげんようー!

コメント

タイトルとURLをコピーしました