shimakyohsuke.com

タイトルだけやと何の話やねんですが、
schema.org と JSON-LD と WordPress の話です。

先日ふと以下をつぶやいてみたところ、

https://twitter.com/shima_x_o/status/628821795404001280

太鼓の人こと WordBench 京都のオカモトさん(@motchi0214)に拾われまして、いろいろとやりとりをしておりました。

話の発端は Google さんのリッチスニペットのマークアップ方法についての以下ページを見ていて、
schema.org の Article タイプを記述するなら、
image のプロパティをいれろ、且つ image プロパティは必須じゃよ。って書いてあるんすね。たぶん。(2015.8.17 時点)

Enabling Rich Snippets for Articles | Structured Data | Google Developers
https://developers.google.com/structured-data/rich-snippets/articles?hl=ja

で、このサイトはあまり画像を使わないのでどうしよう。って思ってつぶやいたんです。

でも Google さんの言ってることはまた変更されるかもしれないので、
ひとまずそのへんは置いといてオカモトさんから schema.org を JSON-LD で出力する WordPress のプラグインもあるよって
教えて貰ったのでその使用感などメモです。


JSON-LD とか schema.org って何?って方は以下記事をご覧いただければと思います。
とってもわかりやすいです。

【徹底解説】JSON-LDを使ったschema.orgの記述方法 | 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/definitive-guide-of-schema-org-using-jsonld/


素敵やん WordPress のプラグイン「Structured Data of JSON-LD」

Structured Data of JSON-LD(Version 2.1 を使用)

https://wordpress.org/plugins/ejls-easy-json-ld-setter/

オカモトさん作のプラグイン。

試した環境

出力結果

フロントページで出力される結果

1
2
3
4
5
6
7
8
9
10
11
12
<script type="application/ld+json">
{
"@context":"http:\/\/schema.org",
"@type":"WebSite",
"url":"http:\/\/wocker.dev",
"potentialAction":{
"@type":"SearchAction",
"target":"http:\/\/wocker.dev\/?s={search_term}",
"query-input":"required name=search_term"
}
}
</script>

最初からポストされてる「Hello world!」のシングルページで出力される結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script type="application/ld+json">
{
"@context":"http:\/\/schema.org",
"@graph":{
"@type":"Article",
"headline":"Hello world!",
"datePublished":"2015-07-22T23:03:01+00:00",
"image":null,
"url":"http:\/\/wocker.dev\/?p=1",
"articleBody":"Welcome to WordPress. This is your first post. Edit or delete it, then start blogging!",
"author":{
"@type":"Person",
"name":"admin"
},
"publisher":{
"@type":"Organization",
"name":"WordPress"
}
}
}
</script>

※出力結果は整形しています。

  • シングル・固定ページには Article が出力される。
  • json_encode されてる。
  • 投稿内容にアイキャッチ、もしくは記事内に画像があることを前提に作られているので、アイキャッチ・記事内に画像がない場合 "image":null になる。(今のところ対処法がないから意図的に)
  • articleBody には投稿時の内容がそのまま出力される。(HTML タグ等は除去されない。)
  • ここに準拠してるはず→Enabling Rich Snippets for Articles  | Structured Data  | Google Developers なので Structured Data Testing Tool  |  Google Developers で OK でるはず(アイキャッチもしくは記事内に画像が必要)
  • フロントページには WebSite と SearchAction(検索結果にサイト内検索だすやつ)が出力される。

schema.orgを使ってGoogleの検索結果にサイトリンク検索ボックスを表示させよう | 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/google-sitelinks-search-box/

余談

Version 2.0 の時にアイキャッチがない場合どうなるの?っていうことで、
記事内の画像のURLを取得するパッチをお送りしたら現状の Version 2.1 に反映されまして、
Contributors にいれていただきプラグインのバッチもらいましたwww

[Update]Structured Data of JSON-LDのVersion2.1リリースしました。
http://wp-kyoto.net/update-plugin-jsonld-embed-v-2-1/

WordPress › Profiles » shimakyohsuke
https://profiles.wordpress.org/shimakyohsuke/

あとは "image":null になるといまのところ Google さんにダメっていわれるので、
とりあえず、アイキャッチと記事内に画像がない場合は NoImage 的な画像を出力すればいいのかなーって言うてました。


他にもいろいろあった

ついでにプラグインのキーワードに「JSON-LD」を指定してそれっぽい以下のプラグインも見てみた。

JSON-LD for Article(Version 0.1 を使用)

https://ja.wordpress.org/plugins/json-ld-for-article/

出力結果

最初からポストされてる「Hello world!」のシングルページで出力される結果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"headline": "Hello world!",
"author": {
"@type": "Person",
"name": "admin"
},
"datePublished": "2015-7-22",
"articleSection": "Uncategorized",
"url": "http://wocker.dev/?p=1",
"image": null,
"publisher": {
"@type": "Organization",
"name": "WordPress"
}
}
</script>
  • Article が出力される。
  • アイキャッチがあることを前提に作られているので、アイキャッチがない場合「NOTICE」が出る
1
<b>Notice</b>: Undefined variable: thumbnailurl in <b>/var/www/wordpress/wp-content/plugins/json-ld-for-article/json-ld-article.php</b> on line <b>47</b>

ここでアイキャッチがないと、

1
2
3
if (has_post_thumbnail()) {
$thumbnailurl=wp_get_attachment_url(get_post_thumbnail_id());
}

ここで変数($thumbnailurl)になにもねぇよってなる。

1
2
3
4
5
6
7
8
9
$arr=array( '@context' => 'http://schema.org',
'@type' => 'Article',
'headline' => $articletitle,
'author' => $author,
'datePublished' => $articlepublished,
'articleSection' => $articlesection,
'url' => $articleurl,
'image' => $thumbnailurl,
'publisher' =>$pub);

Include Sitename in Search Results(Version 1.0 を使用)

https://ja.wordpress.org/plugins/include-sitename-in-search-results/

出力結果

フロントページで出力される結果

1
2
3
4
5
6
7
8
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "WordPress",
"url": "http://wocker.dev/"
}
</script>

ダッシュボードから alternateName を指定してフロントページで出力される結果

1
2
3
4
5
6
7
8
9
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"name": "WordPress",
"alternateName": "alternateNameが出力される",
"url": "http://wocker.dev/"
}
</script>
  • </body> 直前に出力してくれる。
  • WebSite のみ出力される。
  • alternateName はダッシュボードで入力できる。

https://ja.wordpress.org/plugins/sitelinks-search-box/

出力結果

1
2
3
4
5
6
7
8
9
10
11
12
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "WebSite",
"url": "http://wocker.dev/",
"potentialAction": {
"@type": "SearchAction",
"target": "http://wocker.dev/?s={search_term}",
"query-input": "required name=search_term"
}
}
</script>
  • </body> 直前に出力してくれる。
  • WebSite と SearchAction(検索結果にサイト内検索だすやつ)が出力される。

The Events Calendar(Version 3.11.2 を使用)

https://ja.wordpress.org/plugins/the-events-calendar/

ちょっと項目埋めるのが面倒なので、ちゃんと試してませんが、
http://schema.org/Event の項目は出力されているように思います。
このプラグイン良い感じかもしれないから今度使おう。


まとめ

以下の記事を参考にさせていただきますと、

\(^o^)/JSON-LDのリッチスニペットをGoogleがいよいよサポート開始 | 海外SEO情報ブログ
https://www.suzukikenichi.com/blog/google-now-supports-rich-snippets-using-json-ld/

JSON-LD で記述した schema.org の Google さんサポートはまだ限定的なようなので、
プラグインの対応もまちまちですが、WordPress サイトと相性の良いブログ記事(http://schema.org/Article)やイベント情報(http://schema.org/Event)はサポートされているようなので、WordPress サイトの場合さくっとプラグインを使用すればいいのかな。
個人的には Article と WebSite と SearchAction がいい感じに出力されて、調子良さそうなオカモトさんのプラグインを使って検索結果とかをマメに確認しようと思います。

Structured Data of JSON-LD
https://wordpress.org/plugins/ejls-easy-json-ld-setter/

以上、つぶやいてみたら Get Involved できたお話でした。


ちなみにこのブログは以下 4 つの schema.org のプロパティを JSON-LD で記述してます。

以下の記事の場合だとこんな感じです。
http://shimakyohsuke.com/2014/06/06/hello-world/

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<script type="application/ld+json">
[
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement":
[
{
"@type": "ListItem",
"position": 1,
"item":
{
"@id": "http://shimakyohsuke.com",
"name": "TOP"
}
},
{
"@type": "ListItem",
"position": 2,
"item":
{
"@id": "http://shimakyohsuke.com/2014/06/06/hello-world/",
"name": "shimakyohsuke.com(仮)オープン"
}
}
]
},
{
"@context": "http://schema.org",
"@graph": {
"@type": "BlogPosting",
"name": "shimakyohsuke.com(仮)オープン | shimakyohsuke.com",
"headline": "shimakyohsuke.com(仮)オープン | shimakyohsuke.com",
"datePublished": "Fri Jun 06 2014 00:00:00 GMT+0900",
"image": "http://shimakyohsuke.com/images/ogp.png",
"url": "http://shimakyohsuke.com/2014/06/06/hello-world/",
"articleBody": "middleman と heroku でサイト作ります。とりあえず 1$ git push heroku master できた。 追い追い、見た目やら中身を更新して、その都度やったことを記録していこうと思います。 "
}
},
{
"@context" : "http://schema.org",
"@type" : "Person",
"name" : "shima kyohsuke",
"url" : "http://shimakyohsuke.com",
"email": "mailto:hello@shimakyohsuke.com",
"sameAs" : [
"https://twitter.com/shima_x_o",
"https://www.facebook.com/shimakyohsuke",
"https://www.flickr.com/photos/shimakyohsuke/",
"https://github.com/shimakyohsuke",
"https://instagram.com/shimakyohsuke/"
]
},
{
"@context" : "http://schema.org",
"@type": "WebSite",
"url": "http://shimakyohsuke.com",
"name": "shimakyohsuke.com",
"author": "shima kyohsuke"
}
]
</script>

いまだ、おっ!これはもしや!?っていう検索結果を見たことないです\(^o^)/