Sectionsからmetaデータを挿入したい。

日本語 ディスカッション Shopify テーマ
1

ページのmetaデータを動的に設定したいのですが、sections/test.liquidからheadタグ内にmetaデータを挿入すること可能でしょうか？

やりたいこととしては、メタオブジェクトで生成する詳細ページのog:imageを任意のフィールドを設定したいと思っています。

デフォルトではthemeディレクトリの下記のメタデータを表示し、ページ独自のメタデータを差し込みたい場合は、sectionからhead内にメタデータを差し込み上書きするようにしたいです。

  <title>
      {{ page_title }}
      {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%}
    </title>

    {% if page_description %}
      <meta name="description" content="{{ page_description | escape }}">
    {% endif %}

    {% render 'meta-tags' %}

    <link rel="canonical" href="{{ canonical_url }}">
    <link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
    {% render 'fonts.google' %}
    {{ content_for_header }}/ 
2

上記コードの場合ですと、「snippets/meta-tags.liquid」を開けば各メタタグ出力のコードが表示されます。

テーマによってコードが異なるかもしれませんが、Dawnの場合は以下のコードがog:imageの出力部分になります。

{%- 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 -%}

この部分を分岐すればいけると思います。

商品ページの場合だと、こんな感じの分岐になるかと。

{%- liquid
assign og_image = page_image
if template contains 'product'
 assign meta_og_image = product.metafields.xxxx.xxxx
 if meta_og_image != blank 
  assign og_image = meta_og_image
 endif
endif
-%}
{%- if og_image -%}
 <meta property="og:image" content="http:{{ og_image | image_url }}">
 <meta property="og:image:secure_url" content="https:{{ og_image | image_url }}">
 <meta property="og:image:width" content="{{ og_image.width }}">
 <meta property="og:image:height" content="{{ og_image.height }}">
{%- endif -%}
  • 一旦、従来の「page_image」を「og_image」として定義します
  • 商品ページで該当のメタフィールドの値がある場合はその値が「og_image」になります
  • メタフィールドのネームスペースとキーは編集してください
  • 元のコードの「page_image」を「og_image」に差し替えます

未検証ですので、エラーがあればご連絡ください。