WordPressで構築しているブログサイトのフロントページをhttps(SSL)化してみた

以前、当サイトで契約しているエックスサーバーの無料の独自SSLを使って、WordPressの管理画面と「お問い合わせ」をSSL化する方法をご紹介いたしました。

エックスサーバーの無料の独自SSLを使って、WordPressの管理画面と「お問い合わせ」をSSL化してみた
レンタルサーバー Xserver 以前、レンタルサーバーであるエックスサーバーをご紹介いたしました。 そのエックスサーバーが無料の独...

フロントページのSSL化を「お問い合わせ」のみにとどめていたのは、以前は契約しているASPがSSLに対応していないということもあり、断念していました。ですが現在はASPが続々とSSLに対応してきており、まだ対応してないASPも近いうちに対応するというお知らせがきたので、今のうちに当サイトも全面的にSSL化することにしました。

今回はフロントページをSSL化するにあたり、当サイトで行ったことなどをご紹介いたします。

SSL化する前に行ったこと

バックアップの確認

backWPup

BackWPup – WordPress Backup Plugin — WordPress Plugins

私は「BackWPup」プラグインで定期的に自動でバックアップを取っているので、バックアップ対象であるファイルデータとデータベースファイルが本当にバックアップされているかを確認しました。

ファイルデータのバックアップを確認
ファイルデータのバックアップを確認
データベースファイルのバックアップを確認
データベースファイルのバックアップを確認

SNSのカウントをキャッシュさせる

SNS Count Cache

SNS Count Cache — WordPress Plugins

URLが変わるとSNSのカウントがクリアされるので、「SNS Count Cache」プラグインを事前にインストールしておき、SNSのカウントをキャッシュしておきます。

アフィリエイトリンクをSSLに変更する

Search Regex

Search Regex — WordPress Plugins

私は「Amazonアソシエイト」、「A8.net」、「バリューコマース」、「もしも」、「アクセストレード」を主に利用しているので「Search Regex」プラグインでアフィリエイトリンクを下記のように変更しました。

Amazon

画像表示に使われている「http://ecx.images-amazon.com」を「https://images-fe.ssl-images-amazon.com」に変更。

Amazonは他のASPと違いサイトをSSL化していない場合、上記の変更を行っても画像は表示しないようです。Amazonの場合はサイトのSSL設定をした後に、変更を行った方が良いかもしれません。

A8.net

「http」を「https」に変更。

バリューコマース

「http://ck.jp.ap.valuecommerce.com」を「//ck.jp.ap.valuecommerce.com」に変更。「http://ad.jp.ap.valuecommerce.com」を「//ad.jp.ap.valuecommerce.com」に変更。

もしも

「http://c.af.moshimo.com」を「//af.moshimo.com」に変更。「http://image.moshimo.com」を「//image.moshimo.com」に変更。「http://i.af.moshimo.com」を「//i.moshimo.com」に変更。

アクセストレード

「http://h.accesstrade.net」を「https://h.accesstrade.net」に変更。

「Search Regex」プラグインで変更

「Search Regex」プラグインで下記のように操作を行いリンクを変更しました。

Search Regexで検索置換

  1. 検索する文字列を「Search pattern」に入力。
  2. 置き換える文字列を「Replace pattern」に入力。
  3. 「Search」ボタンで検索。
  4. 「Replace」ボタンで置換。

SSL設定をする

実際にはサーバー(エックスサーバー場合)で下記のような設定を行うのですが、私は前回の管理画面をSSL化する際に既に済ませているので、確認するだけにとどまりました。

サーバーで「SSL設定」を行う

「SSL設定」画面で独自SSL設定の追加を行います。

エックスサーバー 「SSL設定」画面で独自SSL設定の追加を行う

  1. 設定対象のドメインを選択。
  2. 「CSR情報(SSL証明書申請情報)を入力する」にチェック。

エックスサーバー 各種SSL設定

  1. CSR情報を確認、または入力。
  2. 「独自SSL設定を追加する(確定)」ボタンを押下。

「独自SSL設定を追加する(確定)」ボタンを押下すると、下記のようなSSL新規取得中のメッセージが出るので、取得が完了するまで少し待ちます。

エックスサーバー SSL新規取得中の表示が出る

独自SSLの取得を確認

「SSL設定の一覧」に行き、一覧に対象ドメインの記載があれば、独自SSLの新規取得は成功です。

エックスサーバー CSR情報を確認または入力

「https」から始まるURLが有効になるまでは、少し時間がかかります。

WordPressの「設定」からURLを変更する

サーバーの設定が終わった後、「設定」からURLを変更します。「設定」から「一般」に行きます。

WordPress 「設定」から「一般」に行く
「設定」から「一般」に行く

「http」を「https」に変更します。

WordPress 「http」を「https」に変更
「http」を「https」に変更

URLを変更した後、「設定」をクリックして保存します。

WordPress 「設定」をクリックして保存
「設定」をクリックして保存

SSL化した後に行ったこと

WordPressの内部リンクを検索置換する

実際にはURLを変更した場合、下記のように読み込んでいる画像やページ間のリンクは検索して置換する必要があるのですが、前回の管理画面をSSL化する際に既に済ませているので、確認するだけにとどまりました。

アフィリエイトリンクを変更した用に「Search Regex」プラグインで下記のようにリンクを変更します。

  1. 検索対象のページを選択。
  2. SSL化する前のサイトURLを「Search pattern」に入力。
  3. SSL化した後のサイトURLを「Replace pattern」に入力。
  4. 「Search」ボタンで検索。
  5. 「Replace」ボタンで置換。

入力するURLはサイトごとに変わります。置換する際はよく確認をすることをおすすめします。

.htaccessでhttpsにリダイレクトさせる

下記のコードを.htaccessに記述し、httpsにリダイレクトさせるようにます。

上記を行うことによって「http」でアクセスされた場合でも、「https」にリダイレクトさせることができます。

Google AnalyticsのURL設定をhttpsにする

URLが変わったのでGoogle Analytics新しいURLを設定します。Google Analytics「管理」から「プロパティ設定」を選択します。

Google Analytics https 「管理」から「プロパティ設定」を選択
「管理」から「プロパティ設定」を選択

「デフォルトのURL」で「http://」から「https://」を選択します。

Google Analytics https 「http://」から「https://」を選択
「デフォルトのURL」で「http://」から「https://」を選択

下にある「保存」クリックします。

Google Analytics https 「保存」クリック
「保存」クリック

続いてビューに登録しているURLも変更します。一度先ほどの「管理」に戻り、設定を行っていきます。

Google Analytics https ビュー設定を選択
ビュー設定を選択

「ウェブサイトのURL」で「http://」から「https://」を選択します。

Google Analytics https 「ウェブサイトのURL」で「http://」から「https://」を選択
「ウェブサイトのURL」で「http://」から「https://」を選択

下にある「保存」クリックします。

Google Analytics https 「保存」クリック
「保存」クリック

以上でGoogle AnalyticsのURL設定は終了です。

Google AnalyticsとGoogle Search Consoleを関連付ける

Google AnalyticsとGoogle Search Consoleを関連付ける設定を行います。再度、Google Analyticsの「管理」から「プロパティ設定」に行き、下にある「Search Consoleを調整」をクリックします。

Google Analytics 「Search Consoleを調整」をクリック
「Search Consoleを調整」をクリック

「Search Consoleの設定」で「編集」をクリックします。

Google Analytics 「Search Consoleの設定」で「編集」をクリック
「Search Console」の設定で「編集」をクリック

新規に登録したhttps付きのURLを選択して、「保存」をクリックします。

Google Analytics https付きのURLを選択して、「保存」をクリック
https付きのURLを選択して、「保存」をクリック

「関連付けの追加」で「OK」をクリックします。

Google Analytics 「関連付けの追加」で「OK」をクリック
「関連付けの追加」で「OK」をクリック

「OK」をクリックした後、Search Consoleの一覧が表示されるので、関連付けがされた旨のメッセージを確認します。メッセージの表示は数分ほどかかります。

Google Analytics 関連付けがされた旨のメッセージを確認する
関連付けがされた旨のメッセージを確認

関連付けがされた旨のメッセージを確認後、Analyticsの「Search Consoleの設定」に戻り、httpsになっていることを確認します。

Google Analytics httpsになっていることを確認
httpsになっていることを確認

以上で関連付けは終了です。

Google Search Consoleでhttpsにしたサイトを登録してサイトマップを送信する

Google Analyticsと同様に、Google Search Consoleで再度登録を行います。

Google Search Consoleの右上にある「プロパティを追加」をクリックします。

Google Search Console 「プロパティを追加」をクリック
「プロパティを追加」をクリック

「ウェブサイト」にURLを入力して、「追加」をクリックします。

Google Search Console 「ウェブサイト」にURLを入力して、「追加」をクリック
「ウェブサイト」にURLを入力して、「追加」をクリック

下記の画面でHTMLファイルをダウンロードしてサイトにアップロードした後、「3.」にあるようにサイトURLの後ろにアップロードしたファイル名を入力してファイルがアップされたかを確認します。確認するURLは「サイトURL/googlexxxxx.html」となるはずです。アップロードを確認した後、自分がロボットではない旨のチェックして「確認」をクリックします。

Google Search Console 自分がロボットではない旨のチェックして「確認」をクリック
自分がロボットではない旨のチェックして「確認」をクリック

HTMLファイルをアップロードする場所は、下記のようなファイルがある場所になるはずです。

Google Search Console HTMLファイルをサイトにアップロード
HTMLファイルをサイトにアップロード

「確認」をクリックした後、入力したサイトの所有権が承認されるので、「続行」をクリックします。

Google Search Console 「続行」をクリック
「続行」をクリック

Consoleの一覧に戻った後、新しく表示されるURLをクリックします。

Google Search Console 新しく表示されるURLをクリック
新しく表示されるURLをクリック

次に「サイトマップ」をクリックします。

Google Search Console「サイトマップ」をクリック
「サイトマップ」をクリック

「サイトマップの追加/テスト」をクリックします。

Google Search Console 「サイトマップの追加/テスト」をクリック
「サイトマップの追加/テスト」をクリック

サイトマップ名を入力して、「送信」をクリックします。

Google Search Console サイトマップが送信
サイトマップが送信される

「ページを更新する」をクリックします。

Google Search Console 「ページを更新する」をクリック
「ページを更新する」をクリック

サイトマップが送信されると下記のようにページが表示されるはずです。

Google Search Console サイトマップインデックス
サイトマップインデックス

私はWordPressの「XML-Sitemap」プラグインをインストールしているので、下記の「XML-Sitemap」設定画面でサイトマップが正しくクローラーに通知されたことを確認しました。

「XML-Sitemap」プラグインでサイトマップの通知を確認
「XML-Sitemap」プラグインでサイトマップの通知を確認

Webサービスで登録しているサイトのURLを変更、または登録申請をする

サイトのURLが変わるので、ASPやWebサービスで登録しているURLを変更、または登録の再申請を行いました。

A8やバリューコマースなどはアカウント情報で登録しているURLを編集、または修正するだけでよいのですが、Amazonアソシエイトが少し特殊だったので、ご紹介いたします。

アソシエイトの右上にある「アソシエイトアカウント管理」をクリックします。

Amazonアソシエイト 「アソシエイトアカウント管理」をクリック
「アソシエイトアカウント管理」をクリック

アカウント情報で「Webサイト情報の確認」をクリックします。

Amazonアソシエイト cをクリック
「Webサイト情報の確認」をクリック

「Webサイト情報の確認」で「こちらから」をクリックします。

Amazonアソシエイト 「こちらから」をクリック
「こちらから」をクリック

フォームから下記の情報を入力して、アソシエイトに登録しているURLを変更するので、URLを追加する許可を申請します。調べたところ、AmazonアソシエイトはURLの変更や追加は報告する必要があるようです。

Amazonアソシエイト URLを追加する許可を申請
URLを追加する許可を申請

私の場合は一時間もしないうちに、審査が承認された旨のメールが届きました。

このたびのご依頼通り、お知らせいただいた以下のサイトについて通常のサイト審査をさせていただき、無事承認となりましたので、既存のアソシエイトID:XXXXXの登録サイトに追加をいたしました。今後、新しいサイトでのご注文やクリック数などの情報は既存のIDのレポートに計上されます。

メールが届いた後、忘れずに先ほどの「Webサイト情報の確認」に戻り、URLを追加します。

Amazonアソシエイト 「Webサイト情報の確認」に戻りURLを追加
「Webサイト情報の確認」に戻りURLを追加する

同じ画面の下にある「変更を保存する」をクリックして完了です。

Amazonアソシエイト 「変更を保存する」をクリックして完了
「変更を保存する」をクリックして完了

キャッシュしているSNSのカウントを引き継ぐ

「SNS Count Cache」プラグインでキャッシュしたSNSのカウントを引き継がせます。「設定」から下記の操作を行います。

「SNS Count Cache」プラグイン SNSのカウントを引き継がせる設定
設定でSNSのカウントを引き継がせる

無事SNSのカウントを引き継ぐことができました。

「SNS Count Cache」プラグイン SNSのカウントを引き継ぐことに成功
SNSのカウントを引き継ぐことに成功

「SNS Count Cache」プラグインは設定を行うと、自動でSNSのカウント数をキャッシュしてくれるのでとても楽です。

SSLページ内で「http」と「https」が混在したコンテンツを洗い出す

SSLにしたページ内に、「http」と「https」が混在したコンテンツがある場合があります。

その場合、警告が表示され、安全でないページとなってしまうので、「http」と「https」が混在したコンテンツを洗い出します。以下はChromeブラウザでの洗い出し方法です。

F12キーを押下して、デベロッパー・ツールを開き、「Security」から混在コンテンツを一覧で表示させます。

Chromeブラウザ デベロッパー・ツール 「Security」の項目から混在コンテンツを表示

  1. 「Security」を押下。
  2. 「View recuests in Network Panel」を押下。

Chromeブラウザ デベロッパー・ツール 混在コンテンツが一覧で表示

「Network」のカテゴリに移るので、F5キーを押下します。

Chromeブラウザ デベロッパー・ツール F5キーを押下
混在コンテンツが一覧で表示

混在コンテンツが一覧で表示されるので、順次対応していきます。セキュアな状態になれば、Chromeブラウザの場合アドレスバーに下記のような錠アイコンが表示され、「https」が緑色になります。

Chrome SSLマーク
ChromeでのSSL

ポチレバブログパーツを差し替え

私はポチレバブログパーツを利用しているのですが、残念ながら現時点でポチレバの画像がSSLに対応していないようなので、iTunesのバナーリンクに差し替えました。

SSL化してよかったこと

  • 「Active Preview」プラグインがきちんと動作するようになった。
  • AMPのエラーがほとんどなくなった。

管理画面は全SSL、フロントはお問い合わせのみSSLと中途半端に行っていたので、URLの関係から「Active Preview」プラグインがリアルタイム動作していなかったのですが、それが解消されました。AMPはクロスドメインになっていたので、エラーが多かったのですが、これもほぼ解消されました。

まとめ

  • バックアップを確認する。
  • SNSのカウントをキャッシュする。
  • アフィリエイトリンクをSSLに変更する。
  • サーバーとWordPressでSSLを設定する。
  • WordPrssの内部リンクを検索置換する
  • .htaccessでhttpsにリダイレクトさせる。
  • Google AnalyticsのURL設定をhttpsにする。
  • Google AnalyticsとGoogle Search Consoleを関連付ける。
  • Google Search Consoleでサイトマップを送信する。
  • Webサービスで登録しているサイトのURLを変更をする。
  • キャッシュしているSNSのカウントを引き継ぐ。
  • 「http」と「https」が混在したコンテンツを洗い出して修正する。

サイト全体のSSL化は以前から行いたかったので、うれしさもひとしおです。URLのSSLなど一通りは確認したのですが、まだまだ問題が出てきそうな予感がするので、様子を見ていきたいと思います。

スポンサーリンク
記事のタイトルとURLをコピーする

シェアする

フォローする

WordPressで構築しているブログサイトのフロントページをhttps(SSL)化してみた
この記事をお届けした
PC ウェブログの最新ニュース情報を、
いいねしてチェックしよう!