SSL化徹底ガイド【エックスサーバー編】ブログやサイトのhttpsとは何かの意味も簡単に分かりやすく解説!

https-ssl-xserver

Googleが2014年に「SSL化(HTTPS化)されたWebサイトをSEO上で優遇します」と発表してから数年経ちます。

そして、2017年、ついにGoogleはHTTPS化に対して本腰をいれ対応を始めました。

HTTPS化が何を意味するのかは後ほど説明しますが、この対策は「ユーザーには安全にウェブを使ってほしい」というGoogleの思いが込められています。

先日、ビジネスインフィニティにも「Chrome のセキュリティ警告を〇〇に表示します」というメールが届きました。

このメールを要約すると、以下のような内容です。

2017年10月からユーザー(読者)がGoogle Chrome(Ver 62)ブラウザを使って、HTTPページのフォームでテキスト入力を行うと「保護されていません」という警告が表示されるようになります。
(シークレットモードではページ表示時に警告)

あなたが運営しているサイトには、HTTPS化されていないテキスト入力ページが存在しますので、対応して下さい。

また、長期的にはHTTPで配信される全てのページに対して、同様の対応を行うことを計画しています。

つまり、2017年10月までにHTTPS化をしなかった場合、テキスト入力をした時点で警告メッセージが表示されるようになり、いつかは全ページで表示した際に警告メッセージが表示されるようになるということです。

そこで、今回は多く使われているエックスサーバーとワードプレスを例に、HTTPS化の手順をまとめましたので、参考にしてください。


Sponsored Links

httpsとは何を意味しているのかを簡単に説明

https-ssl-xserver1

そもそも「http」や「https」は何を意味しているのでしょうか?

httpとは、「Hypertext Transfer Protocol」の略でインターネットでデータのやり取りをするための決まりです。
※IT用語で、この決まりの事をプロトコルといいます。

会話で言うと、日本語とか英語と同じイメージになります。

日本では日本語を使って会話しますし、米国では英語を使って会話をしますよね。

同じように、インターネットでは、HTTPで会話(通信)をするわけです。

例えば「http://www.yahoo.co.jp/」にアクセスする場合

「Yahooドメインとhttpで通信してください!」と命令をだしていることになります。

しかし、日本語で会話をしていると横の人に聴かれたり、第3者に聞かれる可能性がありますよね?

インターネットでも同じでHTTPは、何のセキュリティもかかっていないため、第3者に通信内容が漏れる可能性があります。

そこで、登場するのが「https」です。

HTTPSは「HTTP over SSL/TLS」の略で、データのやり取りを暗号化して行うことを意味しています。

映画などででてくるモールス信号は、相手国に会話を傍受されても解読できないように暗号化していました。

それと同じで、HTTPを暗号化して第3者に情報が漏洩するのを防ぐ仕組みがHTTPSです。

  • SSL(Secure Sockets Layer)
  • TLS(Transport Layer Security)

この2つは、ともに暗号化技術のことで、「公開鍵暗号」技術が使用されています。

今話題のビットコイン(ブロックチェーン)もこの技術の応用を使用しています。

公開鍵暗号について詳しく知りたい方は、こちらの記事を参考にしてください。

参考:ブロックチェーンの暗号化による安全性を徹底解説!ビットコインなどの仮想通貨以外への応用例も紹介。

冒頭で記載したGoogleからのメールは、

あなたのサイトでは、読者が入力したデータが暗号化されないままインターネット上に送信されていますよ!

ちゃんと読者が入力したデータは暗号化して保護するようにしてくださいね!

という警告を意味しているわけです。

ブログやサイトのSSL化手順(エックスサーバー編)

ブログやサイトのHTTPS対応(SSL化)は、意外と手間がかかります。

詳細な設定方法に入る前に手順をまとめました。

1つ1つ説明をしていきますので、落ち着いて作業するようにしましょう。
※特に、3.ワードプレスの設定の「 4.リダイレクトの設定(.htaccessファイルの編集)」までは、失敗すると戻せなくなる可能性があるため集中しておこなってください。

  1. ワードプレスのバックアップ
  2. エックスサーバーの設定
  3. ワードプレスの設定
    1.ワードプレスとサイトのURL変更
    2.サイト内部リンクURLの修正(Search Regexプラグイン)
    3.プラグイン及びテンプレート、その他特有箇所の修正
    ※ウィジェット、アフィリエイトタグなど
    4.リダイレクトの設定(.htaccessファイルの編集)
  4. その他Googleサービスの設定
  5. SNSのシェアカウントを引継ぎ設定

この記事は「Xserver」を例に手順を説明しています。

もし、「WPXレンタルサーバーまたはWPXクラウド」を使用している方は、以下を参考にしてください。

参考:SSL化徹底ガイド【WPXサーバー・クラウド編】Googleから警告「httpsで保護されていません」には即対処を

ワードプレスのバックアップ

https-ssl-xserver21

HTTPS化を行うにあたって、失敗すると元に戻せなくなる可能性もあり得ます。

必ず、作業を行う前にバックアップを取得しておくようにしましょう。

バックアップには、プラグイン「BackWPup」を使用します。

https-ssl-xserver22

  1. 「BackWPup」をクリック
  2. 「ダッシュボード」をクリック
  3. 「データベースのバックアップをダウンロード」をクリック
  4. ダウンロードされたバックアップファイルを保管

エックスサーバー(XSERVER)の設定

エックスサーバーは無料の独自SSLを提供しています。

もし、決まったブランドの証明書を利用する場合は、オプション独自SSLから申し込みをする必要があります。
※証明書ブランドとは、セキュアコア、ラピッドSSL、ジオトラスト、グローバルサインなど

今回は、無料の独自SSLを使用する方法で説明していきます。

https-ssl-xserver2

  1. XServerPanelにログイン
  2. 「SSL設定」をクリック

https-ssl-xserver3

  1. SSL設定を行うドメインの「選択する」をクリック

https-ssl-xserver4

  1. 「独自SSL設定の追加」をクリック
  2. 対象のドメインかどうか確認
  3. CSR情報を入力するかどうかを設定
    ※今回は、チェックなし
  4. 「独自SSL設定を追加する(確定)」をクリック

CSR情報の入力とは、サイトを管理している企業名や管理団体の情報(ディスティングイッシュネームと呼ばれる)を証明書の中に記述することを指します。

企業のホームページなどサイトの発行元を証明した方がメリットが大きい場合には、設定してもよいでしょう。

https-ssl-xserver5

  1. しばらくお待ちくださいのメッセージが表示
  2. 数分後、独自SSL設定の追加メッセージ画面が自動で表示

https-ssl-xserver6

  1. 「〇〇に独自SSL設定を追加しました。」のメッセージが出たら「SSL設定の一覧」タブをクリック
  2. 対象のURLをクリック

反映されるまでは「プライバシーが保護されていません。」という画面が表示されます。

サイトへ反映されるまでは、約1時間程度かかると思っておきましょう。
※ブログやサイトによっては、5分程度で反映される場合もあります。

これで、エックスサーバーの設定は完了です。


Sponsored Links

ワードプレス(WORDPRESS)の設定

サーバーの設定よりもワードプレスの設定変更が非常に面倒です。
※サイトを新設する場合は、この作業は必要ありません。

ワードプレスとサイトのURL変更

https-ssl-xserver7_2

  1. 「ワードプレス管理画面」へログイン
  2. 「設定」をクリック
  3. 「一般」をクリック
  4. WordPressアドレスとサイトアドレスを「http」から「https」に変更
  5. 「変更を保存」をクリック

httpsへ変更する際に、全角や大文字の「S」など、間違えない様に気を付けましょう。

サイト内部リンクURLの修正(Search Regexプラグイン)

サイトやブログ運営を始めたばかりであれば、まだ記事が少ないので1つ1つ手動で記事を修正していってもよいのですが、100記事以上になってくると流石に手作業で変更するのは難しくなりますね。

そこで「Search Regex」プラグインを使用します。

このプラグインは、記事内の文字列を一括置換することができます。

「Search Regex」プラグインのインストール

https-ssl-xserver8

上図が「Search Regex」プラグインです。

このプラグインをインストールします。

もし、プラグインのインストール方法が分からない場合は、以下を参考にしてください。

参考:ワードプレスプラグインの設定方法を解説。文字装飾効率化やSEO対策強化など便利な拡張機能7選!

URL置換前の確認

https-ssl-xserver9

  1. 「ツール」をクリック
  2. 「Search Regex」をクリック
  3. 「Search pattern」に変更前(HTTP)のドメインを入力
  4. 「Replace pattern」に変更後(HTTPS)のドメインを入力
  5. 「Replace」をクリック
  6. 「Results」を確認

上記以外は、デフォルト設定のままで問題ありません。

また、「Replace」をクリックしたこの時点では、まだ実際には置換が行われていません。

この後に実施する「Replace & Save」を実行すると置換と公開までが一気に行われますので、この時点で入念に確認を行うようにしてください。

もし間違った場合、リンク切れの記事が大量に公開されてしまいます。

【Source】検索対象
Comment author    :コメント作成者
Comment author email  :コメント作成者のメールアドレス
Comment author URL  :コメント作成者のURL
Comment content    :コメント内容
Post content      :記事本文(デフォルト)
Post excerpt      :記事抜粋
Post meta value    :記事カスタムフィールド
Post title        :記事タイトル
Post URL       :記事URL

【Limit to】検索件数
No limit:制限なし(デフォルト)

【Order By】検索結果表示順
Ascending:昇順(デフォルト)

【Regex】正規表現
チェックなし(デフォルト)
※正規表現を使う場合に使用

置換実施と公開

https-ssl-xserver10

  1. 「Replace & Save」をクリック
  2. 置換件数を確認
  3. 実際に内部リンクを確認
    ※全部確認するのは不可能ですので、重要箇所やサンプリングで確認するようにしましょう。

プラグイン及びテンプレート、その他特有箇所の修正

プラグインやテンプレート、アフィリエイトタグなど、本文中の内部リンクとは異なる箇所の修正を必要に応じて実施する必要があります。

置換できていない箇所があると、そのページを開いた際に、「保護された通信」と表示されず、エラーが起きるため、手動で修正が必要です。

なお、エラー箇所については下記の様に探します。

GoogleChromeの「デベロッパーツール」を使用

https-ssl-xserver17_2

GoogleChromeではキーボードの「F12」を押す事によって「デベロッパーツール」を立ち上げることが出来ます。

デベロッパーツールの「Console」タブを選択することにより、そのページにエラーがある場合、エラーメッセージ(HTTPS化されていない場合の警告など)が表示されますので、表示されている箇所の修正を行ってい下さい。

尚、この方法は、表示しているページに警告やエラーがあるかを確認しています。

そのため、どのページでも使用されている共通部品についての確認をする際には、非常に簡単で便利です。

しかし、ページ単で動きや部品が異なる場合は、エラーが起こる可能性があるページを全て確認する必要があります。

リダイレクトの設定(.htaccessファイルの編集)

ページの「http」から「https」への301リダイレクトをするため、.htaccessファイルの編集を行います。

この設定を行うことによって、httpにアクセスされた場合、自動でhttpsのページを表示することができるようになります。

また、301リダイレクトとは、URLが永久に変更されることをGoogleへ伝えるリダイレクトのことで、これを行うことによって、URL変更前(http)のSEO評価をURL変更後(https)に引き継ぐことができます。

https-ssl-xserver11

  1. XServerPanelにログイン
  2. 「.htaccess編集」をクリック

https-ssl-xserver12

  1. 対象ドメインの「選択する」をクリック

https-ssl-xserver13_3

  1. 「.htaccess編集」タブをクリック
  2. 「RewriteEngine On」の直後にコード(以下に記載)を張り付ける
  3. 「.htaccessを編集する(確認)」をクリック

.htaccessは、非常に重要なファイルです。

編集する前に必ずメモ帳などにコードのバックアップを取得しておきましょう。

https-ssl-xserver14

  1. 「.htaccessを編集する(確定)」をクリック
  2. 実際にhttpでアクセスし、httpsにリダイレクトされることを確認

URLの左横が「保護された通信」となっていることを確認してください。

その他Googleサービスの設定

Google関連サービスの設定変更も必要です。

ここでは、一般的に使用することが多い「Google Analytics」と「Googleウェブマスターツール(Google Search Console)」について説明していきます。

Google Analytics

https-ssl-xserver15

  1. Google Analytics管理画面の「管理」をクリック
  2. 「プロパティ設定」をクリック
  3. 「http://」から「https://」に変更
  4. 「保存」をクリック

Googleウェブマスターツール(Google Search Console)

Googleウェブマスターツールは、既存のhttpのサイトを再利用する方法はありません。

最初にサイトを立ち上げた際の設定と同様、httpsサイトでもう一度 追加設定をする必要があります。

https-ssl-xserver18_2

  1. httpサイトと同じGoogleウェブマスターツールにログインし、「プロパティを追加」をクリック
  2. ウェブサイトに「https」のサイト名を入力
  3. 「追加」をクリック

尚、httpsのサイトマップの追加も必ず忘れずに行って下さい。

上記以降の手順については、新規作成時の手順と同様ですので、以下の手順を参考にしてください。

参考:ウェブマスターツール(Search Console)の使い方と登録設定方法を図解で分りやすく解説。

SNSのシェアカウントを引継ぎ設定

https-ssl-xserver16

SNSのシェアカウント数は、基本的にURLが変わるとリセットされてしまいます。

しかし「SNS Count Cache」というプラグインを使用することにより、http時とhttps時のカウントを合算して表示することができます。
※環境によっては、このプラグインでも対応できないこともあります。

プラグインのインストール方法については、以下を参照してください。

参考:アフィリエイトに役立つワードプレスプラグインの設定方法を解説。文字装飾効率化やSEO対策強化など便利な拡張機能7選!

インストールが完了したら以下設定を行います

https-ssl-xserver20

  1. サイドバーから「SNS Count Cache」をクリック
  2. 「設定」をクリック
  3. 「有効」を選択
  4. 「設定の更新」をクリック

この設定を行うことで「http」と「https」の合算値をキャッシュできるようになります。


Sponsored Links

関連記事

  1. affiliate-annual-income

    アフィリエイター達の年収の実態に迫る!有名人より主婦の趣味ブログが稼い…

  2. https-ssl-wpx

    SSL化徹底ガイド【WPXサーバー・クラウド編】Googleからの警告…

  3. webmaster-tools

    ウェブマスターツール(Search Console)の使い方と登録設定…

  4. affiliate-wordpress-plugin

    アフィリエイトに役立つワードプレスプラグインの設定方法を解説。文字装飾…

  5. domain-acquisition

    アフィリエイトにおすすめなドメイン取得業者を考察。取得手順やサーバーへ…

  6. アフィリエイトに最適なサーバー契約【2017年最新版】Xサーバー・WP…

 

Sponsored Links


最新記事一覧

  1. reftoken-ico_3
  2. b2bx-ico-registration
  3. blockchainlab-conference_2
  4. sbi-ico-rating
  5. swell-swift
  6. valu-howto-buy_2
  7. bitcoin-fork
  8. metamask-how-to-use
  9. cryptocurrency-biometrics
  10. cryptocurrency-tax-return_1
Sponsored Links