iframeとは？SEO効果や使い方、注意点を解説！

iframeは外部ページのコンテンツを、自社ページに埋め込むためのHTMLタグです。iframeをうまく活用すれば、ユーザビリティを高められ、間接的なSEO効果が期待できます。

本記事では、iframeのSEO効果や使い方について解説します。iframeを使う際の注意点についても併せて紹介しているので、参考にしてください。

iframeとは

「iframe」はsrc属性によって任意のURLを読み込み、Webページ内で表示するためのHTMLタグです。正式名称は「Inline Frame」といい、アイフレームやインラインフレームと呼ばれます。

外部リンクをユーザーに紹介したい場合は、Webページ内にURLを直接貼り付けることでも表示可能です。しかし、リンク先のコンテンツをユーザーが閲覧するためには、クリックや別ページの表示といった手間をかけなければいけません。

一方、iframeを設置すれば、リンク先のコンテンツをシームレスに表示できます。iframeの利用によってユーザーは余計な行動を起こす必要がなくなるため、得たい情報を手軽に取得しやすくなります。

iframeのSEO効果

iframeには直接的なSEO効果はありません。iframeによって表示される画像やリンク先などのコンテンツは、検索エンジンの評価対象とはならないためです。ただし、iframeによってユーザビリティが高まれば、結果としてSEO効果が期待できます。

反対に、iframeは使い方によっては、SEOに悪影響を与える可能性があるため注意が必要です。iframeタグをheadタグ内に記述すると、それ以降のタグがbodyタグとして認識されます。例えば、iframeタグの次にcanonicalタグを記述していても、その効果が無視されてしまいます。

canonicalタグが機能していないとURLの正規化がうまくいかず、重複コンテンツとなったり、被リンクが分散したりして、検索エンジンから評価されにくくなるでしょう。iframeタグを使用する際は、記述する位置への注意が必要です。

iframeの使い方

iframeの使い方として、HTML5で使う方法やCSSに適用させる方法、高さを調整する方法をそれぞれ詳しく解説します。

iframeをHTML5で使う方法

iframeをHTML5で使う場合の、マークアップの例は以下のとおりです。

<iframe src=”リンク先のURL” height=”高さの指定” width=”幅の指定”></iframe>

srcはソースを表し、表示したいコンテンツが置かれたリンク先を指します。heightはフレームの高さ、widthはフレームの幅のことです。

例として「https://www.youtube.com/watch?v=cI4Jk94sKeE」というアドレスの、YouTubeの動画を埋め込む場合を取り上げます。

<iframe src=” https://www.youtube.com/watch?v=cI4Jk94sKeE ” height=”300″ width=”500″>

</iframe>

上記のように記述すれば高さ300・幅500で、指定したリンク先のコンテンツをWebページ内に埋め込むことが可能です。

iframeをCSSに適用させる方法

iframeをCSSに適用させる方法には、以下の2つがあります。

• iframe内のコンテンツを調整
• iframeの枠デザインを変更

src属性で指定したリンク先のCSSファイルを修正すれば、iframe内のコンテンツを調整可能です。また、iframeタグにstyle属性やid属性、class属性を指定すれば、iframeの枠のタイプや大きさといったデザインを変えられます。

iframeを装飾する際に、以前まではframeborder属性やscrolling属性などを指定していました。しかし、これらの属性はHTML5では推奨されていないため注意しましょう。

CSSの一例は以下のとおりです。

iframe {

 border: none;

 margin: 0px;

 width: 200px;

 height: 200px;

 overflow: hidden;}

上記のように記述すれば枠線の太さや高さ、幅が固定され、はみ出た部分の処理についても指定できます。

iframeの高さを調整する方法

以下の手順で、iframeの高さ調整が可能です。

1. 「contentWindow」から「document.body.scrollHeight」プロパティを取得
2. プロパティから取得したドキュメントの高さを、iframeの高さに指定

ただし、iframeで読み込むリンク先のページと、コンテンツを埋め込むWebページが同じサーバー（ドメイン）上になければ、この方法は使えません。「クロスドメイン」というセキュリティ上の制限によって、別のドメインのWebページの場合はエラーが生じます。

iframeを使うときの注意点

iframeを使う際は、以下のような点に注意が必要です。

1. 情報がリンク先の下方に掲載されている場合、スクロールに時間がかかる
2. iframeで埋め込みをした外部ページは、CSSでスタイル調整をおこなえない

⒈については、iframeは指定したページ全体を読み込んでしまうので、目当てのコンテンツまで多くのスクロールが必要な場合があります。iframeではなくCSSのoverflowプロパティを使用すれば、iframeを擬似的に作成でき、スクロールバー付きのフレームを作れます。

⒉については、iframeのスタイルを変更するなら、CSSだけでなくJavaScriptの使用も有効です。JavaScriptを使えば、iframeに表示している要素を書き換えられます。

iframeを活用して、ユーザビリティを高めよう

iframeを活用すれば、Webページ内に別ページのコンテンツを埋め込んでユーザーに紹介できます。ただし、inframeの使用にはいくつか注意点があり、使い方を間違えればSEOに悪影響を及ぼす可能性があります。

Webページの運用やSEO対策が難しく感じられる場合は、外部に依頼するのもおすすめです。ジオコードではWebサイト内部の修正作業や、SEOコンサルティングなどを請け負っています。相談も無料で受け付けているので、まずはお問い合わせください。