Dynamic URL preview metadata single page app

[laurieannismorgan]

Hi folks, I’m a code newbie and a no code newbie, but I’ve made some good progress building my single page application https://interconnect3d.com/. I need help figuring out how to dynamically change the URL previews for social media sharing purposes, depending on the current view, which I have set as a URL Parameter (“view” is the key, and “List”, “Post”, or “Profile” are the Option Set values.)

What I want is – when my users copy and paste a link offsite to either their Profile (a data Type) or to any Post (another data Type) – for the current view Type’s Image (Profile or Post thumbnail images that are saved to the database) to display instead of the app’s default Image, and for the Title of the current view’s Title to be appended to the app’s title (which I have set in both the SEO/Metadata tab of my app’s Settings, in the Social Media/Open Graph Settings section, and on the Page element itself) as shown here:

A link copied and pasted of the List view is correctly showing the whole app’s default URL preview Image and Title by default as desired, but the URL preview Image and Title for the other views are currently working only for one or the other, Profile or Post data type (as shown above), because I can’t figure out how to make an “if / else” or “or” expression in the Page’s appearance settings to handle either case, whether retrieving the Image through the Get Post from Page URL method “or” Get Profile from Page URL as shown here:

I have searched and read and reread many a forum post about OG (Open Graph) SEO metadata and URL Previews, Dynamic Page Title and Descriptions, with no luck. I tried a Conditional on the element to change the Page’s Title, but at least one of the forum posts from Bubble official team seems to indicate that is not intended to work, and it did not.

Just to be clear about what I’ve already tried/investigated, these links seemed at least tangentially related to what I am trying to do. Any help is greatly appreciated!

Adding OG Tags to Page header

Well it sounds like we should fix this and have the page thing’s id in the URL then. I’ll push that.

Dynamic Page Descriptions or Facebook Open Graph

When you say “Current Page’s Event”, i’m assuming we can use “When Page Is Loaded” event, then add the dynamic data into the current page’s thing. I still do not see dynamic data when using the Current Page thing in the “Page HTML Header”. Is the event being triggered after the static HTML header is already generated? Is their an earlier page event that can be triggered? I think the static HTML (and thus the page header) has already been written. Here is my sample app https://bubble.io/page?n…

Creating Title and meta descriptions for dynamic product descriptions

Hi, How can I create separate Header titles and meta description for individual products on a dynamic website setup. Right now, I am unable to edit the headers and meta descriptions which is a major problem for SEO purposes when driving traffic for individual products. Any help would be greatly appreciated! Thank you!

Editing to add one more forum post I have read through:

How to change the thumbnail for social sharing

Does anyone know how to control the thumbnails when a URL is shared on social media? And can we have different thumbnails for URL or just one URL which is used for all the URLs?

[boston85719]

Need to setup the on page SEO functions properly for an SPA, which is complicated and not possible to get right if attempting to do so for more than 2 or at most 3 data types because of the way that functionality works in Bubble as well as the systems that use the information to display data. If everything is waiting for the page to load, well, slow loading pages are not fast enough for the service to pick up the details to display properly.

To do this properly you will need to use ‘inline conditionals’ in the page seo settings. You do this with :formatted as text operator which opens up 2 options, yes or no, and in those fields you then add expressions to point toward correct information, and in the event you have more than 2 types, you need to add another format as text operator to get basically 3 conditionals in one expression so as to first verify if the URL parameter value is List, which if Yes, show the List details, and if No, need expression to determine if the URL parameter value is Post, and if yes, show the Post information and if No show the Profile information.

All of this relies on speed at which these details are available on page load, which would be immediate with use of URL data. What you need to make sure of, is that when the View parameter value is Post, there is a URL parameter to determine which post it is…problem with Bubble though is they no longer allow us to use URL data in the SEO page settings, and we need to use either the ‘current page thing’ (not possible in your situation) or use a group on the page, which means, you need a group to look at the URL value to set the datasource of the group and use the group in the SEO page settings to populate the correct SEO details in the on page SEO settings, so a group for Profile and another group for Post.

If you wanted to get more SEO benefits for the List then you need a way to extract information from it to show SEO data that is useful, so if the List is for a specific city, need to show which city, so it could read ‘showing profiles in City’.

All of these things are possible, they are just complicated and takes a lot of effort to get right.

AND if you want to really do it right, you need structured data as well in the HTML page header section, which again, is possible for multiple data types, but it is just a bit complicated to do right.

[laurieannismorgan]

I am gradually figuring this out as I read and re-read your reply, thank you! I think I understand, just need to wrap my head around the yes and no options for each.

I will reply again when I have it working or if I have another question, I just wanted to let you know that your effort to explain this is very much appreciated!

[laurieannismorgan]

Thank you so much for spelling this all out for me. I had to read and re-read a number of times to understand but you explained it very clearly.

The solution (which, as you explained, won’t work if the data is not made available to the service fast enough) was to nest one “Get data from page URL :formatted as text” expression inside another with the yes values as the data source for each.

Fortunately even though getting a Profile’s image by searching for the Profile’s author’s image seems to be too slow, at least the default app SE0 image loads instead, and getting the Profile author’s name directly from the URL works fast enough.

Can’t thank you enough for helping me understand this better! It is quite convoluted.