Need help with OpenGraph/Meta Tags/Rich Links on Debut theme for Rich Media Links (iOS & Twitter etc)

James_Frewin
Shopify Partner
2 0 0

 

Hi!

I'm using the Debut theme and a few days ago I managed to get the code working but I think since then the code got changed because it stopped working and I can't see what needs to be fixed now.

I've designed an image which I'll post a screenshot below of it working but now if I post the link in iMessage it doesn't show the big image anymore.

I've also tried using a OpenGraph code generator which has given me this code but it didn't work when I put it straight in but here it is anyway.

<!-- COMMON TAGS -->
<meta charset="utf-8">
<title>? The Product Lab ?</title>
<!-- Search Engine -->
<meta name="description" content="The Internet's curated collection of dope shit for Millennials">
<meta name="image" content="http://i.imgur.com/zckrc9Q.png">
<!-- Schema.org for Google -->
<meta itemprop="name" content="? The Product Lab ?">
<meta itemprop="description" content="The Internet's curated collection of dope shit for Millennials">
<meta itemprop="image" content="http://i.imgur.com/zckrc9Q.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="? The Product Lab ?">
<meta name="twitter:description" content="The Internet's curated collection of dope shit for Millennials">
<meta name="twitter:site" content="@ughdope">
<meta name="twitter:creator" content="@ughdope">
<meta name="twitter:image:src" content="http://i.imgur.com/zckrc9Q.png">
<!-- Open Graph general (Facebook, Pinterest & Google+) -->
<meta name="og:title" content="? The Product Lab ?">
<meta name="og:description" content="The Internet's curated collection of dope shit for Millennials">
<meta name="og:image" content="http://i.imgur.com/zckrc9Q.png">
<meta name="og:url" content="http://www.productlab.cool">
<meta name="og:site_name" content="? The Product Lab ?">
<meta name="og:type" content="website">

And here is the current code in my store: 

<!-- /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 -%}

{% comment %} Template specific overides {% endcomment %}
{%- if template.name == 'product' -%}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {%- capture og_image_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image" content="http:{{ image.src | product_img_url: '1024x1024' }}">{% 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: '1024x1024' }}">{% endfor -%}{% endcapture -%}

{%- 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: '1024x1024' }}">{% endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1024x1024' }}">{% 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 }}

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

{% if template == 'index' %}
  <meta property="og:type" content="website">
<meta property="og:image" content="Artboard_Copy.png">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:url" content="{{ canonical_url }}">
 
  {% endif %}

 

0 Likes