WordPress はじめてのmicrodataマークアップ実践#2

schema.org仕様でマークアップにmicrodataを用いて、ブログの記事のアウトラインに意味付けをします。

マークアップ属性

スキーマ(Schema.org) 入門編 第3回!ブログなどの「記事」のマークアップ方法いろいろとGoogleウェブマスターツールの「詳細な記事」機能に表示される記事を参考に以下の項目をテンプレートに追加しました。

  • name タイトル
  • image 画像
  • description 短い説明
  • datePublished 記事が発表された日
  • articleBody 記事の実際の本文

マークアップした記事を構造化データテストツールで確認し、属性の確認ができました。
article-schema.org

Bonesテンプレートをカスタマイズ

カスタマイズするテンプレートはformat.php、front-page.php、single.phpを使いました。

front-page.php、single.phpにはArticle(記事)を宣言するためにitemscope属性、itemtype属性を追加します。

descriptionとdatePublishedを追加

format.phpのarticleタグ内にitemprop=”description”とitemprop=”datePublished”を追加します。

nameとarticleBodyを追加

format.phpのh1タグにitemprop=”name”、sectionタグにitemprop=”articleBody”を追加します。

datePublishedで出力される時間を東京に合わせるため、functions.phpに設定しました。

imageの追加

imageの追加はWordPressにマイクロデータschema.orgのArticleを導入のサイトを参考に、記事内の画像を抽出する関数をそのまま利用させていただきました。
single.phpの<?php endif; ?>あとに以下を追加します。

本文入力部分

本文入力部分のマークアップについては記事ごとに毎回マークアップする必要があるので、まだ個々の記事に反映させていません。今後入力するタグを登録して設定していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Share・Feedly