How can I customize Twitter and Facebook link preview on Shopify home page? (For Non SPO Users)
In this tutorial, we will talk about how to customize the facebook share image on your Shopify store home page.
p.s. Please note that if you have installed SPO with code snippet, you won't need to follow the steps anymore. You can edit it directly in our " Store Tab".
in 2020, Shopify has added a social share image setting in the theme. You can follow the steps below:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme that you want to edit and click Customize.
- Click the Theme settings tab.
- Click Social media.
- In the Social sharing image area, select the image that you want to show on social media.
- Click Save.
You should disable Password mode when you're testing.
If the first method doesn't work. You can try this one. But this method will need to do some copy and paste on codes.
1. First, you need to find your current theme's liquid file.
1.1 Go to "https://[YOUR-SHOP-URL]/admin/", remember to replace '[YOUR-SHOP-URL]' with your own shop's URL. Then you will enter the admin.
On the left side menu, click ' Online Store'.
1.2 Then, find your current theme, and on that theme's top right corner, click ' Customize Theme'.
1.3 On the left side menu, click the theme's name and then click ' Edit Code'.
1.4 Find the ' Snippets' folder and click it.
1.5 Find the 'social-meta-tags.liquid' and click it. Now you have found the target file.
PS: If you can't find your "social-meta-tags.liquid" file here, please jump to this tutorial.
1.6 Now, before going to the next step, backup this file first. Save the whole social-meta-tags.liquid to a txt file or somewhere else.
2. Now add the code to the file.
2.1 Prepare your code:
<!-- SEO Product Optimizer: Homepage Share -->
{% if template == 'index' %}
<!-- Facebook 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="[THE IMAGE URL]">
<meta property="og:image:secure_url" content="[THE IMAGE URL]">
<!-- Twitter Share -->
<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="[THE IMAGE URL]">
{% endif %}
<!-- SEO Product Optimizer: Homepage Facebook Share - END -->
Replace the [THE IMAGE URL] with the image URL that you want to display on your facebook share.
For example, if you are using this image: https://cdn.shopify.com/s/files/1/1498/3202/products/Longasands_Stay_Salty_1024x1024.jpg?v=1477296542
Then, you should paste the following code into the liquid file:
<!-- SEO Product Optimizer: Homepage Facebook Share -->
{% if template == 'index' %}
<!-- Facebook 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">
<!-- Twitter Share -->
<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 %}
<!-- SEO Product Optimizer: Homepage Facebook Share - END -->
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.
2.2 Cautious:
(1). The image should be large enough. At minimum, it should be 600px x 315px (width x height). On high-resolution devices, the image should be at least 1200px x 630px (width x height) for the best display.
(2). The image cannot be too large, its maximum size is 8 MB.
We are almost there!
3. Remember to press 'SAVE' button at the top right corner!
4. Go to Facebook Debugger, input your shop home page's URL and press 'Scrape', then you can preview your facebook share on the home page. You can also go to Twitter Card Validator and input your home page URL to check your change.
(If you haven't shared your home page before, you may need to press the 'Scrape' button again, after the first time)
Woohoo, you've finished!
If you have further questions, please email us via [email protected]
If you want to customize each product's facebook share image, please try our Shopify app. We will be happy to see you!