AMP 用 schema.org をワードプレスで設定する方法

AMP(Accelerated Mobile Pages) には schema.org を JSON-LD で設定することが必須となります。今回はワードプレスで設定する場合の設定例と具体的な指定方法をまとめます。

今のところ完全に自動化出来るコードは作れていません。コピペでそのまま使えるわけではありませんのでご注意ください。

amp-schema-org

AMP についての詳しい説明、導入方法等については下記ページをご覧ください。

参考:AMPをワードプレスにプラグイン無しで設定する方法

schema.org

schema.org とは検索エンジン(ここでは Google のクローラ)がページに書いてある情報正しく取得するために、ページ作成者側が記述するデータです。

schema.org 自体はブログやサイトを運営する場合必須というわけではありませんが、AMP に対応する場合は必要な項目です。schema.org には設定の仕方自体数種類あるのですが、AMP では JSON-LD という記述方法で設定しなくてはならないようです。

JSON-LD には必須要素、推奨要素と色々あるのですが、必須要素中心の記述となります。一部自動化ができていない項目がありますので、コードが完成次第、追記・修正していこうと思います。

参考:Enabling Rich Snippets for Articles

また、schema.org が上手く記述できているかの確認は Google が下記のツールを提供してくれています。

参考:Structured Data Testing Tool Structured Data Testing Tool

JSON-LD は AMP では head 内で読み込まなくてはいけません。body 下などの記述ではエラーが出ます。head.php 等に以下を記述します。

JSON-LD

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "BlogPosting", //NewsArticle もしくは BlogPosting
    "headline": "<?php the_title(); ?> ", //記事タイトル
    "image": {
        "@type": "ImageObject",
        "url": "<?php echo $ampimg; ?>", //アイキャッチ画像の URL
        "height": 430,
        "width": 770 //696px以上の画像
    },
    "datePublished": "<?php echo get_the_date('c'); ?>", //記事投稿時間
    "dateModified": "<?php echo get_the_modified_date('c'); ?>", //記事更新時間
    "author": {
        "@type": "Person",
        "name": "zz" //ライター名
    },
    "publisher": {
        "@type": "Organization",
        "name": "<?php bloginfo('name'); ?>", //サイト名
        "logo": {
            "@type": "ImageObject",
            "url": "https://example/logo.png", //ロゴ画像の URL
            "width": 67, //ロゴ画像横幅 600px以下
            "height": 60 //ロゴ画像縦幅 60px以下
        }
    },
<?php
//記事要約の取得
if(have_posts()): while(have_posts()): the_post();
    $ampdesc = mb_substr(get_the_excerpt(), 0, 100);
endwhile; endif;
?>
    "description": "<?php echo $ampdesc; ?>" //記事要約
}
</script>

以下解説。

項目
@contexthttp://schema.org を指定。固定値です。
@typeNewsArticle もしくは BlogPosting を指定。他のタイプで AMP インデックスされるかどうかの確認は出来ておりません。
headline記事タイトルを指定。<?php the_title(); ?> で取得することが出来ます。
image
@typeImageObject 固定値。以下アイキャッチ画像を指定します。
urlアイキャッチ画像の URL を指定。
サイズに下限があり、まだ自動化取得コードが出来ておりません・・・
heightアイキャッチ画像の高さを指定。px 値を入れますが数字のみ入れるようにします。
widthアイキャッチ画像の横幅を指定。696px以上という指定があります。それよりも小さい画像は AMP の場合アイキャッチとして使えません。
datePublished記事公開日を指定。ISO 8601 フォーマット(2015-12-18T00:00:32+00:00 のような形式)で書く必要があるようです。
WordPress で取得する場合は、<?php echo get_the_date('c'); ?> で取得可能です。引数を c とすることで指定フォーマットで出力してくれます。
dateModified記事更新日を指定。上記の公開日と同じような形で取得可能です。<?php echo get_the_modified_date('c'); ?> で出力されます。
author
@typePerson 固定値。以下、ライター情報を指定します
nameライター名を指定。複数いる場合もあると思うので自動化コード作成中です。
publisher
@typeOrganization 固定値。以下サイト情報を指定します。
nameサイト名を指定。<?php bloginfo('name'); ?> で取得可能です。
logo
@typeImageObject 固定値。以下ロゴ画像の詳細を記述します。必須項目となるのでロゴ画像を作っておきましょう。サイズ指定があるのでそのサイズに収まるように作ります。
urlロゴ画像の画像 URL を指定。
widthロゴ画像の横幅を指定。600px以下でなくてはいけません。
heightロゴ画像の高さを指定。60px以下でなくてはいけません。
description記事要約を指定。上記コードで100文字分取得しています。description 自体は必須項目ではないようですが一応入れておきます。
Top