Bloggerの公式テーマにMicroformatsのhAtomの構造化データを取り入れる方法

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

Bloggerの公式テーマのソースコードを調べてみると構造化データのMicroformatsがもう既に殆ど組み込まれている。使うとSEO対策に役立って検索エンジンからアクセスアップが一層と可能になるかも知れないマークアップの一つなんだ。シンプルなどの旧テーマとContempoなどの新テーマで何れも記事のブログの投稿ガジェットに著者名を表示すると前者は更新日がなくてエラーになるのを修正する、後者はエントリーを開放して更新日を付け加えるHTML編集によって機械向けにサイト内容を指し示すMicroformatsのhAtomが成立するようになっている。著者名を表示しないと手間は一つ増えるにせよ、後少しのカスタマイズで済む。他の項目も幾つか付いていて折角だからブログに取り入れて使わないと勿体ないと感じる。蒲公英の綿毛を吹く少女

MicroformatsのhAtomが成立する四つの必須項目
旧テーマでのhentryのカスタマイズについて
テンプレートにauthorを追加する方法
テンプレートにupdatedを追加する方法
新テーマでのhentryのカスタマイズについて
テンプレートにhentryを追加する方法
テンプレートにauthorを追加する方法
テンプレートにupdatedを追加する方法
MicroformatsのhAtomの構造化データのSEO効果

MicroformatsのhAtomが成立する四つの必須項目

hentry：エントリー／入稿

entry-title：タイトル／題名
author：オーサー／著者
updated／アップデート／更新日

ブログのHTMLタグのclassに記載して使う。テンプレートのマークアップではルートのhentryの要素に他の三つの必要項目のclassを付けた要素が囲まれるように配置しなくてはならない。旧テーマでのhentryのカスタマイズについてシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルが対象になる。デフォルトで四つの必須項目のうち、hentryとentry-titleの二つが必ず入るので、残りのauthorとupdatedの二つを追加するカスタマイズが求められる。追加ページにhentryが付いていてデフォルトのデザインだと日付や時刻が付いてないからMicroformatsのhAtomを成立させるには不向きかも知れない。hentryを外して止めるか、または更新日のupdatedを付けないと構造化データのエラーが出てしまう。後者だと更新日を表示するデザインに変えるのとMicroformatsの暗示的なマークアップで更新日を表示せずにデザインを変えないのとどちらでも対応できる（テンプレートにupdatedを追加する方法）。前者だと記事ページだけにhentryを付けるようにして追加ページからは外して構造化データのエラーを止めると良いと思う。<div class='post uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <b:class cond='data:view.isPost' name='hentry'/>※赤字の部分はデスクトップ版のみで、モバイル版には記載されてない。
※太字の部分は追加するソースコードだ。旧テーマはデスクトップとモバイルでソースコードが分かれているので、必要な分だけカスタマイズしなくてはならない。HTML編集で、デスクトップはpostのid、モバイルはmobile-postのidのincludable内に置かれている。元々、当該のdivタグのclassにhentryが記載されているので、削減して新たに記事ページだけに振り分けてhentryをclassに記載する独自タグのソースコードを追加する。デスクトップとモバイルの何れも当該のdivタグの直後に置かないと反映しないので、同じようにclassを記載するための独自タグの<b:class/>を除いて他のタグが一つも間に入らないように注意しなくてはならない。テンプレートにauthorを追加する方法authorにはvcard（Microformatsの人物用のhCardのマークアップ）のclassを使わなくてはならない。レイアウトのブログの投稿ガジェットから著者名を表示するとhentry内に自動的に追加されるので、HTML編集は不要だから最も簡単なんだ。その場合でもauthorのclassがないので、Googleなどは容認するし、省略しても大抵は大丈夫だけど、MicroformatsのhAtomでのSEO対策に万全を期すためにはHTML編集からvcardの前にauthorも他の値と半角スペースで区切って追加しておくと良いと思う。<span class='post-author author vcard'> 中略 </span>旧テーマはデスクトップとモバイルでテンプレートのソースコードが分かれていて全く同じマークアップが二ヵ所に置かれている。テーマでモバイルを設定している場合には両方ともカスタマイズしなくてはならない。デザインの都合で著者を表示したくなければMicroformatsの暗示的なマークアップによって対応できる。<span class='post-author vcard'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><span class='value-title' title="著者"><meta itemprop='name' content='著者'/></span></span> 中略 </span>hentryのauthorはもっと正確に指定するマークアップもあるけれども最低限は「vcard」と子要素の「fn」で必須項目と捉えられる。旧テーマはMicrodataの構造化データも付いているので、itemscopeとitemtypeとitempropも併せて記載している。プロフィールへリンクを付ける場合<span class='post-author vcard'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><a href='プロフィールURL' class='value-title' title='著者' itemprop='url'></a><meta itemprop='name' content='著者'/></span> 中略 </span>リンクのurlのclassはhentryの必須項目ではなくて任意で使える。サイトに表示しない場合でも暗示的なマークアップは必要なくてa要素のhrefの値が取られる。ブログの投稿ガジェットで著者やリンク付きの著者を表示するソースコードも中身は同じで、hentryのauthorの最低限のマークアップとMicrodataのauthorのPerson（著者の人物）のマークアップが自動的に行われる。テンプレートにupdatedを追加する方法デフォルトで更新日を表示できないからhentryのupdatedはHTML編集で追加しなくてはならない。ブログの追加ページを除いて記事ページだけにMicroformatsのhAtomの構造化データを取り入れる場合にはupdatedのclassを振り分けて記載しなくてはならない。<b:if code='data:view.isPost'>更新日のソースコード</b:if>記事ページの振り分けの独自タグで更新日のソースコードを全体的に囲っておくと他の追加ページなどへのマークアップは除外される。更新日を表示する方法（updatedのclassが入ったソースコードを掲載している）を使うか、さもなければMicroformatsの暗示的なマークアップを行う。旧テーマの更新日はブログに表示しても公開日とデザインを揃え辛いので、hentryのために敢えて使うならば暗示的なマークアップに止める方がデザインを崩さなくて良いかも知れない。hentryのためのupdatedの暗示的なマークアップ記事の本文の後の公開日の次が記載し易い。書き換え前の公開日だけのソースコード<abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>書き換え後の公開日と更新日のソースコード<span class='published'><abbr class='value-title' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span><meta itemprop='datePublished' expr:content='timestampISO8601'/><span class='updated'><abbr class='value-title' expr:title='data:post.lastUpdatedISO8601'></abbr></span><meta itemprop='dateModified' expr:content='lastUpdatedISO8601'/>旧テーマはデスクトップとモバイルでテンプレートのソースコードが分かれていて全く同じマークアップが二ヵ所に置かれている。テーマでモバイルを設定している場合には両方ともカスタマイズしなくてはならない。更新日にMicroformatsの暗示的なマークアップを行うと検索エンジンなどの構造化データに読み込まれる値がtitle属性の詳細なデータとして年月日時分秒になるので、公開日も合わせてブログに表示する年月日などの簡略化された状態ではなくてtitle属性の値を同じように読み込む仕方に変更している。公開日にはもう一つの構造化データのMicrodataのための「itemprop='datePublished'」が付いているから更新日にもMicrodataの「itemprop='dateModified'」を追加しているけど、ただし元のままでは日時の値のフォーマットが合わなくてGoogleなどに認識されない状態だから公開日と更新日の両方ともMicroformatsと等しく、機械向けの詳細なデータをmetaタグで改めて指定し直している。Bloggerのシンプルなどの旧テーマのMicroformatsのhentryは著者：authorと更新日：updatedのそれぞれのclassが追加されれば検索エンジンに構造化データとしてきっちり読み込まれるからSEO対策に繋がると期待できる。四つの必須項目の他にもフィードのhfeedやコンテンツのentry-contentや公開日のpublishedやサイトアドレスのbookmarkやカテゴリーのtagの任意項目がデフォルトで記載されているので、MicroformatsのhAtomから全九種類の構造化データが入るようになる。因みにhfeedはhentryのルートで、その外側のhAtomなんだ。Googleには認識されなかったり、SEO効果は薄そうだ。他で機械向けに役立つかも知れないから嬉しい。Microformatsの構造化データがブログに実装されているかどうは構造化データテストツールでURLやコード（マークアップ）を送信した結果から確認できる。新テーマでのhentryのカスタマイズについてContempoとSohoとEmporioとNotableが対象になる。デフォルトで四つの必須項目のうち、entry-titleが必ず記載されるので、残りのhentryとauthorとupdatedの三つを追加するカスタマイズが求められる。テンプレートにhentryを追加する方法記事全体を覆っているHTMLタグのどれかにclassを付けてhentryを記載するだけだからとても簡単だけど、新テーマはトップやアーカイブなどのインデックスページと記事ページのデザインが大きく異なるし、ブログのデスクトップとモバイルのソースコードが一つになっているからMicroformatsの使い方によってマークアップを細かく変えなくてはならない。ContempoとNotableの記事ページで使う <article class='post-outer-container'> <b:class cond='data:view.isPost' name='hentry'/> 中略 </article>インデックスページのスニペットでも使う場合は当のarticleタグのclassに「hentry」を半角スペースで区切って追加するだけで良い。Sohoの記事ページで使う<div class='post-outer-container'> <b:class cond='data:view.isPost' name='hentry'/> 中略 </div>ソースコードの二ヵ所に<div class='post-outer-container'>中略<div>の同じマークアップがあるので、注意してBlogのtypeのwidget内の一つを変更する。defaultmarkupは後から対応するwidgetに置き換えられるからブログの実際のテンプレートには含まれない。インデックスページのスニペットでも使う場合は当のdivタグのclassに「hentry」を半角スペースで区切って追加するだけで良い。Emporioの記事ページで使う<div class='slide'> <b:class cond='data:view.isPost' name='hentry'/> 中略 </div>ソースコードの四ヵ所に<div class='slide'>中略<div>の同じマークアップがあるので、注意してBlogのtypeのwidget内の一つの直後を変更する。FeaturedPostのtypeのdefaultmarkupとwidgetの二つは注目の投稿で、Blogのtypeのdefaultmarkupは後からwidge内tに置き換えられるからブログの実際のテンプレートには含まれない。インデックスページのスニペットでも使う場合は当のdivタグのclassに「hentry」を半角スペースで区切って追加するだけで良い。テンプレートにauthorを追加する方法hentryのauthorにはvcard（Microformatsの人物用のhCardのマークアップ）のclassを追加しなくてはならない。ブログの投稿ガジェットから著者名を表示すると自動的にvcardが記載されるので、最も簡単な方法になる。ブログのデザインで著者を表示しない場合はMicroformatsの暗示的なマークアップを行わなくてはならない。著者を表示しない場合<span class='vcard'><span class='fn'><span class='value-title' title='著者'></span></span></span>Bloggerのデフォルトのマークアップだとvcardとfnを使ったhAtomを成立させる最低限のスタイルになっている。hentryのauthorは他にも色んなパターンがあるので、さらにカスタマイズしても良いと思う。リンク付きのプロフィールのマークアップ<span class='vcard'><span class='fn'><a href='プロフィールURL' class='value-title' title='著者'></a></span>何れもブログのテンプレートのどこに配置するかはラベル下：Blogのtypeのwidget内の<b:include name='footerBylines'/>や日付横：Blogのtypeのwidget内の<b:include name='super.headerByline'/>の直後などが挙げられる。ただしトップやアーカイブなどのインデックスページにも反映するので、記事／追加ページだけに振り分けるならば<b:if cond='data:view.isSingleItem'></b:if>か追加ページにはMicroformatsを使わずに記事ページだけならば<b:if cond='data:view.isPost'></b:if>で囲って記載しなくてはならない。著者を表示しながらカスタマイズする方法新テーマは著者のソースコードが一纏めの独自タグの<b:include name='super.headerByline'/>で出力されているために少なくとも個別に取り出さないとさらに編集できない。<b:includable id='postAuthor'> <span class='byline post-author vcard'> <span class='post-author-label'><data:byline.label/></span> <span class='fn'> <b:if cond='data:post.author.profileUrl'> <meta expr:content='data:post.author.profileUrl'/> <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'> <span><data:post.author.name/></span> </a> <b:else/> <span><data:post.author.name/></span> </b:if> </span> </span> </b:includable>参考：Auteur de l'article [postAuthor - GV2]※帯文字の部分がhentryのauthorに主に関与している。一つ目が「vcard」、二つ目が「fn」、三つ目がプロフィールのリンク、四つ目が著者名、五つ目と六つ目と七つ目は四つ目のaと二つ目と一つ目のspanの閉じタグだ。ブログの投稿ガジェットに著者を表示しない場合はソースコードの全体がテンプレートに出力されない。ブログと注目と人気の投稿ガジェットで共通の著者のソースコードが使われるので、それぞれに必要なwidget内：BlogとFeaturedPostとPopularPostsに追加するとカスタマイズが可能になる。仕組みとしては一纏めの独自タグの<b:include name='super.headerByline'/>が著者のソースコードのidを呼び込むようになっている。だから著者のソースコードのidを取り出して編集するとデフォルトのデザインが変更されてブログに反映する。どこに配置するかはwidget-settingsか他のincludableタグの内側でなければどこでも大丈夫だ。Bloggerの独自タグのincludableはソースコードを定義付けるために使われる。テンプレートへ出力するのはincludableのidをnameで呼び込むincludeなので、HTML編集でのincludableのマークアップの場所はブログのデザインに全く影響しない。著者のソースコードを取り出すと表示する設定でもMicroformatsのためのclass属性をカスタマイズできるようになる。Googleなどはvcardとfnだけで、hAtomの必須項目として認識するけど、正確にはauthorのclassも入れて「class='author vcard'」にしたり、SEO対策においては最低限よりも詳細なデータへ編集するともっと効果的だろう。テンプレートにupdatedを追加する方法デフォルトで更新日を表示できないからhentryのupdatedはHTML編集で追加しなくてはならない。更新日を表示する方法（updatedのclassが入ったソースコードを掲載している）を使うか、さもなければMicroformatsの暗示的なマークアップを行う。hentryのためのupdatedの暗示的なマークアップ配置する場所は著者の暗示的なマークアップと同様に記事ページならばラベル下：Blogのtypeのwidget内の<b:include name='footerBylines'/>や日付横：Blogのtypeのwidget内の<b:include name='super.headerByline'/>の直後などが挙げられる。するとやはり同様にトップやアーカイブなどのインデックスページにも反映するので、記事／追加ページだけに振り分けるならば<b:if cond='data:view.isSingleItem'></b:if>か追加ページにMicroformatsを使わずに記事ページだけならば<b:if cond='data:view.isPost'></b:if>で囲っておかなくてはならないだろう。追加するソースコード<span class='updated'><time class='value-title' expr:datetime='data:post.lastUpdated.iso8601' expr:title='data:post.lastUpdated.iso8601'></time></span>Microformatsの暗示的なマークアップを行うと構造化データにはtitle属性の値／年月日時分秒の詳細なデータが読み込まれる。すると公開日のデフォルトの値はサイトに表示する場合に年月日などの簡略化され状態だからフォーマットが合わなくなってしまう。動作上は支障がないにせよ、二つの値のフォーマットを合わせるようにカスタマイズするためには著者と同じように一纏めの独自タグから公開日のソースコードを取り出さなくてはならない。<b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <meta expr:content='data:post.url.canonical'/> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a> </b:if> </span> </b:includable>参考：Horodatage de l'article [postTimestamp - GV2]※帯文字の部分がhentryのpublishedに主に関与している。class属性にpublishedが指定されている。
※aタグの「rel='bookmark'」はhentryの任意項目のbookmarkで、ページのパーマリンクを示している。配置する場所も著者のソースコードと同じようにブログや注目や人気の投稿ガジェット：BlogやFeaturedPostやPopularPostsのtypeのwidget内のwidgetsettingsと他のincludableタグの外側ならばどこでも大丈夫だ。公開日の値を非表示の更新日と揃える場合デフォルトのリンクタグのaと日時タグのtimeを変更する。<a class='timestamp-link published' expr:href='data:post.url' rel='bookmark' title='permanent link'> <time class='value-title' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a>それぞれのclass属性を書き換えるだけだ。公開日の値がサイトに表示される簡略化された状態ではなくてtimeのtitle属性の詳細なデータになる。非表示の更新日とフォーマットを年月日時分秒と同じに揃えられる。更新日を表示する場合でもvalue-titleのclassとtitle属性を組み合わせて記載すると構造化データに振り向けられる。BloggerのContempoなどの新テーマのMicroformatsのhentryは入稿：hentryと著者：authorと更新日：updatedのそれぞれのclassが追加されれば検索エンジンに構造化データとしてきっちり読み込まれるからSEO対策に繋がると期待できる。四つの必須項目の他にもフィードのhfeedやコンテンツのentry-contentや公開日のpublishedやサイトアドレスのbookmarkやカテゴリーのtagの任意項目がデフォルトで記載されているので、MicroformatsのhAtomから全九種類の構造化データが入るようになる。因みにhfeedはhentryのルートで、その外側のhAtomなんだ。Googleには認識されなかったり、SEO効果は薄そうだ。他で機械向けに役立つかも知れないから嬉しい。Microformatsの構造化データがブログに実装されているかどうは構造化データテストツールでURLやコード（マークアップ）を送信した結果から確認できる。MicroformatsのhAtomの構造化データのSEO効果些細な日常でBloggerの新テーマのContempoを使っていて新しく、MicroformatsのhAtomのhentryを開放した途端にGoogle検索での一日の表示回数が二倍以上に膨れ上がった。検索エンジンからのアクセスに直結するクリック数が増え易くなるから表示回数の上昇は本当に有り難いと感じる。Google検索でのサイト評価が上がる要因は他にも考えられるし、断定できないにせよ、MicroformatsのhAtomのhentryのSEO効果は非常に高いと推測されずにいない。様々なキーワードの検索結果で良く見かけるWordPressやはてなブログでは普通に付いているんだ。SEO対策に強いそうしたプラットホームのテンプレートに近付けられればたぶんBloggerでも検索エンジンからのアクセスアップは等しく捗るかも知れない。マークアップを間違えてエラーが一つでも出るとSEO効果は下がらずにいないので、構造化データテストツールで確認するのを怠ってはならないし、適切に使うのが何よりも大事だ。関連：Imaginary theme｜Bloggerの日本語テーマ／テンプレートの提供.red-font{color:red}

コメント