結論
サイトロゴにh1タグを設定する。
サイトロゴが画像の場合は、alt属性でタイトルを設定したimgタグをh1タグで囲う。
どういうことか
本ブログもそうなのだが、h1にあたるタイトルがコンテンツに存在するページとそうでないページがある。
このページのタイトルは「トップレベルのタイトルが無いページでスマートにh1タグを設定する方法」になるが、本ブログのトップページなどの記事一 覧ページはどうだろう？
一覧の記事のタイトルは複数有り、レベルとしてはh2にあたる。
どうするのか
強いて言えばトップページなどの記事一覧ページにおけるh1はサイトタイトルの「datsukan blog」になる。
上部にあるサイトロゴがテキストなら、ここを記事一覧のページに限りh1タグで囲えば解決する。
※なお、各記事のページではh1が記事タイトルになるのでサイトタイトルにはh1を設定しないように制御すべき
だが、本ブログではサイトロゴ部分は画像になっているので、クローラーがh1の文字として認識するのは難しそうだ…。
よくある問題な気がして調べたところ、どうやらimgタグのalt属性でタイトルを設定してh1タグで囲っても効果があるらしい。
実際に記述すると下記のような形となる。
<h1>
<a href="/">
<img src="/datsukan-blog-logo.png" alt="datsukan blog" />
</a>
</h1>
おわり
普段良く見るサイトとかでも使われていると思いますが、実装してみないと仕組みは分からないもんですね…。
