サイトアイコン TECHNICAL CREATOR

ロリポップ!で構築したWordPressサイトをHTTPS化するときにやったこと

当サイト「テクニカルクリエイター」は10月8日よりサイト全体をHTTPS(常時SSL)に変更しました。

なぜHTTPSに対応しなければならないのか?

今後、HTTPSに対応していないサイトはGoogleの検索順位が下がってしまったり、ブラウザから警告が出てユーザーが閲覧できないことが出てきます。

セキュリティは Google の最優先事項です。Google は、 デフォルトで強力な HTTPS 暗号化を導入する など、業界でも最先端のセキュリティを Google サービスに導入することに力を注いでいます。これにより、たとえば Google 検索、Gmail、Googl...
HTTPS をランキング シグナルに使用します - Google ウェブマスター向け公式ブログ
この記事は Chrome セキュリティ チーム、Emily Schechter による Google Online Scurity Blog の記事 " Next Steps Toward More Connection Security " を元に翻訳・加筆したものです。また、...
Chrome の HTTP 接続におけるセキュリティ強化に向けて - Google ウェブマスター向け公式ブログ

レンタルサーバーならポチポチするだけ

「テクニカルクリエイター」はレンタルサーバーでお馴染みの「ロリポップ!」を利用しています(今どきのAWS+WordPressみたいなカッコいいやつじゃありません…)

ロリポップ!では7月から無料の独自SSLの利用ができるようになっており、ポチポチクリックするだけで簡単にHTTPSに対応できます。

いつもロリポップ!をご利用いただき、誠にありがとうございます。ロリポップ!では、これまで多くのご要望をいただいておりました無料の独自SSL「Let's Encrypt」を全プランで設定いただけるようになりました。基本のご利用料金のみで常時SSL化が可能です。さらに、ロリポップ!では100way対応となっており、ひとつの証明書で、独自ドメインあたり...
無料の独自SSLがご利用いただけるようになりました! - ロリポップ!レンタルサーバー

ただし、既に運用中のサイトの場合は、ロリポップ!の管理画面上での申し込み・設定が完了した後に、いくつか対応しなければならないことがありました。今回の変更に伴って発生した作業を紹介します。

WordPress設定の変更

まずはWordPressの設定画面にログインして、[設定]>[一般設定]のWordPressアドレスとサイトアドレスを「https://◯◯」に変更します。

imgタグのURL一括置き換え

HTTPSに切り替えると、各ページのURLは自動的に「https://◯◯〜〜」になってくれますが、過去に書いた記事に埋め込まれているimgタグのURLは「http」のままになってしまいます。このままではhttpのまま埋め込まれている画像があるページは警告が出てしまうので書き換える必要があります。

これにはSearch RegexというWordPressプラグインで対応しました。

Search Regex は、検索のための完全な正規表現をサポートし、WordPressに強力な標準検索機能と置き換え機能を追加します。 …
Search Regex - WordPress.org

プラグインをインストールし、[ツール]から[Search Regex]を選択します。

Sarch Pattern「にhttp://◯◯(ドメイン名)」、Replace Patternに「https://◯◯」を入力して、Searchボタンで検索結果を確認した後、Replace&Saveで書き換えを行います。

Chromeで各ページを確認し、アドレスバーに「保護された通信」が表示されていればOKです。

この「!」マークが表示されていたらhttpsに書き換わっていない画像がある可能性があります(他の原因も考えられます)

原因を調べるにはChromeのデベロッパーツールでセキュリティの状態を見てみましょう。

HTTPSの状態を検証するための「Security(セキュリティ)」パネルがGoogle Chromeのデベロッパーツールにに追加された。「証明書」と「TLS接続」、「リソース」の3項目の安全性を知ることができる。
HTTPS接続の状態をチェックできるGoogle ChromeのSecurityパネル | 海外SEO情報ブログ - 海外SEO情報ブログ

テーマ内のURLの変更

上記の一括置換では、記事内の置換は出来ますが、WordPressのテーマ内に直接URLが書かれているものは置換できません。

筆者が引っかかったのはCSS内のbackground-imageに直接URLを記載している箇所があったこと。原因は先程挙げたデベロッパーツールで判明しました。

httpからhttpsへのリダイレクト対応

httpでサイトを開設していた場合、GoogleはhttpのURLのままクローリングを行っているため、httpsのURLへリダイレクトさせる必要があります。

サイトの一番上の階層にある「.htaccess」の一番上に以下の内容を追記します。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>

httpでアクセスがあったら301リダイレクトさせてねという内容になります。

301リダイレクトは、URLが恒久的に変更されたときに適応するもので、該当のURLが持っていた検索エンジンの評価を引き継ぐことができるものです。

SEOの文脈で用いられる用語「301リダイレクト (301redirect)」について解説します。 意味:301リダイレクトとは 301リダイレクトは、URLが恒久的に変更された場合に用いられる転送処理のステータスコード …
301リダイレクトとは | SEO用語集:意味/解説/SEO効果など [SEO HACKS] - ナイル株式会社 - SEO HACKS

追記が完了したら、どのページでhttpでアクセスしてもhttpsにリダイレクトするか確認をしてみてください。もしもトップページはできても下層ページはできないという場合、記入した場所が間違っているか、誤った.htaccessを編集している可能性があります。

.htaccessの利用方法はロリポップ!公式マニュアルにも記載されています。

ロリポップ!レンタルサーバーのご利用マニュアル ロリポップ!レンタルサーバーでの.htaccessの設定などを説明したマニュアルページです。
.htaccess利用法 / サーバー・プログラム / マニュアル - レンタルサーバーならロ... - ロリポップ!レンタルサーバー

Google Analyticsの設定変更

Google Analyticsには変更しなければならない箇所が2つあります。

1つは[管理]>[プロパティ]>[プロパティ設定]のデフォルトのURLです。「http」となっている頭の部分をクリックし、「https」を選択します。

もう1つは[管理]>[ビュー]>[ビュー設定]のウェブサイトのURLです。こちらも「http」となっている頭の部分をクリックし、「https」を選択します。

Google Search Consoleの設定変更

Google Search ConsoleはURLの変更が出来ないので、再作成になります。

SEOを行う上で必須のツール、サーチコンソールの設置・登録方法について説明しています。ウェブマスターツールとは何か、何が出来るのかを知りたい方は、「サーチコンソールとは」をご覧ください。 サーチコンソールの概要 Goog …
サーチコンソール (旧:ウェブマスターツール) の設置・登録方法 | SEO基礎知識 [S... - ナイル株式会社 - SEO HACKS

対応後、検索結果やアクセス状況に何か変化はあったのか?

対応してから2日経ちましたが、これといって変化はありません。しかし変化がないのは朗報で、もしも設定を間違っていた場合、従来検索エンジンから来ていたユーザーが辿り着けない可能性があります。検索エンジンからの流入は今のところ減ったりしていないので、無事にHTTPS化は成功したようです。

これで検索結果が少しでも上位になってくれると嬉しい…!

モバイルバージョンを終了