My product images don’t work well for Facebook sharing because they’re square in format in order to work well for both my website and Pinterest Shop tab. And because Facebook now forces images to crop to a 1.9x1 ratio, none of them crop well for Facebook. (This includes in situ images in the product media section, so changing my specified image to the second product image isn’t a workable solution for me.)
However, each of my product pages has a horizontal image in the product description section. Many of these will already crop fine without me having to re-do them, so these are the images I want Facebook to pull.
I’ve tried a couple of different tweaks to the OG code but I haven’t gotten it right, so I’m definitely missing something.
Here’s a link to one of my product pages:
https://musesmiscellany.com/products/cherub-poster-24x36
I’d greatly appreciate any help you can give me!
I decided to try more tinkering on this, since no one had any feedback for me. So for anyone else who wants to do this, here’s what works.
(Note that this code will pull the first image in your product description, and if that image is a PNG Facebook won’t be able to display it. I think if you have multiple images on your page and you want to use a later image, you’d go to the fourth line in the code below and replace “src[1]” with “src[2]” for the second photo, “src[3]” for the third photo, etc.)
My theme is Responsive (New York), and the appropriate file is social-meta-info.liquid in Snippets. If you’re using a different theme, the file should still be named something very similar. In any case, it should be clear in the file that it’s Facebook Open Graph meta tags.
Scroll down to the meta tags for product pages (in my file that’s line 16). Replace the image meta tags with this:
{% assign img_tag = ‘<’ | append: ‘img’ %}
{% if product.description contains img_tag %}
{% assign src=product.description | split: ‘src="’ %}
{% assign src=src[1] | split: ‘"’ | first | remove: ‘https:’ | remove: ‘http:’ %}
{% if src %}
The whole code for my product pages section is now:
{% if template contains ‘product’ %}
{% assign img_tag = ‘<’ | append: ‘img’ %}
{% if product.description contains img_tag %}
{% assign src=product.description | split: ‘src="’ %}
{% assign src=src[1] | split: ‘"’ | first | remove: ‘https:’ | remove: ‘http:’ %}
{% if src %}
{% endif %}
{% else %}
{{ page_image }}
{% endif %}
The original code was:
{% if template contains ‘product’ %}
{% if product.media.size > 0 %}
{% for media in product.media limit:3 %}
{% if media.alt contains ‘youtube’ or media.alt contains ‘vimeo’ %}
{% assign src=media.alt | split: ‘src="’ %}
{% assign src=src[1] | split: ‘"’ | first %}
{% endif %}
{% endfor %}
{% else %}
{{ page_image }}
{% endif %}
You might notice that the new code doesn’t contain code for either alt tags or image size. I’m not sure whether those are pulled automatically through the “src” code or whether it’s just not a big deal if it’s not there. In either case, FB is showing all the necessary info with images.
1 Like