SEO的に正しくimgタグでWebページに画像ファイルを置く(HTML5)

2017年1月8日2018年9月21日HTMLHTML5,img,SEO,Webページ,タグ,リンク,画像

HTML5においても、画像ファイルをWebページに置く方法はimgタグ(要素)を利用するしかありません。

img要素とsrc属性にてファイルのpath(パス)を指定してやるだけなのですが、SEO的にはそれだけだと不十分であるため、以下でまとめます。

imgタグをSEO的に正しく使うには、画像の説明をalt属性に記述することを忘れない

imgタグのSEO的に正しい使い方は以下です。

<img src="image.jpg" alt="ここに画像の説明を記述する">

Googleなどの検索エンジンは画像の内容がalt属性の記述であると解釈する

最近は画像解析が進んでおり、昔ほどは重要視されていないことは確かですが、それでもalt属性に画像の要約を記述しておく必要がSEO的にはあります。

最近では「MFI＝Mobile First Index(モバイルファーストインデックス)」という、Googleの推奨しているモバイルページの条件として、imgタグのalt属性の設定が必須となっています。

モバイル向けページの画像にはalt属性を必ず設定すること。MFIへの切り替えで検索順位に悪影響が出る可能性あり

また、ユーザビリティの観点でも「目の見えない方へ画像の説明としてalt属性の中身を読み上げる機能」がブラウザには備わっているため、良いのです。

h要素(見出しタグ)に画像を利用する場合、検索エンジンにはalt属性に記述した内容がhタグの中身として解釈されるので絶対に必要

あまり無い例ではありますが、h要素(見出しタグ)に画像を利用することも可能ですが、その際にalt属性に見出しの内容を記述しておけばSEO的に問題はありません。(検索エンジンにはきちんと見出しタグの存在を示せます。)

もし見出しに画像を利用しているサイトがあれば、必ずalt属性を記述しておきましょう。