【Shopify】ブログ記事の構造化データマークアップの JSON-LD にメタフィールドで項目を追加
こんにちは。Gaji-Labo 横田です。前回 Shopify のメタフィールド（Metafields）を使って任意の情報を表示させる方法を紹介しました。
今回は Shopify のブログ記事の構造化データマークアップの JSON-LD に、このメタフィールドで項目を追加してみました。
Shopify のブログ記事の構造化データに項目を追加したい
構造化データマークアップとは、 Google 検索でリッチリザルトとして表示されるデータ形式のことです。（詳細は Google 検索セントラル > 構造化データの使用を参照ください）
Debut テーマ使用の場合、Shopify のブログ記事の構造化データは templates/article.liquid にデフォルトで記述されています。
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"articleBody": {{ article.content | strip_html | json }},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": {{ shop.url | append: page.url | json }}
},
"headline": {{ article.title | json }},
{% if article.excerpt != blank %}
"description": {{ article.excerpt | strip_html | json }},
{% endif %}
{% if article.image %}
{% assign image_size = article.image.width | append: 'x' %}
"image": [
{{ article | img_url: image_size | prepend: "https:" | json }}
],
{% endif %}
"datePublished": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
"dateCreated": {{ article.created_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
"author": {
"@type": "Person",
"name": {{ article.author | json }}
},
"publisher": {
"@type": "Organization",
{% if page_image %}
{% assign image_size = page_image.width | append: 'x' %}
"logo": {
"@type": "ImageObject",
"height": {{ page_image.height | json }},
"url": {{ page_image | img_url: image_size | prepend: "https:" | json }},
"width": {{ page_image.width | json }}
},
{% endif %}
"name": {{ shop.name | json }}
}
}
</script>ここの author プロパティに、 jobTitle description sameAs image プロパティを追加したいです。
メタフィールドの定義を追加する
前回の記事のとおり、設定からメタフィールドの定義を追加します。今回はブログ記事の著者ページも同時に作りたいので、ページフィールドに定義します。
コンテンツタイプは それぞれ、jobTitle : 単一行のテキスト、description : 複数行のテキスト、sameAs : URL（リスト）、image : ファイルを選択。
定義したメタフィールドを利用する
ページを新規作成・保存すると、定義したメタフィールドセクションが表示されるので、任意のコンテンツを設定します。
templates/article.liquid に変数を記載する
templates/article.liquid の JSON 部分に「ネームスペースとキー」の定義を出力させます。sameAs プロパティは任意の項目にしたいので、項目が空でなかった場合のみ表示するよう if 文で条件分岐。
"author": {
"@type": "Person",
"jobTitle": {{ page.metafields.custom.author_jobTitle | json }},
"description": {{ page.metafields.custom.author_description | strip_html | json}},
{% if page.metafields.custom.author_sameAs != blank %}
"sameAs": {{ page.metafields.custom.author_sameAs | prepend: "https:" | json }},
{% endif %}
"image":{{ page.metafields.custom.author_image | img_url: image_size | prepend: "https:" | json }},
"name": {{ article.author | json }}
},終わりに
Shopify のメタフィールド機能を使って、構造化データマークアップの JSON に任意のプロパティを追加することができました。
追加した構造化データの検証には、リッチリザルトテスト や Google Chrome の拡張機能 JSON-LD Tester が便利です。
