🌐 SEO/構造化データ中級

OGメタタグ（商品・記事・ページ別）

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

用途

ストア URL を Facebook や LINE などの SNS にシェアしたときに、商品画像と価格、または記事のサムネイルが適切にプレビュー表示されるようにしたいとき。

設置場所

snippets/metadata-og.liquid に配置し、theme.liquid の <head> 内で `{% render 'metadata-og' %}` で呼び出す。product ページと article ページのテンプレートでは product / article オブジェクトが自動で渡される。

注意点

line 32・33 のロゴ画像「logo.png」はテーマアセット内に実在する名前に置き換える必須設定。商品ページでは compare_at_price ではなく price（売値）を出力しているため、セール表示が必要ならば og:price:amount を product.compare_at_price に変更。記事ページで og:image を抽出する際は article.content 内の最初の img タグを探すため、記事本文に画像がない場合は og:image が出力されないので、事前に記事公開時にアイキャッチ欄を記入するよう作成ルールを統一する。

タグ:og-metasocial-shareproductarticleseometa-tag

コード

40 行 / liquid

{%- comment -%}
    You have to change the logo asset on line 32 & 33.
{%- endcomment -%}

{%- if template contains 'product' -%}
    <meta property="og:type" content="product">
    <meta property="og:title" content="{{ product.title | strip_html | escape }}">
    <meta property="og:category" content="{{ product.type }}" />
    {%- for image in product.images limit:3 -%}
        <meta property="og:image" content="http:{{ image.src | product_img_url: 'master' }}">
        <meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: 'master' }}">
    {%- endfor -%}
    <meta property="og:price:amount" content="{{ product.price | money_without_currency | stip_html | escape | remove: ',' }}">
    <meta property="og:price:currency" content="{{ shop.currency }}">
    <meta property="og:availability" content="{%- if product.available -%}instock{%- else -%}oos{%- endif -%}" />
    <meta property="og:description" content="{{ product.description | strip_newlines | strip_html | truncate: 300 | escape }}">
{%- elsif template contains 'article' -%}
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ article.title | strip_html | 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="og:image" content="http:{{ src }}">
            <meta property="og:image:secure_url" content="https:{{ src }}">
        {%- endif -%}
    {%- endif -%}
{%- else -%}
    <meta property="og:type" content="website">
    <meta property="og:title" content="{{ page_title | escape }}">
    <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
    <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
{%- endif -%}
{%- if page_description and template != 'product' -%}
    <meta property="og:description" content="{{ page_description | escape }}">
{%- endif -%}
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">

出典・ライセンス

Source:: pgrimaud/shopify-snippets/metadata-og.liquid
Repository:: https://github.com/pgrimaud/shopify-snippets
License:: MIT

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

OGメタタグ（商品・記事・ページ別）

コード

出典・ライセンス

関連項目

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

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

Twitter Card メタタグ

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

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

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