WordPressの「投稿の編集」に直接「Microdata」を手打ちしてセマンティック構造化する方法をメモしました。
上の画像の下手な字で書いてあるように、投稿編集の記事内容を書く部分にMicrodataを入れます。
例えば自分や自分が紹介したい人のプロフィールや1記事だけレビューを出して検索エンジンに詳細を認識してほしいとき、Microdataを自在に挿入することが可能です。
今回は趣味で取り入れたやり方と、どの部分を検索エンジンに認知してほしいかメモしていきます。
「投稿の編集」に「Microdata」を入力できる条件みたいなこと
条件といいますか、エラーを出さない方法です。
ひとつめがテーマにitemtypeが入力されていないことです。
もしあなたがJSONを扱えて既存テーマのMicrodataを変更できる、あるいはPHPファイルを編集し変更可能であれば、この記事を読む必要はないでしょう。
あらかじめテーマ制作者が、itemtypeをWebSiteやBlogPosting等に設定していた場合、記事内へMicrodataを記述するとエラーを起こしやすいでしょう。私がそうだったように、あなたはエラーの解決方法もわからない以前に、どのタイプがテーマに記述されているか見当もつかないと思います。
そこでまずはあなたのWordPressを構造化データテストツール(別ウィンドウ表示)で診断します。
たいていWordPressのテーマは「hentry」あるいは「hatom」というデータタイプを利用しています。hentryとhatomの2種類であれば、記事内にデータタイプを自由に加えることができます。
※hentry（microfomats.org）：構造化エラーの対処はこちら
もし「Article」「BlogPosting」等のitemtypeが設定されていれば、例えば記事内に「itemtype=”Blog”」と記述してもGoogleが認識しないというエラーが発生します。
打ち込んだタグを消さないコード
もうひとつは打ち込んだタグを消さないようにすることです。
WordPressではデフォルトのタグを自動挿入するので、pタグ、brタグ、sectionタグなどが自動消去されます。さらにstyle属性、itemscope属性等の要素も同様に初期設定によって消されてしまいます。
構造化データ要素を記事内に盛り込むには、functions.phpファイルに消さないphpコードを入力する必要があります。
以下のコードは一例です。
//タグに直接cssやitempropを入れても消えない。brもpも消えないWP用のコード
//functions.phpの最下部に挿入(他のコードを消すリスク回避)
remove_filter( ‘the_content’, ‘wptexturize’ );
function override_mce_options( $init_array ) {
global $allowedposttags;
$init_array[‘valid_elements’] = ‘*[*]’;
$init_array[‘extended_valid_elements’] = ‘*[*]’;
$init_array[‘valid_children’] = ‘+a[‘ . implode( ‘|’, array_keys( $allowedposttags ) ) . ‘]’;
$init_array[‘indent’] = true;
$init_array[‘wpautop’] = false;
$init_array[‘force_p_newlines’] = false;
return $init_array;
}
add_filter( ‘tiny_mce_before_init’, ‘override_mce_options’ );
ただしタグを挿入しないと改行のない文字の羅列になるので注意が必要です。
またWordPressのバージョンを更新すると消えてしまうので、更新都度コードを入れる必要があります。
例）articleBodyの場合
ではタイトルの記事内容を「articleBody」に構造化してみましょう。
itemprop「articleBody」を使用するにはitemtype「Article」を設定します。
タグのイメージはこんな感じです。
↓↓↓↓↓↓↓
【解説】
まずはMicrodataの宣言「 itemscope=”itemscope”」
同時に「itemtype=”http://schema.org/Article”」を入れます。
記事の母体を強調するなら「 itemprop=”articleBody”」を入れ子にします。
記事を見出しごとにわかりやすく表示するサイトが多く、自身も見出しごとにパラグラフを分ける場合は「itemprop=”headline”」が必須になります。
必ずh1~6に入れる要素です。エラーが出た場合も画像のように入れます。（もちろん記事全体のタイトルに直接挿入することはできません。header.phpなどを編集します。）
パラグラフはｐタグ、説明の詳細を記述している場合は「itemprop=”description”」
警告で表示される「itemprop=”mainEntityOfPage”」はなくても構いませんが、設定する場合はitempropです。articleBodyの中でも記事のバックグランドあるいは主要部分にあたると私は考えています。
人物データ
人物の名前を細かく、さらに誕生日と出身地を入れるケースをご紹介します。
まずはじめにPersonを設定します。
「itemtype=”http://schema.org/Person”」ですね。
Personの入れ子に人物詳細を入れないとエラーが発生してしまいます。
また苗字と名前は「name」データで囲まないとエラーになります。
「itemprop=”name”」の入れ子に苗字の「itemprop=”familyName”」、そして名前の「 itemprop=”givenName”」を記載します。キャラメル文字であることも注意したいですね。
ちなみにタグはspanタグでも反応します。ただしmetaタグはWordPress初期設定では消えてしまうのでおすすめしません。metaタグになっているサイトもありますがspanやdivに置き換えましょう。
さて誕生日ですが、「Person」の入れ子にすることに注意しつつ、「itemprop=”birthDate”」を入れます。こちらもspanやdivでもいいです。
[訂正]
✕ <time datetime=”1909年6月19日” itemprop=”birthDate”>
〇 <time datetime=”1909-6-19″ itemprop=”birthDate”>
出身地はhomeLocationを使います。
構造化次第では「homeLocation」フィールドの値は必須です。と表示されるので、エラー対策のご参考にしてください。
画像のとおり
<span itemprop=”homeLocation” itemscope itemtype=”http://schema.org/Place”>
<span itemprop=”name” content=”Aomori”>青森県北津軽郡金木村大字金木字朝日山</span>
Placeを使用します。contentの中身は都道府県名だけで問題ないようです。もちろん細かく設定することも、国名だけでも認識してくれます。
必須のMicrodataを忘れずに入れる
Microdataを設定すると必ず出てくるエラーが著作情報です。
いわゆる3大エラー
「author」フィールドの値は必須です
「image」フィールドの値は必須です
「publisher」フィールドの値は必須です
詳しくは「「IMAGE」フィールドの値は必須です」の記事を参考にしてください。
HTMLの構造の基本は同じです。(metaタグをspan等に変更すればそのまま使えます)
構造化テスト結果
Article
Person
画像のようにエラーなく構造化を設定できます。
必須の三つの著作データはArticleの入れ子になるように記述してください。
レビューの場合
料理のレシピと本の書評などが対象になります。
Book要素はreviewがないので、Productを使用します。
見出しはヘッドラインではなくname要素を適用しています。
<div itemscope itemtype=”http://schema.org/Product”>
<h3 itemprop=”name”>斜陽</h3>
<section itemprop=”review” itemscope itemtype=”http://schema.org/Review”>
<h4 itemprop=”name”>太宰治の名作</h4>
<p>投稿者<span itemprop=”author”>田中太郎</span></p>
<div itemprop=”reviewRating” itemscope=”itemscope” itemtype=”http://schema.org/Rating”>
<span itemprop=”worstRating” content=”1″></span>
評価：<span itemprop=”ratingValue”>4</span>／
<span itemprop=”bestRating”>5</span>点
</div>
<p itemprop=”description”>切なさや哀愁漂う内容ですが、どことなく温かさも感じられるような・・・</p>
</section>
</div>
Productの入れ子にReviewとRatingを設定する必要があります。worstRatingとratingValue、bestRatingも必須なので省かないほうがいいでしょう。
