Setup dynamic opengraph og:image meta tags with bigcommerce store
Understanding OpenGraph Tags
OpenGraph (OG) tags are special meta tags developed by Facebook in 2010 that allow web developers to control how URLs are displayed when shared on social media platforms. They've since become a standard adopted by most social networks including Twitter, LinkedIn, Pinterest, and messaging apps like WhatsApp, Telegram and more.
There is how site's links preview looks like without opengraph og:image tags.
But many engines like wordpress/shopify/etc have setup tags correctly and set as opengraph image cover photo in case of media article/blogpost or a random photo in case of store product.
There is how site's links preview looks like with default setup opengraph og:image tags.
Article/blogpost preview - with just cover photo
Store product preview - usually cropped because common product photo not fit in recommended landscape format for opengraph previews
There is better than nothing but the next step is to setup rich dynamic opengraph previews. Look how this links previews looks with integrated dynamic opengraph tags.
Article/blogpost preview - with description over image. You can also add your branding/logo to increase brand recognition.
Store product preview - full image with title and price tag, also discount can be shown here. You can also add your branding/logo to increase brand recognition.
Obviously, when a person scrolls through the feed on Facebook, such a post will attract much more attention. Also, with branding elements in the picture, you will greatly increase the recognition of your brand.
Such preview will also works in all messengers and other social media platforms to boost your lead generation.
And the most important thing is that everything works absolutely automatically. You set it up once and the previews will work for both old links and those that will appear in the future.
Create template
At first you need to signup in https://app.previewbuilder.com/signup.html. Registration is simple and there is free trial - no credit card required.
1. On first welcome page just click on "Create first template"
2. On second page you can select template to start with or start with scratch
3. On third page you can polish your template with a powerful editor. You can skip this step by now and return to template editor later so just click on "Test template".
4. On fourth page you can test your template rendering with different images/texts/etc. Click on bigcommerce instruction tab.
There will be code snippet which one you should add to your theme. It can be simply done via visual editor embedded into bigcommerce admin panel.
Code snippet in previewbuilder admin will contain params for your template (like field, secret key, tempalte_id, etc. Example will be below:
{{#each (split head.meta_tags "<meta") }}
{{#if @index '===' 0 }}
{{{this}}}
{{else }}
{{#contains this 'property="og:image"'}}
{{#unless page_type '==' product}}
<meta {{{this}}}
{{else}}
<meta property="og:image" content="https://w0.previewbuilder.com/api/r/67c575da19d7c80012a95840?Image1={{getImage @root.product.main_image 'product_size' (cdn theme_settings.default_image_product)}}&Text3={{getImage @root.product.title}}&Text4={{encodeURI @root.product.price.with_tax.formatted}}&Text5=luxury_store.com&s=f8453cccd56009abc73d1f0653da4ce92896407d0388ef62b31c109d59e70a1c" >
{{/unless}}
{{else}}
<meta {{{this}}}
{{/contains}}
{{/if}}
{{/each}}
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="628">
Step by step how to add those snippet into your store theme.
1. Open theme page in bigcommerce admin panel
2. Make a copy of current active theme
We recommend you to make TWO copies. Give the first copy name "Backup 01.01.2026" to have a change to revert any changes automatically and for second copy give name "Activate previewbuilder".
3. Start editing of theme
Scroll bottom to the list of saved theme and start edit "Activate previewbuilder" theme.
4. Add the snippet
In the left panel open file templates/layout/base.html and replace {{{head.meta_tags}}} line with the code snippet from admin panel.
You should REPLACE {{{head.meta_tags}}} with the snippet. After the change:
5. Activate new theme
On the themes list click "Activate" on our theme after saving. You can revert changes any time by activating backup.
That's all. Now your products links have rich dynamic preview.
If you have any questions feel free to contact us via support chat widget. We will be happy to help you to integrate our service.