見出しタグで画像を挟んだ場合のロボットの解釈

質問

<h2>ですとか<h3>の見出しタグでテキストではなく<img>を挟んでいるのですが、<img>はインライン要素なので文法上は問題ないようなのですが、ロボットはこれを見出しとして認識しているのでしょうか? それとも単なるテキストとして認識しているのでしょうか? 一応、次のような感じで<img>のaltとtitleにテキストを挿入しています。 http://www.futamatagawa.net/　文章の最上段で「全国で最も難関とされる～」と記述しているところです。

どなたかお分かりになる方がいましたらアドバイスをお願いいたします。

回答No.2

chile5583 · ベストアンサー

H2などの見出しタグに入っているキーワードとして認識していると思いますよ。

<h2><img src="/images/index/h201.png" alt="全国で最も難関と噂される神奈川県運転免許試験場(二俣川)での一発試験(学科試験&amp;お巡りさん乗せて技能試験)で取得。本当にそんなに難しい試験なのか?" title="全国で最も難関と噂される神奈川県運転免許試験場(二俣川)での一発試験(学科試験&amp;お巡りさん乗せて技能試験)で取得。本当にそんなに難しい試験なのか?" height="48" width="955"></h2>

この中のaltにある文字列でGoogle検索すると、あなたのサイトが一番上に出てきます。
ただ、あまり長すぎるのもどうでしょうね。

H2というのは見出しですから、文章を入れるのはよろしくありません。文章に対するタイトル（見出し）であるべきですので。ですのでここで問題にするのは見出しタグの中に入れる文字列（テキストでもaltでも）が適切な長さかどうかでしょう。

あなたがaltに入れたキーワードの一番最後の部分「お巡りさん乗せて技能試験)で取得。本当にそんなに難しい試験なのか?」で検索しても、その文章での検索結果はヒットしません。すなわちGoogleはここまで長い見出し文字を見出しとして捉えていない可能性が高いです。

また、別の方の回答にありますが、ロボットを意識するのであれば、このような小技ではなく、正しいHTMLを学んだ方が検索エンジン対策にもつながりますので、そちらを学んだ方が良いかもしれません。

htmllintは非常にチェックが厳しいですが、ここでエラーゼロにならなくても、少なくてもw3.orgでエラーの出ないサイトにしたほうが良いです。（英語ですが）

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.futamatagawa.net%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

正しくHTMLとCSSを学べばHTMLlintで満点も取れますし、今あなたが疑問におもようなロボットの動向も、質問しなくてもわかる程度の技量がついてくると思います。

参考URL：

http://goo.gl/sJv67

お礼

とても詳細にありがとうございました。大変勉強になりました。見出しは文字列の長さが関連してくるんですね。ライブラリで何かちょっと小細工したり、ソーシャルボタンを使ったりするとすぐに標準から外れてしまうので、いろいろ考え中だったりします……。

回答No.1

ORUKA1951

文法的には？ですが・・
→Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )
→firefox+HTML Validator
→The W3C Markup Validation Service ( http://validator.w3.org/ )

　実は検索エンジンは文法はあまり気にしません。文書構造を判断しています。検索エンジンがどのように見ているかは、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ウェブマスター向けガイドライン - ウェブマスター ツール ヘルプ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )］より
　実際にLynxで見ると添付画像のようになります。(ぼかしてあります)

　文書構造を示すという意味では、<h1>全国で最も難関とされる～</h1>ようにそのページの内容を的確に示す見出しが入るべきです。画像を使うなら<h1><img alt="全国で最も難関とされる～"></h1>です。titleは関係ありません。
　背景に画像を利用するなら<h1><span>全国で最も難関とされる～</span></h1>でスタイルシートでh1 span{display:none;}とか・・
　それよりも、idやclass名の使い方が気になります。idやclassは、divやspanに限らず
『id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』です。リンクやjavascriptのターゲット以外にはidを原則つけるべきではないですし、class名もデザインのためにつけるものではありません。あくまで文書構造を示すためです。(その文書構造を利用してスタイルシートでデザインしますが、デザインのためにつけるものではない)　検索エンジンはclass名やid名が、文書構造を示す一般的なものなら理解していることを忘れてはなりません。HTML5における「新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )」がまさに、その名称です。

　とは言っても、そのサイトは一般的に見かけるサイトよりはよいとは思いますよ。

お礼

とても詳細にありがとうございました。大変勉強になりました。テキストブラウザをベースに文書構造を考えると分かりやすいですね。