9 min read

How to Add Auto-Generated Custom Open Graph Images to Wix Using Bannerbear

Increase brand awareness and stand out among other competitors on social media using unique Open Graph images that can be generated dynamically.

by Josephine Loo · September 2022
How to Add Auto-Generated Custom Open Graph Images to Wix Using Bannerbear
How to Add Auto-Generated Custom Open Graph Images to Wix Using Bannerbear

Contents

    According to a behavioral study, humans use 50 milliseconds on average to make an impression of something. With “awareness” being at the top of a social marketing funnel, it’s crucial to leave a good first impression almost instantly when a new user discovers you on social media.

    Although first impressions happen in a split second, they can create a long-term effect on your brand. One way to make good impressions on social media is by using great visuals. Other than posting photos that are designed to increase brand awareness, you can also share your website with a custom Open Graph image design that is unique to your brand.

    In this tutorial, we will learn how to add auto-generated custom Open Graph images to Wix so that you can use visuals to increase brand awareness when your website is shared on social media.

    Facebook Open Graph image

    What is an Open Graph Image

    The Open Graph image (OG image) or social sharing image is an image that will be displayed when you share a website on social media.

    It can be set by adding the og:image meta tag within your website’s <head> section:

    <meta property='og:image' content="IMG_URL" />
    

    By default, Wix will use your current post cover image as the Open Graph image. Make sure to set a cover image for your post so that it will be displayed when your website is shared on social media.

    Setting a cover image for a Wix post

    For example, it will look like this on Facebook using the default post cover image:

    Facebook Open Graph image

    Using a Custom Open Graph Image

    Adding an Open Graph image can make your post looks more attractive but it doesn’t help you to stand out when your target audience’s feed is loaded with similar content from others.

    A custom Open Graph image not only helps you increase brand awareness on social media but also separates you from your competitors. Instead of showing a boring cover image, you can design your Open Graph image so that your posts are distinguishable.

    Example 1

    Am auto-generated dynamic Open Graph image

    Example 2

    Am auto-generated dynamic Open Graph image

    Designing and adding a custom Open Graph image to every post on your website might sound difficult but actually, it can be done easily by using Bannerbear as it can be automated.

    How Does Bannerbear Work

    Bannerbear is an automated media generation service that helps you to create custom images, videos, and more dynamically using API. To auto-generate custom Open Graph images, we will use Bannerbear’s Image Generation API.

    The Image Generation API generates custom images automatically based on a design template. You can add static and dynamic images, texts, shapes, etc. to the template and the values of the dynamic objects can be set by passing different data to the API.

    Bannerbear offers different ways to use the API. You can use HTTP requests, SDKs (Node.js, Ruby, and PHP), third-party no-code integration, etc. To create and add custom Open Graph images automatically to Wix using Bannerbear, the easiest way is using a Simple URL.

    Generally, you need to create a Simple URL for image generation and add it to the meta tags within your website's <head> section.

    Adding Auto-Generated Custom Open Graph Images Using Bannerbear

    Step 1. Prepare a Bannerbear Design Template

    Create a new Bannerbear project and a design template for your Open Graph image. You can design your template from scratch or duplicate the Open Graph Image Template used in this tutorial.

    As we want to display the title , excerpt , cover image, and site logo of a Wix post on the Open Graph image, we will need these dynamic objects in the template:

    • Text - title, description (excerpt)
    • Image - image_container, logo_container

    Bannerbear design template

    The values of these dynamic objects can be changed every time we access the Bannerbear Image Generation API using a unique URL.

    Step 2. Create a Simple URL for Image Generation

    The Simple URL used to generate Open Graph images automatically using Bannerbear consists of an API path and multiple sets of data in the format of  “ layer / attribute / data ”.

    This is the API path that you will use to construct every Simple URL:

    https://ondemand.bannerbear.com/simpleurl/<URL Base>/image
    

    To use the Simple URL, you will need a URL Base. It will be different for every design template and you can create one from your design template menu.

    Bannerbear template menu

    Next, we can add the title , excerpt, cover image, and site logo following the layer/attribute/data format. These data will be set as the values of the dynamic objects in the design template.

    These are the strings that we will add to the Simple URL to set the values of the dynamic objects:

    title: title/text/POST_TITLE

    description: description/text/POST_EXCERPT

    image_container: image_container/image_url/POST_COVER_IMAGE

    logo_container: logo_container/image_url/LOGO

    We will replace the data (POST_TITLE,  POST_EXCERPT, POST_COVER_IMAGE, and LOGO) with Wix’s variables when we add the meta tags in the settings later so that the values will be assigned dynamically according to each post.

    Combine the API path and layer/attribute/data strings above to construct the Simple URL:

    https://ondemand.bannerbear.com/simpleurl/0P5OYpd35bG8QoX1vV/image/title/text/POST_TITLE/description/text/POST_EXCERPT/image_container/image_url/POST_COVER_IMAGE/logo_container/image_url/LOGO
    

    As the variables will return different values from individual posts, a unique complete Simple URL will be created dynamically for every post, hence generating different custom Open Graph images automatically.

    Step 3. Add the Simple URL to the Meta Tags

    You can set the meta tags for all your blog posts from the “ Blog Settings ”.

    Wix Blog Settings

    Edit the “ SEO Settings ” for all blog posts.

    Wix SEO Settings for Blog posts

    Add the Simple URL to the og:image field.

    Wix's og:image settings

    Replace the data in the Simple URL with Wix’s variables so that the values will be assigned dynamically from each post.

    Using variables for Wix SEO

    Twitter’s Open Graph image will use the og:image value by default. Hence, the image displayed on Twitter should be the same.

    Wix twitter:image settings

    Testing the Result

    You can test the Simple URL by retrieving the complete URL from the meta tag using your browser inspector.

    Wix website screenshot

    This is the complete Simple URL for the Open Graph image of the sample post above:

    https://ondemand.bannerbear.com/simpleurl/0P5OYpd35bG8QoX1vV/image/title/text/5%20Ways%20to%20Make%20a%20Winning%20Taco%20/description/text/Make%20these%20tacos%20that%20will%20amaze%20everyone%20in%2010%20minutes!%20All%20instructions%20are%20provided.%20/image_container/image_url/https://static.wixstatic.com/media/0b340f_dd1f1f34e008433d84536ae18ac4558c~mv2.jpg/v1/fit/w_1000%2Ch_1000%2Cal_c%2Cq_80/file.jpg%20/logo_container/image_url/https://static.wixstatic.com/media/8a4743_071cedabaa75468aa161bcd99520f1b8~mv2.png
    

    When you visit the URL, you should get a custom Open Graph image generated automatically by Bannerbear using the data of the post, based on the design template.

    ![8a4743071cedabaa75468aa161bcd99520f1b8_mv2.jpeg](/images/ghost/2022-09-21-how-to-add-auto-generated-custom-open-graph-images-to-wix-using-bannerbear/13.jpeg) _Am auto-generated dynamic Open Graph image

    To see how it looks like when you share your website on social media, you can use an Open Graph image tester like OpenGraph.xyz or the official Twitter Card Validator and Facebook Sharing Debugger to preview the Open Graph image.

    Screenshot 2022-09-19 at 10.52.19 PM.png Testing an Open Graph image using Facebook Sharing Debugger

    What's Next

    To build a lasting relationship with your audience, creating a good digital impression or building brand awareness alone is not enough. You need to engage with them and deliver good content consistently.

    Using automation can make these jobs easier. If you’re interested to find out how, here are some tutorials that you can try:

    Josephine Loo
    Josephine is an automation enthusiast. She loves automating stuff and helping people to increase productivity with automation.

    Follow the Journey

    Hello I'm Jon, the founder of Bannerbear — every 2 weeks I send a newsletter with updates from the Product, Marketing and Business sides of my startup, subscribe below to receive it!