画像見出しの設定方法

デザインを重視するコンテンツなら「画像見出し」を利用することはあることではないでしょうか?

画像見出しとは画像(img)を見出し(h2・h3など)の代わりに使うことで、これによってデザインの幅が効くようになります。

先日メルマガ相談をしてくれた「無料バイク処分大阪.com」も画像見出しを採用されていました。

おおかみくん
画像見出しって綺麗だよな。俺も使って見たい。
ひつじくん
でも、画像見出しを使うなら気をつけた方がいいことがあるから、まずそれを知っておこう!

しかし、この画像見出しを使う場合にはHTMLのコーディングに注意する必要があります。

それはいったいどういうことか、具体的に見ていくことにしましょう。

画像見出し|SEO対策における注意点

まず、画像見出しは「ユーザーにとっての見え方」と「検索エンジンにとっての見え方」が違うということを知っておきましょう。

ユーザーにとっての見え方

ユーザーにとっての画像見出しの見え方

画像見出しを使うと、検索ユーザー(人間)にとってはわかりやすい記事に仕上げることができます。

HTML/CSSでも見出しのデザインはできますが、画像の方が細部まで融通が効きやすいので、ユーザーにとってもわかりやすい仕上がりにできやすいのがメリットです。

ここまでは何の問題もありませんよね。

検索エンジンにとっての見え方

グーグルにとっての見え方

しかし検索エンジン(Google)にとっては、画像見出しのコンテンツは工夫をしないと認識できません。

「画像見出し」はGoogleにとってはただのimgタグですから、これを見出しだとは認知することができないんです。

ひつじくん
だからちゃんと設定をしないと、順位が上がりにくいんだよ。
おおかみくん
そ、それは困る!!

そのため見出しのキーワードは検知されない上に、コンテンツの構造がめちゃくちゃに認識されて、質の低いコンテンツという評価を受けても不思議ではありません。

理想的な画像見出しを作るには?

どうしても「画像見出し」を使いたい場合、できればGoogleにも見出しを認識させられるようにしたいですよね。

そのためのHTMLコーディングについてお伝えしましょう。

画像見出しをGoogleに認識させる
  1. 画像に見出しタグ(h2・h3)をつける
  2. altを設定する

画像に見出しタグ(h2・h3)をつける

見出しタグをつける

 /*実際のコード例*/ <h2><img src="https://〜"/></h2>

画像見出しを作るなら、その画像を必ず見出しタグ(h2タグ・h3タグなど)で囲むようにしましょう。

Googleはまだまだテキストに依存していますので、Hタグを適切に使っていないと見出しとは認識してくれないのです。

だから「この画像は見出しだからね〜」というアピールとして、画像を見出しで囲むようにすべきなのです。

altを設定する

ステップ2

 /*実際のコード例*/ <h2><img src="https://〜" alt="ここに代替を入力" /></h2>

Googleに何の画像かを認識させるには「altタグ」を設定する必要があります。

例えば「メリット」という画像なら、altタグを使って「メリット」と記載しておく必要があります。そうすることで、Googleが「”メリット”に関する画像なんだな〜」と認識してくれるのです。

まとめ

画像見出しの設定方法

画像見出しを利用する際のHTMLコーディングについてでした。

今回紹介したのはSEOでも上位表示されるようなページ(ゴリラ脱毛,mineoなど)の使っている画像見出しのタグ設定方法で、方法としては間違いないのだと思います。

ただ、ちなみにここまで解説しましたが、僕はできれば画像見出しは使いたくない派です。

おおかみくん
どうして画像見出しをあまり使わないんだ?
ひつじくん
もしかするとうまくGoogleに伝わらないかもしれないから、テキストで書くほうが確実なんだよ。

なぜかというと、今回の方法(Hタグでimgを囲って、altをテキストとして読ませる方法)がGoogleにとってどのように認識されているのかいまいちわからないからです。

Hタグを設定すると見出しとしては確実に認識されていると思いますが、altがHタグのテキストとして認証されているのかが確実でないということです。(もしわかる人がいたら教えてください…!)

その上で、どうしても画像見出しを設定したいなら、今回の方法を活用してもらえたらいいかと思います。

この記事が気に入ったら
いいね ! しよう

Twitter で