FROM CACHE - jp_header
このコミュニティはピアツーピアサポートに移行しました。Shopify サポートは今後、このコミュニティへのサービスを提供いたしません。これからもぜひ、他のマーチャントやパートナーとつながり、サポートし合い、経験を共有してください。 当社の行動規範に違反する行動や削除を希望するコンテンツがありましたら、引き続きご報告ください

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

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

nomin
Shopify Partner
32 5 4

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

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

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

  <title>
      {{ page_title }}
      {%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
      {%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
      {%- unless page_title contains shop.name %} &ndash; {{ 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 }}/ 

 

1件の返信1

mrtc
Shopify Partner
47 20 27

上記コードの場合ですと、「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」に差し替えます

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

自社サイトでShopifyテーマのカスタマイズ方法を紹介しています。
お困り事がありましたら、お気軽にメッセージをください。