【混合コンテンツ】SSL化しているのに「保護されていない通信」と表示される理由と対策

5 min 119 views
混合コンテンツアイキャッチ

SSL化(https)にしているのになんで「保護されていない通信」と表示されるのか疑問に思っている方は多いのではないでしょうか。

実はそのままにしているとサイト内の画像や埋め込み動画が表示されなくなり、ユーザーの離脱や検索順位の下落を招く恐れががるため、早期に改善が必要です。

今回はその原因と対策方法について解説します。

「保護されていない通信」と表示されるのは混合コンテンツが原因

保護されていない通信

SSL化しているのにも関わらず、上記のように「保護されていない通信」と表示される原因は混合コンテンツ (Mixed Content )が原因です。

実はSSL化が適用されていない状態なので、アドレスバーの左の鍵マークがつかず、エラーとなります。
ユーザーからしても「保護されていない通信」と記載されると不安な気持ちになるため、改善が必要です。
※以前はスマホでも「安全ではありません」という記述が出ていたのですが、現在は混合コンテンツでは表示されません。(2020/4/13 時点)

混合コンテンツとは

https内にあるhttpコンテンツの事です。
SSLをすると自動的にすべて切り替わるのではないかと思われがちですが、画像や動画、スタイルシート、スクリプトなどが、”http”の状態でサイト内に残っている事があります。

混合コンテンツがあるとHTTPSの効果が弱まるため、ページ船体のセキュリティの低下にもつながりますので早期に改善が必要となります。

また、今後Googlechromeのアップデートでページ内の画像やコンテンツが表示されなくなる可能性もあるので要注意です。

過去ののアップデートスケジュール

Googlechromeの混合コンテンツのアップデートは実はすでに始まっており、私が対策しているサイトでもYouTubeの埋め込み動画等が表示されない事象も確認しているため、早期に改善が必要となります。

過去のアップデートスケジュール

1.Chrome79リリース(2019年12月)
・混合コンテンツのブロックを、サイト単位で解除できるオプションを提供
・ユーザーが許可すれば、ブロックされたコンテンツも読み込み可能

2.Chrome80リリース(2020年2月)
・音声と動画の混合コンテンツが、「https://」で自動的に読み込まれる
(読み込めない場合、ブロックされて非表示になる)
・画像の混合コンテンツは読み込み可能
(ただし、アドレスバーの先頭に「保護されていない通信」と表示される)

3.Chrome81リリース(2020年3月)
・画像の混合コンテンツが、「https://」で自動的に読み込まれる
(読み込めない場合、ブロックされて非表示になる)

混合コンテンツの確認方法

それでは実際に混合コンテンツの確認方法を解説します。

1.URLの表示部分を確認

URLの横の赤枠部分がSSLしているにも関わらず「保護されていない通信」と出る場合は混合コンテンツの可能性が非常に高いです。
赤枠部分をクリックすると下記のような表示が出ます。

保護されていない通信

2.対象箇所の確認方法

上記のように表示されているページで「ctrlキー」+「U」のキーを押してください。
すると下記のような画像のページが表示されると思います。

このページが表示されたら、 「ctrlキー」+「F」を 押すと上部に検索窓が出てきますので「http:」で調べてみてください。
ここでヒットするコンテンツが改善しなければいけないコンテンツとなります。

ソースコード

混合コンテンツの解消方法

それでは具体的にどうやって改善するのかを解説します。

1.手作業で修正する

①画像パスを修正

「http://」の画像を見つけたら、その画像がある記事の編集画面から対象箇所のURLを「http」の後ろに 「s」 をつけて「https://」に変更してください。

②リンクの修正

次は画像同様で張り付けたリンクのURLを「http://」から「https://」に変更します。
※外部リンクなど「https://」に変更すると表示できなくなるサイトあるのでご注意ください。
(例)SSL化をしてないサイトなど

③対象画像を再アップする

手作業の最終手段となります。
対象画像があるページ毎に対象画像を一度ダウンロードし、再アップすることで「http://」に書き換える事が出来ます。

2.プラグインを使用する

すべて手作業でやるのはめんどくさいという方向けにプラグインを使用したやり方を解説します。
こちらはWordpressを使用されている方向けのものとなります。

①「Really Simple SSL」を使う

手作業でやるのは面倒だよという方はこのプラグインを使用すると簡単に修正することができます。
1ページずつ修正をしなくて済むなので便利なのですが、その反面負荷がかかり、サイトの表示速度が遅くなるため、最終手段くらいと思っていてください。

② 「Search Regex 」を使う

手間は省きたいけど、サイトにそこまで負荷をかけたくないという方はこのプラグインがおすすめです。
サイト内の記事内容を「http://」から「https://」に一括置換をするプラグインとなります。
しかし、こちらも万能ではなくエラーが出てしまったり、置換をしても混合コンテンツが解消されないことがあるので注意が必要です。

■設定方法
・「Search pattern」➜「http://」と入力
・「Replace pattern」➜「//」と入力
・「Search」をクリックし、対象を確認
・「Replace & Save」 で置換

まとめ

今回のテーマの混合コンテンツはドメインの評価やユーザビリティにも関わるところにはなります。
気がついたら「画像や動画が表示されない」ということにならないように早期に改善することがおすすめです。

混合コンテンツに関するよくある質問

Q

「保護されていない通信」と出ているのですが何が原因ですか。

A

サイトがSSL化されていない。もしくは、サイト内に「http://」のコンテンツが残っている事が原因です。

Q

混合コンテンツがあるとどんな問題がありますか。

A

ページ内の画像やYouTubeの埋め込み動画が表示されなくなる可能性があります。

Q

「安全ではありません」と表示されているのですが、このサイトは見ない方が良いのでしょうか。

A

多くの場合はSSL化が追い付いていないことが原因ですので閲覧する分には問題ございません。
ただし、クレジット等の個人情報を入れるサイトの場合は情報を抜き取られる可能性があるため、利用を控える事が賢明です。

Q

「混合コンテンツ」はどうやって確認ができますか。

A

確認したいページで①「Ctrl+U」でソースコードを表示。②「Ctrl+F」でページ内検索をするための検索窓を表示。③「http:」と入力し、ヒットするコンテンツが混交コンテンツとなります。

だいき

だいき

SEOディレクター×営業 | 『社会人としての基礎』や『最短で結果を出すためのコツ』を発信 | 部署移動6ヶ月で単月、半期の運用額、獲得粗利1位 | 未経験の業種、職種への転職(異動)でも結果を出せる |「かっこいい大人」を増やす!

【経歴】
・証券会社(東証一部上場)
職種:営業

・不動産デベロッパー(東証一部上場)
職種:営業⇒プロジェクト担当(仕入れ後~引き渡し)

WEBマーケティング企業
職種:営業⇒SEOディレクター

FOLLOW

カテゴリー:
タグ: