httpsにしたのに「保護されていないコンテンツ」と出るときの対処法｜原因はmixed-contentsかも

レンタルサーバーのサービスで、サイトをSSL化してhttp→httpsに移行したにも関わらず、「保護されていないコンテンツ」と表示される場合があります。

その原因は大きく2つ考えられます。

mixed-contents（混在コンテンツ）の問題は、ユーザーの信頼を損なうだけでなく、SEOにも悪影響を及ぼす可能性があります。

この記事では、mixed-contentsの原因とその対処法について詳しく説明します。

mixed-contents（混在コンテンツ）の原因を理解する

mixed-contentsとは、httpsのページ内で、httpのリソース（画像、スクリプト、スタイルシートなど）が読み込まれている状態を指します。

ウェルカ
編集長

URLはhttpsになっていますが、サイトの中には「http」のデータが残っており、それを呼び出しているから、このサイトは完全にはhttps化されていない！と警告されているわけですね。

これが「mixed-contents（混合コンテンツ）」です。

適切に対処することで、サイトのセキュリティとユーザーエクスペリエンスを向上させることができます。

mixed-contentsの具体例と修正方法

1. 画像ファイルのURL修正

httpsページ内にhttpでリンクされた画像がある場合、その画像のURLをhttpsに修正する必要があります。

2. スクリプトやスタイルシートの更新

外部リソースをhttpで読み込んでいる場合、それらをhttpsに変更するか、httpsで提供されている同様のリソースに置き換える必要があります。

3. iframeのURL修正

他のサイトのコンテンツを表示するために使用されるiframeがhttpを使用している場合、そのURLをhttpsに変更するか、https対応のコンテンツを探す必要があります。

原因となっているmixed-contentsの見つけ方

mixed-contentsを見つけるには、ブラウザごとのデベロッパーツールからソースを表示させる必要があります。

専門用語が並びますがすることは簡単です。

ブラウザ別に見つけ方を解説します。

Chromeでの見つけ方

1. ウェブサイトにアクセスします。
2. Chromeデベロッパーツールを開きます。
   • 方法：画面上で右クリックして[検証]を選択するか、キーボードの[F12]を押します。
3. 上部メニューから[Console]を選択します。
4. 混合コンテンツ (mixed-content) がある場合、該当箇所が表示されます。

Firefoxでの見つけ方

1. ウェブサイトにアクセスします。
2. Firefox開発ツールを開きます。
   • 方法：画面上で右クリックして[要素を調査]を選択するか、キーボードの[F12]を押します。
3. [コンソール]をクリックします。
4. 混合コンテンツ（mixed-content）がある場合、該当箇所が表示されます。

Safari（Mac OS）での見つけ方

1. ウェブサイトにアクセスします。
2. Safariウェブインスペクタを開きます。
   • 方法：画面上で右クリックして[要素の詳細を表示]を選択するか、キーボードで[option]・[command]・[I]を同時に押します。
3. [コンソール]をクリックします。
4. 混合コンテンツ（mixed-content）がある場合、該当箇所が表示されます。

ウェルカ
編集長

mixed-contentを見つけたら、全てhttpsに変更しましょう。

mixed-contentsを解消してウェブサイトの信頼性とSEOを向上

mixed-contentsは、httpsサイトのセキュリティと信頼性を低下させる重要な問題です。

そのため、サイト内にmixed-contentsがあれば、ドメインだけSSL化しても、「保護されていないコンテンツ」と表示されることがあります。

適切な対処法を実行し、サイトをSSL化（https化）することで、ユーザーに安心して利用してもらえるウェブサイトを提供することができます。

WELUCA

ウェルカ

大阪府でホームページ制作をしています。WordPress・SEO・Webマーケティングのコンテンツを発信中！