WINGS ブログ
ITやWEBに関するブログを書いています。

「Google検索エンジン最適化 スターターガイド」を読んでみよう!その5

投稿者:hana-masuyama | 2012年/04月/02日

こんにちは ますやまです。

4月です!やっとあたたかな春の日差しを感じられるようになりました。
天気がよいと意味なく気分も明るくなる単純なわたし。今日も元気にまいりましょう〜。

画像を適切に処理して活用しよう!

さて、みなさん、ホームページに画像を使用されていますか?ほとんどの方はYesですよね。でも、検索エンジンロボット(クローラー)はテキストを読むことはできますが、画像を見て、それがどんな内容の画像なのかは認識することはできません。そういう理由で前の回で、画像にテキストを埋め込まないようにとお話しました。

※前回の記事はこれです。

でも、画像にalt属性(オルト属性)を持たせることによって、検索エンジンにそれが何の画像なのかを伝えることができます。alt属性とは、代替テキストという意味で、画像を閲覧することができない環境でも、情報をテキストや音声で得ることが、出来るようにするための属性です。

例えば、以下のような場合に代わりにテキスト(altテキスト)を表示して、画像に関する情報を提供してくれます。

  • 何らかの理由で画像が表示されない
  • 回線の事情や、よりスピーディなアクセスを求めて画像をOFFにしている
  • 携帯端末を使っていて、画像機能はごく限定されている
  • Lynxのような文字ベースのブラウザを使用している
  • 目が不自由で、文字を音声合成で読み上げて「聞いて」いる

alt属性設定例〜こんな風に表示されます

贈答用りんごふじの箱詰め

htmlではこうなります。

<img src=”fuji_giftbox.jpg” alt=”贈答用りんごふじの箱詰め” width=”255″ height=”75″>

つまり、alt属性はユーザビリティやアクセシビリティという点で必須であり、同時に検索エンジン対策としてもやっておいて損はないと思います。また、わかりやすいalt属性や画像のファイル名をつけると、Google画像検索のような画像に特化した検索エンジンに画像についての情報を伝えることができ、ユーザーの検索にヒットする可能性がでてきます。

さらに大切なのは、画像をリンクとして利用する場合で、画像のaltテキストがアンカーの役目を果たしてくれますので、検索エンジンにリンク先のページ内容が理解されやすくなります。リンクテキストを書く感覚で、altテキストを書くように心がけましょう。

ただし、画像とは関係ないキーワードを詰め込んだり、極端に長いaltテキスト書くと、スパムと認識される恐れがありますのでご注意ください。タイトルやメタdiscriptionと同様、簡潔かつ説明的なものがベストです。

☆ポイント☆

次のようなケースでは、必ずalt属性を指定しておくようにしましょう。

  • その画像がタイトルや見出しとして使用される場合
  • その画像がリンクとして使用される場合

ただし、装飾目的の画像(アイコン等)等、代替テキストが特にない場合は、以下のように空のalt属性を指定しておきます。

<img src=”icon.gif” alt=””>

見出しタグを適切に活用しよう!

見出しタグ(hタグ)は、ユーザーにページの構成を示すために使います。最も重要であることを表す大見出しといえる<h1>、中見出しの<h2>、小見出しの<h3>というふうに順に続き、最低の<h6>まで、全部で6種類のサイズがあり、これらをきちんと使い分けることが大切です。

見出しタグは通常、このタグで囲まれたテキストを普通のテキストに比べて大きく表示させるので、ユーザーがその重要性に気付く視覚的なきっかけとなり、その下に続くコンテンツがどのようなものであるかを理解しやすくなります。複数の見出しタグのサイズを使い分けてコンテンツに階層構造を持たせることによって、ここは重要な箇所だとか、ここから新しい内容にはいるなということがわかり、ユーザーがページを読み進めやすくなります。

まず、初歩的なミスとして、テキストを大きくみせたいという視覚的な理由だけで、見出しタグを使用することはやめましょう。その場合には、<em>や<strong>(強調タグ)が適しています。また、h2タグを使ってから、h1タグを使うなど重要性の順序を無視した使い方や、ページ内でやたらと見出しタグを使うのもよくありません。

hタグで囲むことにより、そのページで重要なことを検索エンジンに伝えることできるのですから、うまく狙っているキーワードを含めるなどの工夫をしましょう。もちろん、ただキーワードを無理に詰め込むのは逆効果になりますので、ご注意を。

以下のポイントに気をつけてうまく見出しタグを使い分けましょう〜。

☆コンテンツのポイントを考えよう

目次を作るようにそのページのコンテンツの主要なポイント、コンテンツの重要度を考え、見出しタグを使うのに適切な場所を判断しましょう。

  • ページ構成と関係なくテキストを見出しタグで囲まない
  • <em>や<strong>が適している箇所で見出しタグは使わない
  • 見出しタグのサイズの使い分けを不規則にしない

☆ページ全体を通して見出しタグを考え利用しよう

見出しタグは使用する意義がある場所で使いましょう。見出しタグがページ内に多すぎると、ユーザーにとって
コンテンツが読みづらくなり、1つのトピックがどこで終わって次のトピックがどこから始まるのかがわかりにくくなります。

  • ページ内で見出しタグを使いすぎない
  • ページにあるすべての文章を見出しタグに入れない
  • 見出しタグを構造を示すためではなく、スタイルを整える目的で使わない

以上、ますやまでした。。