h1のテキストサイズよりh2の方が大きい場合

質問

質問させていただきます。

ホームページを作っているのですが、h1タグで囲ったテキストをサイトのデザインに合わせてサイズを少し小さくしました。

その結果h2のタグの方が大きくなってしまったのですが、これはh1よりh2の方が重要だとクローラーに認識されてしまうのでしょうか？

他の方の質問を探してみたのですが、hタグは「領域」が重要だとおっしゃる方がいました。

つまりh2の方がサイズが大きい＝領域が大きいとなってしまい、クローラーを混乱させてしまうのでしょうか？

サイト内にh1を超えるサイズのテキスト(hタグ以外でも)があってはいけないのでしょうか？

それとも「h1」という宣言が大事で、大きさや領域は関係ないのでしょうか？

わかる方アドバイスを頂けたらうれしいです。

回答No.2

ORUKA1951 · ベストアンサー

ウェブ上に膨大に存在する、あやふやな--大半は屑--の中から、正しい情報を得ようとするのは無駄です。藁の山から針を探すより難しい。
　まず仕様書を読めば理解できるはずです。
HTML 4による文書の設計( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4 )
見出し: H1、H2、H3、H4、H5、H6要素( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.5 )
　はそのごく一部で、全文を通して読んでおくこと。【ウェブ開発するなら必須】

　googleのガイドには『Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。( https://support.google.com/webmasters/answer/35769?hl=ja#2 )』と明記してあります。
　一度でも御自身の製作されているページをLynxで見たことありますか？？

　h1→h6は見出しのレベルを表すものですが、文書構造を示す<DIV>と併用することで、割り明確になります。DIVの用途は
『id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　でしたね。!!!
　HTML4.01では明確でなかったために、HTMLではDIVを極力使わず、文書構造を示す要素でアウトラインを示すようになります。(HTML4.01では理解されなかった)
　HTML5の仕様書を読まれると分かるように、h1はひとつのsection(HTML4だと<div class="section">など)にひとつだけh1～h6が入ることになります。

＞つまりh2の方がサイズが大きい＝領域が大きいとなってしまい、
　その情報が誤っているか、あなたの理解が誤っているかです。googleのガイドは無論、HTMLの仕様書にも、HTMLは文書構造を示すとしか書かれていない。ここでいう領域とは、文書構造--アウトライン上の範囲ですよ。

<div class="article">
　<div class="header"><!-- このarticleのヘッダ -->
　　<h1>見出し</h1>
　</div>
　<div class="section">
　　<h2>見出し</h2><!-- このsectionの見出し -->　　　　↑
　　<p>記事</p>　　　　　　　　　　　　　　　　　　　　　　　｜
　　<div class="section"> ↑
　　　<h3>見出し</h3><!-- このsub sectionの見出し -->
　　　<p>記事</p>　　　　　　　｜
　　</div>　　　　　　　　　　　↓h3の領域
　　<div class="section">
　　　<h3>見出し</h3>
　　　<p>記事</p>
　　</div>
　</div>　　　　　　　　　　　　　　　　　　　　　　　　↓h2の領域
　<div class="footer>
　　<h2>見出し</h2>
　</div>
</div>
　において、上図であることは検索エンジンに明確に理解できますよ。

根本的な部分から学びなおされたほうが良いですし、そのほうが近道です。
＞ホームページを作っているのですが、
　ウェブサイトですよね。⇒ http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8
　　利用者の立場なら問題ないけど作る立場になると
　「ウェブページをつくっているのですが」

＞h1タグで囲ったテキストを
　見出しのうち、そのページの最上位の見出しを示すタグです。
　「レベル1の見出し(h1)を」

＞サイトのデザインに合わせてサイズを少し小さくしました。
　デザインの都合上、フォントサイズを小さくした

　その場合、検索エンジンにはどのように理解されるか

　と言うことだと思います。

(回答)
　SEOとは「検索エンジン最適化」と言う意味で、検索エンジンがページの内容を文書構造から正確に理解できるように最適化するという意味です。
　従って、
★その文書全体の内容を的確に示す見出しをつけて<h1></h1>でマークアップすること。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^<title></title>の内容と同じものになることが多いはずです。
★検索エンジンに正しく理解できるようにきちんとアウトラインを意識して・・
　HTML5では、統一されていればすべてh1でも良い。
　^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
　<section>
　　<h1></h1>
　　　<section>
　　　　<h1></h1>
　　　　　<section>
　　　　　　<h1></h1>
　でもよい。HTML5ではアウトラインはsectionの階層で解釈するので・・
　が！！！、やはり階層でh1→h6とするほうが良い。
(アウトライン)とは、目次を作るときの「章立て」と考えると良い。

　領域とはこの階層のことですから、よりひろい範囲を示す見出しでしたら、それなりの階層であるべきです。
★視覚系ブラウザで、どのように見せるか--フォントサイズ---は関係ありません。

お礼

ORUKA1951さん回答いただきありがとうございます。

＞ウェブ上に膨大に存在する、あやふやな--大半は屑--の中から、正しい情報を得ようとするのは無駄です。藁の山から針を探すより難しい。
　まず仕様書を読めば理解できるはずです。

遅ばせながら記載いただいた仕様書を読ませて頂きました。ユーザー目線でウェブページを作る事が大前提で、上位表示されるための小細工なんて二の次なんだなと感じました。おっしゃるとおり、ウェブ上の多岐に渡る信ぴょう性に欠ける情報に振り回されてました。

＞HTML5では、統一されていればすべてh1でも良い。

これは初耳でした。h1は各ページに一つしか記述できないものとばかり思っていました。仕様も日々変わっているのですね

＞やはり階層でh1→h6とするほうが良い。

まずは私もこの記述方法でやってみようと思います。

＞視覚系ブラウザで、どのように見せるか--フォントサイズ---は関係ありません

大変参考になりました。ありがとうございました。

回答No.1

vsdvihs

h1を小さく表示していますが、そこそこのキーワードで上位表示されています。
おそらく、文字サイズは重要ではないと思います。

そもそも文字サイズはブラウザによっても多少異なりますし。

お礼

vsdvihsさん回答ありがとうございます。

＞h1を小さく表示していますが、そこそこのキーワードで上位表示されています。
おそらく、文字サイズは重要ではないと思います。

なるほど。文字サイズは関係ないのですね。参考になりました。

＞そもそも文字サイズはブラウザによっても多少異なりますし。

確かに。自分のページを初めてfirefoxで見たときはビビりました。サイズも小さいし、フォントもかすれてました。

アドバイスありがとうございました。