Gain SEO superpowers with Bubble + Webflow: A guide on setting up your domain structure

Let's face it. Bubble is currently not great at SEO. While this might not be an issue for just testing an MVP or for certain types of direct-sales driven B2B SaaS apps, this might seriously harm your growth model if it relies on traffic from search. Some companies even decided to ditch Bubble altogether due to SEO-related reasons. However, leaving Bubble is not a great option for most people either. So, how can we fix our search ranks without leaving Bubble?

Enter Bubble + Webflow

The best way I have seen so far is to move content- and keyword-heavy pages (e.g. landing page, blog, etc.) to an SEO friendlier platform like Weblfow or WIX or whatever, while keeping the core app on Bubble. I also really like building landing pages on Softr.io as its super quick. Like really quick. The domain setup might then look something like this:

Such a setup gives you the best of both worlds: Webflow’s SEO power and Bubble’s workflow and backend capabilities while keeping all pages on the same domain.

Setting this up is straightforward (note, you will however need a paid plan for Bubble and Webflow to connect your custom domains):

1) Recreate your landing page on Webflow (or any other SEO performant platform). Ok, this might take a bit of time 🤷‍♂️ , but if you can handle Bubble, you also should be able to handle Webflow 😉 The Webflow University has great tutorials, that should get you there in no time.

2) Set up your Bubble domain settings with a subdomain, e.g. app.yourdomain.io (you can ignore the Google Map Key prompt for now). This is the same process as setting up a normal domain in Bubble, but you just type “app.” or whatever in front of it. Bubble will then give you a set of DNS records:

3) Head over to your registrar (in my case NameCheap) and create the records Bubble provided you with (make sure you delete any old A or CNAME records):

4) Grab a coffee and wait 5 minutes or so. Then go back to Bubble and hit "Check my settings." If everything worked, you should now see something like this:

Note: you can also use a tool like Google's Dig to check if your changes have already been propagated to the web.

5) Deploy your app.

6) Your Bubble app should now be reachable under your new subdomain, app.yourdomain.io (or app.foodn.ch in my case).

7) Next, go to your new landing page’s editor on Webflow, navigate to project settings on the top left, go to the Hosting tab, and scroll down to Custom Domains. Here you can add your main domain (e.g. yourdomain.io). Webflow will then give you a set of DNS records:

8) Head back to your registrar and add the new records provided by Webflow.

9) Grab your second coffee and wait another 5 minutes or so. Then go back to Webflowand hit “Check Status.” If everything worked out, you should now see something like this:

10) Link the CTAs (Calls to Action) on your landing page (Webflow) to your subdomain (app.yourdomain.io, pointing to your Bubble app) and publish your Weflow app to the new domain (yourdomain.io).

That’s pretty much it :) You can now set up links between your landing page and app as needed. Overall, this should give you a pretty robust SEO setup. For other website builders like Wix, WordPress, Carrd, etc. the process should be pretty much the same. Btw, don’t forget to index your domain with Google once you’re done.

Last but not least

Shoutout to @NeilRyanPierce for aggregating bubbleHacks in his NoCode Visual Developer Aggregation Engine SpaceDesk (@SpaceDesk_io), alongside some of the best #NoCode resources out there.

Join the discussion

Do you want me to write about a specific topic, or do you have an awesome Bubble hack you would like to share? I'd love to hear from you, and I'm looking forward to engaging on Twitter (@DamianJanzi), in the post comments, or the Bubble forum. 

Also, if you like this newsletter why not forward it to a friend :)

That’s it. See you in two weeks.

Keep it simple!

Damian

👉 twitter.com/DamianJanzi

👉 bubblehacks.io