Liquid Snippets by ALSEL
🌐 SEO/構造化データ初級

ページのOGP・Twitterカードメタタグ

ページタイトル、説明、画像、URL などから Open Graph Protocol と Twitter Card のメタタグを自動生成する。商品ページでは価格情報も追加される。

用途
すべてのページテンプレートの <head> 内に配置し、SNS シェア時の表示内容(タイトル、説明、サムネイル)を統一。商品ページでは価格も OGP に含める。
設置場所
theme.liquid または layout/theme.liquid の <head> セクション内、既存のメタタグの直後に `{% render 'meta-tags' %}` で呼び出す。product.liquid や article.liquid では `page_image` と `product` 変数が自動で渡される。
注意点
og:image は http:// で始まるため、image_url フィルターで生成される Shopify CDN URL を活用している。Twitter アカウントのハンドル抽出は settings.social_twitter_link に 「https://twitter.com/@username」形式で入力されていることが前提。商品ページの og:price:currency は shop.currency ではなく cart.currency.iso_code を参照するため、複数通貨を扱うストアではカート内容に応じて値が変わる。password ページではセキュリティ上 og:url を request.origin にリセットしている。
タグ:meta-tagogptwitter-cardseosocial-sharing

コード

39 行 / liquid
{%- liquid
  assign og_title = page_title | default: shop.name
  assign og_url = canonical_url | default: request.origin
  assign og_type = 'website'
  assign og_description = page_description | default: shop.description | default: shop.name

  if request.page_type == 'product'
    assign og_type = 'product'
  elsif request.page_type == 'article'
    assign og_type = 'article'
  elsif request.page_type == 'password'
    assign og_url = request.origin
  endif
%}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title | escape }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description | escape }}">

{%- if page_image -%}
  <meta property="og:image" content="http:{{ page_image | image_url }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{%- endif -%}

{%- if request.page_type == 'product' -%}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ cart.currency.iso_code }}">
{%- endif -%}

{%- if settings.social_twitter_link != blank -%}
  <meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">
{%- endif -%}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title | escape }}">
<meta name="twitter:description" content="{{ og_description | escape }}">

出典・ライセンス

License:
MIT

このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。

関連項目

🌐 SEO/構造化データ初級

サイト検索のWebSite構造化データ

ストアの検索機能を schema.org の WebSite / SearchAction 型として JSON-LD で埋め込む。Google 検索ボックス機能をサポートし、検索結果ページのURL形式を指定する。

📁 shopify-snippets·MIT·17
🌐 SEO/構造化データ初級

ストア情報のOrganization構造化データ

ストア全体の基本情報(URL、ロゴ、SNS リンク)を schema.org の Organization 型 JSON-LD として埋め込む。Google 検索結果やナレッジパネルにストア情報を表示させるための構造化データ。

📁 shopify-snippets·MIT·22
🌐 SEO/構造化データ中級

Twitter Card メタタグ

商品ページ・ブログ記事・その他ページに対応した Twitter Card メタタグを <head> に出力するスニペット。ページタイプごとに card 型を切り替え、価格・在庫・ブランドなどを表示。

📁 shopify-snippets·MIT·37
🌐 SEO/構造化データ中級

OGメタタグ(商品・記事・ページ別)

商品ページ、ブログ記事、その他ページの種類に応じて、Facebook / Twitter などの SNS で正しく共有されるための OG メタタグを自動生成する。商品は画像・価格・在庫、記事はアイキャッチ画像、その他ページはロゴを出し分ける。

📁 shopify-snippets·MIT·40
🌐 SEO/構造化データ中級

Organization・WebSite・Product・Article構造化データ

ストア全体と個別ページ(商品・記事)の構造化データを schema.org 形式の JSON-LD で出力するスニペット。Organization タイプでショップ情報とソーシャルリンク、WebSite タイプでサイト検索、Product タイプで商品情報(価格・在庫・SKU・GS1 バーコード)、Article タイプでブログ記事メタデータを Google 検索のリッチリザルト表示に対応させる。

📁 ks-bootshop·MIT·126
🌐 SEO/構造化データ中級

商品ページのProduct構造化データ

商品詳細ページに schema.org の Product 型 JSON-LD を埋め込み、Google 検索のリッチリザルト(価格・在庫・バリアント)に対応させる。SKU・バーコード(GTIN12/13/14)・ブランド・説明文も含め、検索結果での表示品質を高める。

📁 shopify-snippets·MIT·133