とあるweb屋の仕事術

とあるweb屋の仕事術

10年以上現役のweb製作屋さん。web製作雑務全部やる。

クックパッドのトップページにはh1タグがない件の考察

クックパッドのトップページにはh1タグがない件の考察

タイトルのとおりですが、

今回はクックパッドのwesサイト

トップページにh1タグがないのを

先日発見したというか、たまたま

見ていてあれーと思ったので、

そんな記事です。

 

 

クックパッドのトップにはh1タグがない

2019/08/24時点で、

PCサイト、スマホサイトともに

クックパッドのトップページには

h1タグがありません。

 

クックパッドのPC版の

トップページでは、見出しタグは

h2タグからはじまって、

h3タグも使用されています。

スマホサイトではh2もh3も、

hxタグ自体ありません。

スマホサイトでは

タイトルっぽいUIの部分はdivタグで

実装されています。

意外ですよね。

 

 

だからなんだというわけではないのですが、

h1タグがないサイトがあるということと、

それが大手のクックパッドであるという

ところで、軽く衝撃でした。

 

 

 

あるあるh1タグ議論

h1タグに関してはさまざまな議論があります。

ロゴをh1タグにするべき・しないべきだ、とか

h1は1ページつきひとつにするべきだ、とか

HTML5ではh1タグは複数でも問題ない、とか。

 

 

上記議論に関しては

別途記事にしたいと思っていますが、

いったん置いといて。

 

そもそも「h1タグがない」というのは

議論にもならないことで、

コーディングの不備意外では

あまり見聞きしたことがなかったので

なんでやろ...という感じですが、

クックパッドほどのサービスが不備で

h1タグが配置されていないというのは

少し考えにくいです。

 

意図的に必要ないとしてそうしているのか、

なんなのか。

 

 

 

h1タグに設定するべき要素がない?

でもあらためて

クックパッドのトップページを

見てみると、h1タグに

なるような要素が

ないかもしれません。

 

h1としてトップページの

「見出し」になる要素がないから

 

というのがクックパッドの

トップページで h1 タグがない

理由なのかなと思いました。

 

クックパッド PCサイト トップページ

クックパッド PCサイト トップページ

 

クックパッド スマホサイト トップページ

クックパッド スマホサイト トップページ

 

ちなみにトップページ以外の下層ページ

(セカンドページ)以降は、h1タグの

設定がしっかりありました。

レシピ詳細ではもちろんレシピ名はh1

タグで実装されています。

 

 

 

構造的マークアップは必要だけど重要なのはやはりコンテンツ

hxタグ含め、構造的なマークアップや

意味のあるマークアップは

セマンティックHTMLといって、

適切なセクショニングやタグを用途に

合わせて正しく実装するということは

重要です。

 

ただクックパッドのように

h1になる要素がないのであれば、

無理に設定しない、

なくても問題はないと

言えるのかもしれません。

 

 

hxタグがなくてなにか問題かというと

なくても大した問題はないです。

コンテンツの中身が充実していれば、

SEOとしても問題はとくにないと言えます。

SEOはずっと何年も本質は変わっていません。

コンテンツ is king ですね。

コンテンツが何より重要であり、主役。

 

 

クックパッドのトップページ、

あなたならどの要素をh1タグに

設定しますか?