• ベストアンサー
  • すぐに回答を!

検索結果の箇所にaltタグの内容が表示される

  • 質問No.7519152
  • 閲覧数294
  • ありがとう数1
  • 回答数2

お礼率 34% (112/329)

ホームページを作成したのですが、yahooやgoogleの検索結果の箇所の説明文(metaタグのdescription部分)に、画像のaltタグの文字列が並んでしまいます。

本ページは、ほとんど画像のため、文字列はありませんが、metaタグの内容が表示されずに、altタグの内容だけが反映されるのはなぜでしょうか。

文法チェックも行いましたが、metaタグ自体は問題はなく、問題は何なのか一向に分かりません。
TOPページは検索結果にも問題なく表示されるのですが、このページだけが、サイトの説明文(description)が表示されないのは何故でしょうか。

困っております。原因を教えて頂けますと大変助かります。よろしくお願いします。

質問者が選んだベストアンサー

  • 回答No.2
  • ベストアンサー

ベストアンサー率 45% (5062/11036)

>なぜALT属性がすべて検索結果に表示されるのでしょうか。

 Lynxで一度ページをご覧ください。googleは、どれが重要かわからないときは、文章内の適当な語句を収集します。画像は見えてません。altしか見えない・・

 続きがあります。
Google のクローラでは、画像に含まれるテキストは認識されません。

 画像に何が書かれているかは一切見えません。

テキスト コンテンツの代わりに画像を使用する必要がある場合は、ALT 属性を使用して簡単な説明テキストを組み込みます。

 alt属性に書かれている内容を収集するので、そこに書きましょう。

Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。

 ウェブマスターとしては必須のツールです。というか、忙しいときは画像なしでこれでネットサーフィンするほうが早い・・キーボードだけでスラスラと。

 googleは、十年以上前からdiscriptionなんて使ってません。ある目的(SPAM判定とか)のため以外は・・

 たとえ画像を使おうと、テキストブラウザで見たときには
<div class="header">
 <h1><img alt="ページのタイトル"></h1>
 <h2><img alt="要約</h2<
 <p><span>このページでは<span><strong><img alt="商品名"></strong><span>について</span></p>
</div>
<div class="section">
 本文
</div>
<div class="footer">
 フッター
</div>
と書かれていれば、正確に理解して表示してくれます。
お礼コメント
puhui

お礼率 34% (112/329)

いつもご丁寧にありがとうございます。参考になりました。ありがとうございました。
投稿日時:2012/06/20 14:39

その他の回答 (全1件)

  • 回答No.1

ベストアンサー率 45% (5062/11036)

なぜか、思い違いされている。
 googleも、googleのシステムを利用しているYahoo!もキーワードは、そのウェブページの内容との齟齬がないか以上の利用はしていません。なぜなら、metaタグに、検索で引っかかりそうな語句を並べて検索エンジンを騙そうという著者がいるからです。
 検索エンジンは、本文の記事自体を探し、インデックスを作成します。

 これらは、あなたが検索エンジンを使って何かのデータを探そうとしたときに、そのキーワードを含み、かつそのキーワードについて詳しく書かれていて、また、多くのサイトから参照されているなど・・・価値があると認めたものしか表示されてはまずいですよね。検索エンジンは著者のためではなく、検索する人のために存在するということを理解していれば良いです。
 逆にキーワードや要約と異なる本文だとスパムと判断する--そのためにmetaタグを利用していると考えたほうが良い。

 ですから、私は、meta keywordやmeta description自体、まったく書いてさえいません。いちいち、ページごとに的確な要約をそこに記述するのは面倒だからです。本文のheader内のabstractに書いてあるのですから・・
[HTML4.01]
<body>
 <div class="header">
  <h1>class名やidのつけ方</h1>
  <dic class="abstract">
   <h2>class名やidは文書構造を補完するためにつけましょう。</h2>
   <p>***</p>
  </div>
 </div>
 <div class="section">
 </div>
 <div class="footer">
 </div>
[HTML5]
 <header>
  <h1>class名やidのつけ方</h1>
  <dic class="abstract">
   <h2>classやidは文書構造を補完するためにつけましょう。</h2>
   <p>***</p>
  </div>
 </header>
 <section>
 </section>
 <footer>
 </footer>
</body>
 とかになっているはずですよね。
→「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」
→HTML5 では、文書をよりよく構造化するために、次の要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )

 そして、HTML4.01の勧告(1999)以来、「テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )」は否定され続けてきました。

 これらを考えると、googleが[ウェブマスター向けガイドライン( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769 )]で『重要な名前、コンテンツ、リンクを表示するときは、画像の代わりにテキストを使用します。Google のクローラでは、画像に含まれるテキストは認識されません。テキスト コンテンツの代わりに画像を使用する必要がある場合は、ALT 属性を使用して簡単な説明テキストを組み込みます。』、『Lynx などのテキスト ブラウザを使用して、サイトを確認します(ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります)。』
 と繰り返しアドバイスしています。

 たとえば上記でしたら
<body>
 <div class="header">
  <h1><img src="[URL]" alt="class名やidのつけ方"></h1>
  <dic class="abstract">
   <h2><img src="[]" alt="class名やidは文書構造を補完するためにつけましょう。"></h2>
   <p><img src="[]" alt="***"></p>
  </div>

 となっているはずです。なっているべきです。

★実際にはもそんなHTMLは書きません。ここで使用されている画像は、意味的には意味を持たない背景ですから、
 やはり
 <div class="header">
  <h1>class名やidのつけ方</h1>
  <dic class="abstract">
   <h2>class名やidは文書構造を補完するためにつけましょう。</h2>
   <p>***</p>
  </div>
とマークアップして、スタイルシートで画像に置き換えます。
 参考→リンク画像をCSSを使って背景画像にするメリット - Webデザイン・CSS - 教えて!goo ( http://okwave.jp/qa/q7485452.html#a3 )

 画像ばかりのページでも、画像読み込みを停止した、あるいはLynx( http://lynx-win32-pata.sourceforge.jp/index-ja.html )で閲覧して、ページの本文の内容が的確に理解できるようにウェブページを作成しましょう。

[例]アルバムの目次
<div class="section album" id="photoList">
 <ul>
  <li><a href="./images/photo/201205/start.jpg"><img src="[サムネイル]" alt="ドライブに出発する直前の写真"></a></li>
  <li><a href="./images/photo/201205/start2.jpg"><img src="[サムネイル]" alt="車に乗り込むペットたち"></a></li>
・・・・
 とかね。

★回答にあるリンク先を目を通すこと!!
補足コメント
puhui

お礼率 34% (112/329)

ご丁寧にありがとうございます。「重要な名前、コンテンツ、リンクを表示するときは、画像の代わりにテキストを使用します。」とあるのであれば、なぜALT属性がすべて検索結果に表示されるのでしょうか。
投稿日時:2012/06/07 15:14
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ