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検索でのサイト評価を上げる可能性があるから望ましい。 追記:その後、Googleがサポートする構造データはJSON-LDとmicrodataとRDFaの三つだけになり、Microformatsは外された(サポートされている形式)。 Google以外の検索エンジンやその他のサービスでMicroformatsが使われないともかぎらないから必ずしも止めなくても良いかも知れない。 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の構造化データで検出されるかどうかを確認するべきだろう。 コメント 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
キム・テヒの反日活動を日本人としてどこまで許せるか かつて韓国ドラマの IRIS -アイリス- を観て何て綺麗で可愛くて良いんだと一目で度肝を抜かれた俳優に キム・テヒ がいた。 映画『アイリス -THE LAST-』予告編 by TAEWON ENTERTAINMENT from シネマトゥデイ 日本で放映されたのが2...
コメント