How can I customize social card images for redirects on Shopify?

Technical Q&A
1

I have a client looking to set up precise redirects through their Shopify store that allows them to control the image displayed in the social card on platforms like Facebook.

On their old website they set up code to be able to make redirect pages display like this when linked on Facebook:

Screen Shot 2022-07-12 at 2.19.08 PM.png
Screen Shot 2022-07-12 at 2.19.08 PM.png493×347 159 KB

If I simply set up a redirect through Shopify admin or even create a new page template (with code below) with a new theme layout (to remove layout), my results always display like a Shopify page:

Screen Shot 2022-07-12 at 2.54.01 PM.png
Screen Shot 2022-07-12 at 2.54.01 PM.png717×485 333 KB

Here is a sample piece of code they have created on their old site for this function to happen (example:priestsmill.com/classes.html :disappointed_face:

March Break Maddness (March 12-16) 2022

Any insight is greatly appreciated! It’s a bit tricky for me to explain so if you need more info or have any questions, simply let me know! Cheers!

2

Hi @Urroz ,

Please send your site and if your site is password protected, please send me the password. I will check it.

3

Hello,

Here is the Shopify site: https://priests-mill.myshopify.com/! Appreciate your help!

4

Hi @Urroz ,

I checked and you are setting this image for it, so it will show when you share with social.

https://cdn.shopify.com/s/files/1/0603/4486/0919/files/WEB-755300_1950x_fca5e9c5-8238-4fc4-932c-059c1b1c7d77.jpg?v=1657295297

If you want to change the image, you can go to theme.liquid file, find ‘og:image’ and change the image here. Refer https://developers.facebook.com/docs/sharing/webmasters

Hope it helps!

5

Hey @LitExtension ,

We are trying to control the SEO settings like the image via the code on the page. I’ve tried playing around with adding more meta tags to the code in hopes to change it for this page exclusively:

{% layout ‘theme.test’ %}



<meta http-equiv=“refresh”
content=“0;url=‘http://0454b6e.netsolhost.com/’” target=“_blank”>







March Break Maddness (March 12-16)


<img src=“introductory.jpg”
alt=“2022” border=“0” align=“top”>

But unfortunately no luck! Do you happen to have any other ideas?

Cheers!

6

Hi @Urroz ,

Please send me the code of theme.liquid file, I will check it for you.