WordPressでAMPに対応した記事向けJSON-LDを出力する方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

WordPressで投稿ごとにJSON-LDを出力するコードを書いたので紹介。

スポンサーリンク
レクタングル(大)広告

JSON-LDの書き方

サイト上の記事で、schema.org/NewsArticle形式で、AMP向けに情報を指定してやれば、検索結果に意図したように情報を表示することができます。

例えば、JSON-LDで表記したとすると以下のような感じになります。

このように格好とで、タイトルや、サムネイル.投稿時間、ロゴなどが反映されて、Googleの検索結果のAMP部分に以下のように出力されます。

Googleの検索結果に以下のように反映される

こういった、schema.orgについて詳しくは、以下を参照してださい。

WordPressの投稿ごとにJSON-LDを出力する

で、Wordpressの場合だと、投稿ごとにいちいちJSON-LDを書くわけにはいかないので、Wordpress側から取得できる情報で、構造化データを出力してやる必要があります。

以下では、その方法について説明します。

functions.phpに関数を貼り付ける

まずは、functions.phpに以下のコードをコピペで追記してください。

これは、投稿に割り当てられているアイキャッチ画像から、画像の幅と高さを取得する関数です。

JSON-LDでは、画像を指定する際は、幅と高さも指定する必要があるので、この関数を作成しました。

headタグ内にJSON-LD出力コードを貼り付ける

あとは、ヘッダーにある<head></head>内に、以下のコードを貼り付けます。

headタグは、大抵のテーマの場合は、header.phpにあるかと思います。

「アイキャッチが設定されていない時用の画像のURL」や「ロゴ画像のURL」は自前でアップロードして、画像の幅と高さも併せて指定してください。

imageのurlは、幅が696px以上ないと、警告が出ます。ですので、696px以上のアイキャッチを設定する必要があるようです。

logoのwidthは600px以下である必要があります。また、logoのheightは60px以下である必要があります。

descriptionに関しては、通常のテーマの場合、Wordpressの投稿情報からだけでは、記事の説明文は取得できないため、本文の抜粋で代用しています。

schema.org/NewsArticleについて詳しくは、以下を参照してください。

まとめ

こんな感じで、2回コピペするだけで、Wordpress投稿情報からJSON-LDを出力できるようになりました。

とりあえず、この書き方でGoogle Search ConsoleのAMP(Accelerated Mobile Pages)の構造化エラーも出なくなりました。

というわけで、「GoogleのAMP検索結果に意図通りの情報を表示したい」という場合は、JSON-LDを使った出力を試してみると良いかもしれません。