Meta data price display (og:price) for different markets?

Markets
1

What’s the proper way to handle the opengraph meta data at the top of the page for different markets?

This is the bit in my theme.

I’m in the US. And I sell a hat that’s $10 USD.

When I change to Canada, my hat is now $14 CAD.

Everywhere else it’s fine. product page is fine, checkout is fine.

But the OG:PRICE fields are always $10 & USD

Shouldn’t those OG:PRICE fields update to be the local currency?

What’s the best practice here?

2

Hey @samc Could you share the code snippet from your theme where you’re generating the og:price:amount and og:price:currency meta tags?

Usually, this would be in the layout/theme.liquid file within the <head> section. Also, when you switch to the Canada market, does your URL change to something like yourstore.com/en-ca/products/hat? Just want to confirm whether the issue is with how you’re accessing the price/currency values in Liquid versus a market detection problem. Hope to hear from you soon!

3

Yes. I’ve included my entire snippet down at the bottom.

I do have different URLs for US and canada. It’s adding the en-ca as the first slug as opposed to being a subdomain, e.g.

US: mystore dot com / products / hat
CA: mystore dot com / en-ca / products / hat

The thing I don’t understand is actually a ‘best practice’ question. If I’m looking at the site from canada, should those two OG:PRICE fields be $14 & CAD? Or is it better to have them be the original price ($10 & USD) across all markets, because it’s better for Google and whatever else to read?

Back to code - I was looking at Horizon, which is slightly different. Horizon says this:

So it’s using product.price and cart.currency.iso_code

Whereas I have product.price and shop.currency

My meta & og-tags snippet below:

<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
{% capture seo_title %}
  {{ page_title | strip_html }}
{% endcapture %}
<title>{{ seo_title }} {% if settings.type_seperator == 'dot' %}·{% else %}|{% endif %} {{ shop.name }}</title>

{% liquid
  assign meta_type = 'website' 
  assign meta_title = page_title | strip_html | escape 
  assign meta_description = page_description | strip_html | escape 
  if template contains 'product' 
    assign meta_type = 'product' 
    assign meta_title = product.title | strip_html | escape 
    assign meta_price = product.price | money_without_currency | strip_html | escape 
    assign meta_currency = shop.currency 
  elsif template contains 'collection' 
    if page_description
       assign meta_description = page_description | strip_html | escape
    elsif collection.description != blank 
      assign meta_description = collection.description | strip_html | escape 
    endif 
  elsif template contains 'article' 
    assign meta_type = 'article' 
  endif 
%}

<link href='{{ canonical_url }}' rel='canonical'>
<meta name="description" content="{{ meta_description | default: shop.name }}" />

<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:type" content="{{ meta_type | default: 'website' }}">
<meta property="og:title" content="{{ meta_title | default: shop.name }}">
<meta property="og:description" content="{{ meta_description | default: shop.name }}">
{% if page_image %}
  <meta property="og:image" content="http:{{ page_image | image_url: width: 900 }}">
  <meta property="og:image:secure_url" content="https:{{ page_image | image_url: width: 900 }}">
  <meta property="og:image:width" content="{{ page_image.width }}">
  <meta property="og:image:height" content="{{ page_image.height }}">
{% endif %}
{% if meta_price %}
  <meta property="og:price:amount" content="{{- meta_price -}}">
  <meta property="og:price:currency" content="{{- meta_currency -}}">
{% endif %}

<meta name="twitter:title" content="{{ meta_title | default: shop.name }}">
<meta name="twitter:site" content="{{ settings.social_x_twitter_link | remove: "https://twitter.com/" }}" />
<meta name="twitter:description" content="{{ meta_description | default: shop.name }}">
<meta name="twitter:card" content="summary_large_image">
4

Bah. On further testing, horizon is correct, and my theme is not.

The product.pricecorrectly updates as I switched between markets, but shop.currency is static.

Should be using cart.currency.iso_codefor theog:price:currency field.

I was thinking neither was changing, but that wasn’t the case.

5

Hey @samc - thanks for following up and sharing the solution here, really appreciated (will definitely be helpful for other folks stumbling across this in the future). Let me know if I can help with anything else!