エックスサーバー(XSERVER)でWordPressサイトを常時SSL化(https)する方法 ホームページ制作 | 墨田区

エックスサーバー(XSERVER)でWordPressサイトを常時SSL化(https)する方法

LINEで送る
Pocket

エックスサーバー(XSERVER)でWordPressサイトを常時SSL化(https)する方法です。
エックスサーバー(XSERVER)でWordPressサイトを常時SSL化(https)する方法

エックスサーバーでは、全プランで「独自SSLが無料」で使えるようになりました。しかもサイト数無制限という太っ腹ぶり。これはWebサイトの運営をしているものとしてはうれしいサービスですね。

Google は常時 SSL 化を推奨しています。最新の Google Chrome では、SSL 化していない Web サイトで警告が表示されるようになっています。また、「HTTPS対応したページを優遇する」というコメントからも、SEO対策に若干の効果があることが予想されます。
Chrome 68リリースで常時SSL化は必須となる!

当サイトもエックスサーバーが「独自SSLが無料」となった際に常時 SSL 化しましたので、その手順をまとめておきました。

これからエックスサーバーで常時SSL化を検討されている方のお役にたてればうれしいです。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


SSL化する日時を検討する

まずは SSL 化する日時を決めておきましょう。

エックスサーバーで SSL 設定をするのはボタン一つポチっとするだけなので超簡単なのですが、SSL 設定の反映には1時間程度かかります。その間も http:// でのアクセスはできるので、Web サイトが閲覧できなくなることはありません。

しかしながら、万が一作業に手違いがあったり、不測の事態が生じたりした場合は、SSL化前に戻さなくてはなりません。そうすると、一時的に Web サイトが閲覧できなくなる可能性があります。そのため、多くの方が見に来られる時間帯は、できるだけ避けた方がいいと思います。

このサイトはIT技術系の情報を多く掲載していることもあり、平日日中のアクセスが多いです。逆に休日は少し落ち着いています。連休中の夜間などはかなり低くなります。なので、このサイトの SSL 化は連休最終日の夜間におこないました。

アクセスの多い時間帯などは Google アナリティクス で調べられますので、一度チェックしてみてください。

そんな訳で SSL 化の日時については、皆さんも十分に検討してくださいね。


バックアップをとる

不測の事態が生じた際に元に戻せるよう、まずはバックアップをとります。後述しますが、記事の中を一括編集するので、最低限データベースのバックアップが必要となります。

WordPress プラグインの BackWPup をインストールして対応します。
WordPressプラグインのBackWPupをインストールする

既にインストールされている場合は、この作業は不要です。有効化されていることだけ確認しておいてください。

WordPress 管理メニューより、「BackWPup」-「ダッシュボード」を選択し、画面中央の「データベースのバックアップをダウンロード」をクリックします。
BackWPupでデータベースのバックアップをダウンロードする

「.sql」という拡張子のファイルがダウンロードされるので、適切な場所に保管しておきましょう。

復元方法はここでは割愛しますが、「Wordpress BackWpUp 復元」とかで検索してみてください。不測の事態に備え、事前に復元手順を頭に入れておくことをおすすめします。

後述しますが、テーマの変更をおこなう可能性もあるので、テーマのバックアップもあると安心です。


エックスサーバーでSSLの設定をする

バックアップが終わったらエックスサーバーで SSL の設定をおこないます。エックスサーバーの サーバーパネル へログインしましょう。
https://www.xserver.ne.jp/login_server.php

ログインしたら、サーバーパネル左の設定対象ドメインで SSL 化するドメインを選択します。
XSERVERサーバーパネルでドメインを選択する

次に、サーバーパネル右の「ドメイン」欄より、「SSL設定」をクリックします。
XSERVERサーバーパネルでドSSL設定をクリック

「SSL設定」画面から、「独自SSLの追加」タブをクリックし、「サイト」欄のURLが目的のものかを確認して、「独自SSL設定を追加する(確定)」をクリックします。この時、「CSR情報(SSL証明書申請情報」へのチェック不要です。
XSERVERサーバーパネルで独自SSL設定を追加する

「独自SSL設定を追加する(確定)」をクリックすると、「SSL新規取得申請中です。しばらくお待ちください。」のメッセージが出ますので、そのまましばらく待ちましょう。
XSERVERサーバーパネルでSSL新規取得申請中となる

申請が完了すると、下図のようなメッセージが表示されます。
XSERVERサーバーパネルで独自SSL申請完了

SSL設定が反映するまで、最大1時間程度かかるようですね。

「SSL設定の一覧」タブをクリックすると、「標準独自SSL一覧」に https:// になった URL が表示されます。
XSERVERサーバーパネルの標準独自SSL一覧

リンクをクリックすると、ブラウザでエラー画面が表示されます。先のメッセージの通り、SSL の反映に1時間くらいかかるので、しばらく待ちましょう。この間も「http://」でのアクセスはできますので、Web サイトが閲覧できなくなるようなことはないので安心してください。

・Internet Explorerのエラー
SSL申請後のブラウザでアクセスエラー Internet Explorer

・MS Edgeのエラー
SSL申請後のブラウザでアクセスエラーMS Edge

・Google Chromeのエラー
SSL申請後のブラウザでアクセスエラーGoogle Chrome

・Firefoxのエラー
SSL申請後のブラウザでアクセスエラーFirefox

上図のエラーが表示されなくなるまで待ちましょう。

このサイトの場合、40分程度かかりました。それまで心配で心配で、頻繁に F5 キーを押してましたよ。(笑
SSL設定後のサイト確認


WordPress一般設定からアドレス(URL)を変更する

Wordpressの管理画面から「設定 」-「一般」を開いて、「一般設定」にある「WordPressアドレス(URL)」「サイトアドレス(URL)」のURLを「http」から「https」に変更します。
WordPressの一般設定からURLを変更する

画面へ行き、「変更を保存」ボタンをクリックして適用します。


内部リンクを一括置換する

投稿記事や固定ページの記事にある内部リンクや、内部画像リンクを「http://」から「https://」へ一括置換します。

そのためには「Search Regex」という WordPress プラグインが必要です。インストールされていない方は、プラグインをインストールして有効化しましょう。
WordPressプラグインのSearch Regexをインストールする

WordPress 管理メニューより、「ツール」-「Search Regex」をクリックし、「Search pattern」欄に、「http://」の URL を入力し、「Replace pattern」欄に「https://」から始まる URL を入力し、「Replace」ボタンを押下します。
Search Regexを使ってhttpからhttpsへ一括置換する

[注]画像の URL は当サイトのものです。ご自身の環境に合わせて変更してください。

置換対象がプレビューされます。薄緑色の上段が置換前、薄黄色の下段が置換後のコードです。Search Regexが置換のは赤色で表示されタブ文となります。この時点では、まだデータベースに反映していません。
Search Regexの置換対象プレビュー

ほとんどが「a href=」以降の内部リンクと、「img src=」以降の画像へのリンクだと思いますが、できるだけ確認をして、おかしなものが紛れていないかをチェックしましょう。くれぐれも置換後の URL の入力間違いにはご注意ください。

問題なければ「Replace & Save」ボタンを押下して、データベースに反映させましょう。


「.htaccess」を変更する

再びエックスサーバーのサーバーパネルへ移動します。独自 SSL の設定をしただけでは、「http://」と「 https://」の両方にアクセスできてしまうため、常時 SSL 設定が完了したとはいえません。「http://」からのアクセスを、自動的に「https://」のURLへ転送させる必要があります。この設定を追記するのが、「.htaccess」という設定ファイルになります。

サーバーパネル中央の「ホームページ」欄より、「.htaccess編集」をクリックします。
XSERVERサーバーパネルより.htaccess編集をクリックする

「.htaccess編集」タブをクリックし、中央のテキストエリアの If Module タグの中にコードを追記します。
.htaccessへコードを追記する
追記するコードは下記の通りです。

RewriteEngine On
RewriteCond %{HTTPS} !on
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
追記したら「「.htaccessを編集する(確認)」ボタンを押下して、変更を適用します。


SSLエラーのチェック

SSL 設定が終わったからといって、全てのページが安全な状態でない場合があります。テーマ内に書かれた URL (特に画像)や、アフィリエイトリンクなどに「http://」が残っていると、「安全でない状態」と表示されてしまいます。この状態を「混在コンテンツ(Mixed Content)」と言います。せっかく常時 SSL 化したのに、安全じゃない状態とか出ていると、むしろ逆効果になることもありますので、できるだけ早く解消しましょう。

確認するブラウザは Firefox が便利です。ブラウザでページを表示させてみましょう。

これが安全な状態です。
Webサイトが安全な状態

これが混在コンテンツの状態、つまり安全じゃないといわれている状態です。
Webサイトに混在コンテンツがある

まずは適当な画像を右クリックし、「画像の情報を表示」をクリックします。
Firefoxで画像の情報を表示

メディア欄から「http://」の URL を確認します。
Firefoxでメディア欄からhttpを探す

上図は記事内に書かれた a8.net のアフィリエイトリンクです。該当の投稿ページへ移動し、URL を変更します。この時「Search Regex」を使って一括置換しても構いませんが、私の場合は一つ一つ確認しました。リンク切れをおこしては収入減につながりますからね、新しいリンクを貼ることも踏まえて投稿の見直しも一緒に実施しました。

テーマによっては、直接画像の URL が書いてある場合もあります。その場合は「外観」-「テーマの編集」から修正するか、FTP でダウンロードして修正してアップロードするなどの手段を講じてください。当サイトはオリジナルテーマで URL 直書きしている箇所はないので、編集作業については割愛します。

キャッシュ系のプラグインを使っている場合には、一旦キャッシュを削除しましょう。当サイトでは「WP Super Cache」を使っているので、「キャッシュされているページの削除」を実施して、一旦キャッシュをクリアします。
WP Super Cacheでキャッシュされているページの削除する

キャッシュ削除をしないと画像の URL が「https://」にならずに、いつまで経っても混在コンテンツ扱いが解消されない可能性があります。キャッシュ系のプラグインを導入している方は注意しましょう。

修正したらページを表示して、「安全な状態」になっていれば OK です。
Webサイトの安全な状態を確認する

この作業を混在コンテンツがなくなるまで繰り返します。「Search Regex」を使って、「http://」で検索して該当投稿ページを見つけるのもアリだと思いますよ。地味な作業ですが、頑張りましょう。


SNSのシェアカウントがリセットされる

常時 SSL 化をすると、URL が変わってしまうので、SNS のシェアカウントは全てリセットされてしまいます。

このサイトでは「WP Social Bookmarking Light」プラグインを使っていましたが、「http://」と、「https://」の両対応はしていませんでした。

「SNS Count Cache」というプラグインを使って、「http://」と、「https://」のカウントを合算して表示させる方法があるようですが、このサイトでは適用しませんでした。調べたところ Facebook のカウントはうまく合算されないようです。Twitterは件数表示されないし、結局ハテブくらいかと思ったら急に熱が冷めたといった感じでしょうか。

最初はせっせと集めたカウントをクリアされるのは抵抗ありましたが、時間が経つと割と気にならなくなりました。大事なのは SNS のカウント件数ではなく、いいコンテンツを作ることにありますからね。いいサイトなら勝手に集まるだろうと思い、結果的にそのままとなりました。

機会があれば「SNS Count Cache」を使って合算表示をさせてみようと思います。


Google設定変更

最後に、各種Googleツールの設定変更です。

Google Search Console

Google Search Console では、プロパティを削除して新規追加をすればOKです。
Google Search Consoleでプロパティを削除して新規追加する

プロパティを削除すると過去の検索アナリティクスが見れなくなります。必要に応じてCSVなどでダウンロードしておくことをおすすめします。


Google アナリティクス

Google アナリティクスでは、メニュー左下の管理より、「プロパティ設定」から、「デフォルトのURL」を「https://」に変更すればOKです。
Googleアナリティクスはプロパティ設定からhttpsに変更する


まとめ

ネット上では、常時 SSL 化の影響で、検索結果の順位が下がったとか不安定になったなど、SEOに関する情報が散見されました。個人的には順位変動があったとは考えにくく、日常的な変動の範囲内ではないかと思います。このサイトだけでいえば、常時 SSL 化前より、後の方が全体でセッション数が3割程上がりました。この記事を書いている現在も右肩上がり中です。もちろん他の要因もありますので、常時 SSL 化だけの恩恵とは考えにくいのですが、少なくとも順位変動にあたふたすることはありませんでした。

常時 SSL 化自体の作業は単純なものの、全てのページに対して混在コンテンツのチェックをしたり、修正したりと、その確認作業の方が地味に大変です。全ページの混在コンテンツを解消するのは短時間では困難で、おそらく今でも発生があると思います。もしかしたら、常時 SSL 化した以降に投稿したものにも発生があるかもしれません。気がついたと時に直していく方法で対応していますが、そのメンテナンスには結構骨が折れます。

また、SNS シェアカウントがリセットされたのは結構痛いですね。なんか地道に努力して得た結果がいきなりゼロになるて・・・、人によってはモチベーションを保つのも大変なのではないかと思います。

とはいえ、訪問者が安全にサイトを利用することができるのは正直うれしいですよね。やはり、どんなにいい記事が掲載されていても、安全性に問題があるのでは困ってしまいますからね。グリーンの鍵マークが表示されているのは、サイト運営者としてはうれしい限りです。

皆さんも常時 SSL 化にあたっては、他のサイトもご覧になり、事前に影響範囲を把握してください。このサイトが皆さんの常時 SSL 化の助けになればうれしいです。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

コメントを残す

コメント(必須)

お名前 (必須)
メールアドレス
(アドレスは公開されません)

Trackback URL