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

Self-hosted CMS gives technical users more control and flexibility over the performance and appearance of their websites. In this tutorial, let's learn how to add dynamically generated Open Graph images automatically to a self-hosted Ghost website.
by Josephine Loo · October 2022

Contents

    Ghost is a free and open-source blogging platform designed to simplify the process of online publishing regardless of the type of content. Similar to WordPress, users can choose between managed hosting and self-hosting depending on their publication needs.

    Ghost(Pro) managed hosting enables users with less technical knowledge to build their websites within seconds without worrying about the technical aspects of a website. However, a self-hosted Ghost website offers more control and flexibility as users are able to modify the core code. This enables users to do some advanced customizations which can only be done by modifying the code, including adding dynamically generated custom Open Graph images to different articles automatically.

    In this tutorial, we’ll learn how to add auto-generated custom Open Graph images to Ghost using Bannerbear to show an image like the example below for your articles on social media:

    ghost-og-image-twitter.png

    ❗️ Note : This tutorial is only for self-hosted Ghost websites as Ghost(Pro) websites created using the managed hosting service do not offer the ability to modify the core code, as stated in Ghost(Pro) vs Self-hosting.

    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" />
    

    When you’re using Ghost, you can upload an Open Graph image for your article from the article editor.

    uploading OG image in Ghost editor

    If an Open Graph image is not uploaded, Ghost will use the featured image of your article automatically and it will look like this when the article is shared on social media:

    screenshot of an OG image on Twitter

    Using a Custom Open Graph Image

    If you are publishing various types of content on your website, you can use a custom Open Graph image to highlight the category of the article to make your social media post more appealing to its target readers. Besides that, you can also add other information like the author’s name and the article description to the image.

    Example 1

    auto-generated custom OG image-example 1

    Example 2

    auto-generated custom OG image-example 2

    Example 3

    auto-generated custom OG image-example 3

    Each article will have a unique Open Graph image. That being said, you do not need to create and upload the image manually for every article as it can be fully automated using Bannerbear by modifying the core code.

    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 Ghost using Bannerbear, we will use the easiest method, which is using a Simple URL.

    By using a Simple URL in the meta tags, Open Graph images will 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 this tutorial's Open Graph Image Template that is created based on Ghost's default theme, Casper.

    To display the title , description/excerpt, author’s name , category, and featured image of an article on the Open Graph image, we will need these dynamic objects in the template:

    • Text - title, description, author, category
    • Image - image_container

    Bannerbear template design editor

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

    Step 2. Go to “structure-data.js”

    Meta tags will be generated and inserted into the <head> section of a Ghost website via the writeMetaTag() function in “current/core/frontend/helpers/ghost_head.js”.

    current/core/frontend/helpers/ghost_head.js

    These meta tags including the og:image and twitter:image tags will be generated based on the data retrieved using getStructuredData() from “current/core/frontend/meta/structured-data.js”.

    current/core/frontend/meta/structured-data.js

    As seen from line 21 from the screenshot above, metaData.ogImage.url or metaData.coverImage.url will be assigned as the default Open Graph image. To use a custom Open Graph image that is generated dynamically using Bannerbear, we will need to replace these values with a Simple URL.

    Step 3. 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.

    a screenshot of Bannerbear template menu page

    Next, we can add the article title, description, author’s name, category, and featured image URL following the layer/attribute/data format. The values of these attributes can be retrieved from the metaData object passed to the getStructuredData() function.

    title: title/text/${encodeURIComponent(metaData.ogTitle)}

    description: description/text/${encodeURIComponent(metaData.ogDescription)}

    author: author/text/${metaData.authorName}

    category: category/text/${metaData.keywords}

    image: image_container/image_url/${metaData.coverImage.url}

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

    https://ondemand.bannerbear.com/simpleurl/ley9O0B2Zv2B4GjRDY/image/title/text/${encodeURIComponent(metaData.ogTitle)}/description/text/${encodeURIComponent(metaData.ogDescription)}/author/text/${metaData.authorName}/category/text/${metaData.keywords}/image_container/image_url/${metaData.coverImage.url}
    

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

    Step 4. Assign the Simple URL as the Open Graph Image

    Create a variable ogImageUrl to hold the value of the Open Graph image URL. As we will be generating and adding custom Open Graph images to articles only, we will assign the Simple URL as the value for ogImageUrl only when metaData.ogType is article.

    let ogImageUrl = metaData.ogImage.url || metaData.coverImage.url;
    
    if(metaData.ogType === "article"){
    	ogImageUrl = `https://ondemand.bannerbear.com/simpleurl/ley9O0B2Zv2B4GjRDY/image/title/text/${encodeURIComponent(metaData.ogTitle)}/description/text/${encodeURIComponent(metaData.ogDescription)}/author/text/${metaData.authorName}/category/text/${metaData.keywords}/image_container/image_url/${metaData.coverImage.url}`;
    }
    

    current/core/frontend/meta/structured-data.js

    Lastly, change the values of structuredData[”og:image”] and structuredData[”twitter:image”] to ogImageUrl.

    current/core/frontend/meta/structured-data.js

    Testing the Result

    Deploy the code and 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.

    a screenshot of the browser inspector

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

    auto-generated custom OG image-example 4

    If you want to make sure that the custom Open Graph image auto-generation has been set up correctly, you can use an Open Graph image tester to preview the image.

    Here are some of them that are free:

    You should be able to see a preview of the Open Graph image:

    using Facebook Sharing Debugger to preview the image

    🐻 Bear Tips: If you are developing your Ghost website locally, you can install the Localhost Open Graph Checker extension on Chrome to give the Open Graph image a quick test. However, do note that the featured image will be inaccessible due to the localhost URL.

    What’s Next

    Other than Ghost, you can use Bannerbear to generate custom Open Graph images automatically for other CMSs like WordPress, Wix, Squarespace, etc. as well. If you are also exploring them to find the best option to suit your publication needs or currently using them, you can read how to add auto-generated Open Graph images to these platforms from the tutorials below:

    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 Ghost Using Bannerbear
    How to Add Auto-Generated Custom Open Graph Images to Ghost Using Bannerbear