Create dynamic SEO/FB Image and Description from state

Need help
1

I have a one page app I’ve built with groups that display multiple data sets and I need to be able to more dynamically choose the SEO/FB image and description based on what is currently open.

For example, my app has Events, Clubs and Users who all have their own information and profile image. If a “Club” is being displayed and I share a link that will open my one page app directly to that Club’s page, I would like the SEO/FB Image and Description to be from that Club’s description and profile image. At the same time, if am sharing the profile of a User with a link that takes you directly to that User’s profile in my one page app, I would like that the SEO/FB Image and Description to show the User’s profile photo and description.

My problem arises in trying to pull the SEO/FB Image dynamically from these different objects in a one page app. I have tried the two following scenarios to no victory at this point:

  1. Setting the SEO description and SEO image conditionally on the page. However, the option to set these conditionally is not present.
    Screenshot 2024-04-04 at 1.04.02 PM

  2. Creating a state that holds the image and another that holds the text I want to use for the SEO/FB Image and Description, but I cannot pull information from a state into the field “Image (For FB)” or “Description (for SEO / FB).” For example, if a Club’s profile is visible on my one page app and I share the URL, the Image (for FB) would be that Club’s profile image. But if I have a User’s profile visible instead and I share the URL, the Image (for FB) would be that USer’s profile image. But of course Club and User are two different data sets, so I cannot easily “do a search for” in the Image (for FB) field to set this as dynamically as I need.

Any help here? Am I completely misunderstanding these fields and how to interact with them?

2

For meta information, just use the page settings on the first tab.

To imitate your conditionals:

DEFAULT META > Defaulting to: OTHER META > Defaulting to: OTHER META

Hope this helps.

Join my Discord for more tips & real-time help!

4

Thanks for the quick reply! I’m not entirely sure what most of what you said means. One of my understandings of the SEO field “Image (for FB)” is that this is the image that shows up when someone texts someone a link to my website. So, I want the image and description to be handled stronger with conditionals.

Not sure what DEFAULT META means. or “the first tab.” Sorry!

5

I had success with a free API called Tailgraph. You can use dynamic expressions in the SEO Image field in Bubble to make the image change based on the page in your app.

1 Like
6

Very nice @NexradJosh, like that idea as well.

This is what I was suggesting @runthis

1 Like
7

Thanks @NexradJosh! I’ll look into that soon!

@GH5T, thanks for making that video! Super helpful to understand your idea. However, each Event, Club and User has their own profile photo. So I would need to dynamically be able to change what you have set to “some image 1” and “some image 2” as they will not be static images. Not sure if I’m able to do that with your route?

8

You can go that route with dynamic data. Your filters would change.

9

You can dynamically set SEO/FB image and description by showing different content based on what’s displayed. Another option is to use server-side rendering to fetch data for SEO/FB metadata based on the current page content.

10

This topic was automatically closed after 70 days. New replies are no longer allowed.