知っておくと便利！別のページを記事の中に埋め込むiframeの基本的な使い方
今回は備忘録的に。iframeというタグの基本的な使い方について。iframeというタグは、ある記事の中に、別のページの埋め込むがことができるタグです。
今回は僕の備忘録でもあるんですが、iframeってブログやホームページをやっている人にとっては、知っておくとちょっと便利なので、何かのついでに読んでいただけると嬉しいです。
別のページを埋め込めてしまうiframeタグ
↓↓iframeを使って別のページを埋め込んだ例 ↓↓
または、こんな感じで別の記事も埋め込めたりします。普通に最後まで記事が読めますね。
↓↓ ↓↓
これがiframeを使って別のページを埋め込むっていうことです。イメージできましたか！？
iframeタグの基本的な使い方
使い方は簡単！ 以下のコードをHTMLとして書き込んであげるだけです。WordPressでいうとテキストモードやコードエディタなど。
<iframe src="埋め込みたいページのURL" width="750" height="600" frameboader="0"></iframe>↑埋め込みたいページのURLには実際に埋め込みたいページのURL（例えば、https://junichi-manga.com/blog-accessup/ などと入れます）
あとは、埋め込みサイズは、widthとheightで指定してあげます。
- width=”横幅の数字”
- height=”高さの数字”
を入れてみてください。
GoogleマップやYouTube動画の埋め込みも！実は結構使われているiframe
このiframeというタグなんですが、ブログやHPを管理している人ならよく使うGoogleマップやYouTubeの埋め込みにも使われているんです。
例えば、Googleマップ ↓↓
↓これのソースコードはこうなってます。iframeが使われていますよね。URL部分がごっつい長いだけです。
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d61206.86551663984!2d-151.7737544996063!3d-16.504421070618097!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x76bdbd188a4a98ab%3A0x160a089e92d5ce61!2z44Oc44Op44O744Oc44Op5bO2!5e0!3m2!1sja!2sjp!4v1561471415126!5m2!1sja!2sjp" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>例えばYouTube↓↓
↓↓このようにYouTube動画の埋め込みタグもiframeが使われていますよね。
<iframe width="740" height="400" src="https://www.youtube.com/embed/c5GhTifH57g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>こんな感じで、iframeって結構よく使われているタグなんですよ！
ブログ運営者なら知らないと危険！iframeについて知っておいたほうが良いこと3つ
基本的な使い方がわかったところで、iframeについて知っておいたほうが良いことをお伝えします。
知っ得１）使いすぎると遅くなる
例えば、
- YouTube動画を20本以上埋め込んだ記事
⇒挫折しないWordPressブログの始め方｜初心者にも分かりやすく動画解説 - 何も埋め込んでいないほとんど文字だけの記事
⇒ 【分かってないと辛い】何のためにブログをやるの？何のためのSNS？何のためのYouTube？
この2つの記事をPageSpeed InsightsというGoogleのサイトで計測してました。
そうすると、以下のような結果でした。
| モバイルの点数 | PCの点数 | |
| 記事１（動画２０本以上） | 36 | 83 |
| 記事２ | 53 | 92 |
こんな感じで、iframeを使いすぎると、ページのパフォーマンスが落ちるので注意です。
知っ得２）iframeを使って埋め込んだページのアクセス数もカウントされてしまう
例えば、あなたのサイトのAという記事の中に、あなたのサイトのBという記事を埋め込んだとします。
そうすると、 読者さんが Aという記事を読んでくれたら、Bという記事まで読まれたこととしてGoogleアナリティクスでカウントされてしまいます。
（PV数アップだ―！って喜ぶんじゃなくて、見せかけだけのPVアップなので、Bという記事がちゃんと読まれていることにはならないんです。正確なアナリティクスのデータが取れないので、注意が必要です。）
知っ得３）iframeを使って埋め込まれたコンテンツは、Googleからそのページのコンテンツの一部として扱われない
Aという記事に、iframeを使ってBという記事を埋め込んでも、記事Bは記事Aのいち部として扱われません。
コンテンツの厚みを増やす（文字数を増やしたり、情報量を増やしたり…）という意味では使えないってことですね。つまり、iframeでコンテンツを埋め込んでもSEO的に有利にはならない、という感じです。
参考：海外SEO情報ブログ「iframeで表示したページはコンテンツの一部になるのか」
まとめ
ということで、今回はiframeというタグの基本を調べてお伝えしました。
iframeタグっていうのは…
- 1つのページの中に、別のページを埋め込むことが出来るタグ
- GoogleマップやYouTube動画を埋め込むときにもよく使われている
- 使いすぎるとページの読み込み速度が落ちる
- アナリティクスで埋め込んだページのアクセスまでカウントされてしまう
- SEO的に有利になることはない
こんな感じで覚えておくといいです！ということでiframeについてでした。この記事が少しでも参考になれば幸いです。
デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう！
＼ Kindleで売れ筋トップ獲得本 ／
GA4超入門ガイドブック
プレゼント！
