SEO guide for Bubble apps 📈

eurogar · August 9, 2019, 3:06pm

Hey all! As I’m turning my new Bubble app into a SEO-friendly website, I’ve been checking what my favourite SEO tool (SEO Site Checkup) says about it.

There are a few things for which I’d love to have control over, but it seems like some of the things are not so straight-forward to be fixed/improved directly on Bubble. Let’s brainstorm about some of them on how we could implement some fixes directly on Bubble.

If you think about it, this would mean we’d have a toolbox/tutorial/guidelines to improve the SEO of our apps built with Bubble. I’m not adding the “easy things” that Bubble automatically takes care of, but those ones that, by default, are usually an issue. The idea would be having a solution for all the reported issues. Let’s go:

Issue: Your page doesn’t contain any keywords.
Solution: Add this script to the header with the keywords you want to highlight:
<meta name="keywords" content="keyword 1, keyword 2, keyword 3...">

Issue: Your webpage doesn’t contain any H1 headings.
Solution: Use the option “HTML tag for this element (SEO)” in Bubble’s editor to set different texts as h1, h2, etc. (be careful, you don’t want to mess up your SEO with wrong headings!).

Issue: Your webpage is using “img” tags with empty or missing “alt” attribute.
Solution: Use the field “ALT tag” in Bubble’s editor. Hint: Use some keyword-rich text.

Issue: Your webpage is using inline CSS styles.
Solution: Rather than editing the style of each text to modify e.g. the colour, use a fixed style from the “Style” dropdown (in Bubble’s editor) and simply setup the corresponding style you chose in Bubble’s “Style” tab.

Issue: Your site either doesn’t have a favicon or this has not been referenced correctly.
Alert: I do have a favicon, so not sure what the problem is…

Issue: Your webpage doesn’t use any HTML compression (Deflate or GZIP).
Alert: This should be solved modifying the .htaccess of the website, but I’m not sure how to do this on Bubble. Basically, we’d need to add this to .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Issue: Your page uses more than 20 http requests, which can slow down page loading and negatively impact user experience.
Alert: We should always restrict the number of pages, CSS files, scripts, images and Flash files we use. However, there’s no easy way to check this with Bubble. Info about things that could be done, in this video.

Issue: It does not appear that you are caching your pages.
Alert: Is there a way to cache the websites, server-side?

Issue: Your website loading time is over the average loading speed.
Alert: There are a few suggestions, but not all of them are possible on Bubble, AFAIK:

Minimise HTTP requests --> Not sure how to check it, see above.
Use Gzip compression --> Not sure how to do it, see above.
Use HTTP caching --> Not sure how to do it, see above.
Move all CSS style rules into a single, external and minified CSS file --> Possible?
Minify all JS files and combine them into a single external JS file --> Possible?
Include external CSS files before external JS files --> Possible?
Place your JS scripts at the bottom of your page --> Possible?
Optimize images --> Compress and resize your images with some free online tools (I like Resize Image for resizing, and Compressor.io for compressing).
Reduce redirects --> Stay on top of this (Settings --> SEO / metatags --> 301 Redirections).
Reduce the number of plug-ins --> Make sure you uninstall unused plugins.

Issue: Your webpage doesn’t take the advantages of HTML Microdata specifications in order to markup structured data. View Google’s guide for getting started with microdata.
Alert: Any suggestions for this?

Issue: Your website is not using a custom 404 error page.
Solution: Make sure you add a 404 page to your project (although this is mandatory on Bubble, so you should be alright).

NOTE 1: For some points (h1 tags, keyword metatags, ALT attribute for images and 404 page), these analyse tools are not able to retrieve the right values even if they are implemented on the website, as they don’t detect some JS-related features when loading the pages.

NOTE 2: It could happen that for your specific cases, after running the SEO tool above, you find other things that you’re not doing properly.

The idea is that over time, with all our feedback, I can edit the steps above until we have a solution for all the possible issues. If you detect additional issues for which you may need help, just let me know and I’ll add it to the description (with the solution).

Hope this can be helpful for some of you and, eventually, we can have a guide of best SEO practices for Bubble apps. Thanks for your feedback beforehand!

dean.peters · August 9, 2019, 11:44pm

@eurogar First off, thank you so much for this post! Already made some changes based off of this so hopefully we will see an improvement in our SEO.

Re the keywords, are you adding them in the settings tab or are you adding them on the actual pages themselves?

eurogar · August 10, 2019, 1:02am

Thanks, @dean.peters! Glad you find this thread useful! You simply have to add that to the “Script/meta tags in header” section of the settings tab, and you’re good to go!

kontakt.youare · August 21, 2019, 3:04pm

Hi eurogar,

First of all, thank you very much for this post. It was really useful and we already created an account on SEO Site Checkup to check our improvements in SEO. We found almost the same issues that you wrote above.

However, we still have some issues regarding some aspects that I hope someone can clarify:

Keywords: Same as you, SEO Site Checkup couldn’t find any keyword. We first tried to set our keywords in our workflow, by adding a step “add/edit head tags” in the event “page is loaded”, but nothing happened. So, following your comment below the post, we added a list of keywords in the “script/meta tags in header” section of our settings. It actually worked for SEO Site Checkup, as they could finally find our keywords, but this list of keywords was also shown every time a page was changed on the website during page loads, so we had to step back and return to our old version.
Is it possible to add our keywords there, without this list to shortly be shown during page load?
Moreover, would it be possible to have different keywords for single pages on our website?
Heading: Here we really do not understand why SEO Site Checkup does not read our headings. We used the option “HTML tag for this element (SEO)” and we only set one h1 on every page, then h2 and so on, when needed. We tried to inspect the HTML code of our page and actually the titles we signed as h1 are effectively shown in the inspection as h1 tags.
Is it a common problem for Bubble sites with this tool or could we have possibly made another mistake?
Img tag: We set alt tags for all the images on our website. However, there is still an issue for the tool that signals that we still have empty or missing “alt” attributes. Checking the full list, the only link provided is for . We have not uploaded that image. We have seen that it is an issue that already happened to other users. Should we care about this or just leave it how it is?
Favicon: We also have a favicon, but the tool doesn’t check it
404 error page: We do have a customized error page but the tool doesn’t check it. Can this problem be solved anyhow?

Along with the issues you raised, we also found other problems.

The tool did not find any backlinks to our website. However, we certainly have one backlink. We also tested it on the referred website and the link works perfectly. It is a link on a page of a local DJ. Is it possible that the tool doesn’t see it because the page is not important enough, or could it be another problem?
We did not pass the social media test using SEO Site Checkup. We saw that bubble does not have a plugin with the recommended “addthis.com”, therefore we downloaded Bubble’s plugin “sharethis”. On Sharethis, we added the buttons that we wanted to include and received a code. We first tried to add this code in the plugin settings of the property ID field (headings), but we did not have any result. Then we added this code in our workflow by adding a step “add/edit head tags” in the event “page is loaded”, but still nothing happened.
Someone has experience with this plugin?

We would be really grateful if someone could solve some of our issues. Best luck to everyone and great success!

URexpert Team

jamesbond · August 30, 2019, 12:35pm

Brilliant thread @eurogar !
Just out of interest, did you manage to solve the issue in regards to Gzip?

system · October 18, 2019, 3:06pm

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