Autogenerate Open Graph Images with Tailgraph

Do not index

On integrations.directory, there is a page for each integration. For click through rate (CTR) purposes, a well-optimized and customized preview (open graph image) of your URL can help improve the amount of people who will click on your post from social media.

Since I have over 600 pages for integrations, I’ll use integrations.directory to search for an integration that will enable me to create the images dynamically and embed those images in Bubble (the tool we use for integrations directory!)

1. Finding an integration to generate our open graph images

With our goals in mind, let’s head over to integrations directory and browse the directory to look for a solution.

Let’s try a search for “open graph” to see what comes up.

Looks like we have two options, let’s go to the solution that enables us to create branded social images

It’s free and we can connect via API. The next part of the tutorial will walk through using Tailgraph and how to add our images to Bubble but we can use any extendable no-code platform with this particular integration.

2. Reviewing TailGraph’s documentation and setting up our query

Looks like we have a few parameters we can add from TailGraph’s docs

We can also build our query through TailGraph’s visual editor. In this tutorial we tried the visual editor

Once we build our query we can copy the string it outputs

3. Adding our dynamic image to Bubble

Then paste it into the SEO image section of our page in Bubble

And replace any text inputs with dynamic text based on information from our Bubble page

In my case here’s what the generated open graph image looks like for the generated photos integration

And that’s a wrap! This post walked through creating open graph images dynamically and automatically. If you want to find more ways to extend your applications, be sure to subscribe to the integrations directory newsletter where we share new integrations each week.