2013年11月16日土曜日

すべての見出しをH1にしてみました

HTML5の section articleの概念が理解しにくいため、実際にBloggerをアウトラインを意識しながらセクショニングしてみました。

HTML5 Outliner

まだ解説されているサイトさんが少なく、平均的と思われる方法を採りました。

Section
見出しをつけられるもの、または付けてもおかしくないもの。

Article
RSSでそのまま配信できる部分。


以下が概略ですが、決してこれが正解というわけではないです
見出しをともなうブロックとArticleは、暗黙的にSectionの意味があります。

<h1>ブログのタイトル</h1>
<div class="date-outer">
<h1 class='date-header'>2013年11月16日</h1>
<div class="date-posts">
<div class='post-outer'>
<article class='post hentry'>
<header><h1>投稿記事のタイトル</h1></header>
<div class='post-body entry-content'>
<data:post.body/>記事本文
</div>
<footer class='post-footer'></footer>
</article>
</div>

<div class='post-outer'>
その日の他の投稿記事
</div>




</div>
</div>
widget
<div>
<h1>タイトル</h1>
コンテンツ
</div>

初め<div class='post-body'>の本文のみの部分も<section class='post-body'>にしてみましたが、記事内に見出しがないと、タイトルのないセクションになっていしまいシックリこなかったので投稿内で必要なときは<section>タグを書くようにして、Articleのpost-body以外に<header>タグを追加して、記事本文を明確にしました。

footerには投稿者や公開日が含まれていますのでArticleだけでRSSの記事としてなり立ちます。

結局は見出しをすべてH1にしただけになりました。
追々<section>タグに変更したいと思います。

元々ブロガーは、classでぴっちり指定してあるので、divだろうがsectionだろうが、navだろうが気にする必要はありませんでした。古いブラウザでもHTML5のタグに対応できるようにもなっています。

スタイルのところをちょこちょこっと変更するだけで見栄えはそのままです。

テンプレートにより色々ですけれど、大体次のあたり。

h2 {} → h1 {}
h2.date-header {} → h1.date-header {} (日付の見出し)
.widget h2 {} → .widget h1 {} (Widgetのタイトル)
h3.post-title {} → h1.post-title {}(投稿タイトル)

<h1>にすると検索に有利という話もありますが、だぶんあっても一時的なもので、いずれ対策されるでしょう。
むしろ、Bing ウェブマスター ツールで警告が表示されていて心配しているところです。

レポート&データ → SEO レポート ページに複数の &lt;h1&gt; タグが存在しています。

Google ウェブマスター ツールでは、警告はありませんでした。

セクションを意識してみて見出しの本当の意味を理解できたような気がします。これが一番の収穫。
XHTML2.0では、<H> タグがあったらしいですが、中止されてしまい残念。本当に、<H2>とか<H3>は必要ないと思いました。

投稿記事の構成よっては同じ階層のセクションの題でも小さく見せたいときがあります。
それで、<h1>以外の見出しは必要なくなってしまったので、<h2>や<h3>タグをスタイルとして利用してみようかなと少し考えています。

見出しのタグは文字の大きさをあらわすものではないというのは、よく間違いの例として挙げられますけど、どのみち<h1>でも<h2>でも同じなので、あえて使ってみようということです。