iframeとは？概要や設定方法・使用例を詳しく解説！
Web担当者であれば「iframe」を知っておく必要があります。
iframeとは、自身のWebページ内に他のWebページの画像・動画を埋め込んで表示できる、HTMLタグの一種だよ。
ここでは、「iframe にSEO効果はあるの？」「タグの記述方法がわからない」とお悩みのWeb担当者に向けて、iframeの記述方法や属性から、使用例、埋め込み手順まで詳しく解説します。
この記事で学べることは、以下のとおりです。
- iframeってなに？
- 記述方法と属性
- 使用例と埋め込み手順
- 注意点
- 目次
iframeとは
iframeとはなにか、わかりやすく解説します。
iframeってなに？
「インラインフレーム」や「アイフレーム」と呼ばれるiframeは、自身のWebページ内に他のWebページの画像・動画などを埋め込んで表示できる、HTMLタグの一種です。
指定したリンク先のWebページ内容を、自サイトのWebページ内に設けたフレームに表示することで、ユーザーがリンク先の内容をひと目で把握できます。
SEO効果はあるの？
iframeタグを使ったからといって、直接的なSEO効果があるわけではありません。
なぜ直接的なSEO効果がないのですか？
iframeを使って表示するリンク先の内容は、自サイトのWebページのコンテンツとみなされないから、Googleの評価対象にならないんだ。
しかし、iframeタグを使ってリンク先のWebページの画像や動画、テキストなどの内容を表示することによって、ユーザビリティ向上につなげられるため、間接的なSEO効果が期待できます。
iframeタグの記述方法と属性
iframeタグの記述方法と属性について詳しく解説します。
iframeタグの記述方法
iframeを使って、HTML内に他のHTMLを設置して表示させます。「HTML内に他のHTMLを入れ子にする」イメージです。
以下のように記述します。
<iframe src=”リンク先のURL” height=”高さの指定” width=”幅の指定”></iframe>
例えば、YouTubeの「https://www.youtube.com/shorts/hLaUTypzJNE」の動画を、幅600・高さ300で埋め込む場合の記述は以下です。
<iframe src=”https://www.youtube.com/shorts/hLaUTypzJNE” width=”600″ height=”300″></iframe>
各タグの役割は以下です。
- iframeタグ：埋め込むためのタグ
- src属性：表示させたいコンテンツのリンク先を指定する
他にも、さまざまな属性の記述が必要です。
サイズ調整の属性
サイズ調整には、「width属性」と「height属性」を用います。
各属性の役割
- 属性：フレームの幅を指定
- height属性：フレームの高さを指定
iframeタグを使用する際に推奨されている属性は他にもあるよ。次で紹介しよう！
その他の属性
title属性
埋め込んだコンテンツの説明をするのがtitle属性です。
title属性を記述し、コンテンツの内容を説明することで、ユーザーが視覚的にコンテンツを把握できます。
allow属性
allow属は、埋め込んだコンテンツの機能を制御する属性です。
動画の自動再生やユーザーの位置情報へのアクセス、フルスクリーン表示や暗号化されたメディアの再生など、許可する機能を記述します。
loading属性
ブラウザのWebページの読み込みを制御する属性です。
非推奨の属性
属性の中には、使用を避けるべきものもあるよ。
- name属性：フレームの名前を指定
- frameborder属性：フレームの境界線を指定する際に用いる
- scrolling属性：スクロールバーの表示の仕方を指定する
iframeの使用例と埋め込み手順
iframeの記述方法がわかったら、早速Webページ内にコンテンツを埋め込んでみましょう。
今回は、「動画」「Googleマップ」「SNS」の埋め込み手順を解説します。
動画
YouTubeの埋め込み手順を解説します。
STEP1.
埋め込みたいYouTubeの動画ページを開きましょう。
STEP2.
動画のタイトルの下にある「共有」ボタンをクリックします。
STEP3.
「埋め込む」のアイコンをクリックしてください。
STEP4.
「動画の埋め込み」に表示された<iframe>タグをコピーします。
右下にある「コピー」ボタンをクリックしてもコピーできます。
STEP5.
Webページ内の動画を表示させたい位置に、コピーした<iframe>タグを貼り付けましょう。
STEP6.
width属性とheight属性で動画のサイズを調整します。
STEP7.
allow属性で動画の機能を許可したら完了です。
Googleマップ
Googleマップの埋め込み手順を解説します。
STEP1.
Googleマップにアクセスしたら、表示させたい場所を検索します。
STEP2.
「共有」ボタンをクリックしてください。
STEP3.
共有の画面が表示されたら、「地図を埋め込む」をクリックします。
STEP4.
サイズを「小」「中」「大」「カスタムサイズ」の中から選択したら、表示されたiframeタグをコピーします。右にある「HTMLをコピー」をクリックしてもコピーできます。
また、サイズは後から手動で変更可能です。
STEP5.
Webページ内の地図を表示させたい位置に、コピーしたiframeタグを貼り付けましょう。
STEP6.
width属性とheight属性で地図のサイズを調整します。
STEP7.
allow属性で地図の機能を許可したら完了です
SNS
X（旧Twitter）の埋め込み手順を解説します。
STEP1.
Xにアクセスしたら、埋め込みたい投稿を表示します。
STEP2.
投稿日の右にある「…（メニュー）」ボタンをクリックしましょう。
STEP3.
「</>投稿を埋め込む」をクリックしてください。
STEP4.
表示されたiframeタグをコピーします。右にある「Copy Code」をクリックしてもコピーできます。
STEP5.
Webページ内の投稿を表示させたい位置に、コピーしたiframeタグを貼り付けたら完了です。
iframeの注意点
iframeを使用する際には、いくつか注意点があります。
ATTENTION 1
直接的なSEO効果はない
WebサイトやWebページを作成するなら、検索結果の上位表示を獲得したいと考えるのは当然です。上位に表示させるために、ほとんどの企業がSEO対策としてさまざまな施策を実施しています。
多くのメリットがあるiframeですが、直接的なSEO効果は期待できません。
iframeタグを使って埋め込んだコンテンツは、自前のコンテンツとみなされないため、SEOでは評価されないからです。
しかし、ユーザビリティが上がるため間接的なSEO効果につながります。直接的に効果があるわけではないことを覚えておきましょう。
ATTENTION 2
ページのデザインが難しい
iframeタグを使ったWebページは、デザインが難しいため注意が必要です。
デザインを変える際には、直接読み込み先の内容を書き換えたり、埋め込んだWebページにJavaScriptを設定したりしなければなりません。
また、iframeタグで設定したフレームのサイズよりも、読み込み先の内容が大きすぎる場合は、ユーザーの使い勝手が悪くなる恐れがあります。必要な情報を求めてスクロールで移動しなければならないため、ユーザーが目的の情報にたどり着きにくくなる可能性を慮しましょう。
ATTENTION 3
廃止された属性がある
最新バージョンのHTML5において、廃止された属性がいくつかあります。
例えば、境界線を表示させる「frameborder属性」や、スクロールバーを表示させる「scrolling属性」が廃止されました。
反対に、セキュリティのために制限をかける「sandbox属性」など、HTML5から使用可能な属性もありますので、使用可能な属性の確認が必要です。
よくある質問
iframeとはなんですか？
Webページ内に他のWebページの画像や動画などを埋め込んで表示できる、HTMLのタグの一種です。
iframeにSEO効果はありますか？
直接的なSEO効果はありませんが、iframeタグを使ってリンク先のWebページの画像や動画、テキストなどの内容を表示することによって、ユーザビリティの向上につなげられるため、間接的なSEO効果が期待できます。
iframeはどういったところで使われますか？
Webページ内に、他のWebページの内容を表示させたい場合に使います。
iframeを使うことによって、YouTubeなどの動画やGoogleマップなどの地図、Xの投稿などのSNSといったコンテンツの表示が可能です。
まとめ
iframeタグは、動画やマップ、SNSや広告など、他のWebページの情報を埋め込む際に用いる要素です。記述も簡単ですので、使用可能な属性とHTMLのバージョンに注意すれば、どなたでも活用できます。
また、iframeタグに直接的なSEO効果はありませんが、iframeタグを使ってユーザーに見やすくわかりやすいWebページを作成することで、ユーザビリティの向上につなげられるため、間接的なSEO効果が期待できます。
本記事で紹介した記述方法や注意点を参考に、ぜひユーザーに親切なWebページを作ってみてください。
