[DEPRECATED] How can I install SEO Product Optimizer?

This article is deprecated! Only use for uninstalling old codes! Please refer to the latest version here.

To set a custom Facebook / Twitter Share image for your product, you need to insert a snippet of code into the liquid file. Otherwise our app cannot detect the suitable meta tag to be updated. You can follow our instruction below to do it yourself or you can contact us to give you a hand via [email protected]

If you want to check "How to Configure Theme?", please go to step 5.

1. Go to   App Store and press "Get" to install our app to your shop. 

2. Enter your store's url. eg: YOUR-STORE.myshopify.com

3. Press "Install app"

4. You will see the app's Homepage. Press "Enter" to go to dashboard.

this tutorial.

Before doing anything, please backup this file first, in case you do something wrong. Please copy the whole 'social-meta-tags.liquid' file to a txt file or something similar.

What you see is something like below. But may be not the exact one. 

Original one:

Copy and paste the following code block to the very beginning of the file.

Prepare your first code block:

<!-- 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 %}
  <!-- SEO Product Optimizer customized: End -->
{% 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 %}
<!-- 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 non-product page 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 first code block:

<!-- 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 %}
  <!-- SEO Product Optimizer customized: End -->
{% 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 %}
<!-- END - SEO Product Optimizer -->

After paste the first code block:

Copy and paste the following second code block at the end of the file.

<!-- SEO Product Optimizer -->
{% if metas['og:image'] %}
<!-- SEO Product Optimizer customized: Facebook -->    
	{% 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 %}   
<!-- SEO Product Optimizer customized: End --> 
{% 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 paste the second code block:

7. And at last, the most important step... "Save" the file !

8. Now go back to the app's dashboard page. Woohoo! finally you are done. Start editing your product !

Still need help? Contact Us Contact Us