デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

知っておくと便利!別のページを記事の中に埋め込むiframeの基本的な使い方

    
iframeの基礎
\ この記事を共有 /
知っておくと便利!別のページを記事の中に埋め込む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について知っておいたほうが良いことをお伝えします。

知っ得1)使いすぎると遅くなる

例えば、

  1. YouTube動画を20本以上埋め込んだ記事
    挫折しないWordPressブログの始め方|初心者にも分かりやすく動画解説
  2. 何も埋め込んでいないほとんど文字だけの記事
    【分かってないと辛い】何のためにブログをやるの?何のためのSNS?何のためのYouTube?

この2つの記事をPageSpeed InsightsというGoogleのサイトで計測してました。

そうすると、以下のような結果でした。

  モバイルの点数 PCの点数
記事1(動画20本以上) 36 83
記事2 53 92

こんな感じで、iframeを使いすぎると、ページのパフォーマンスが落ちるので注意です。

知っ得2)iframeを使って埋め込んだページのアクセス数もカウントされてしまう

例えば、あなたのサイトのAという記事の中に、あなたのサイトのBという記事を埋め込んだとします。

そうすると、 読者さんが Aという記事を読んでくれたら、Bという記事まで読まれたこととしてGoogleアナリティクスでカウントされてしまいます

(PV数アップだ―!って喜ぶんじゃなくて、見せかけだけのPVアップなので、Bという記事がちゃんと読まれていることにはならないんです。正確なアナリティクスのデータが取れないので、注意が必要です。)

知っ得3)iframeを使って埋め込まれたコンテンツは、Googleからそのページのコンテンツの一部として扱われない

Aという記事に、iframeを使ってBという記事を埋め込んでも、記事Bは記事Aのいち部として扱われません。

コンテンツの厚みを増やす(文字数を増やしたり、情報量を増やしたり…)という意味では使えないってことですね。つまり、iframeでコンテンツを埋め込んでもSEO的に有利にはならない、という感じです。

参考:海外SEO情報ブログ「iframeで表示したページはコンテンツの一部になるのか

まとめ

ということで、今回はiframeというタグの基本を調べてお伝えしました。

iframeタグっていうのは…

  • 1つのページの中に、別のページを埋め込むことが出来るタグ
  • GoogleマップやYouTube動画を埋め込むときにもよく使われている
  • 使いすぎるとページの読み込み速度が落ちる
  • アナリティクスで埋め込んだページのアクセスまでカウントされてしまう
  • SEO的に有利になることはない

こんな感じで覚えておくといいです!ということでiframeについてでした。この記事が少しでも参考になれば幸いです。

デジタルマーケティングで重要な
「データ分析」を今すぐ始めよう!

\ Kindleで売れ筋トップ獲得本 / 

GA4超入門ガイドブック

プレゼント!

表紙