HOMESEO/SEM記事一覧iframeとは?HTMLでの使い方や使用例・SEO効果について解説SEO/SEMサイト制作サイト改善iframeとは?HTMLでの使い方や使用例・SEO効果について解説2023/01/18ツイートシェアWebサイトで記事を書くとき、ユーザビリティを高めるために関連ページや参考ページなどのリンクを張ることがあります。リンクは単純なテキストだけでも張ることができますが、<iframe>というHTMLタグを使ってリンク先のページ内容を視覚的にわかるようにすることが可能です。今回は<iframe>タグの使い方や使用例などを解説していきます。INDEXHTMLの「iframe」とは?iframeのSEO効果iframeの使い方・記述例iframeの使用シーン動画の埋め込みSNSの埋め込みGoogleマップの埋め込み広告の埋め込みまとめSEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」URLを入れるだけでサイト内部の問題を一括検出。大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!今すぐサイトを無料診断するHTMLの「iframe」とは?まず<iframe>タグとは、指定したリンク先のページ内容をフレーム表示することができるHTMLタグのことです。インラインフレームとも呼ばれ、自作のコンテンツ内に他ページ・他サイトのコンテンツを直接埋め込むことができます。上のように、iframeタグを使って動画を記事内に埋め込むような使い方ができます。これならリンク先の内容が一目でわかりますよね。後ほどご紹介しますが、動画の他にもSNS投稿・マップ・広告などもこの<iframe>タグで埋め込むことができます。HTMLと聞くと難しく感じるかもしれませんが、多くのWebサービスは埋め込みタグを自動生成してくれるので、基本的には生成されたものを貼り付けすれば埋め込みは完了です。iframeのSEO効果iframeタグを使うことによるSEO効果は、実際のところありません。iframeで表示するリンク先や画像はそのページのコンテンツとしてみなされず、Googleの評価対象とならないからです。iframeタグを使うことでユーザビリティが向上すれば、間接的にSEO効果を上げられる可能性はあります。料理の方法を解説している記事で、実際に料理をしている動画がYouTubeなどにあれば、テキストリンクで誘導するよりもiframeで動画を記事に埋め込んであげたほうがユーザーにとっては親切です。iframeタグはユーザーのためになるなら使う、なくても問題がなければ使わないようにするのが無難でしょう。iframeの使い方・記述例それでは、iframeタグの実際の使い方や記述例についてご紹介します。基本の記述式は、以下の通りです。width=”幅の指定”></iframe>以下は、それぞれのタグの要素の意味です。上記の式に必要な要素を記述することで、自作のページに指定したコンテンツを埋め込むことができます。YouTubeの「https://www.youtube.com/embed/p-jmy_Iy4xk」という動画を高さ315・幅560で埋め込む場合は、以下のように記述します。width=”560′′>ここはコンテンツ内容など自由に記述可能</iframe>このように記述すれば、指定した高さと幅で動画を埋め込むことが可能です。index」というWebツールで生成することもできるので、必要に応じて利用してみてください。※以前は「Scrollingタグ(スクロールを可能にする)」も使用できましたが、現在のHTML5の形式では廃止されています。iframeの使用シーン<iframe>を使用すれば、さまざまな形式のリンクを視覚的に埋め込むことが可能です。ここでは、YouTubeなどの動画やSNS、マップの埋め込みなどを例に、<iframe>タグの使用シーンをご紹介します。Pixel」を紹介するYouTube動画を埋め込んでみました。埋め込み用のHTMLタグは自動生成してくれるので、基本的にはタグをコピーして記事に貼り付けるだけです。動画ページ内の「共有」ボタンをクリックすると、以下のように「埋め込む」という項目が確認できます。クリックすると赤枠の位置に埋め込み用の<iframe>タグが出てくるので、こちらをコピーして記事内に貼り付けます。「height(高さ)、width(幅)」の部分の数字を変更すれば、表示するフレームの高さ・幅が調整できます。2022SNSの埋め込み例として、WEB集客ラボのTwitter投稿を埋め込んでみました。埋め込みタグは自動生成なので、HTMLタグをコピーして記事内に貼り付けるだけでOKです。※Twitterでは埋め込みタグ生成時に<iframe>ではなく、<blockquote>(引用・転載用タグ)で生成されます。Twitterの標準仕様なのでこのまま埋め込みをしても問題ありません。Googleマップの埋め込みマップの埋め込みの例として、東京タワー周辺を示しているGoogleマップを埋め込んでみました。マップの埋め込みタグは自動生成してくれるので、HTMLタグをコピーして貼り付けします。Googleマップにアクセスし、埋め込みたい場所のマップを表示させたら、左側のメニューにある「共有」をクリックします。「共有」をクリックすると、リンクが自動生成されます。マップを埋め込む場合は「地図を埋め込む」を選び、表示されたiframeタグをコピーして記事内に貼り付けましょう。広告の埋め込みiframeタグを使うことで、広告を入れることも可能です。基本的な使用方法は動画やSNSと同様で、以下の式に必要な要素を記述して広告を埋め込みます。width=”幅の指定”></iframe>ただし、広告のタイプや内容によってはiframeの使用を禁止している場合もあるので注意しましょう。Googleアドセンスは広告掲載の方法を変更するような処置は禁止しています。禁止事項の中にはiframeの活用も含まれているので、使用しないようにしてください。※参考:AdSenseプログラムポリシーまとめ今回はiframeタグの使い方や使用例などをご紹介してきました。iframeタグは自分のコンテンツ内に別ページ・別サイトのコンテンツを直接埋め込むことができるタグで、主に動画・SNS・マップ・広告などを自由に埋め込むことができます。Googleはiframeタグを評価しない旨の見解を示しているので、SEOにおける効果はほとんど期待できません。iframeタグで動画やマップなどを埋め込むことでユーザーにとって親切な作りになるのなら、遠慮せずに使ったほうがユーザビリティを高めることにつながり、間接的なSEO効果が期待できるでしょう。現在は、多くのWebサービスで埋め込みタグの自動生成を行ってくれるようになりました。自分でHTMLを記述する必要がなく、そのハードルは下がっているため、臨機応変に活用してみてはいかがでしょうか。byGMO」SEO対策でこんな思い込みしていませんか?大きいキーワードボリュームが取れないと売上が上がらない・・コンサルに頼んでもなかなか改善しないSEOはコンテンツさえ良ければ上がる大事なのは自社にあったビジネス設計です。けんと)2012年より一貫して検索エンジン領域のコンサルティング業務に従事。マーケティング部門立ち上げをおこなう。お客様の期待を超える価値提供を行うため日々、組織運営・グロースに奔走している。名前メールアドレス電話番号(ハイフン(-)は必要ありません)送信することでプライバシーポリシーに同意したものとします。(木)14:00-17:00EC×SEOの必勝戦略~楽天・Yahoo!・Amazon・自社EC別に解説!上位表示をさせるコツ~本セミナーでは、「EC×SEOの必勝戦略」をテーマとし、主要モールECである楽天、Yahoo!、Amazon、そして自社ECサイトのSEO戦略と成功事例を紹介します。SiteサービスサイトLumarSEO内部分析ツール・Lumarは、内部対策の分析時間の大幅効率化が可能なツールです。グローバルカンパニーも利用し、その高度なSEO機能が評価され海外アワードで多くの賞を受賞しております。タスク管理機能もあり、発見したSEO課題をチーム関係者とスムーズに共有することも可能です。byGMO』は、Google検索エンジン上位表示対策だけではなく、ユーザーの検索体験と生み出される価値にフォーカスした施策を行います。Googleの検索エンジンが日本にリリースされた当初より、SEOに従事し、アルゴリズムの歴史を熟知しているプロが施策を監修します。byGMO」は、エリアごとに歯科医院を紹介するポータルサイトです。TECHのSEOノウハウを活かしたサイト設計により、検索ユーザーへの流入間口拡大を実現。集客・集患に課題を抱える歯科医院様と歯に関するお悩みを抱えるお客様をつなぐサービスを提供しています。USデジタルマーケティングに関することならお気軽にご相談くださいメルマガ登録メールマガジンはこちらからご登録ください。デジタルマーケティングに関するホットな情報をお届けいたします。TECHへの業務依頼、発注を希望される方はこちらよりご連絡ください。