figureタグ・figcaptionタグとは？SEOに有効な使い方をご紹介！

HTML5から使用可能となったfigureタグ。figureタグやfigcaptionタグのことはなんとなく知ってはいるものの使い方がよくわからずに手を出していないという方も多いのではないでしょうか。figureタグは使わなくてもいいという人は大勢いますが、実はSEO対策にもなる有能なタグです。

figureタグやfigcaptionタグの、他のタグとの使い分けを整理して、より分かりやすいWebサイト制作を目指しましょう。

今回は、figureタグとfigcaptionの概要やメリット、混同されやすいタグや属性と比較しながら、それぞれの用途の違いを1つずつ紹介します。

figureタグ・figcaptionタグとは？

HTML5で勧告されたfigureタグとfigcaptionタグですが、そもそもfigureタグやfigcaptionタグとはどのようなタグなのか、それぞれみていきましょう。

figureタグ

figureタグとは、メインコンテンツに関わりはあるものの、自己完結しているコンテンツを囲むタグです。たとえば、イラストなどの注釈の絵、図、写真、ソースコードなどを囲む際に利用されます。

figureタグが登場した理由は、HTMLやCSSの技術の進歩が関連しています。かつては、Googleなどの検索エンジンやブラウザは、imgタグで画像を入れれば「これは画像だ。」と理解することができました。しかし今では、imgタグを使用しないで簡単なイラストや図形などはCSSで作れるようになった結果、検索エンジンなどは、それが画像だと認識できなくなりました。imgタグ以外の要素も画像だと認識できるようにするために作られたのが、figureタグなのです。

figcaptionタグ

figcaptionタグとは、figureタグの中のコンテンツを文字で説明するタグです。figureタグはメインコンテンツとは別に自己完結している内容であるため、figureタグ内のコンテンツにタイトルや説明など、補足情報を加える必要がある際に使用します。ただし、figcaptionタグは省略可能です。

figureタグ・figcaptionタグのメリット

figureタグやfigcaptionタグを使用するメリットは、文書構造を分かりやすくできて、SEO対策となる点です。

HTMLでコーディングをする際に重要なのは、HTMLを見ただけで、どのタグでどのような内容を記述しているのかを分かるようにすることです。メインコンテンツとそれ以外のコンテンツを区別することで文書構造が分かりやすくなります。たとえば、今回紹介するfigureタグは参照部分、asideタグはセクショニング要素として、補足敵な部分であることを表して、タグの種類ごとにグループ化します。

文書構造が理解しやすくなると、Googleの検索エンジンで様々なWebサイトの情報を収集するクローラーが、Webサイトのページを見つけやすくなります。クローラーが収集した情報に基づいて検索結果の順序が決定されるので、HTMLの文書構造を分かりやすくすることは、SEO対策の1つです。

figureタグの用途は？

asideタグとfigureタグの違い

asideタグとは？

asideタグとはメインコンテンツの内容に関する補足情報を含んだセクションを示すタグです。ページの中で、メインコンテンツとの関連性が低い補足を付け加える際に使用され、HTMLの文書構造ではメインコンテンツに含まれません。

たとえば、ページ内の用語説明だけでなく、広告のような、前後の文書と別の目的を提供するコンテンツや、関連がほとんどないコンテンツにもasideタグに含まれます。

asideタグとfigureの用途の違い

asideタグは広告などのメインコンテンツと関連の薄いコンテンツに、figureタグはメインコンテンツに参照される補足説明となるコンテンツに用いられます。asideタグは、前後の文書とは別の目的のコンテンツや、メインコンテンツにほとんど関連がないコンテンツにも使用できるのに対し、figureタグは前後の文書に参照されるように関連性は高いものの、figureタグの部分が取り除かれても文書の流れに影響を与えないコンテンツに使用されます。

pタグとfigureタグの違い

pタグとは？

pタグとは、文章の段落を表すタグです。文章のひとかたまり、もしくは文章のかたまりの一部であることを示します。

pタグとfigureの用途の違い

画像などのコンテンツをpタグに入れるべきかfigureタグに入れるべきかの違いは、そのコンテンツが文脈の一部であるかどうかです。pタグの中に画像などを挿入する際は、文章の文脈としてそのコンテンツが不可欠である場合であることが多く、反対に、文章の文脈的にそのコンテンツがなくても、問題がないようなコンテンツはfigureタグに入れるべきです。

figcaptionタグの用途は？

alt属性との違い

alt属性とは？

alt属性とは、画像の代替テキストとなり、文字や音声として、画像の情報を獲得できるようにするタグです。画像が表示されない場合でも代替テキストが設定されていれば、ユーザーはその画像がどのような内容なのかを理解できます。

また、視覚障がい者の方に、音声で画像の内容を伝えられるようにするためにも、alt属性の設定は重要です。

alt属性とfigcaptionタグの用途の違い

alt属性は画像に関する情報を記述するための属性であるなら、figcaptionタグを使う必要はあるのかと考える人もいるでしょう。しかし、figcaptionタグはfigureタグの図表の注釈や見出し、説明のために用いられるので、画像の内容を記述するalt属性とは用途が異なります。

また、alt属性はテキストを画像などのコンテンツの下に表出しませんが、figcaptionタグのテキストは表出する点でも違いがあります。

まとめ

今回はfigureタグとfigcaptionタグの用途について、他のタグを紹介しながら説明しました。メインコンテンツの参照情報を示すfigureタグやfigcaptionタグですが、従来のタグでも事足りるとされ、使用する必要がないと言われることもあります。しかし、HTMLのタグだけで文書構造が分かるようになって整理されれば、SEO対策になるだけでなく、コーディングをする際も便利でしょう。

WebMediaでは、今回紹介したfigureタグやfigcaptionタグのほかにも、HTML・CSSの基本知識やWebサイトを作る上で欠かせない情報をお届けしています。ぜひ他の記事もご覧ください。

Web担当になったけれど自分の知識に自信がない、自社のWebページをもっと改善したい、けれども、うちにはそんな時間も人材もないというお悩みはございませんか？
WebMediaを運営するITRAではお客様に真摯に向かい、ご要望に沿ったWebサイト制作やリニューアルを行ってきました。お気軽にお問い合わせください。

figureタグ・figcaptionタグ以外のHTML5で勧告されたタグは、以下の記事で詳しく紹介しています。

WebMedia参考記事

HTML5とは？メリットとHTML5から追加された新しいタグを紹介！

https://www.itra.co.jp/webmedia/what-is-html5.html

Webサイト制作に欠かせないHTML。現在W3Cが使用を勧告されたHTML5では、初期に勧告されたHTMLと比べると、使...