Specify the Image and Text Displayed when Customers Share Pages on Facebook

Sharing on Facebook

Sharing content on Facebook happens when someone clicks a Facebook “share” button in your shop or even when they post the URL of the shop page they’re on into a new post on their Facebook timeline.

This content is always shared as a link to the web page, but it may also include an image and/or text excerpt as well.

• Open Graph Explained
• Shopify's Social Sharing Image Setting (NEW)
• Changing OG Description Text
• Facebook Sharing Debugger

How does Facebook know what image, text and link to show when a page is shared?

When the share is initiated, Facebook does a scan or “scrape” of that page’s code, and looks for any information contained in the page’s metadata section; in particular, Facebook looks for any “Open Graph” meta tags that specify properties like what image to use when that page is shared (such as "og:image").

All Out of the Sandbox themes include built-in support for this feature and will display the following image and text when shared:

• Product pages: main product image, product title and product description excerpt.
• Blog articles: featured article image, blog post title and blog post excerpt.
• Home page: In newer Out of the Sandbox themes, the shop logo, shop name and page description excerpt (meta description for the shop) are shown. If the "social sharing image" setting has an image added, it will overwrite this. On older versions, Facebook will use the first image on the page along with the shop name and page description.

Shopify's Social Sharing Image Setting (NEW)

These details apply to the following themes:

• Turbo 6.0.5 and up
• Flex 2.0.7 and up
• Parallax 4.0.2 and up
• Retina 4.7.4 and up
• Responsive 7.2.4 and up
• Mobilia 6.2.3 and up
• Artisan 1.3.3 and up

Shopify has recently introduced a social sharing image setting within the Admin you can add a default image to be used for social sharing when another relevant image can't be found.

You can upload this image by going into Online Store > Preferences > Social sharing image.

After you've uploaded a "Social sharing image," run your site's URL through Facebook's Sharing Debugger in order to "scrape" the new information. Often, you'll need to "scrape" it a few times before your image starts to display.

Change the text displayed when someone shares your homepage on Facebook

{% if page_description %}
  <meta property="og:description" content="{{ page_description | escape }}">
{% endif %}

and replace it with this instead:

{% if page_description %}
  {% if template contains 'index' %}
 <meta property="og:description" content="Write out the specific text you want here">
  {% else %}
  <meta property="og:description" content="{{ page_description | escape }}">
  {% endif %}
{% endif %}

Facebook Sharing Debugger

A good way to see what Facebook actually knows about any given page in your shop (and to get a preview of what the Facebook share will look like for that page) is to paste your URL into the Facebook Debugger tool which is available here. Often, you'll need to "scrape" it a few times before your image starts to display.

You should also use this tool to ask Facebook to “re-scrape” the page each time you change your Social Sharing Image/Open Graph metadata, so it updates its database to the settings you've specified.

If you upload an image under the 'social sharing image' setting or changes to the og:image and og:description in the code, you'll need to then run your site through the Facebook Debugger to "scrape" the new information.

Then, run the URL through the FB debugger tool and ask it to “scrape again” and double check that the new "og:image" and “og: description” that I specified for the home page got picked up:

After scraping the new information, you can then try testing out Facebook by sharing the home page URL on your timeline.