SEO: Page
This section covers the SEO settings for the page and how they can affect your rankings
From an SEO perspective, the pages in your app consist of three important data areas:
- The URL, or the web address your page tells both your users and search engines what the page is about.
- Metadata is data "about" the page: its title, description and social media images.
- Content is the actual information on your page – the design, text, images and videos that both your users and search engines see
Let's explore each of these areas.
The URL is a part of the HTTP protocol – a big part of how the internet works. If you want to learn more about the technical side of how the HTTP protocol works, you can check out the article section below:
The URL is the humanly readable "address" of the page. It's used by search engines to isolate content: for example, one page in your app may be about sports shoes and another about horses: they would both have a unique URL and can show up differently in search results.
URLs serve a function both for search engines and your users; they are the humanly readable way to access the page, and as such should be clear and understandable.
For example, compare the URLs below:
❌ https://www.my-bubble-application.com/mcakos/najsdnf
✅ https://www.my-bubble-application.com/product/runnning-shoes
The first one is not easy to decipher, but the last one gives an easily understandable indication of what the page is about.
Bubble doesn't use page folders in the traditional sense, but instead relies on dynamic pages. These are pages where the content is dynamically generated from database data, and it can be used to set up unique pages for each database thing. Read more about this in the section below.
Every page lets you set a type of content. This tells Bubble what kind of data you want to load onto the page and it's how you set up dynamic pages with unique URLs.
Let's say that you have an eCommerce store. On a page called products you want to dynamically show different products from your database. The data type is called Product.
In the example above, we've set the Type of content to the Product data type. This means Bubble is ready to accept a Product thing that we'll pass through the URL. There are two ways in which Bubble will recognize a page thing in the URL:
- The thing's unique ID
- The thing's slug
The unique ID is automatically created whenever a database thing is created, and as such, that field is never empty. The slug on the other hand, can be left empty and can be added or modified as needed. Let's say we have a Baseball cap product in our database – we could give that the slug baseball-cap to give that product its own unique URL:
https/www.my-bubble-application/product/baseball-cap
This is a nice, humanly readable URL that makes it clear to your users what the page is all about. But search engines see this in the same way: while you only have one page (product), search engines considers the slug a page on its own. Using the slug, you can set up just one page, but potentially hundreds, thousands or even millions of unique URLs that each contain unique content.
For example, if your eCommerce was selling sports goods, every product in your inventory would get its own unique URL and could be found in search engines. Instead of searching for your app, new customers would find your site by searching for things like baseball caps and golf equipment.
If you leave the slug field empty, Bubble defaults to using the things Unique ID instead.
Selecting a value the Backup field for URL will instruct Bubble to use another field as a backup in case the slug field is empty (in this case the name) – but there's a caveat: since the URL needs to be unique (and the name field does not), Bubble will append the unique ID to a web-friendly version of the name. The result might look something like this:
https://my-bubble-application.com/product/product-1-1676895473036x923438355480530400
So if you want readable, SEO-friendly URLs, we recommend making sure the slug field is never empty.
Also keep in mind that URLs that keep changing will need to be re-indexed by search engines, and they might consider it new – or even duplicate – content, which hurts your ranking. It's best to employ a strategy where you keep your URLs as consistent as possible:
- Once set, don't change the slug field on a database thing
- Don't change the names of your pages
Keep in mind that these are not absolute rules, but rather guidelines to incorporate within your overall SEO strategy. Sometimes, changes are needed, and that's fine.
If you decide to change the URL of a page (page name or thing's slug), you can inform search engines that the content has moved by using a 301 redirection.
Metadata is a data about the page. It's not necessarily visible on the page itself, but is part of the page's code and helps search engines understand what the page is about. Information contained within a page's metadata is also often visible in the preview that search engines provide of a given page in the result.
You can think of metadata then serving two purposes:
- One is to "convince" the search engine that your page is a relevant result for a given search by including relevant keywords
- The second is to make potential visitors want to click your page instead of another page in those same search results
So while you should have the search engine robots in mind when setting up your metadata, you should also keep in mind that in the end, your potential readers are human beings that will also judge the quality of your page in terms of its title, description and structure.
Here's how the title and description Bubble's main page looks in the desktop and mobile version of a Google search.
Optimally, all your pages should have unique metadata, so that search engines and users understand the difference between them and they don't end up competing with each other.
Metadata is a wide field of different ways you can standardize data to communicate to search engines what your page is about, but the most common fields consist of the following:
The page title is short representation of your page's content. It's usually displayed prominently in search engine results and it's visible to your user's in the browser tab. When crafting a page title, ensure it is descriptive, relevant, and includes your target keywords.
The SEO title is an optimized version of your page title, specifically tailored for search engines. It is often the first line of text that appears in search engine results and should be engaging and relevant to your content. To maximize its effectiveness, keep it under 60 characters and incorporate the primary keywords for this page.
The description, or meta description, is a brief summary of your webpage's content that often appears beneath the SEO title in search engine results. This snippet should be informative, captivating, and entice users to click on your link. Aim for a length of 150-160 characters and include relevant keywords.
Search engines such as Google sometimes choose to display other content from the page in the search results instead of the description if it thinks its more relevant; as such, the description is still used by the crawler to understand the content, but it's not always visible in the search results.
The social media image is the visual representation of your content when it's shared on social platforms like Facebook and Twitter. Select an image that accurately represents your content and is visually appealing and keep in mind that posts that include an image will take up more space on a social media wall, which can lead to a higher click-through rate.
The page HTML header can contain various tags and information that help search engines understand and index your content.
These tags include:
- additional meta tags
- Open Graph tags
- structured data
- canonical tags
- language tags
Using the HTML header for SEO purposes is among the more advanced strategies and is outside the scope of this guide, but there are many tutorials and Youtube videos available that go in-depth on this topic.
Some metadata (such as Schema.org Microdata and JSON-LD (JavaScript Object Notation for Linked Data) can also be placed in the body of your page, which gives access to a broader set of data sources. You can do this by placing an HTML element on the page. This is getting into fairly advanced SEO territory, and is outside the scope of this article.
First, keep in mind that there are separate app settings and page settings. The metadata we discuss in this article relates to the page, and can be different on every page in your app. They can also contain dynamic content, as we'll explore later in the article.
Since the metadata we want to work with is stored in a page basis, we first need to navigate to the page that we want to work with in the Bubble editor. Use the page navigator to open the page.
The settings are found in the element inspector of the page itself. You can access this by double-clicking the page in the editor, or clicking the name of the page at the top of the element tree (such as page index).
All the metadata for the page can be edited on the
Each of the fields can be filled with static content, or you can populate it with dynamic content from the data on the page.
The metadata fields accept dynamic content from the following data sources:
- Current User
- Current page thing
- Do a search for
- Get an option
- Arbitrary text
- Get data from page URL
- App text
- Arbitrary date/time
In addition, it accepts static text values so that you can give any page the title and description you want without referencing any data sources.
As we explored in our Introduction to SEO, the content of your page remains one of the most important parts of your SEO. Generally, the rule of thumb is as simple as it is challenging: the content should be high-quality.
While it's outside of the scope of this guide to try to determine what quality content is, there are still guidelines that can help you gain a higher ranking.
The design of the page matters from a SEO perspective too: while search engines may not care whether your app looks good per se, it cares that it's accessible:
- Organize your app with a logical structure and provide clear, easy-to-use navigation menus
- Ensure good contrast between page elements like text and background to improve readability. For instance, dark grey text on a light grey background may be challenging for visually impaired users
- Size and distribute elements in a way that makes it easy for all users to interact with them. For example two buttons that are too small or placed too closely together can make navigation difficult
- Add alt text to your images: this not only tells search engines what the images are, but it helps visually impaired users understand your content and shows a text if the image doesn't load
- Use descriptive link texts: search engines look at the label of a link when they try to understand what the link is about. Instead of just using the name of the page you are linking to, you can use the opportunity to describe it from another angle. For example, a page with the title SEO tutorial could have a link that says Learn SEO basics.
The easiest way for a search engine to understand the content of the page is to scan its text for keywords.
- Write for people, not for bots
- Use keywords in a natural way: keywords are the corner stone of your content; it's basically what the user wants to find. You should use keywords in your text content repeatedly, but not in an exaggerated way (known as keyword stuffing). Make the text useful and enjoyable, and make sure to mention keywords where it makes sense.
- Use headers: Headers (such as
<h1>,<h2>, etc) is how search engines understand your pages structure. Split your text into sections and use a clear and structured hierarchy. You can enable tags for text elements by going to Settings - SEO / metatags and checking Expose the type of tags for text elements. - Link pages together: when relevant, place links within your text to other pages in your app or even to external pages.
Mix media on your pages where possible. Use a mix of text, images and video to make it as useful a page for your users as possible. Keep in mind that some types of media can increase the download size of your page.
Search engines also consider two more factors when evaluating your content:
- Total page download size: A lightweight page can achieve better rankings, as it is considered more user-friendly, particularly for mobile devices. The things that typically add to its total size is large images, fonts, external Javascript files (sometimes added by plugins). In essence, the less stuff you add to a page, the lighter it is.
- Total page load time: The time it takes from the page is opened until the content is finished rendering on the screen is also an important factor in your ranking. Avoid placing heavy, complex searches and workflows on page load, and reduce the page's total size to optimize it for fast loading.
Bubble has a base loading time on all pages that we are continually working to optimize.
Last modified 1mo ago