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

Twitter Card メタタグ

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

用途
商品やブログ記事を Twitter でシェアされたときに、リンクプレビューとして画像・説明文・価格情報が表示されるようにする。
設置場所
snippets/metadata-twitter.liquid に配置し、theme.liquid の <head> 内で `{% render 'metadata-twitter' %}` で呼び出す。
注意点
Twitter ハンドルを @twitter_handler から実際のアカウント名に変更しておく。ロゴ画像(logo-square.png)は正方形である必要があり、別途テーマアセットとして登録する。ブログ記事の画像抽出は HTML タグを文字列分割で探すため、article.content に複数の img タグがあると最初のものしか取得されない。確実に統制したい場合は article.image オブジェクトがあれば優先的に使う条件分岐を先頭に追加する。
タグ:twitter-cardmeta-tagseoproductarticlesocial-sharing

コード

37 行 / liquid
{%- comment -%}
    You have to change the Twitter handle line 6.
    You have to change the logo asset on line 35. It must be a square picture.
{%- endcomment -%}

<meta name="twitter:site" content="@twitter_handler" />

{% if template contains 'product' %}
    <meta name="twitter:card" content="product" />
    <meta name="twitter:title" content="{{ product.title | escape }}" />
    <meta name="twitter:description" content="{{ product.description | strip_html | strip_newlines | truncatewords: 60, '' | escape }}" />
    <meta name="twitter:image" content="https:{{ product.featured_image.src | product_img_url: 'large' }}" />
    <meta name="twitter:label1" content="Price" />
    <meta name="twitter:data1" content="{% if product.price_varies %}From {% endif %}{{ product.price | money_with_currency | strip_html }}" />
    {% if product.vendor == blank %}
        <meta name="twitter:label2" content="Availability" />
        <meta name="twitter:data2" content="{% if product.available %}In stock{% else %}Out of stock{% endif %}" />
    {% else %}
        <meta name="twitter:label2" content="Brand" />
        <meta name="twitter:data2" content="{{ product.vendor | escape }}" />
    {% endif %}
{% elsif template contains 'article' %}
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="{{ article.title | escape }}" />
    <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncatewords: 60, '' | escape }}" />
    {% assign img_tag = '<' | append: 'img' %}
    {% if article.content contains img_tag %}
        {% assign src = article.content | split: 'src="' %}
        {% assign src = src[1] | split: '"' | first | remove: 'https:' | remove: 'http:' %}
        {% if src %}
            <meta property="twitter:image" content="http:{{ src }}" />
        {% endif %}
    {% endif %}
{% else %}
    <meta name="twitter:image" content="{{ 'logo-square.png' | asset_url }}" />
{% endif %}

出典・ライセンス

License:
MIT

このコードは pgrimaud 著作の MIT ライセンスソースです。 原本の著作権は pgrimaud が保有します。日本語訳は 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/構造化データ初級

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

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

📁 ks-bootshop·MIT·39
🌐 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