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

Use custom Open Graph images generated automatically from your posts to bring more traffic to your Squarespace website.
by Josephine Loo · September 2022

Contents

    With over 4.62 billion active users across multiple platforms, social media becomes the most popular channel for driving website traffic.

    97% of bloggers promote their blog posts via social media regardless of their niche. Although the quality of content is rated as the most important success factor, you need an effective strategy to drive traffic to your website. No matter how good is your content, your hard work will be in vain if you fail to redirect traffic to your website.

    To increase website traffic through social media sharing, the Open Graph image plays an important role as it is presented to the audience before the actual content and determines whether people will click on the link shared.

    In this tutorial, we’ll learn how to add auto-generated custom Open Graph images to Squarespace to make your posts look more attractive on social media. Here is an example of the custom Open Graph image that will be generated:

    auto-generated custom Open Graph image for Squarespace

    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 or twitter:image meta tag within your website’s <head> section:

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

    Typically, people will use the featured image of their post as the Open Graph image. It should look something like this:

    Facebook Open Graph image

    Using a Custom Open Graph Image

    Instead of displaying the featured image alone, we can make it more interesting by using a custom Open Graph image that is generated from the post's content.

    For example, we can add the post title, author’s name, and date to the image to display extra information about the content when we share the post.

    Example 1

    auto-generated custom Open Graph image using Bannerbear

    Example 2

    auto-generated custom Open Graph image using Bannerbear

    This will make your posts look more attractive on social media and increase the chances of people clicking on them or re-sharing them. Although the images are unique to each post, minimal work is required as they can be generated automatically using Bannerbear.

    How Does Bannerbear Work

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

    The Image Generation API generates custom images automatically based on a design template which you can add static and dynamic images, texts, shapes, etc. 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 a custom Open Graph image automatically to Squarespace using Bannerbear, the easiest method is using a Simple URL.

    Compared to other methods, using a Simple URL is preferred as we can set the Simple URL as the content of the Open Graph image meta tags. This allows the custom Open Graph images to be generated automatically when someone shares your website on social media.

    Adding a Custom Open Graph Image Automatically Using Bannerbear

    Step 1. Prepare a Bannerbear Design Template

    Create a new Bannerbear project and create 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 , author’s name , date, and featured image of a Squarespace post on the Open Graph image, we will need these dynamic objects in the template:

    • Text - title, author, date
    • Image - image_container

    Bannerbear Open Graph image design template

    The Open Graph images will be generated automatically based on this template and the values of the dynamic objects above can be changed every time we access the Bannerbear Image Generation API using a unique URL.

    Step 2. Go to Blog Settings

    The meta tags containing the Simple URL can be injected into the <head> section of your Squarespace website from the settings.

    Go to “ Pages > Blog > Settings ” from your site's config.

    Squarespace Blog Settings

    In the “ Advanced Blog Settings” , you will find the “ Page Header Code Injection ”.

    Squarespace Page Header Code Injection

    We will add our custom code here so that it can be injected into the website’s <head> section.

    Squarespace Page Header Code Injection

    Step 3. Retrieve the Post Data

    Unlike WordPress, Webflow, and Wix, Squarespace doesn’t have variables for users to access the posts’ data. However, we can get around it using HTML DOM querySelector().

    Open your browser inspector and get the class names of the title, author’s name, date, and featured image of your post.

    Retrieving an HTML element's class name from the browser inspector

    Then, get the HTML elements using their class names.

    const titleElement = document.querySelector(".blog-item-title > .entry-title");
    const dateElement = document.querySelector(".dt-published");
    const authorElement = document.querySelector(".author-name");
    const imageElement = document.querySelector(".thumb-image");
    

    Step 4. Create a Simple URL for Image Generation

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

    To construct a Simple URL, we will need an API path that is structured like the example below:

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

    The URL Base will be different for every design template and you can create one from your design template menu.

    Bannerbear design template menu

    Next, we can add the post title, author’s name, date, and featured image URL following the layer/attribute/data format. They will be set as the values of the dynamic objects in the design template.

    title: title/text/${titleElement.textContent}

    author: author/text/${authorElement.textContent}

    date: date/text/${dateElement.dateTime}

    image: image_container/image_url/${imageElement.src}

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

    const simpleUrl = `https://ondemand.bannerbear.com/simpleurl/Dl6wxNdZlWE8LmJagM/image/title/text/${titleElement.textContent}/author/text/${authorElement.textContent}/date/text/${dateElement.dateTime}/image_container/image_url/${imageElement.src}`;
    

    As the data will be retrieved from individual posts, a unique Simple URL will be created dynamically for every post, generating different custom Open Graph images automatically.

    Step 5. Add the Meta Tags

    Lastly, get the meta tag elements using querySelector() and set their contents to the Simple URL that we have created.

    document.querySelector('meta[property="og:image"]').setAttribute("content", simpleUrl);
    document.querySelector('meta[property="twitter:image"]').setAttribute("content", simpleUrl);
    

    Make sure to wrap your Javascript code within the <script> tag.

    Squarespace Page Header Code Injection

    Testing the Result

    The meta tags should be injected into the <head> section of your website. You can test the Simple URL by retrieving the complete URL from the meta tag using your browser inspector.

    Retrieving the og:image URL from the browser inspector

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

    auto-generated custom Open Graph image

    If you have subscribed to a paid Squarespace plan, you can set your trial site’s availability from private to public and use an Open Graph image checker to preview the Open Graph image.

    Here are some options of Open Graph image checker that you can use for free:

    It should display your Open Graph image similar to this:

    check OG image using Facebook Sharing Debugger

    What’s Next

    Other than setting up an automation to generate custom Open Graph images for your posts, you can also apply a template to your video contents automatically using Bannerbear’s Video Generation API to ensure branding consistency.

    The process of creating a template is similar but you will need to make HTTP requests or use a SDK to use the API. If you’re interested, you can try it out following these tutorials:

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

    Top 5 Automated UI Testing Tools to Make Testing Faster in 2022

    Speed is key in 2022, test and ship fast. These five tools will get your tests running faster than ever. Find out more about how they can help to make sure your application functions as expected in this article.

    How to Build a Video Thumbnail Generator Tool Using React and Bannerbear

    Improve users' workflow by integrating a video thumbnail generator that adds text to an image uploaded by them using Bannerbear API.

    How to Convert Audio to Video for Youtube Upload Using FFmpeg

    Learn how to convert music, podcasts, and audiobooks to videos with a still background image to upload these types of audio content to Youtube.

    Follow the Journey

    Sign up for our once a fortnight newsletter update on new Bannerbear features and our business journey

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