ロゴをh1にするのはもったいない
h1～6の見出しを明記するHTML要素は、ページの構造をわかりやすくする上で重要な項目で、中でもh1要素の重要度は一番上になります。
これらの見出しタグはSEO（検索エンジン対策）を考えるときに重要になる要素で、皆さんあれこれと入力内容について考えを巡らせていることでしょう。
h1要素はページの中でも上の方へ配置します。ページの上部に配置される要素で一番最初に思いつくものは、ページのロゴや名前を表記する部分ですよね。
一見これらはh1要素として適切に見えますが、実はそれはもったいないことをしているんです。
ページの名前はtitle要素に記述済み
ページの名前を入れる大事な要素を1つ忘れていませんか？
そう、title要素です。
title要素はページの名前が入る項目です。そのtitle要素とh1要素の内容が同じになってしまっては重複するので、好ましくありません。
重要な語句なのでしょうが、一番需要なものは○○、二番目は△△、三番目は□□・・・という具合にページに掲載する内容には優先度がありますよね。
それらを明確にわかりやすくラベル付けををするように、h1～6を使う様にしましょう。
他のページでもh1要素の内容が重複するのはもったいない
h1要素にロゴやページ名称を充ててしまうと、他のページでも同じ部分がh1要素となってしまいます。
title要素とh1要素が1サイト内で同じになってしまうと、h2～6にしか変化を与える事ができません。それでは実質h2要素の部分がh1要素の様に見えてしまいます。
本来、ページが変われば「ページのタイトル」「見出し」が変わるべきなんです。
例えば本で考えてみましょう。第1章と第2章で同じ文言が見出しとして使われていたらどうですか？中身が薄く感じられませんか？そして読む気もなくなってしまいます。
それと同じことです。ページ毎にh1要素は変えてあげるようにしましょう。
ページの名称はtitle要素に記述して、1ページの中で重要な項目をh1要素として設定する
これを心がけてください。
なぜ一番重要な部分をh1にするかというと、読んでほしい事のタイトルや要約した部分が書かれている場合がほとんどですよね。そしてそれらは比較的ページの上部へ配置されます。
重要なキーワードが盛り込まれた、ようやくされた文章は見出しにピッタリなんです。
h1要素とする部分をあらかじめ考えてデザインする
特にトップページでありがちなんですが、h1要素に適切な部分がわからない場合があります。
Webサイトのトップページは、他のページへの移動を促すようにリンクバナーや、階層コンテンツの一部を出している場合がほとんどですので、あまり考えずに作ってしまうとh1要素に適切だと思う部分がないままデザインが進んでしまう事があります。
なのであらかじめ「h1要素にはどのような文言を使おうか」と考えておくようにしましょう。
どうしても入れる事ができない場合は・・・
自分のWebサイトを自分で作る場合には問題になりませんが、お客様が居たり、自社サイトを作っていたりすると、決定権が自分にはない場合がほとんどです。
先方の要望を聞いていく上で、SEO的に重要な文言を設定しようと思ってデザインしていた部分でも省くように指示が下りる場合もあります。
もちろんパーツを配置した意図を伝える努力もするべきですが、見た目上不要に思えてしまうのも十分わかります。
結果としてh1要素で想定していた部分がなくなってしまった場合、トップページだけロゴやヘッダーに配置したリード文をh1要素にしましょう。
トップページに配置された階層ページへの誘導のための部品や「ピックアップコンテンツ」「お知らせ」などの文言を割り当てるよりもはるかにマシです。
h要素に画像は設定しない方がいい
よく「h要素には画像を設定しない方がいい」「画像を設定しても”alt”を正しく入れれば問題ない」と真逆の意見を見かけます。
実際に試してみるとわかるのですが、画像よりも文章の方が効果は出やすいです。
なのでできれば画像ではなく文章を設定する方法をオススメします。
ですがページの構成を捻じ曲げてまで文章にする必要はありません。
なるべくなら文章を設定するように心がけるべきですが、本当に適切な物が画像だった場合、きちんと”alt”を入力してあれば問題ないと思います。
大事なのはh要素を割り当てる理由です。
画像よりも文章の方が効果があるから～といってh要素として適切でない文章を割り当てる事はしないでください。
まとめ
・ロゴやページ名称にh1を割り当てるのは控える
・ページの名称はtitle要素に記述済みなので、h1にも設定すると重複するのでもったいない
・キーワードを含んだ、ページ内で重要な部分にh1を設定する
・トップページだけどうしてもh1に適切な部分がない場合はロゴやリード文をh1に設定する
