WTH...Where is my social-meta-tags.liquid?
Recently, a few users told us they can't find their "social-meta-tags.liquid". At first, we are thinking that they are just looking for the file in a wrong place. But now, we finally realize they are not joking...some themes really don't have such a file.
Then, what can we do?
We create a similar file!
1. First, following this tutorial step 1.1 to 1.4 to find the "Snippet" folder on your admin panel.
2. Then click "Add a new Snippet". And give it a name, "SPO-social-meta-tags"
3. Let's paste the following codes into the new liquid file:
<!-- /snippets/SPO-social-meta-tags.liquid -->
<!-- SEO Product Optimizer -->
{% assign metas = product.metafields.global %}
{% if metas['og:image'] %}
<!-- SEO Product Optimizer customized: Facebook -->
<meta property="og:image" content="http://{{ metas['og:image'] }}">
<meta property="og:image:secure_url" content="https://{{ metas['og:image'] }}">
{% if metas['og:image:width'] %}
<meta property="og:image:width" content="{{ metas['og:image:width'] }}">
{% endif %}
{% if metas['og:image:height'] %}
<meta property="og:image:height" content="{{ metas['og:image:height'] }}">
{% endif %}
{% if metas['og:title'] %}
<meta property="og:title" content="{{ metas['og:title'] }}">
{% endif %}
{% if metas['og:description'] %}
<meta property="og:description" content="{{ metas['og:description'] }}">
{% endif %}
{% else %}
<!-- This part handle your none product page share -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_description }}">
<meta property="og:image" content="[CUSTOMIZED-HOMEPAGE-IMAGE]">
<meta property="og:image:secure_url" content="[CUSTOMIZED-HOMEPAGE-IMAGE]">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title }}">
<meta name="twitter:description" content="{{ page_description }}">
<meta name="twitter:image" content="[CUSTOMIZED-HOMEPAGE-IMAGE]">
{% endif %}
{% if metas['twitter:image'] %}
<!-- SEO Product Optimizer customized: Twitter -->
<meta name="twitter:card" content="{{ metas['twitter:card'] }}">
<meta name="twitter:title" content="{{ metas['twitter:title'] }}">
<meta name="twitter:description" content="{{ metas['twitter:description'] }}">
<meta name="twitter:image" content="https://{{ metas['twitter:image'] }}">
<!-- SEO Product Optimizer customized: End -->
{% endif %}
<!-- END - SEO Product Optimizer -->
Remember to replace [CUSTOMIZED-HOMEPAGE-IMAGE] using your own image url. For example, here, i am using "https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542".
This image will only be shown when you share your shop homepage url on facebook or twitter. It has no effect on your product. If you want to change the share title and description, go to "https://[YOUR-SHOP-URL]/admin/online_store/preferences" , remember to replace '[YOUR-SHOP-URL]' with your own shop's url. And edit the "Title and meta description" part.
Cautious:
(1). The image should be large enough. At minimum, it should be 600 x 315 pixels. On high resolution device, the image should be at least 1200 x 600 pixels for the best display.
(2). The image cannot be too large, its maximum size is 8 MB.
(reference: https://blog.bufferapp.com/ideal-image-sizes-social-media-posts#facebook)
Example code:
<!-- /snippets/SPO-social-meta-tags.liquid -->
<!-- SEO Product Optimizer -->
{% assign metas = product.metafields.global %}
{% if metas['og:image'] %}
<!-- SEO Product Optimizer customized: Facebook -->
<meta property="og:image" content="http://{{ metas['og:image'] }}">
<meta property="og:image:secure_url" content="https://{{ metas['og:image'] }}">
{% if metas['og:image:width'] %}
<meta property="og:image:width" content="{{ metas['og:image:width'] }}">
{% endif %}
{% if metas['og:image:height'] %}
<meta property="og:image:height" content="{{ metas['og:image:height'] }}">
{% endif %}
{% if metas['og:title'] %}
<meta property="og:title" content="{{ metas['og:title'] }}">
{% endif %}
{% if metas['og:description'] %}
<meta property="og:description" content="{{ metas['og:description'] }}">
{% endif %}
{% else %}
<!-- This part handle your none product page share -->
<meta property="og:type" content="website">
<meta property="og:title" content="{{ page_title }}">
<meta property="og:description" content="{{ page_description }}">
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">
<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ page_title }}">
<meta name="twitter:description" content="{{ page_description }}">
<meta name="twitter:image" content="https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542">
{% endif %}
{% if metas['twitter:image'] %}
<!-- SEO Product Optimizer customized: Twitter -->
<meta name="twitter:card" content="{{ metas['twitter:card'] }}">
<meta name="twitter:title" content="{{ metas['twitter:title'] }}">
<meta name="twitter:description" content="{{ metas['twitter:description'] }}">
<meta name="twitter:image" content="https://{{ metas['twitter:image'] }}">
<!-- SEO Product Optimizer customized: End -->
{% endif %}
<!-- END - SEO Product Optimizer -->
After editing the new liquid file, remember to click "Save" button on top right corner!
4. Find your "theme.liquid" under "Layout" folder. Click the liquid file to edit it.
Add the following line, after the <head> tag.
{% include 'SPO-social-meta-tags' %}
Just like the image above.
Click the "Save" button on the top right corner!
5. Done! Go to facebook debugger, input your shop homepage's url and press 'Scrape', then you can preview your facebook share on homepage. You can also go to twitter debugger and input your homepage url to check your change.
Using our app, you can change your product share.
If you have further questions, please email us via [email protected]