【SEO】iframeはもう使わないで！Googleに評価されない3つの理由と現代的な代替案を徹底解説

はじめに：その<iframe>、サイトの評価を下げていませんか？

Webサイトを運営していると、外部のコンテンツや自サイトの共通パーツを<iframe>タグで埋め込みたくなることがあります。手軽で便利なため、つい使ってしまいがちですが、その手軽さの裏にはSEO上の大きな落とし穴が潜んでいます。

Googleの技術が進化した現在でも、<iframe>の不適切な使用は、あなたのサイトが正当な評価を受けるのを妨げる致命的な原因となり得ます。

この記事では、ITエンジニアの視点から、<iframe>がSEOにどのような悪影響を及ぼすのか、その技術的な理由と、現代的でSEOに強い代替案を徹底的に解説します。

理解のための比喩：Googleにとって<iframe>は「ショップインショップ」

なぜ<iframe>がSEOに不利なのか。それを理解するために、Googleの気持ちになって考えてみましょう。

Googleにとって、Webページは一つの「お店」です。<iframe>を使って外部コンテンツを埋め込むことは、そのお店の中に、別のブランドの「間借り店舗（ショップインショップ）」を作るようなものです。

百貨店（あなたのページ）の中に、高級ブランド（<iframe>の中身）のポップアップストアがあっても、そのブランドの売上や評判は、あくまでポップアップストア自身のものです。百貨店の評価には直接つながりません。

Googleも同様に、<iframe>の中身を親ページの一部とは見なさず、src属性で指定されたURLのコンテンツとして扱います。これが、SEO上のあらゆる問題の根源となります。

<iframe>がSEOに不利な3つの技術的理由

1. コンテンツが「借り物」扱いになり、自サイトの評価にならない

<iframe>で表示したコンテンツは、いくら高品質であっても、Googleからは「借り物」と見なされます。

例えば、自サイトの別ページ b.html を a.html に<iframe>で埋め込んだ場合、a.html のページ評価は上がりません。Googleは b.html を評価するだけです。結果として、親ページは中身が空っぽなページだと判断され、検索順位が上がらないという最悪の事態を招きます。

2. サイトの内部リンク構造が分断される

Webサイトのナビゲーションメニューを<iframe>で共通化するのは、SEOにおいて自殺行為です。

通常、ナビゲーションのリンクは、サイト内のページ同士を繋ぎ、どのページが重要かをGoogleに伝える重要な役割（リンクエクイティの伝達）を果たします。

しかし、ナビゲーションを<iframe>にしてしまうと、それは「別のお店」のリンク扱いになります。Googleはあなたのサイトのページ同士の関連性を理解できず、サイト全体がバラバラなページの集まりに見えてしまいます。

3. ユーザー体験の悪化が間接的にSEO評価を下げる

<iframe>は、ユーザー体験（UX）の面でも多くの問題を抱えています。

• レスポンシブデザインの崩壊: <iframe>の中身は親ページとは独立しているため、スマホで見たときにレイアウトが崩れ、中身がはみ出したり、意図しないスクロールバーが表示されたりします。
• ページの表示速度低下: <iframe>の読み込みは、ページの表示速度を遅くさせる原因になります。

これらのUXの悪化は、ユーザーの離脱率を高め、Googleが重要視するページ評価指標「Core Web Vitals」にも悪影響を与え、結果的に検索順位を下げる要因となります。

例外：使っても良い<iframe>とは？

では、<iframe>は絶対に使ってはいけないのでしょうか？いいえ、例外があります。 それは、コンテンツの提供元が、公式の埋め込み方法として<iframe>を指定している場合です。

• YouTube動画
• Googleマップ
• SNSの投稿（Twitter, Facebookなど）

これらのサービスは、Google自身が提供していたり、Googleがその<iframe>の扱い方を熟知していたりするため、SEO上のデメリットはほとんどありません。

重要なのは、自サイトのコンテンツや構造（ナビゲーションなど）のために<iframe>を使わないということです。

<iframe>の現代的な代替案

では、共通パーツなどを表示したい場合、どうすれば良いのでしょうか。

JavaScriptによるHTMLの動的挿入

まさに私がこのブログ群（Team Creative Lab）の共通ナビゲーションで実装した方法です。

1. 共通化したいHTMLパーツ（例: nav.html）を用意する。
2. JavaScriptの fetch APIを使って、そのHTMLパーツを非同期で読み込む。
3. 読み込んだHTMLを、ページの指定した要素（例: <div id="nav-container">）に挿入する。

この方法なら、最終的に親ページのHTMLの一部として完全に一体化するため、SEO上のデメリットは一切ありません。デザインも共通CSSで管理でき、メンテナンス性も向上します。

まとめ

<iframe>は、外部の独立した「ガジェット」（動画プレイヤーや地図など）を埋め込むためのものであり、自サイトの骨格やコンテンツを構成するために使うべきではありません。

便利なタグですが、その特性とSEOへの影響を正しく理解し、適切な場面でのみ使用するようにしましょう。自サイトの共通パーツには、JavaScriptを使った最新の方法を導入することをお勧めします。