サイト検索のWebSite構造化データ
ストアの検索機能を schema.org の WebSite / SearchAction 型として JSON-LD で埋め込む。Google 検索ボックス機能をサポートし、検索結果ページのURL形式を指定する。
コード
17 行 / liquid{%- comment -%}
Nothing to do, just : {% render 'json-ld-search' %}
{%- endcomment -%}
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "{{ shop.url }}",
"potentialAction": {
"@type": "SearchAction",
"target": "{{ shop.url }}/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
出典・ライセンス
- Repository:
- https://github.com/pgrimaud/shopify-snippets
- License:
- MIT
このコードは pgrimaud 著作の MIT ライセンスソースです。 原本の著作権は pgrimaud が保有します。日本語訳は ALSEL によるものです。
関連項目
ストア情報のOrganization構造化データ
ストア全体の基本情報（URL、ロゴ、SNS リンク）を schema.org の Organization 型 JSON-LD として埋め込む。Google 検索結果やナレッジパネルにストア情報を表示させるための構造化データ。
Twitter Card メタタグ
商品ページ・ブログ記事・その他ページに対応した Twitter Card メタタグを <head> に出力するスニペット。ページタイプごとに card 型を切り替え、価格・在庫・ブランドなどを表示。
ページのOGP・Twitterカードメタタグ
ページタイトル、説明、画像、URL などから Open Graph Protocol と Twitter Card のメタタグを自動生成する。商品ページでは価格情報も追加される。
OGメタタグ（商品・記事・ページ別）
商品ページ、ブログ記事、その他ページの種類に応じて、Facebook / Twitter などの SNS で正しく共有されるための OG メタタグを自動生成する。商品は画像・価格・在庫、記事はアイキャッチ画像、その他ページはロゴを出し分ける。
Organization・WebSite・Product・Article構造化データ
ストア全体と個別ページ（商品・記事）の構造化データを schema.org 形式の JSON-LD で出力するスニペット。Organization タイプでショップ情報とソーシャルリンク、WebSite タイプでサイト検索、Product タイプで商品情報（価格・在庫・SKU・GS1 バーコード）、Article タイプでブログ記事メタデータを Google 検索のリッチリザルト表示に対応させる。
商品ページのProduct構造化データ
商品詳細ページに schema.org の Product 型 JSON-LD を埋め込み、Google 検索のリッチリザルト（価格・在庫・バリアント）に対応させる。SKU・バーコード(GTIN12/13/14)・ブランド・説明文も含め、検索結果での表示品質を高める。