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
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:
The first one is not easy to decipher, but the last one gives an easily understandable indication of what the page is about.
Can I set up page folders?
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.
Dynamic pages
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
The thing's
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:
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.
What happens if the slug is empty?
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:
So if you want readable, SEO-friendly URLs, we recommend making sure the slug field is never empty.
Changing URLs
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.
Metadata
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.
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:
Page Title
The page title is short representation of your page's content. It's often 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. Google may use this field, the SEO title below or craft its own title to represent the content in a given search.
If you have experience working with HTML, this field defines the page title as illustrated with the code below:
Title (for SEO / FB)
The Title (for SEO / FB) defines the OpenGraph title. If you have experience working with OpenGraph, this represents the fields below:
This is essentially an optimized version of your page title, specifically tailored for search engines and social media sharing. 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.
Search engines may use this field, the page title above or craft its own title to represent the content in a given search.
Description (for SEO / FB)
The Description (for SEO / FB) defines the OpenGraph description. If you have experience working with OpenGraph, this represents the fields below:
This is an optimized summary of your page, designed for search engines and social media sharing. It typically appears beneath the title in search engine results or as a preview when the page is shared on platforms like Facebook or X. To make it effective, keep it concise (under 160 characters) and ensure it clearly conveys the core message of the page.
Search engines may use this field, extract a description from the page content, or generate their own.
Social Media Image
The social media image is the visual representation of your content when it's shared on social platforms like Facebook and X. 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.
Example (OpenGraph)
The metadata that you add in the Title (for SEO / FB) and Description (for SEO / FB) are used by social media and other sharing platforms to generate a preview of the content that is shared. How exactly it ends up looking can vary between platforms and is subject to change.
The example below shows how a social media post of Bubble's homepage would look on Facebook:
From top to bottom in this example, we are seeing:
The social media image (blue background, text and logo in one image)
The domain (bubble.io)
The OpenGraph title (as defined in Title (for SEO / FB) field)
The OpenGraph description (as defined in Description (for SEO / FB) field)
Page HTML Header and HTML elements
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
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.
Metadata in the page body
Some metadata (such as Microdata and (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 on the page. This is getting into fairly advanced SEO territory, and is outside the scope of this article.
Metadata settings in Bubble
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.
Accessing a page's metadata
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 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 (such as page index).
Each of the fields can be filled with static content, or you can populate it with dynamic content from the data on the page.
Populating metadata with dynamic content
The metadata fields accept dynamic content from the following data sources:
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.
Content
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.
Design
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.
Text
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, to other pages in your app or even to external pages.
Media
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.
Page load
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 updated
Was this helpful?
