iframeとは？HTMLでの使い方や使用例・SEO効果について解説

HTMLの「iframe」とは？

まず<iframe>タグとは、指定したリンク先のページ内容をフレーム表示することができるHTMLタグのことです。

インラインフレームとも呼ばれ、自作のコンテンツ内に他ページ・他サイトのコンテンツを直接埋め込むことができます。

例えば上のように、iframeタグを使って動画を記事内に埋め込むような使い方ができます。これならリンク先の内容が一目でわかりますよね。

後ほどご紹介しますが、動画の他にもSNS投稿・マップ・広告などもこの<iframe>タグで埋め込むことができます。

HTMLと聞くと難しく感じるかもしれませんが、多くのWebサービスは埋め込みタグを自動生成してくれるので、基本的には生成されたものを貼り付けすれば埋め込みは完了です。

iframeのSEO効果

iframeタグを使うことによるSEO効果は、実際のところありません。iframeで表示するリンク先や画像はそのページのコンテンツとしてみなされず、Googleの評価対象とならないからです。

ですが、iframeタグを使うことでユーザビリティが向上すれば、間接的にSEO効果を上げられる可能性はあります。

例えば、料理の方法を解説している記事で、実際に料理をしている動画がYouTubeなどにあれば、テキストリンクで誘導するよりもiframeで動画を記事に埋め込んであげたほうがユーザーにとっては親切です。

iframeタグはユーザーのためになるなら使う、なくても問題がなければ使わないようにするのが無難でしょう。

iframeの使い方・記述例

それでは、iframeタグの実際の使い方や記述例についてご紹介します。
基本の記述式は、以下の通りです。

以下は、それぞれのタグの要素の意味です。

• iframe:埋め込み用タグ
• src:表示したいコンテンツのリンク先
• height:フレームの高さ
• width:フレームの幅

上記の式に必要な要素を記述することで、自作のページに指定したコンテンツを埋め込むことができます。

例えば、YouTubeの「https://www.youtube.com/embed/p-jmy_Iy4xk」という動画を高さ315・幅560で埋め込む場合は、以下のように記述します。

このように記述すれば、指定した高さと幅で動画を埋め込むことが可能です。

ちなみにHTMLは自分で記述するだけではなく、「TAG index」というWebツールで生成することもできるので、必要に応じて利用してみてください。
※以前は「Scrollingタグ（スクロールを可能にする）」も使用できましたが、現在のHTML5の形式では廃止されています。

iframeの使用シーン

<iframe>を使用すれば、さまざまな形式のリンクを視覚的に埋め込むことが可能です。
ここでは、YouTubeなどの動画やSNS、マップの埋め込みなどを例に、<iframe>タグの使用シーンをご紹介します。

まとめ

今回はiframeタグの使い方や使用例などをご紹介してきました。

iframeタグは自分のコンテンツ内に別ページ・別サイトのコンテンツを直接埋め込むことができるタグで、主に動画・SNS・マップ・広告などを自由に埋め込むことができます。Googleはiframeタグを評価しない旨の見解を示しているので、SEOにおける効果はほとんど期待できません。

しかし、iframeタグで動画やマップなどを埋め込むことでユーザーにとって親切な作りになるのなら、遠慮せずに使ったほうがユーザビリティを高めることにつながり、間接的なSEO効果が期待できるでしょう。

現在は、多くのWebサービスで埋め込みタグの自動生成を行ってくれるようになりました。自分でHTMLを記述する必要がなく、そのハードルは下がっているため、臨機応変に活用してみてはいかがでしょうか。