【イラスト付き】iframeとは？埋め込む際の注意点やSEO効果をわかりやすく解説

ブルーちゃん教えてもらえないかしら？

iframeってなにかしら？

iframeとは、Webページ内に他のページの内容を埋め込んで表示させるためのHTMLタグだよ

src属性で埋め込みたいWebページのURLを指定するんだ

実際に例を挙げると、、、

このコードをHTMLのbody内に入れると、

っていうように、Youtubeが埋め込まれて表示されるよ！

ここでは、srcに「Youtubeテーマソング」のURLを入れているから、それがWebサイトに埋め込まれて表示されるんだ！

iframeにCSSを適用させる方法は3つあるよ！

読み込む側で調整するか、読み込まれる側で調整するかって感じだね

1つ目は、iframeタグ内にstyle属性やclass属性を指定して、cssをあてる方法だよ

読み込む側で直接指定できるから、Webサイトのデザインに合わせて調整できるよね

ただ、読み込んだWebサイトが意図しない改変をしないように気を付けようね

2つ目は、読み込んだWebサイトにjQueryを仕込んでおいて表示を制御する方法だよ

この方法も、iframeで埋め込むWebサイトの意図に反しないよう注意しようね

3つ目は、読み込み先のCSSで調整する方法だよ

大元のWebページ自体で調整されるから、理想的な形だよね

iframeを埋め込むときに高さが問題になることが多いんだ

高さ問題を回避するために高さを自動調節する手法があるんだよ

iframeで埋め込んだ部分にスクロールを表示しないことで、まるで埋め込んでいないように違和感なく見せることができるよ

iframeで埋め込むWebページの高さを取得して表示領域を調節するんだ

ユーザーは自然な見た目で情報をインプットできるよね

あえてスクロールを表示することで、表示領域を管理してWebページ全体の統一性を崩さないこともできるよ

埋め込み先によって高さや表示ボリュームが違うと、大元のWebページのデザインが崩れてしまうこともあるよね

埋め込んだ内容を表示するスペースを確保しておくことで、制御しやすくなるんだよ

Webサイトに合わせて最適な埋め込み方を検討してみてね！

iframeを利用することによるSEO効果は期待できないんだよ

iframeで読み込まれたコンテンツは、Webサイトのコンテンツとしては評価されないからだね

埋め込む位置を間違えると逆にSEOに悪影響な場合もあるよ

特にheadタグ内にiframeを埋め込まないように気を付けようね

SEOを考慮するなら、iframeで埋め込むよりも、テキストや画像でコンテンツとして組み込むことができないかを検討する方が理想的だよ！

iframeについて最後にまとめておくね

便利な機能だけど気を付けて使ってねー！