Adding unique social Open Graph tags for a specific page

[Jesse_Shanks]

Hi there,

I am currently running a giveaway on my store which encourages people to share the giveaway with others. Currently when they do so, the Open Graph card that gets shared to Facebook just shows our shop logo. I would like to make unique Open Graph tags just for the giveaway page that would show a custom image, title, and description. I have done a ton of reading about it but haven't found any solutions yet. Here's the current code in my social-meta-tags.liquid file:

<!-- /snippets/social-meta-tags.liquid -->
{%- assign og_title = page_title -%}
{%- assign og_url = canonical_url -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}
{% if settings.share_image %}
  {%- capture og_image_tags -%}<meta property="og:image" content="https://cdn.shopify.com/s/files/1/2784/0344/files/facebook-card-image_1080x.png?v=1517769694">{%- endcapture -%}
  {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/2784/0344/files/facebook-card-image_1080x.png?v=1517769694">{%- endcapture -%}
{% endif %}

{% comment %} Template specific overides {% endcomment %}
{% if template.name == 'product' %}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {% if product.images.size > 0 %}
    {%- capture og_image_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image" content="http:{{ image.src | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: '1200x1200' }}">{% endfor -%}{% endcapture -%}
  {% endif %}

{% elsif template.name == 'article' %}
  {%- assign og_title = article.title | strip_html -%}
  {%- assign og_type = 'article' -%}
  {%- assign og_description = article.excerpt_or_content | strip_html -%}
  {% if article.image %}
    {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ article.image | img_url: '1200x1200' }}">{%- endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1200x1200' }}">{%- endcapture -%}
  {% endif %}

{% elsif template.name == 'collection' %}
  {%- assign og_title = collection.title | strip_html -%}
  {%- assign og_type = 'product.group' -%}
  {% if collection.image %}
    {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ collection.image | img_url: '1200x1200' }}">{%- endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ collection.image | img_url: '1200x1200' }}">{%- endcapture -%}
  {% endif %}

{% elsif template.name == 'password' %}
  {%- assign og_title = shop.name -%}
  {%- assign og_url = shop.url -%}
  {%- assign og_description = shop.description | default: shop.name -%}
{% endif %}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description }}">
{% if template.name == 'product' %}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{% endif %}
{{ og_image_tags }}
{{ og_image_secure_url_tags }}

{% unless settings.social_twitter_link == blank %}
  <meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">
{% endunless %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">

[Jesse_Shanks]

Anyone? 

[Vishal3]

Hey Jesse,

I have checked you have added og tags properly. You just need to tweak it a bit to get desired output.

In case you're not aware of open graph validator you can use this tool: 

Facebook: https://developers.facebook.com/tools/debug/sharing

Twitter: https://cards-dev.twitter.com/validator

I have run your product pages through this tool and found following error: Attached

You need to add this into your HTML source

<meta property="fb:app_id" content="966242223397117" />

That is default app id.

And try running out pages through validator after clearing the cache.

Cheers,

Vishal