【初心者向け】iframeの意味と使い方を3ステップでマスターしよう【

SHARE

●iframeの意味がわからない
●YouTubeや地図を埋め込みたいけれど失敗する
●SEO的にiframeを使うのが不安

HTMLを学び始めた人の多くが、iframeの使い方でつまずきます。
iframeはページ内に別ページを埋め込む便利なタグですが、SEO・セキュリティ・デザインの3点で注意が必要です。

この記事では、iframeの意味・使い方・SEO対策・安全な活用法を初心者向けにわかりやすく解説します。
読了後には、iframeを自信を持って使いこなせるようになります。

iframeとは？意味と基本構造をわかりやすく解説

iframe（inline frame）は、Webページの中に別のページを表示するHTMLタグです。
「窓の中にもう一つのページを開く」ような仕組みです。

代表的な用途は、YouTube動画・Googleマップ・外部フォームの埋め込みです。

<iframe src="https://example.com" width="600" height="400"></iframe>
属性名 内容 例
src 埋め込み先のURL src=”https://example.com“
width / height サイズ指定 width=”600″ height=”400″
allow 許可する機能 allow=”fullscreen”
loading 遅延読み込み loading=”lazy”
sandbox セキュリティ制限 sandbox

iframeの基本を理解することで、Webページの自由度が大幅に上がります。

iframeの使い方｜実際の埋め込み例（YouTube・Googleマップなど）

YouTube動画

  1. 「共有」→「埋め込む」をクリック

  2. HTMLコードをコピーして貼り付け

<iframe width="560" height="315" src="https://www.youtube.com/embed/abcd1234" frameborder="0" allowfullscreen></iframe>

Googleマップ

  1. 地図を開いて「共有」→「地図を埋め込む」

  2. コードをコピー

<iframe src="https://www.google.com/maps/embed?pb=..." width="600" height="450" style="border:0;" allowfullscreen loading="lazy"></iframe>

<h2>iframeを使うメリット・デメリットを比較</h2>

項目 メリット デメリット
実装 コードを貼るだけで簡単 外部依存が強い
デザイン 動的要素を追加できる レイアウト崩れのリスク
SEO 補助的に使える 中身を検索エンジンが認識しない

iframeを使うとSEOに影響はある？

iframe内のコンテンツはGoogleが評価しにくい傾向があります。
したがって、メイン部分をiframeで表示するのは避けましょう。

本文中で内容を補足すればSEO評価を保てます。
例：

<p>この動画ではiframeの正しい使い方を解説しています。</p>
<iframe src="https://www.youtube.com/embed/abcd1234"></iframe>

iframeのセキュリティ対策｜安全に使う方法

iframeは外部ページを読み込むため、安全対策が必須です。

属性 内容 目的
sandbox 外部動作を制限 攻撃防止
allow 明示的に許可する操作 セキュリティ制御
loading 遅延読み込み 表示速度改善
<iframe src="https://example.com" sandbox="allow-scripts" loading="lazy"></iframe>

iframeが正しく表示されないときの原因と対処法

原因 内容 対処法
URL誤り srcの指定ミス 正確なURLを設定
HTTPS問題 HTTP混在でブロック httpsに変更
X-Frame制限 外部側で禁止設定 代替手段を検討
サイズ不足 表示領域が小さい width / height調整

レスポンシブ対応iframeの書き方

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://www.youtube.com/embed/abcd1234"
style="position:absolute; top:0; left:0; width:100%; height:100%;"
frameborder="0" allowfullscreen></iframe>
</div>

スマホでも美しく収まるよう、縦横比（16:9）を維持します。

iframeの実践活用事例

活用シーン 内容 効果
採用サイト エントリーフォーム埋め込み UI統一
イベント告知 Googleフォーム埋め込み 離脱防止
メディア記事 SNS投稿埋め込み 滞在時間増加

iframeを使う前に知っておくべき3つのルール

  1. 信頼できるサイトのみ埋め込む

  2. 代替テキストやリンクを併用する

  3. loading=”lazy”でページ速度を維持する

iframeを理解した次のステップ

タグ 用途 学ぶ価値
<video> 動画埋め込み 外部依存を減らす
<embed> メディア表示 内部構造の理解
<object> PDFなどの埋め込み iframeとの比較に最適

まとめ｜iframeを正しく使ってSEOも安全に

iframeは、外部情報を効果的に取り入れるための便利なタグです。
ただし、主役ではなく「補助的な使い方」を心がけることが重要です。

3ステップでマスター：

  1. 意味と構造を理解する

  2. 実際に埋め込む

  3. SEO・安全対策を実施する

安全に使えば、ユーザー体験とSEO評価の両方を高められます。

前の記事

xlsxとは？3分でわかる意味・開き方・変換方法まとめ

次の記事

【2025年最新】ワイプとは？パソコンの記憶装置を安全に初期化…