BLOG 2018.11.03

ブログを含むサイトの見出しH1のマークアップ

現在、HTMLは「セマンティック」をきちんと理解して構築すること、つまりHTML文章内の要素を文脈に沿ってマークアップすることが求められています。


Googleなどの検索エンジンも日進月歩で賢くなり、小手先だけのSEOよりも、文脈に沿ったマークアップをすれば、より上位に表示されると言われています。

 

特に<title>と<h1>はGoogleの検索エンジンが重要視し、大事な検索ワードを入れることが通例となっています。
そこまではよく聞くお話です。

 

しかしです。

 

TOPページ:サイトロゴや、サイトの名前に<h1>
下層ページ:ページタイトル(例えば、会社概要や◯◯について)に<h1>
ブログページ:記事タイトルに<h1>

これが理想!と言われても、

 

・ページごとに<h1>が違うし、どうやってマークアップすれば良いの?
・ブログページって、ページのタイトル(ブログ)が<h1>?記事のタイトルが<h1>?
・そもそも、<section>内に<h1>は一つだから、ページ内にいくつも<h1>入れても大丈夫なんじゃないの?

 

という疑問にぶつかった昨今の仕事で試行錯誤した記録を刻みます。

 

INDEX. 
HTML5.xの要素のセマンティックス
W3Cの仕様?WHATWGの仕様?
見出し<h1><h2>...のマークアップはclassで管理が良いかも


- HTML5.xの要素のセマンティックス

HTML4からHTML5へと変わり、WEBで表現できることが飛躍的に広がりました。
HTML5では、<header><footer><nav><article><aside><section><video>等々の新しいタグが使用可能となり、Google検索エンジンが求めるセマンティックなHTML、つまり文脈を考えたHTMLの構造にしてねー、という方向性に適合したサイト作りができるようになっています。

 

HTML5.0では、<section>の中に入っていれば、<h1>は1ページあたり何度でも使って良し、ということになっていました。

 



 

HTML4から慣れ親しんでいる私としては、これは最初は結構衝撃でした。。。

 

その後、2016年11月にリリースしたHTML5.1では明確に「<section>の中に入っていれば、<h1>は1ページあたり何度でも使って良し」の一文が削除されます。

 

▼HTML5.1での変更点
https://www.w3.org/TR/2016/REC-html51-20161101/changes.html#changes

 

つまり、従来のように<h1>はページ内にひとつが良い、という方向ですね。

 

それなのに、、、なんと、Googleの人はこんなことを言ってました。
「Use As Many H1 Tags As You Want.」(好きなだけ<H1>タグ使っていいよ)

 

▼Google: Use As Many H1 Tags As You Want
https://www.seroundtable.com/google-h1-tags-23699.html
2017年4月のことです。

 

え。どっちよ?!
大混乱。

 

- W3Cの仕様?WHATWGの仕様?

色々調べた挙句、W3CとWHATWGの仕様が違っている、ということのようです。
こちらのまとめサイトに一波乱あったことが書いてありました。

 

▼「h1要素は複数回使って良いのか!? HTML5.1に関するW3CとWHATWGの主張の違い」
https://togetter.com/li/1058977

 

W3CとWHATWGの仕様の乖離はここからも読み取れます。
https://www.publickey1.jp/blog/12/html5w3cwhatwgian_hickson.html



現場としては、、、どっちでもいいからまとめて!!
なのですが。。。

 

結局、いまはなんとなく強そうなW3CのHTML5.1の仕様を使っています。
(長い物には巻かれろ)

 

- 見出し<h1><h2>...のマークアップはclassで管理が良いかも

そして、最初のお題「ブログを含むサイトの場合はどうやって見出しマークアップを行う?」
についてですが、先ほど述べたように、現状は<h1>はページ内にひとつ、としています。

 

また、

 

・ページごとに<h1>が違うし、どうやってマークアップすれば良いの?
・ブログページって、ページのタイトル(ブログ)が<h1>?記事のタイトルが<h1>?

 

についてですが、↓のようにclassで管理し、<h1><h2>..に関連づけたCSSを作らないようにすれば、
どのページでどの見出しを使ってもOKとなります。

 

 

(1)見出しのスタイルはclassで管理
(2)<h1><h2>..に関連づけたCSSを作らない

 

このようにすることで、スタイルと、文脈構造をしっかり分けてマークアップができます。

CONTACT US !

デザインやWEBサイトのことでお困りごとはありませんか?
株式会社スリーでは、デザインはもちろん戦略からクリエイティブ、コミュニケーションまで、
デジタルとアナログ両分野の手法を使い分け、事業成長と問題解決をトータルサポートします。
お気軽にご相談ください!

お問い合わせはこちら