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:
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
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!