SEO

これで完璧!HTTPSの移行の全手順をエラー解決法付きでまとめたぞ

さて、最近はhttps移行の話が多くなってきましたね。

そろそろhttpsに移行したほうが良いんじゃないか?」って思って自分でやってみようと思っている人も多いと思います。
そう、httpsはSEOに影響したり、何よりも安全な通信を行うためには必須!
フォームによる入力や、ECサイト(ショッピングするためのサイト)を構築している場合は絶対に設定しておきたい項目です。

今回はこのhttpsに移行するための全手順をエラーの解決法付きで、どこよりも分かりやすくまとめてみましたので、ぜひ参考にしてくださいね〜!

まずはhttpsが有効かセキュリティー状態をチェックする

まず、httpsになっているかチェックをしてみましょう。
お使いのブラウザでhttpsになっているか確認できます。

基本的にはブラウザのURLの欄に南京錠のようなマークがhttpsの証です。
例えばGoogleChromeで安全な通信(SSL通信って言います)ができている場合は緑色の鍵マークが表示されます。
https 移行:グーグルクロームの南京錠

httpsがうまく設定できていない場合

httpsの設定がうまくできておらず、SSL通信ができていない場合は「保護されていない通信」のように表示されてしまいます。
httpからhttpsに移行するとほとんどのサイトは何もしなければこのような表示になってしまうでしょう。
https 移行:保護されていない通信

この場合は、URL上はhttps://◯◯.comのようになっていてもhttpsの効果は発揮されていません。
安全な通信はされないし、SEOの恩恵もありません!早急に直しましょう!

【ブラウザ毎のhttps確認方法】
ブラウザによってhttpsの確認方法が若干違っています。GoogleChrome以外のブラウザを使っていて、どこを見ればいいか分からない方は詳しい記事があったのでこちらを見てください。
主要ブラウザ(Chrome, Firefox, Edge, IE, Safari)のSSL関連挙動一覧

SSLエラーをチェックする方法

もし下記のような状態になっていたら要注意。

https 移行:南京錠に警告マーク

  • 「安全でない通信」と表示されている
  • 「保護されていない通信」と表示されている
  • https://が緑色ではない
  • 南京錠アイコンに警告マークが表示されている
  • 南京錠アイコンが表示されていない

こんな時はエラーを解消しなければいつまで経っても解消できません。
エラーの確認をする場合はツールを使ってチェックしましょう。

Google Chromeのデベロッパーツールでhttpsエラーを確認

Google Chromeにはページ情報を解析するツールが標準で付いてきます。
そのツールを使うとhttpsのエラーを解析することが可能です。
httpからhttpsに移行した場合、画像のURL指定が間違っていることが多いので、そのチェック方法を教えておきます。

[メニュー] → [表示] → [開発/管理] → [デベロッパーツール]と選択しましょう。
※ちなみにWindowsはF12を押しても起動します。
https 移行:デベロッパーツールの方法

そして、「Console」タブを選択します。
これでエラーや、警告が確認できます。
https 移行:Console
警告数に注目しよう。

No.Warningが0になればhttpsとして表示されます。Errorは項目があってもhttpsとして認識されます。
ただし、Errorの中にはhttpsに関わる項目があるのでチェックしておきましょう。

続いて、デベロッパーツールを開いたままGoogle Chromeでエラーのあるページを開きましょう。
すると、Console上のリストにエラー箇所が表示されます。
https 移行:Mixed Content: The page at ‘https:/ドメインと画像URL’ was loaded over HTTPS, but requested an insecure image ‘http://ドメインと画像URL.png’. This content should also be served over HTTPS
これらは全て画像のURLがhttpのままになっていますよと警告されています。
一つひとつhttpsにURLを置き換えていけばOKです。

パッと変更する方法はこちら

Firefoxの開発ツールでhttpsエラーを確認

Firefoxの開発者ツールでチェックする場合、[ハンバーガーメニュー] → [ウェブ開発] → [開発ツールを表示]を選択すればツールが起動します。
https 移行:ハンバーガーメニューからウェブ開発

https 移行:開発ツールを表示

安全でない表示コンテンツが混在している場合、その一覧を確認することが可能です。
https 移行:Firefox開発ツール

Firefoxのページ情報ダイアログでチェック

Firefoxの場合、ページ情報の詳細を表示して確認する方法があります。さきほどのコンソールよりもかなり分かりやすいです。
まずは、https化がうまくできていないページを開いて、南京錠に警告マークがあるアイコンがあったらクリックしましょう。
https 移行:南京錠に警告アイコンをクリック

「この接続は安全でありません」と表示されるので右矢印を押して…
https 移行:この接続は安全ではありませんのすぐ右

[詳細を表示]というボタンを押しましょう。
https 移行:詳細を表示

[ページ情報]が表示されるので[メディア]タブを選択します。
https化を妨げている画像が一覧で表示されるので、その画像をクリックしてみてください。
画像がプレビューされるので、その画像のURLをhttpsに直していきましょう。これを一つひとつやっていきます。
https 移行:画像をクリックすると画像が表示されて確認しやすい

文字情報だけよりは圧倒的に直しやすいかなって感じますね。
手作業はやはり大変なのでWordPressならプラグインを使ってパッと変更しちゃいましょう。

[

内部リンクをパッと変更する方法はこちら

その他のhttpsのチェック

これらのチェックを行ってもうまくhttps化ができていない場合は、これから紹介する内容を一つひとつチェックしていってみてください。

内部証明書のチェック

前提条件となりますが、httpsはサーバー証明書を取得していなければ設定できません。

サーバー証明書って?

SSLサーバ証明書とはSSL暗号通信時に利用する証明書です。電子証明書のひとつでサーバに対する印鑑証明書のような役割があります。SSL通信の暗号化に使用する公開鍵(暗号鍵)とコモンネーム(FQDN)やドメインの所有者情報を、認証局が紐づけて証明書を発行します。発行されたSSLサーバ証明書はWebサーバやメールサーバにインストールします。
出典:SSLサーバ証明書とは?

めっちゃ難しく書いてありますが、簡単に言うと「本人だし、安全ですよ」と第三者に認められた状態になると証明書がもらえます。これがなければhttpsにはなれません。

お金を出して証明書を入手する場合もありますし、レンタルサーバーの場合はサービスとしてSSLサーバー証明書を申請できるようになっているところも増えています。
私はエックスサーバーを使っていますが、手順はレンタルサーバーによって変わります。
マニュアルが用意されていることも多いのでチェックしておきましょう。

独自SSLを設定してhttpからhttpsに変換する手順
⇒SSL設定の手順はこちらにまとめてあります。

ちなみにサーバー証明書には種類がたくさんあり、無料もあれば有料もあります。
有料のほうがセキュリティが高くなるようですが、無料だからといってGoogleの評価に優劣が生まれるかと言えば関係ないようです。

WordPressの設定変更

WordPressをお使いの方はWordPressアドレスとサイトアドレスのURL出力設定をHTTPSアドレスに変えたかチェックしておきましょう。のURL出力の設定をHTTPSのアドレスに変更します。
SSL化手順:WordPressのアドレスをhttpsにしよう

WordPress以外であっても、CMSであれば同じ用な設定箇所があります。

httpからhttpsに切り替える手順
⇒WordPress設定、サイトアドレス設定手順もこちらにまとめてあります。

rel=”canonical”の更新

ちなみにrel=”canonical”をHTTPSのURLに向けます。
これがhttpのままだと、httpsに301リダイレクトしてもhttpに正規化されてしまうようです。

上記のトラブルの例
HTTPSへの移行時にはrel=”canonical”が指すURLもHTTPSに必ず更新すること

WordPressの設定で行えるWordPressのURL、サイトアドレス設定で同時に置き換わります。
忘れずに設定しておいてくださいね。

内部リンクの修正

httpから移行した方がつまづくのは画像のURLでしょう。
srcの値(画像表示の際には必ず使われています)がhttpのままだとSSL暗号化通信は使えません。

そのため、一つひとつ書き換えていく必要があります。
が、めんどうなので
WordPressであればSearch Regexというプラグインを使うことによって一括置換ができます。
※失敗すると大変なので事前にバックアップを取っておきましょうね。

まずはSearch Regexをインストールし、有効化しておきましょう。
https 移行:Search Regex有効化

[ダッシュボード] → [ツール] → [Search Regex]を選択します。
https 移行:SearchRegexの場所

Search Regexの設定画面では以下のように設定していきましょう。
https 移行:Search Regexの設定

  • Source:Post content(変更の必要なし)
  • Limit to:No limit(変更の必要なし)
  • Order By:Ascending(変更の必要なし)
  • Search pattern:http://◯◯.com(SSL化する前のあなたのブログのURL)
  • Replace pattern:https://◯◯com(SSL化後のあなたのブログのURL)
  • Regex:選択不要

上記は必ず自分のブログの設定にしてくださいね。

設定が済んだら、[Replace]ボタンを押してみましょう。
すると、置換するリストが出てきます。

薄緑の欄が置換前のURLで、薄黄色の欄が置換後のURLです。これを一つひとつ確認していきましょう。
https 移行:置換画面
上記の画像はhttpsで検索していますが、皆さんはhttpが表示されていると思います。

[Replace & Save]のボタンを押して変換してしまうと元に戻すことはできません。
挙動がおかしくなってしまうこともあり得るので、置換後のURLは間違っていないか?はしっかりチェックしておきましょう。

一括置換内容に問題がなければ、置換を行いましょう!
[Replace & Save]ボタンをクリックします。
https 移行:Replace&Saveで一括置換

テーマなどの設定を見直す

画像のURLを直しても実は投稿、固定ページなどのURLが置換されただけ。
実はテーマ内の設定ではそのままhttpが指定され続けている可能性があります。

投稿ページはhttpsが有効なのに、トップページはhttpsではないなど、一部のページのみ設定が有効にならない場合は見直してみてください。

カスタマイザーの画像チェック

https 移行:カスタマイザーの画像設定
テーマ内で、画像を設定している箇所は同じ画像をもう一度設定してあげましょう。
同じ画像を指定し直せば良いだけなので、新しくアップロードする必要はありません。
これだけでhttpsに切り替わってくれます。

【一般的に変更が必要になる箇所】

  • ロゴ画像
  • ヘッダー画像
  • ファビコン画像
  • アップルタッチアイコン
  • 背景画像

など……。

ウィジェットエリアのチェック

ウィジェットの中でimg、iframe、form、scriptタグを使っていたら要注意。
https 移行:ウィジェットエリアの画像設定
ウィジェットでは、Search Regexで置換をしても対象となっていません。そのため、自分自身でhttpが残っていないか確認していきましょう。

もし、httpsにしてもエラーが出続けるなら相対URLにしてhttp、httpsの両方で対処できるようにしておきましょう。

相対URLとは?
相対とは、今いる場所(階層)を基準にして、目的地(情報)がどこにあるのかを伝えること。

ちょっと難しい話なのでこのように書けばカンタンに実現できます。
「https://soratobunezumi.co.jp/media/gazou」を「//salty.style/pasolack/gazou」のようにhttp:を省くことによって相対URLになります。
相対URLを詳しく知りたい方はこちらの記事をどうぞ。
HTML 【 URL 】 ~ 絶対パスと相対パス

アフィリエイトタグのチェック

https 移行:アフィリエイトでもhttps
ASPタグなどアフィリエイトのタグを本文に貼り付けている場合はhttpsに変換する必要があります。
画像はA8.netの画像ですが、すでにhttps化されていますね。

ただ、全てのアフィリエイトサービスが対応しているワケではありませんので注意しましょう。

SSL対応ではないスクリプトの呼び出しを削除

ちょっと難しい話なのですが、SSLに対応していないアクセス解析呼び出しは削除する必要があります。
考えられるのはアクセス解析系…かな?

【スクリプトがhttps化を妨げていないか確認する方法】

  1. WordPressをログアウトします。
  2. GoogleChromeの場合、メニューの[表示] → [開発/管理] → [ソースを表示]を選択します。
  3. ソースが開くので検索( Ctrl + F )から「<script」と検索し、http://のスクリプトが呼び出されていないかチェック。

WordPressをログアウトした状態ソースコードを開いて検索機能( Ctrl + F )から「<script」などと検索してみて、http://のスクリプトが呼び出されていないかチェックしてみましょう。
https 移行:ソースコードを検索しよう

まとめ:一つひとつ丁寧にやればHTTPS化はできます

難しいと感じるかもしれませんが、慣れてしまえば時間がかかっても2時間くらいの作業です。
むしろPHPコードなどゴリゴリのカスタマイズを行っている人でないならば、カンタンにhttpsに移行できるでしょう。

でも、安心してはいけません。
httpsになった後、適切な処置をしなければ勿体ない想いをしてしまうかも…!?

次回はそのまとめを書きます。お楽しみに〜。

-SEO