Automatically generate your Bubble Open Graph Images with Tailgraph

[lola]

Hey all! I’m currently using TailGraph to create OpenGraph images dynamically for an app that I’m working on. It’s a free API that is based on TailWind and is helpful if you’re implementing any sort of programmatic SEO on your site.

Here’s a short how-to on using it in a Bubble app, and if anyone has questions about using it in Bubble happy to share what I know.

1/First, go to Tailgraph it has a visual editor, so you can configure the settings there

2/ Next, copy the string it outputs

3/Then paste it into the SEO image section of your page in Bubble

4/ And replace any text inputs with dynamic text specific to your page

In the case of the site I’m working on, here’s how it all looks like when it’s done

Below is a full tutorial for anyone interested in a bit more context

Autogenerate Open Graph Images with Tailgraph

[cjrb]

Hey @lola this looks great! Please could you share how you added an image from Bubble in as the Graph Image background? As it doesn’t seem to be working for me - the image is blank.

And I get this error if I try to load the image part of the URL from what is generated by Tailgraph:

Thanks!

[lola]

Sure! First, you’ll want to upload the image into your Bubble database and then when you do, you’ll see an S3 link for it.

Then you’ll copy that link which should look something like the below //s3.amazonaws.com/appforest_uf/f1663821663449x913982332927884900/IB%202%20(1).png

and when you paste it in your browser you’ll get something like the below which you can use. https://s3.amazonaws.com/appforest_uf/f1663821663449x913982332927884900/IB%202%20(1).png

[insalman360]

Hey Lola, can it be made dynamic like what happens on facebook/twitter or other social media platforms? instead of uploading the logo image to the database just previewing it directly? and everything dynamic?