hAtomのhentryのマークアップ｜SEO対策にMicroformatsの構造化データを使う

結城永人 -2018年8月27日 (月)

Microformatsはホームページやブログのサイト内容を機械向けに表現する構造化データの一つで、検索エンジンも認識するからサイト作成に取り入れるとキーワードの検索結果からアクセスアップを齎すかも知れないSEO対策のマークアップに含まれているんだ。

近年はバージョンアップされてMicroformats2が出て来ているけど、ところがSEO対策ではGoogleなどの主要な検索エンジンに認識されないために有効性は低いと考えられる。Microformats2は構造化データとして後方互換性がないわけではないので、もしも検索エンジンからのアクセスアップを目論んでSEO対策に使うならば以前のバージョンのMicroformatsのままのマークアップに止めておくべきかも知れない。Microformatsの構造化データのマークアップはclass属性を中心に必要ならば幾つかのrel属性も使いながら機械向けの語彙（セマンティックなボキャブラリー）をサイトのHTMLタグに埋め込むのが基本になっている。語彙のカテゴリーが幾つもあってWelcome to the microformats wik!iにMicroformats2を含めて、逐一、網羅されているけれども検索エンジンが全て認識するとはかぎらない。SEO対策に役立てるには検索エンジンが検出する語彙のカテゴリーの中から一般的に使われるhAtomのhentryをしっかり覚えておきたい。hAtomのhentryはサイトのコンテンツを機械向けに表現するマークアップだ。著者を示すために組み込まれるhCardのvcardは単独でも使える。Googleも認識するので、併せて覚えておくと良いと思う。検索エンジンなどのコンピューターはサイトの文脈が直ぐには分からないみたいで、言葉の意味付けに混乱し易いらしい。ブログならばどこが記事で、どれが人物なのかが掴めなくて言葉は全て言葉（または訪問して得られるのはデータの集合体ばかり）でしかないから意味付けによって端的に識別できないわけだ。構造化データによってどこが記事で、どれが人物なのかを示したりするとサイト内容が速やかに分かるように仕向けられるし、キーワードも的確に判断されるかぎり、検索結果からのアクセスアップのSEO対策に役立つと考えられる。Google検索はMicroformatsのhAtomのhentryを認識する。構造化データテストツールで構造化データのマークアップが検出されるかどうかを確認できる。ただしリッチリザルト（豊富な検索結果）用なので、サイト解析においてSeach Consoleの検索での見え方の構造化データではエラーが出てしまうかも知れない。SEO対策ではリッチリザルト用だけではなくてサイト解析においてエラーが出ないように適切に使うとGoogle検索でのサイト評価を上げる可能性があるから望ましい。MicroformatsのhAtomのhentryのマークアップを行うhAtomはコンテンツの構造化データだ。それ自体はサイトのマークアップに使われない。実際に必要なマークアップが十分に行われた状態をhAtomと呼ぶんだ。Microformatsの構造化データのhAtomの中核を担うのがコンテンツを指し示すhentryで、サイト作成でhentryが一定の条件を満たして使われるとhAtomが成立する。検索エンジンも略同じように認識するけど、しかしながら微妙に違うからSEO対策ではマークアップに注意しなくてはならない。hAtomで使われる十個の項目

hfeed：フィード／配信（任意）

feed category：フィードカテゴリー／フィード種別（任意）
リンクのaタグにrel属性で指定
hentry：エントリー／入稿（必須）
- entry-title：タイトル／題名（必須）
- entry-content：コンテンツ／内容（任意）
- entry-summary：サマリー／概略（任意）
- updated：アップデート／更新日（必須）
- published：パブリッシュ／公開日（任意）
- author：オーサー／著者（必須）
  hCardによって記載しなくてはならない
- bookmark：ブックマーク／ページURL（任意）
  リンクのaタグにrel属性で指定
- tag：タグ／種別（任意）
  リンクaタグにrel属性で指定

hAtomのソースコードのサンプル<main> <div class="hfeed"> カテゴリー: <a href="カテゴリーページURL" rel="tag">カテゴリー</a> <article class="hentry"> <header> <h1 class="entry-title">タイトル</h1> <p class="entry-summary">サマリー</p> <p class="author vcard"><span class="fn">著者</span></p> </header> <div class="entry-content"> <p>コンテンツ</p> </div> <footer> 更新日: <time class="updated" datetime="最終更新日時">更新日</time> / 公開日: <time class="published" datetime="初出公開日時">公開日</time> <br> タグ: <ul><li><a href="タグページURL①" rel="tag">タグ①</a></li><li><a href="タグページURL②" rel="tag">タグ②</a></li><li><a href="タグページURL③" rel="tag">タグ③</a></li></ul> ブックマーク: <a href="ページURL" rel="bookmark">パーマリンク</a> </footer> </article> </div> </main>hfeed＿class="hfeed"hentryには含まれない項目だけれどもサイトのAtomフィードの部分を指定する。hAtomの最も外側のルートとしてhentryの全体を含めて使う。Googleでは認識されないからhfeedのSEO効果はないかも知れないけれども他の検索エンジンなどの機械向けに使うのは吝かではない。feed category＿rel="tag"hentryには含まれない項目だけれどもhAtomのhfeedのカテゴリーを指定する。記載する場所がhfeedの内側だけれどもhentryの外側でなければならない。Googleでは認識されないからfeed categoryのSEO効果はないかも知れないけれども他の検索エンジンなどの機械向けに使うのは吝かではない。hentry＿class="hentry"サイトのコンテンツの部分をルートで指定する。サイトのmainのarticleなどで囲まれたメインのコンテンツが対象になる。引用タグのblockquoteやqで囲まれた部分は含まれていても構造化データとして除外されて認識されない。entry-title＿class="entry-title"hentry内のコンテンツのタイトルの見出しのh1などへ記載する。entry-content＿class="entry-content"hentry内のコンテンツ自体を囲っているdivなどへ記載する。entry-summary＿class="entry-summary"hentry内のコンテンツのサマリーの段落タグのpなどへ記載する。updated＿class="updated"サイトのHTMLがバージョン5ならば日時タグのtimeを使うのが相応しい。対応してないバージョン4以前を含めて他のタグでも大丈夫で、省略タグのabbrや区間タグのspanなどが適している。hAtomの必須項目としてはupdatedを使うだけで良いけど、さらに日時の値を機械向けにエンコードして詳細に示すためにはtimeのdatetime属性か一般的な仕方としてvalueのclass属性（Value Class Pattern）が使える。<div class="updated"> <abbr class="value">更新日</abbr> </div>timeでdatetime属性を使う場合は他のタグは要らないけど、しかしvalueのclass属性を使う場合はupdatedのclass属性の子要素にしてマークアップを行う。Googleはdatetime属性やvalueのclass属性を認識しないけれども他の検索エンジンやブラウザなどの機械は読み込むかも知れないからなるべく記載しておきたい。タグで日時を詳しく示してもそのままではサイトに表示される日時が採用されるので、Googleなどの更新日の読み込みの値を変えるためにはvalue-titleのclass属性とtitle属性を使う。<div class="updated"> <time class="value-title" datetime="最終更新日時" title="最終更新日時">更新日</time> </div>time以外ではdatetime属性は使えなくてtimeでも使わなくて構わない。例えばサイトに簡潔に年月日だけ表示してタグで年月日に加えて何時何分何秒まで詳細に指定して機械向けに読み込ませるようにできる。Googleでは認識するのを確認した。更新日としてサイトに表示する日時よりもtitle属性の値がvalue-titleのclass属性で優先される。published＿class="published"マークアップの仕組みはupdatedと全く同じだ。author＿class="author"マークアップにはauthorのclass属性と共にMicroformatsの人物のためのhCardを使わなくてはならない。hCardはvcardのclass属性を記載する。単独でも使えるけれどもhAtomのhentryの中では著者を指し示す構造化データになる。Googleではauthorのclass属性を使わなくても大丈夫なんだ。hCardのvcardを記載するだけでもhentryの必須項目として著者が認識される。hCardはvcardのclass属性のタグの子要素にfnのclass属性のタグを使って著者をマークアップする。<span class="author vcard"><span class="fn">著者</span></span>個人か組織／団体で、区別する場合はfnにnかorgも付け加える。前者は「class="fn n"」、後者は「class="fn org"」になる。GoogleでもhCardにnやorgが使われていると構造化データとして認識される。何も付けずにfnだけだと個人の著者として扱われる。するとどんな名前なのかの推測処理が働くらしい。英語などの半角スペースや半角コンマで区切られた名前と名字ではそのように読み取られるけれども日本語のように氏名が名前と名字で区切られずに一語で構成されているとnickname（渾名）になってしまう。日本語の個人の著者を正確にマークアップするためにはfnだけではなくてnも付け加えて使うのが望ましい。さらにhCardの氏名は名字と名前をfamily-nameとgiven-nameに分けてマークアップするのが最も正確なんだ。<p class="author vcard"><span class="fn n"><span class="family-name">名字</span><span class="given-name">名前</span></span></p>GoogleでもhCardにfamily-nameとgiven-nameが使われていると構造化データとして認識される。hCardは人物の氏名のfnの他にも様々な指定が可能になっている。住所のadrやメールアドレスのemailや地域のgeoや注釈のnoteや写真のphotoや電話番号のtelなど（Property List）。何れもvcardのclass属性のタグの子要素にclass属性を使ったタグで、コンテンツを囲ってfnと同様に記載する。hentryの著者としてセットで一般的に使われるのはプロフィールへのリンクだ。<p class="author vcard"><a class="fn url" href="プロフィールURL">著者</a></p>著者のhCardのリンクのclass属性にはfnと共にサイトアドレスのurlも使える。さらに当て嵌まるかぎりだけれども正規URL（サイト内の複数の同じ内容のページを一つに纏める代表的なサイトアドレス）のuidも付け加えられる。Googleでも認識されるからhCardのurlやuidはSEO効果があると考える。bookmark＿rel="bookmark"コンテンツのURLを指定する。パーマリンクともいわれる。リンクタグのaに記載する。他にもclass属性で、サイトアドレスのurlを付け加えて良いと思う。<a class="url" href="ページURL" rel="bookmark">タイトル</a>さらに当て嵌まるかぎりだけれども正規URL（サイト内の複数の同じ内容のページを一つに纏める代表的なサイトアドレス）のuidも付け加えられる。Googleでは認識されないからhentryのbookmarkのurlやuidのSEO効果はないかも知れないけれども他の検索エンジンなどの機械向けに使うのは吝かではない。tag＿rel="tag"コンテンツの種別を指定する。タグやラベルページへのリンクタグのaに記載する。hfeedのfeed categoryと「rel="tag"」のマークアップは同じだれどもhentry内に置くとtagとして扱われる。Microformatsの暗示的なマークアップについてMicroformatsは基本的にサイトに表示するコンテンツへの構造化データなんだ。class属性を使って機械向けに意味付けするのはデザインのCSSの指定先にも使えるのが便利だと感じる。しかしメタ情報としてサイトに表示せず、全くの構造化データとしてのみ使う方法もあっていい換えると暗示的なマークアップが可能なんだ。hentryのupdatedとpublishedの日時の値を一般的に指し示す場合のValue Class Patternのvalue-titleのclass属性とtitle属性の記載が他の項目でも通用する。サイトに表示する簡潔な日時とは別にtitle属性の詳細な日時を構造化データとして扱うというマークアップだけれども後者が確定しさえすれば前者がなくても通用するんだ。<p class="author vcard"><span class="fn"><span class="value-title" title="著者"></span></span></p>hentryの項目のclass属性のタグの子要素にvalue-titleのclass属性とtitle属性のタグを入れておくとサイトに表示するコンテンツがなくてもtitle属性の値によって構造化データとして読み込まれる。サイトのデザインによって必須項目を表示しなくてもhAtomを成立させたり、表示するコンテンツとは別にMicroformatsの構造化データを追加したりするのには暗示的なマークアップが役立つ。例外としてurlやuidなど、リンクのaタグのclassに記載するタイプは対象のURLがherf属性に入っていて通常でもサイトに表示されず、構造化データとして直接的に読み込まれるようになっているからマークアップを変える必要はない。Google検索が認識するhAtomのhentryの特徴サイトのhAtomが成立する条件の四つの必須項目／hentryとentry-titleとauthor：hCardのvcardとupdatedが記載されているページはGoogle検索でも構造化データとして容認される。一つでも抜けていると検出されないか、エラーになってしまう。繰り返すと構造化データテストツールでは十分に分からなくてSeach Consoleの検索での見え方の構造化データのhAtomで確認できる。Microformatsの暗示的なマークアップも大丈夫なので、Value Class Patternによってメタ情報としても使える。hAtomに関して認識されるのはhentryからなので、ルートのhfeedとhfeedの項目のfeed categoryは含まれない。hentryで使われる基本的な項目は全て認識されるけど、個別に追加できる例えばbookmarkでのclass属性のurlやuidなどの項目は認識されなかったりするので、SEO対策に使うならば構造化データテストツールやSeach Consoleの構造化データで検出されるかどうかを確認するべきだろう。

コメント