前回、「構造化データ(schema.org)はJSON-LDで記述しよう。」ということで、【完全解説】構造化データ(schema.org)はJSON-LDで書こう！という記事を書きました。
今回はその応用編として、WordPressの記事ページで構造化データをJSON-LDで書く方法をご紹介します。
先に言ってしまうと、下のコードをWordPressに導入しているテーマ内のfunctions.phpに追記するだけで構造化データのマークアップは終わりです！
（注：コラムなどの記事を書いてる人が導入する場合のテンプレートです。）
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// JSON-LD add_action('wp_head','insert_json_ld'); function insert_json_ld (){ if (is_single()) { if (have_posts()) : while (have_posts()) : the_post(); $context = 'http://schema.org'; $type = 'Article'; $name = get_the_title(); $authorType = 'Person'; $authorName = get_the_author(); $dataPublished = get_the_date('Y-n-j'); $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); $imageurl = $image[0]; $category_info = get_the_category(); $articleSection = $category_info[0]->name; $articleBody = get_the_content(); $url = get_permalink(); $publisherType = 'Organization'; $publisherName = get_bloginfo('name'); $json= " \"@context\" : \"{$context}\", \"@type\" : \"{$type}\", \"name\" : \"{$name}\", \"author\" : { \"@type\" : \"{$authorType}\", \"name\" : \"{$authorName}\" }, \"datePublished\" : \"{$dataPublished}\", \"image\" : \"{$imageurl}\", \"articleSection\" : \"{$articleSection}\", \"url\" : \"{$url}\", \"publisher\" : { \"@type\" : \"{$publisherType}\", \"name\" : \"{$publisherName}\" } "; echo '<script type="application/ld+json">{'.$json.'}</script>'; endwhile; endif; rewind_posts(); } } |
これだけです。
後で説明しますが、それぞれのプロパティなどを追加・削除したい場合は編集する必要があります。
それでは、上記のJSON-LDのコードを見てみましょう。
１．WordPressへのJSON-LDのコード追加
ではさっそくWordPressのテーマを編集しましょう。
wp-content/themes/テーマ名の配下にあるfunctions.phpを開いてください。
テーマの編集はWordPressの管理画面からもできるので、管理画面から行う場合は外観>テーマ編集を選択し、functions.phpを開いてください。
functions.phpの一番下に先ほどのコードを追加しましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
// JSON-LD add_action('wp_head','insert_json_ld'); function insert_json_ld (){ if (is_single()) { if (have_posts()) : while (have_posts()) : the_post(); $context = 'http://schema.org'; $type = 'Article'; $name = get_the_title(); $authorType = 'Person'; $authorName = get_the_author(); $dataPublished = get_the_date('Y-n-j'); $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); $imageurl = $image[0]; $category_info = get_the_category(); $articleSection = $category_info[0]->name; $articleBody = get_the_content(); $url = get_permalink(); $publisherType = 'Organization'; $publisherName = get_bloginfo('name'); $json= " \"@context\" : \"{$context}\", \"@type\" : \"{$type}\", \"name\" : \"{$name}\", \"author\" : { \"@type\" : \"{$authorType}\", \"name\" : \"{$authorName}\" }, \"datePublished\" : \"{$dataPublished}\", \"image\" : \"{$imageurl}\", \"articleSection\" : \"{$articleSection}\", \"url\" : \"{$url}\", \"publisher\" : { \"@type\" : \"{$publisherType}\", \"name\" : \"{$publisherName}\" } "; echo '<script type="application/ld+json">{'.$json.'}</script>'; endwhile; endif; rewind_posts(); } } |
できましたか？
ここで、ローカルなどでfunctions.phpを編集している場合はアップロードして、WordPressの記事ページのソースコードを見てみましょう。
<head>内にJSON-LDでマークアップされたコードが追加されたのが確認できましたか？
Adlibのこの記事だと下の様に記述されています。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="application/ld+json">{ "@context" : "http://schema.org", "@type" : "Article", "name" : "【コピペでできる！】WordPressにschema.org(JSON-LD)を実装する方法", "author" : { "@type" : "Person", "name" : "takahiro" }, "datePublished" : "2014-12-19", "image" : "http://ad-library.jp/wp-content/uploads/2014/12/wp-json-ld_eye1.jpg", "articleSection" : "SEO", "url" : "http://ad-library.jp/?p=139", "publisher" : { "@type" : "Organization", "name" : "Adlib" } }</script> |
前回のブログを見ていただいた方は、なんとなくかかれている内容が分かると思います。
今回のコードは記事ページのみにマークアップされるので、そこだけ気を付けてください。
２．JSON-LDでの記述内容
今回はコピー＆ペーストで簡単に使えるように汎用的な記述内容になっています。
まず、前半の部分
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
add_action('wp_head','insert_json_ld'); function insert_json_ld (){ if (is_single()) { if (have_posts()) : while (have_posts()) : the_post(); $context = 'http://schema.org'; $type = 'Article'; $name = get_the_title(); $authorType = 'Person'; $authorName = get_the_author(); $dataPublished = get_the_date('Y-n-j'); $thumbnail_id = get_post_thumbnail_id($post->ID); $image = wp_get_attachment_image_src( $thumbnail_id, 'full' ); $imageurl = $image[0]; $category_info = get_the_category(); $articleSection = $category_info[0]->name; $articleBody = get_the_content(); $url = get_permalink(); $publisherType = 'Organization'; $publisherName = get_bloginfo('name'); |
WordPressのテーマなどを編集したことがある人はなんとなく分かると思います。
もし記事ページであれば、insert_json_ld関数のコードを実行し挿入しなさいという内容ですね。
後にJSON-LDの宣言で使用する文字などを変数に格納しています。ここについては説明を省略させてもらいますね。
本題は下記のJSON-LDの記述です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
$json= " \"@context\" : \"{$context}\", \"@type\" : \"{$type}\", \"name\" : \"{$name}\", \"author\" : { \"@type\" : \"{$authorType}\", \"name\" : \"{$authorName}\" }, \"datePublished\" : \"{$dataPublished}\", \"image\" : \"{$imageurl}\", \"articleSection\" : \"{$articleSection}\", \"url\" : \"{$url}\", \"publisher\" : { \"@type\" : \"{$publisherType}\", \"name\" : \"{$publisherName}\" } "; echo '<script type="application/ld+json">{'.$json.'}</script>'; |
それぞれ個別に見て行きましょう。
|
|
\"@context\" : \"{$context}\", \"@type\" : \"{$type}\", |
これは前回の記事で説明しましたね。
「@context」にはschema.orgを使用するために、「http://schema.org」と記述します。「http://schema.orgの定義に従って記述します。」という宣言をここでしてるんでしたね。
「@type」には今回は記事全般である「Article」を宣言しています。
より詳細な分類としてBlogPosting(ブログ投稿)、NewsArticle(ニュース記事)、ScholarlyArticle(学術的な記事)、TechArticle(技術的な記事)などの宣言も可能です。それぞれのリンク先のschema.org公式ページを確認してみてください。
自分のブログにあった分類にカスタマイズしてくださいね。
nameは記事のタイトルを記載しています。
|
|
\"author\" : { \"@type\" : \"{$authorType}\", \"name\" : \"{$authorName}\" }, |
authorは記事の著者情報です。さっそく前回説明したEmbedding（エンベッディング）での記述が出てきましたね。
今回はauthorの@typeは「Person」にしていますが、企業として記事を書く場合は「Organization」での宣言も可能です。
コラムページの内容によって使い分けてください。
|
|
\"datePublished\" : \"{$dataPublished}\", |
datePublishedは記事が公開された日付です。
|
|
\"image\" : \"{$imageurl}\", |
これは記事の画像ですね。普通はアイキャッチを設定していると思うので、今回のコードではアイキャッチ画像のURLを書いています。
|
|
\"articleSection\" : \"{$articleSection}\", |
articleSectionではどのよなカテゴリにこの記事が属しているのかを宣言します。なので、カテゴリ名を入れています。
また、schema.org公式ページで、articleSectionでは複数のセクションを持ってもいいと言われています。
この記事のURLになりますね。
|
|
\"publisher\" : { \"@type\" : \"{$publisherType}\", \"name\" : \"{$publisherName}\" } |
最後に、どこの団体がこの記事を発行しているかですね。ここは「Organization」で宣言することができます。
今回はブログの名前を取ってきています。会社概要などをここで宣言してもいいですね。
プロパティなどは「Organization」 のページで確認してください。
ここまで今回のJSON-LDのテンプレートの内容を説明してきました。今回は使っていない「Article」のプロパティなどもあるので公式ページを確認の上、適宜導入してみてくださいね。
３．JSON-LD記述テスト方法
JSON-LDのコードを導入したら、正しく記述されているか必ず確認しましょう。
今回はWordPressへ導入しているため、テンプレートのコードからはテストを行うことができません。
サーバにアップロードした後に、記事ページのソースコードを確認しましょう。
確認方法は前回と一緒です。
上記の３つの確認方法がありましたね。
今回のコードもテストしました。
問題なく構造化データのマークアップが行われていることが確認できましたね。
４．WordPressプラグインでschema.orgを記述する
今回最初に記述していたコードは記事用のテンプレートでした。
記事ごとに固有の構造化データをマークアップしたい場合や、記事以外の商品などのページがある場合にはテンプレートのコードは不向きです。
ちょっと話はそれてしまいますが、プラグインで記事ごとに構造化データがマークアップできるようなので紹介します。
「All In One Schema.org Rich Snippets」です。
プラグインをインストールし有効化することで、投稿画面で下のような画面が表示されます。
「Item Review」「Event」「People」「Product」「Recipe」「Software Application」「Video」「Article」からプルダウンで選択し、それぞれの詳細を記入することで、schema.orgが実装されます。
毎回、これを書くのはめんどくさそうですね。ソースコードに直接書く方が簡単だと思います。
どんな感じにWordPressを使用しているかにもよると思うので、参考までに。
５．まとめ
今回の内容はいかがだったでしょうか？意外と簡単にWordPressにschema.orgを実装できたのではないかと思います。
コピペでできるので、WordPressでブログを構築している方は是非導入してみてください。
それにしても、ホームページ制作はやらないといけないことの範囲がどんどん広がってますね。
勉強してないと取り残されそう。。。
