久しぶりにGoogleウェブマスターツールを眺めていると、構造化データの項目を発見。
良く分からなかったので調べてみると、ウェブページの構造をコンピュータにも理解できるようにするものらしい(セマンティックweb?)。
まずは、<article>などの構造化タグを導入することに。

元の状態を見直してみると、おおよそ以下の構造でした。


<body>

<header>
<h1>ブログのタイトル</h1>
</header>

<h2>日付ヘッダー</h2>

<h3>投稿のタイトル</h3>
投稿内容

<h4>○件のコメント</h4>
コメント内容

<aside>
<h2>「ブログの説明」のタイトル</h2>
ブログの説明

<h2>ブログアーカイブのタイトル</h2>
ブログアーカイブ
</aside>

<footer>
著作権表示
</footer>

</body>


悩んだ所は、インデックスページ(http://wwww.okinawan-lyrics.com/)でも投稿ページ(http://wwww.okinawan-lyrics.com/xxxx.html)でも、構造が同じ点。
ブログのタイトルがh1なのは、インデックスページでは納得だけど、投稿ページではスッキリしない。
同様に、投稿タイトルがh3なのは、インデックスページでは納得だけど、投稿ページでは…
でも、アウトライン上は、これでいいのかも…

考えた結果、インデックスページでも投稿ページでも、表示されている大枠はブログで、その中に投稿があると仮定。
以下のように構造化タグ(section、article、nav)を追加しました。
結局、articleタグを加えているので、タイトルのhのランクは気にしないことに。
※blogger特有のb:widgeタグやb:includableのために、構造化タグを理想的な位置に入れられないですね。
投稿のarticleに、コメントのarticleを入れ子に出来ませんでした…汗

ブログ本体の部分は黄色、投稿関係の部分は橙色


<body>

<header>
<h1>ブログのタイトル</h1>
</header>

<section>

<h2>日付ヘッダー</h2>

<article>
<h3>投稿のタイトル</h3>
投稿内容
</article>

<article>
<h4>○件のコメント</h4>
コメント内容
</article>

</section>

<aside>

<h2>「ブログの説明」のタイトル</h2>
ブログの説明

<h2>ブログアーカイブのタイトル</h2>
<nav>
ブログアーカイブ
</nav>

</aside>

<footer>
著作権表示
</footer>

</body>


始めたばかりなので誤解もあるだろうけど、「習うより慣れろ」ですね。
問題があれば、順次直していくつもりです。

次は、Google、Bing、Yahoo!が推奨しているschema.orgのマークアップに挑戦、Bloggerを構造化・その2(schema.orgでマークアップ):南の島旅へ。