メモログ

⛰ 塵が積もって山とならないメモのログ 👄

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" target="_blank" rel="noopener">検索結果内の著者情報 - ウェブマスター ツール ヘルプ</a>を参照的なリンクがついていたので、それを参考に設定してみました。要するにサイトにリンクをつけて、Google Plusの「投稿先」にリンクを追加するだけで良いみたい。これでそのうち検索結果にGoogle Plusのプロフィールアイコンが表示されるようになるのかしら。</p> <p>microdataに対応したあとに使ってみると、いろいろ楽しいかなと思います。</p> <h2 id="追記-2012-7-16"><a href="#追記-2012-7-16" class="headerlink" title="追記(2012/7/16)"></a>追記(2012/7/16)</h2><p>検索結果にプロフィール画像が表示されるようになりました。2週間くらいかかった感じですね。 <img src="http://farm8.staticflickr.com/7107/7582802106_dd9e4e73cb_z.jpg" alt=""></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="icon"></div> <h2 class="profile__heading">私について</h2> <div class="profile__content"> <div>Yutaka Yamaguchi</div> <div>東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。万年英語勉強中</div> <ul class="profile__social-list"> <li class="profile__social-list-item"><a target="_blank" rel="noopener" href="https://twitter.com/memolog">Twitter</a></li> <li class="profile__social-list-item"><a target="_blank" rel="noopener" href="https://www.linkedin.com/in/yutakayamaguchi/">LinkedIn</a></li> <li class="profile__social-list-item"><a target="_blank" rel="noopener" href="https://www.facebook.com/yutaka.yamaguchi">Facebook</a></li> </ul> </div> </div> </footer> </article> </main> </div> <script> // http://css-tricks.com/favicons-next-to-external-links/ (function (){ 'use strict'; if (/googlebot/i.test(navigator.userAgent)) { return; } window.addEventListener("DOMContentLoaded", () => { const links = document.querySelectorAll('.content p a'); const linkLength = links && links.length || 0; for (var i=0; i<linkLength; i++){ const link = links[i]; const hostname = link.hostname; if (hostname) { const children = link.children || []; const firstChild = children && children[0]; if (firstChild && firstChild.tagName === 'IMG') { // For old amazon image link if (link.hostname === 'www.amazon.co.jp') { link.style.float = 'left'; link.style.marginRight = '1em'; link.style.paddingLeft = '0'; } // link.classList.add('no-link-icon'); continue; } // link.classList.add('link-icon'); // link.style.backgroundImage = `url(https://www.google.com/s2/favicons?domain=${hostname})`; } } }); })(); </script> <script> if ('serviceWorker' in navigator) { // navigator.serviceWorker.register('/service-worker.js'); } </script> </body> </html>