【ゼロから学ぶ SEO 対策】画像タグのチューニング

img tag チューニング

以前ご紹介したこちらの記事で

【ゼロから学ぶ SEO 対策】SEO とは何か? 目的とは?

SEO 対策は、地道な作業の積み上げと、お伝えしましたが

今回は、地味で蔑ろにしがちなSEO対策のテクニック「画像タグのチューニング」をご紹介いたします。


こちらは、過去に投稿した記事の一部を切り取った画像ですが

この部分をテキストエディターで見ると

ソースコードの抜粋
<h2>Google アカウント 作成ページにアクセス</h2>
1. <a href="https://accounts.google.com/SignUp?hl=ja" rel="noopener" target="_blank">Google アカウント 作成ページにアクセス</a>
<img src="https://tsucchie.com/wordpress/wp-content/uploads/2018/10/howto-google-account-01-1024x830.png" alt="" width="680" height="551" class="alignnone size-large wp-image-1284 shadow" />

となります。

ちょっと気になりませんか?

「えっ?どこ?どこ?」

ここです!

ピックアップ
alt="" 

そもそも

この「alt」って何?
「alt」を設定するときの注意はなにか?
SEOとどんな関係があるのか?

について、今回ご説明していきます。

画像を表示させるために

画像(イメージ)を表示させるには、img 要素(image)で指定する必要があります。

どんな項目が必要なのかを説明するために、先ほど見ていただいたソースコードをもとに、画像に関する項目だけを抽出しました。

HTML:img 要素
<img src="URL" width="幅" height="高さ" alt="代替テキスト" class="デザイン指定" />

これら5つの属性の組み合わせにより、画像が表示されます。

img要素を構成する各属性の役割

メインとなる5つの属性の役割は、以下のとおりです。

属性 役割(説明)
src source
画像ファイルのアップロード場所を指定
URL
alt
(オルト)
alternate text
画像の代替テキストを指定
画像が表示されない時に
表示する画像の説明文
width 画像の幅を指定 画像の左右のサイズ
height 画像の高さを指定 画像の上下のサイズ
class デザインを指定 中央寄せ等のデザイン指示

alt属性を設定するときに意識する3つのポイント

さっきの表でさらっと解説しましたが

alt(オルト)属性とは、HTMLで画像に設定されたテキスト情報のことをいいます。

もし画像表示ができなかった場合には、画像の変わりにテキストが表示されたりします。

画像が表示されないときの例
alt属性に「かわいい犬の写真です」と設定しておくと、こんな感じに表示されます。
↓ ↓ ↓
画像が表示されないときのサンプルです

ちなみに、
音声読み上げブラウザ(ソフト)では、alt属性に記載されたテキスト内容が読み上げられます。

①画像に沿った内容を設定すること

たとえば、画像は「かわいい猫」なのに、alt属性に「かわいい犬の写真です」と設定したとします。

もし、この状況で画像が表示されなかったとすると、文字を読んだ人、あるいは音声読み上げソフトで聞いた人には、正しい情報が伝わらないことになります。

これは、Googleのガイドラインに反します。

Google がページを理解できるよう手助けする

title タグの要素と alt 属性の説明をわかりやすく正確なものにします。

引用元:Google:ウェブマスター向けガイドライン(品質に関するガイドライン)

②アクセシビリティを意識する

「アクセシビリティ(Accessibility)」とは、「どんな人(年齢や身体障害の有無に関係なく)でも、サービスを利用しやすいかどうか」を指す指標です。

常に、利用者(訪問者)が利用しやすいことを念頭にページ作成するために気をつけましょう。

訪問者がページを利用しやすいよう手助けする

重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。テキスト コンテンツの代わりに画像を使用する必要がある場合は、alt 属性を使用して簡単な説明テキストを組み込みます。

引用元:Google:ウェブマスター向けガイドライン(品質に関するガイドライン)

③キーワードを詰め込み過ぎないようにする

alt要素に文字を詰め込むことで、場合によっては「キーワードを詰め込んでいる」と判断され、「隠しテキスト」のように判定されるリスクがあるからです。

単なる装飾としての画像や同じ画像が何度も繰り返される場合は、空欄にしておくのがベターでしょう。

具体的なガイドライン

  • ページへのコンテンツに関係のないキーワードの詰め込み
  • 隠しテキストや隠しリンク

引用元:Google:ウェブマスター向けガイドライン(品質に関するガイドライン)

alt属性とSEOの関係について

alt属性で設定したテキスト情報が、SEO対策に与える影響は低いようです。ただし、Google画像検索で上位表示されれば、その画像経由で自サイトへ流入することもあります。

優先度は高くないですが、周囲の人たちがあまり注力していない箇所だからこそ、時間を見つけて地道に対策していきましょう。

良質なコンテンツ作りを目指して

ひとむかしのSEO対策は「どのようにして検索エンジンを騙すか」といった記事が多くありました。

AIの進歩もあり、そのような施策では効果がなく、いやむしろ、Googleのガイドラインに反し、ペナルティを受ける時代になりました。

ようするに、小手先なテクニックに走るのではなく、訪問者にとってよりよいコンテンツを作ることが求められています。

SEOにおける重要なポイントはalt以外にもまだまだあります。

それについては、また記事を書いてご紹介いたしますね。

まとめ

  • alt とは、alternate textの略で、画像が表示されない時には表示される画像の説明文を設定できる場所。
  • 良質なコンテンツを目指すため、alt属性を設定するときに意識する3つのポイント
    1.画像に沿った内容を設定すること
    2.アクセシビリティを意識する
    3.キーワードを詰め込み過ぎないようにすること
  • alt属性のテキスト情報がSEO対策に大きく貢献することはほとんどない
    しかし、何の画像を説明したテキスト情報として評価される
    google 画像で上位表示される