メモログ

Microdata/Microformatsの検証ができるRich Snippets Testing Tool

Google の Webmaster tools のひとつにRich Snippets Testing Toolというのがあって、このツールではサイトに記述した Microdata や Microformats などの構造化データマークアップ(structured data markup)を Google がきちんとパースしてくれるかどうかをチェックすることができます。

それでメモログを検証した結果がこんな感じ(インデックスページだと hfeed がたくさん出力されるので、個別アーカイブにて)。

最初にhentryに必須の entry-title がない(entry-title の class を指定していなかった)とか、hcard で著作者情報を示した方が良い的なことをいろいろ言われたので、言われるがままに対応してみました。microdata 的には blogPosting にitemrefを設定して、author 情報として section#profile の箇所を参照するように設定しました(itemref の使い方を知る)。

自分の名前があるところでは日本語で、あるところでは英表記で記述していたりしたのですが、構造化データ的には英表記部分で統一してみたりしてみました。ひとつのデータの中に itemprop=name を複数追加してはいけないという規則はなさそうな感はあるのですけど、調査不足。

あと、hentry の仕様としては、entry-title の class が存在しない場合は最初の見出し要素を使用すると書かれてはいるのですが、そこはツール的には考慮されない様子。

if the Entry Title is missing, use

  • the first <h#> element in the Entry, or
  • the of the page, if there is no enclosing Feed element, or</li> <li>assume it is the empty string</li> </ul> </blockquote> <p>検証結果の「Extracted Author/Publisher for this page」の項目では、Google Plus のプロフィール画面とリンクされているかどうかをチェックしてくれるようです。Google Plus との連携がとれている場合は、「Verified: Authorship markup is verified for this page.」と表示される。Google Plus へのリンクが存在しない場合は、なんとなく author 関連の URL を引っ張ってくる様子。そして時には「Error: Author profile page does not have an authorship link to a Google Profile」みたいなエラーを出力する様子(このエラーが出る理由はいまいち不明)。 <img src="http://farm8.staticflickr.com/7106/7478678764_650b123865_z.jpg" alt=""></p> <p>Google Plus との連携の取り方は<a href="http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=1408986">検索結果内の著者情報 - ウェブマスター ツール ヘルプ</a>を参照的なリンクがついていたので、それを参考に設定してみました。要するにサイトにリンクをつけて、Google Plus の「投稿先」にリンクを追加するだけで良いみたい。これでそのうち検索結果に Google Plus のプロフィールアイコンが表示されるようになるのかしら。</p> <p>microdata に対応したあとに使ってみると、いろいろ楽しいかなと思います。</p> <p>追記(2012/7/16)</p> </div><footer class="profile"><div class="profile-inner"><div class="profile__image"><img src="/assets/icons/icon.svg" role="presentation" width="48" height="48" alt=""></div><h2 class="profile__heading">私について</h2><div class="profile__content"><div>Yutaka Yamaguchi</div><div>東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。</div><ul class="profile__social-list"><li class="profile__social-list-item"><a href="https://twitter.com/memolog">X</a></li><li class="profile__social-list-item"><a href="https://www.linkedin.com/in/yutakayamaguchi/">LinkedIn</a></li></ul></div></div></footer></article></main><aside class="related-posts"><h2 class="header__title">📖 関連メモ</h2><div><article class="article-summary"><header class="header"><div><time datetime="2018-08-14T18:04:54.000Z"><span class="calendar-icon">📅</span><span>2018年8月14日</span></time></div><h3 class="header__title article__title"><a href="/2018/add-json-ld-structured-data.html">Add JSON-LD structured data</a></h3><div class="header__feature" aria-hidden="true"><div class="featured__image" style="background-color: #a6aba4;"><div style="background-color: #a6aba4"><img src="/assets/images/thomas-kelley-75110-unsplash/thomas-kelley-75110-unsplash.svg" alt role="presentation" loading="lazy" width="985" height="657"></div></div><div class="featured__credit">Original photo by <a href="https://unsplash.com/photos/HBANPxXi3aQ?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener" tabindex="-1">Thomas Kelley</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" target="_blank" rel="noopener" tabindex="-1">Unsplash</a>, edited with <a href="https://github.com/fogleman/primitive" target="_blank" rel="noopener" tabindex="-1">Primitive</a></div></div></header><div class="content">構造化データ(structured data)の部分をmicrodataからJSON-LDに置き換えてみた。</div><div class="read-more"><a href="/2018/add-json-ld-structured-data.html">📖 続きを読む</a></div></article><article class="article-summary"><header class="header"><div><time datetime="2025-04-10T23:15:00.000Z"><span class="calendar-icon">📅</span><span>2025年4月10日</span></time></div><h3 class="header__title article__title"><a href="/2025/generate-related-posts.html">記事に関連メモを出してみる</a></h3><div class="header__feature" aria-hidden="true"><div class="featured__image" style="background-color: #e8c898;"><img src="/assets/images/generate-related-posts/generate-related-posts.webp" srcset="/assets/images/generate-related-posts/generate-related-posts.webp, /assets/images/generate-related-posts/generate-related-posts@2x.webp 2x" role="presentation" loading="lazy" width="985" height="328" alt></div><div class="featured__credit">Image by <a href="https://chatgpt.com/" target="_blank" rel="noopener" tabindex="-1">ChatGPT</a></div></div></header><div class="content">記事データをベクトル化して、関連記事(メモ)を表示できるか試してみた、というメモ。</div><div class="read-more"><a href="/2025/generate-related-posts.html">📖 続きを読む</a></div></article><article class="article-summary"><header class="header"><div><time datetime="2011-09-13T15:30:00.000Z"><span class="calendar-icon">📅</span><span>2011年9月13日</span></time></div><h3 class="header__title article__title"><a href="/2011/09/add-attribute-in-element-about-watir-webdriver.html">watir-webdriver:要素で使用できる属性を増やす</a></h3><div class="header__feature" aria-hidden="true"><div class="featured__image" style="background-color: #b8b8a8;"><img src="/assets/images/add-attribute-in-element-about-watir-webdriver/add-attribute-in-element-about-watir-webdriver.webp" srcset="/assets/images/add-attribute-in-element-about-watir-webdriver/add-attribute-in-element-about-watir-webdriver.webp, /assets/images/add-attribute-in-element-about-watir-webdriver/add-attribute-in-element-about-watir-webdriver@2x.webp 2x" role="presentation" loading="lazy" width="985" height="328" alt></div><div class="featured__credit">Image by <a href="https://chatgpt.com/" target="_blank" rel="noopener" tabindex="-1">ChatGPT</a></div></div></header><div class="content">watir-webdriverでは、たとえば「b.link(:id,'memolog').href」みたいなかたちで要素を特定させて、特定した要素の属性を取得することができます(詳細はAPIなどを参照)。ただW3Cで規定されている属性しかメソッド化されていないので、たとえばtwitterのt.coのリンクの元URLの属性(data-expanded-url)などは通常では取得することができません。</div><div class="read-more"><a href="/2011/09/add-attribute-in-element-about-watir-webdriver.html">📖 続きを読む</a></div></article><article class="article-summary"><header class="header"><div><time datetime="2012-07-02T22:00:00.000Z"><span class="calendar-icon">📅</span><span>2012年7月2日</span></time></div><h3 class="header__title article__title"><a href="/2012/07/dropped_pubdate_in_time_element.html">time要素からpubdate属性が抜けていた</a></h3></header><div class="content">何の気なしにValidator.nu (X)HTML5 Validatorでサイトの検証をしてみたら、time要素のpubdateがnot allowedだと言われて、気がついたらW3Cの仕様のContent Attributesからも抹消されているので、なんでだろうなあと調べていたら20120329の更新で、pubdateが削除されていた(The time element was redesigned to make it match how people wanted to use it. Its pubdate attribute was dropped. )。参考HTML5 (と関連WD) 更新 - fragmentary。</div><div class="read-more"><a href="/2012/07/dropped_pubdate_in_time_element.html">📖 続きを読む</a></div></article></div></aside></div></body></html>