Shopify テーマ、Liquid、ロゴ、その他の類似トピック
ページの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 }}/
上記コードの場合ですと、「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 -%}
未検証ですので、エラーがあればご連絡ください。
Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024