Is Deep-Linking possible in a bubble SPA?

Hi All

Finished my first app!!! https://app.shortstays.io

It’s an SPA and I can’t seem to figure out how to create deep linking within.
Currently, the link preview shows the primary website which I do not want.
Example: Short Stays | Invest in Real Estate and begin building wealth

Can anyone help? Happy to buy you coffee or a bite in exchange!

What is deep linking?

There are a few ways. Folks often pass a URL parameter that holds the intent of where you wish to link into your SPA. Then on page load go to that internal screen.

Eg https://xxxxxx?page=home

Good luck🙂

You can also use URL Path segments as a list and pass arbitrary text to deep link up to any level you want e.g. app.domain.io/path1/path2/path3 etc…

I use this method throughout my SPA apps and set a conditional on the relevant group to be visible when Get data from page url - Path segments as a list - item # (referring to which item in the url path e.g. the page name is item # 1) is x, this group is visible

1 Like

Hey,how many plugins do you use ?

Thanks for responding everyone.

Deep Linking is working (kinda) but I’ve narrowed it down to the preview always reverting to the main website.

Example:

https://shortstays.io is our main website
Short Stays | Invest in Real Estate and begin building wealth is the deep link

If you paste it, you see a preview which shows the same preview as the main website.

Anyone have any idea if it’s possible for a Single Page app to display the correct preview?

Anyone able to help with the preview question?

Since the preview isn’t generated by Bubble - rather it’s generated by the viewer’s browser/app using the page’s metadata for SEO - , I think you’ll have to find a way to modulate that data on a group level based on the URL Parameters.

Maybe some of those keywords will get you some where. I’d love to hear if you find a solution.

Honestly, I’m not aware of a way to do something like that. Maybe there’s a plugin, HTML, or some other solution. Otherwise, maybe this should be a feature request. I think the value is completely apparent. SPA’s are becoming increasingly the norm and being able to have search engines grab the right data dynamically will be really important.

Quite a few good ideas in this thread. Personally i like the navigation of multi page apps but speed of single page.

To get the best of both worlds create a data type called navigation with a name & slug field and set your page type to “navigation”.

For this example I’m going to assume it’s built on the index page and you have the following “pages” in your SPA - dashboard, analytics, profile, create post. I’ll also assume dashboard is your “home page” in your SPA.

Each “page” in your SPA will have a record in the navigation data as well as a slug.

Have a do only when true flow that says when current page navigation is empty - go to page index - data to send = do search for navigation where slug = dashboard. :first item
(This ensures that you never have an empty value)

On your menu you can have an RG of Navigation data items or static but when it’s clicked and time to change “pages” in your SPA you’ll use the same logic as above.

Analytics is clicked you’ll navigate with

go to page index - data to send = do search for navigation where slug = analytics. :first item

For showing and hiding “pages” (groups) in the SPA your conditional will look like

if current page navigation slug is analytics - this group is visible (for analytics page)

To pass data for data required “pages” such as viewing a post on the post page you’ll use additional /paths as @S2294 suggested above OR ?params as @lindsay_knowcode suggested.

Personally I prefer params as it’s cleaner to setup in my opinion.

This setup does a few things.

  1. Allows for forward and back arrow navigation of your SPA
  2. Allows you to send direct deep links of your app in a similar fashion of a multi page app.
  3. Allows your site to still be indexed by google correctly.
  4. Maintain URLS like website.com/path/path

Also bonus note here: each one of my “pages” in a SPA are reuseable elements. This allows for cleaner dev process, reduced workflow clutter, and keeps bubble editor running fast on very large SPA builds.

I can drop a demo link of this if you need.

8 Likes

This is sage advise. I never thought about doing things this way since my clients apps don’t need SEO but my next project does.

Also helps with redirects using the domain. I currently use a hacky way by using the 404 page as the gate master for redirection.

1 Like

:sob::sob::sob::sob::sob::sob::sob:

You just inspired a rebuild of my giant SPA app.

I used “p=” and “tab=” parameters in the URL with “if get url ‘p=’ element is visible” conditional logic on each element and that allowed for deeplinking, forward and back navigation, but my site is definitely not indexed by Google correctly.

Wonderful advice!

1 Like

:raised_hands: if you want an audit or guidance while rebuilding feel free to shoot me a message.

Basically social media apps and texting apps like whatsapp and message are scraping this site looking for meta tags, so if they’re not in place on page load, or have the wrong values, they might use what’s there. They might not wait for the SPA to load.

I use Yoast for my main website and primary domain but not the app which is using a subdomain.
But every social media / preview scraper works differently. Aside from having the meta tags correct from the back end, it’s definitely a challenge.

Has anyone figured out how to do this?

I found that there were default settings within bubble that forced static image and text. I removed it and now get a dull preview but still no idea how to force each url to pull a primary image and text from each unique url

If you use these settings across the board, every URL uses them in their preview.

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