WordPressをHTTPS対応する方法

PWA
2018.08.20

この記事では、WordPressをHTTPS対応させる方法とその確認方法について書きます。また、最初にHTTPS対応させる理由についても書きます。方法だけ知りたい方は、理由を読み飛ばしてください。

HTTPとHTTPSとは？

  • httpとは、「Hypertext Transfer Protocol」の略で、テキストデータ転送に関する決め事ルールのことです。
  • httpsとは、「 HTTP over SSL/TLS」の略で、HTTPを暗号化して通信することをさします。
    • SSLは「SecureSockets Layer」の略
    • TLSは「Transport Layer Security」の略

小難しい横文字を書いてしまいましたが、ここまで理解してほしいことは、HTTPをより安全(セキュア)にしたものがHTTPSということです。郵便を出す際に、年賀状みたいに住所も文章もむき出しになっているのか(HTTP)、封筒に入れて中身が見えづらくなっているか（HTTPS）という違いがあります。HTTPSは暗号化ですので、暗号化のレベルというものが存在します。ただの封筒に入っている(暗号化弱)という状態から、現金輸送車の金庫の中に入って警察が警備している(暗号化強)という状態までレベル感があります。それは、ググって見てください。

この記事を書いている時点(2018年8月)では、TLSの主流は1.2。今後TLS1.3が主流になっていきそうです。

IETFがTLS 1.3を承認--安全性や速度向上、課題も
インターネット技術タスクフォース（IETF）がTLSのバージョン1.3を承認した。
japan.zdnet.com

HTTPS化する理由

HTTPS化しないデメリット

Chromeブラウザの場合は、HTTPS対応されたサイトは、この記事の最初の画像のように次のように表記されます。

ChromeブラウザVersion68では、次のように「保護されていません」と黒字で出るようになります。

そして、ChromeブラウザVersion70では、次のように「保護されていません」と赤字で出るようになります。

この記事を書いている時点で、Chrome68まで公開されていて、2018年中にはChrome70が一般公開される予定になっております。

HTTPS化をしないことで、訪問者が表示されるWebページに対してネガティブなイメージを持ってしまう可能性があります。SEであれば、事情はよくわかっていると思うのですが技術のことを知らない一般の方なら、「保護されていません」という表記を見るだけでせっかく書いた記事を読まずに別のページを探しに行ってしまう可能性があります。Googleさんも公式ページで次のように言っています。

Chrome のセキュリティにとって大きな一歩: HTTP ページに「保護されていません」と表示されるようになります
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
webmaster-ja.googleblog.com

HTTPS化のメリット

  • （1）安全性／サイトの信頼性
    • サイトで取り扱う情報のユーザーへの信頼性が向上します。（安全性も向上しますが私のサイトは個人サイトですのであまり言及しない）
  • （2）検索順位が上がる
    • HTTPS化することで、検索エンジンの順位がちょっとだけ向上する。
  • （3）サイトの表示速度が高まる
    • つい最近GoogleDanceTokyoというGoogleのイベントで今後ページの表示速度が検索エンジンの順位に影響する用になると言っていました。HTTPS対応をすると通信方式がhttp/2と言うものになり、Webページの表示が高速化されます。確認方法はこの記事の最後の方に行います。
  • （4）HTTPSの方がログ機能が強く、アクセス解析の制度や種類が増える
  • （5）PWAの導入の条件を１つ満たすことが出来る
HTTPS をランキング シグナルに使用します
Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報
webmaster-ja.googleblog.com
HTTPSに適応していないコンテンツを掲載しているサイトは、将来的には、ランキングにおける恩恵にあずかれなくなるかもしれない。 ｜SEO Japan by アイオイクス
少々長い記事タイトルになってしまいましたが、先日行われたGoogleハングアウトからの話題です。HTTPSに対応していない画像を掲載している場合などは、今後HTTPSに対応しているサイトとしてみなされなくなる可能性がある … 続きを読む →
www.seojapan.com
実録：Googleスピードアップデートで遅いサイトの検索順位が本当に落ちた！【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
スピードアップデート実施直後にモバイル検索で、目に見える形でランキングが下落したサイトがあった
webtan.impress.co.jp

Googleさんは、ユーザが入力した検索ワードに対して有益なページを上位に表示するのがお仕事なので、(1)〜(3)に書いたことも必要なものになったということですね。いちばん大事なのは、コンテンツなのですが、更に上位を狙う場合は、HTTPS化と高速化は必須ですね。

検索エンジンのランキングアルゴリズムは年に数回大きなアップデートがあります。つい先日（2018年8月上旬）も大きな更新がありました。各自、確認をして対策をしましょう。

8.1 Googleのコアアルゴリズム・アップデートと検索品質評価ガイドラインから読み解く対策
2018年8月1日に「Googleのコアアルゴリズム・アップデート」がありました。 （このサイトは、検索順位に…
www.empowerments.jp

HTTPS化のデメリットではなくなったもの

Googleが声明を出したからか、技術改善が進んだからGoogleがそういうことにしたのかわかりませんが、ここ数年SSL化のデメリットとしてとらえられていたことが、そうではなくなったものを記載します。

  •  費用が掛かる
    • SSLは証明証を購入する必要があるため、お金が掛かるイメージがありました。しかし、最近は「Let’s Encrypt」という無料で使えるSSL証明書があり、購入の必要がなくなった。格安サーバのロリポップはもちろん最近お引っ越しをしているエックスサーバーやGCP、Bluehostでも利用が可能でした。
    • しかし、独自ドメインを取得するためには費用が掛かります。
無料の独自SSLがご利用いただけるようになりました！
いつもロリポップ！をご利用いただき、誠にありがとうございます。ロリポップ！では、これまで多くのご要望をいただいておりました無料の独自SSL「Let's Encrypt」を全プランで設定いただけるようになりました。基本のご利用料金のみで常時SSL化が可能です。さらに、ロリポップ！では100way対応となっており、ひとつの...
lolipop.jp
  • ウェブページの表示速度の改善
    • 一昔前は、暗号化して通信すると処理に時間がかかるイメージがありましたが、最近は、HTTP/2や SPDYの技術改善で意識しなくてよいレベルになっている。

HTTPS化する際に苦労すること

新規サイトであれば、技術的なことだけを覚えれば良いですが、既存のWordPressサイトをHTTPS化する際には、便利なプラグインが用意されているとはいえ、考えるべきことが幾つかあります。

  • 独自ドメイン化とHTTPS化は同時に実施しないほうが無難
  • ページで読み込むリソースもhttpsに対応している必要がある
    • たとえば、サイトに表示する画像のURLをhttpsに修正する必要がある。（なお、GoogleAdsenseの画像は、SSL化されてますね。）
    • 外部プラグインについてもhttps対応のものを選択するなどが必要で、現在主で利用しているプラグインの利用を見直したり、場合によっては別のものにしなければならない場合があります。

HTTPS化の方法（ロリポップの場合）

ロリポップのスタンダードプランにWordPressをインストールしている場合、SSL化に必要なことは、次の手順です。（このときは、HTTPS化と同時に独自ドメインの導入を実施しています）

  1. 自分のドメインの取得
    • 取得したドメインは「ムームードメイン」で「shimota.site」
  2. サイトのバックアップ
  3. ロリポップ「独自ドメイン設定」
  4. ロリポップ「独自SSL証明書（「Let’s Encrypt」）の設定
  5. WordPressの設定
  6. 外部サイトの設定

この中で、「WordPressの設定」と「外部サイト」の設定についてもう少し詳しく書きます。

WordPressの設定

サイトアドレスの変更

WordPressの管理メニュー「設定＞一般」を開き、アドレスを変更します。

通常は、「http://」のところを「https://」とするだけなのですが、今回はドメイン変更も実施するため、２ヵ所修正しています。これは、ロリポップの場合、独自ドメインでないとSSLが導入できないからです。(有償版のSSLでも同様)

内部リンクをhttpsに入れ替える

プラグイン「Search Regex」を用いて、画像リンクや自サイト内リンクのアドレスをすべて「https://」から始まるものに変更します。

私のサイトは、これで、1000個程度のURLを一括変更しました。

自分のサイトを開いてみて、「保護された通信」と表示されるようになっていれば、大体OKです。ただし、対応しきれていないところもあるかもしれないので、ランディングページとなっているページは入念な確認をしましょう。

また、これでも「保護された通信」と表示されない場合は、プラグインのリンクや自サイト以外の画像をリンクしている場合に発生します。(たとえば、アフィリエイトリンク／SNS系のボタン／はてなブックマーク／ウィジェットに直書きしたリンクなどなど)通常の企業であれば、SSL化した画像があるはずですが、ない場合は自分で対応するか他サービスに乗り換えることをお勧めします。

古いURLを.htaccessでリダイレクト

Https化できたと思ってここで休憩したいところですが、まだまだ続きます。次は、.htaccessファイルを編集してHttps化する前のURLでアクセスされた際に、Httpsサイトへリダイレクトするように変更します。リダイレクトを入れる大きな理由は、今現在、検索エンジンの検索結果に表示されたアドレスをそのまま利用するためです。

今は、次の3つのURLにアクセスできるようになっています。

  1. https://shimota.site/thinkIT/
  2. http://shimota.site/thinkIT/
  3. http://enjoy.egoism.jp/thinkIT/

「２．」「３．」にアクセスされた場合は、「１．」のURLにリダイレクトするように変更します。通常HTTPS化するだけならば、次の記載をhtaccessの先頭に追記します。

#https redirect
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://shimota.site/$1 [R=301,L]
</IfModule>

しかし今回は、http(port80)アクセスされた際に、httpsへリダイレクトさせたいため、次のような記述にしました。

#https redirect
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://shimota.site%{REQUEST_URI} [R=301,L]
</IfModule>

また、301リダイレクトにしている理由は、下記のページを参照してください。

リダイレクトによる SEO への影響 | Google 検索セントラル  |  ドキュメント  |  Google for Developers
リダイレクトの違いや、それらを Google がどう解釈するのか、Google 検索にどう役立つのかについて解説します。
developers.google.com
Sorry, this page can't be found. - Search Console Help
support.google.com

各種外部サイトの登録URLの変更

  • Google Analytics
  • Google Adsense
  • Google WebMasterTool
  • あとは必要になったものから確認

※上記のものは、先人の皆様が手順を作成してくれていますので、そちらを参照してください。

HTTPS化の確認

拡張機能「HTTP/2 and SPDY indicator」を利用する方法

Chromeを使用している場合は、一番簡単な方法は、拡張機能「HTTP/2 and SPDY indicator」を使用することです。対応していると、稲妻マークい色が付きます。

確認すると無事に対応されていますね。

Chromeの開発者機能による確認

別の確認方法としてディベロッパーツールでも確認することはできます。

表示されるものを変更して確認すると、HTTP/2(h2)やSPDYが使用されていますね。

Webサイト「HTTP/2 TEST」で確認が出来る

もう１つ確認できる方法として、WEB上で確認できる「HTTP/2 TEST」というものがあります。

いくつか組み合わせて確認してみるのがいいと思います。

まとめ

この記事では、HTTPS化の背景とHTTPS化の方法と確認方法について書きました。1年位前に書いた記事をリライトしてまとめたものです。今後の動向によっては、HTTPS化した上で対応しなければならないことも出てくるかと思います。日々の情報収集は忘れないようにしましょう。

また、記事の途中でも書きましたが、検索エンジンの上位に表示されるためには、HTTPS化も去ることながら、コンテンツが一番重要です。質の高い文章を書いていきたいものですね。

コメント

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