Bubble Docs
  • Introduction
  • New? Start Here
  • What is Bubble?
  • The Glossary
  • User manual
    • Getting started
      • What is Bubble?
      • Building your first app
        • Planning features
        • Database structure
        • Design and UX
        • eCommerce and payments
          • Shopping cart
          • Checkout page
          • One-time payments
          • Subscriptions
          • Marketplace
      • Creating and managing apps
      • The Bubble editor
        • Tabs and sections
          • Design tab
            • The element tree
            • The property editor
          • Workflow tab
          • Data tab
          • Styles tab
          • Plugins tab
          • Settings tab
            • Application settings
              • Custom headers/body
              • Visual settings
              • Social media sharing
              • Translating your app
              • Email settings
              • Collaboration
            • Custom domain and DNS
          • Logs tab
        • Tools
          • Key features
          • The search tool
          • The Issue Checker
          • The element tree
          • The element property editor
          • The debugger
          • Notes
        • Previewing your app
      • Transitioning to Bubble from...
        • JavaScript
        • HTML and CSS
        • SQL
    • Design
      • Elements
        • The element hierarchy
          • The element tree
        • The page
        • Containers
          • Groups
          • Repeating groups
          • Table elements
          • Popups
          • Floating groups
          • Group focus
        • Visual elements
        • Input forms
          • Text and numbers
          • Dates and time
          • File uploads
          • Selection controls
        • Reusable Elements
      • Styling
        • Color variables
        • Font variables
        • Styles
        • Custom Fonts
      • Responsive design
        • Building responsive pages
        • Legacy articles
          • The Basics (Legacy)
          • Building Responsive Pages (Legacy)
          • Migrating Legacy Pages
          • Tips When Designing (Legacy)
      • Templates
      • The Component Library
      • Importing from Figma
    • Data
      • The database
        • Data types and fields
        • Creating, saving and deleting data
        • Finding data
        • Displaying data
        • Protecting data with privacy rules
        • The database editor
        • Export/import data
          • Exporting data
          • Importing data (CSV)
        • Working with location data
        • Using Algolia
        • Database structure by app type
          • Marketplace Apps
          • Directory & Listings Apps
          • Social Network Apps
          • SaaS Apps
          • Project Management Apps
          • CRM Apps
          • Professional Services Apps
          • On-demand Apps
          • Documentation/ CMS Apps
          • Applicant Tracking System (ATS) Apps
          • Portfolio Apps
          • Gallery Apps
          • Online Store / Ecommerce Apps
          • Blog Apps
          • Messaging App
          • Dashboards
          • Building Block Apps
          • Bubble as a backend
      • Files
      • Images
      • Static data
        • App texts (translations)
        • Option sets
      • Temporary data
        • Custom states
        • URL parameters
      • User accounts
        • Authentication plugins
          • Facebook plugin
          • Fitbit plugin
          • Google plugin
          • Instagram plugin
          • LinkedIn plugin
          • Pinterest plugin
          • Slack plugin
          • Wistia plugin
          • YouTube plugin
        • Cookies set by Bubble
      • Time, dates and time zones
    • Logic
      • The frontend and backend
      • Workflows
        • Events
          • Frontend events
            • Recurring workflows
            • Custom events
          • Backend events
            • Database trigger events
        • Actions
        • API Workflows
      • Dynamic expressions
      • Conditions
      • Navigation
        • Single-page applications (SPA)
        • Multi-page applications
        • Page slugs
    • Workload
      • Understanding workload
        • Activity types
        • The workload calculation
        • Client-side and server-side processing
      • Tracking workload
        • Measuring
          • Using App Metrics
        • Monitoring
          • Workload notifications
          • Infinite recursion protection
      • Optimizing workload
        • Optimization framework
        • Optimization checklist
          • Page load
          • Searches
          • Workflows and actions
          • Backend workflows
        • Agency showcases
          • Minimum Studio
          • Neam
          • Support Dept
    • Security
      • Bubble's security features
      • Planning app security
      • Client-side and server-side
      • Bubble account security
      • App security
      • Page security
      • Database security
      • API security
        • API Connector security
        • Data API security
        • Workflow API security
      • Flusk
        • Overview
        • Flusk plan features
        • Getting started with Flusk
        • Flusk security tools
          • The Issues Explorer
          • Issue details
          • Tools and settings
            • Pages rating
            • Database rating
        • Flusk FAQ
      • Cookies
      • Security checklist
    • Publishing your app
      • Web app
      • Native mobile app
        • Global native mobile settings
        • iOS App Store
        • Google Play Store
        • Publishing FAQ
    • AI
      • Generate apps with AI
        • About AI app generation
      • AI page designer
      • Connect to AI agents
    • Maintenance
      • Collaborators
      • Version control
        • Best practices: Version control
        • Transitioning from the legacy version control
        • Terminology: Version control
        • Version Control (legacy)
      • Commenting
      • Database maintenance
        • Copying the database
        • Restoring database backups
        • Bulk operations
          • Bulk operation methods compared
        • Wiping change history
      • Performance
        • Hard limits
        • Capacity Usage (legacy)
        • Notes on queries
      • SEO
        • Introduction to SEO
        • SEO: App
        • SEO: Page
      • Testing and debugging
        • Introduction to testing and debugging
        • The debugger
        • The server logs
        • Supported browsers
      • API workflow scheduler
    • Integrations
      • API
        • Introduction to APIs
          • What is a RESTful API?
        • The Bubble API
          • Bubble API terminology
          • Authentication
            • How to authenticate
            • No authentication
            • As a User
            • As an admin
          • The Data API
            • Data API Privacy Rules
            • Data API endpoints
            • Data API requests
          • The Workflow API
            • Workflow API privacy rules
            • Workflow API endpoints
            • API workflows
              • Creating API workflows
              • Scheduling API workflows
              • Recursive API workflows
              • API Workflow Scheduler
              • Case: Stripe notifications
        • The API Connector
          • Authentication
          • API Connector security
          • API guides
            • OpenAI
              • Authentication
              • Calls
                • ChatGPT
                  • Chat
            • Google Translate
              • How to setup Google API keys
          • Streaming API
        • API security
        • Plugins that connect to APIs
        • API Glossary
      • Plugins
        • What Plugins Can Do
        • Installing and using Plugins
        • Authentication plugins
        • Special Plugins
      • SQL Database Connector
      • Bubble App Connector
      • WorkOS
        • WorkOS SSO
        • WorkOS API
    • Infrastructure
      • Sub-apps
      • Bubble release tiers
      • Hosting and scaling
        • How Bubble hosting works
        • Scaling with Bubble
        • CDN (Cloudflare)
        • Bubble app names
        • Domain and DNS
      • Compliance
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks and standards
    • Bubble for Enterprise
      • Hosting and infrastructure
        • Dedicated instance
          • The Dedicated editor experience
          • Technical specs
          • Main cluster dependencies
          • Customizable options
          • Migration process
            • Pre-migration
            • During migration
            • Post-migration
      • Security and compliance
        • Single sign-on (SSO)
        • GDPR
        • SOC 2 Type II
        • HIPAA
        • Other frameworks
        • Bubble's security features
      • Admin and collaboration
      • Priority support
      • Billing and Payment Guideline for Dedicated Instances
  • Core Reference
    • Using the core reference
    • Bubble's Interface
      • Design tab
      • Design tab (Legacy)
      • Workflow tab
      • Data tab
      • Styles tab
      • Styles tab (Legacy)
      • Plugins tab
      • Settings tab
      • Logs tab
      • Template tab
      • Toolbar
      • Top and context menu options
      • Deployment and version control
        • Deployment & Version Control Dropdown (legacy)
      • Notes
    • Elements
      • General properties
      • General properties (Legacy)
      • Styling properties
      • Styling Properties (Legacy)
      • Responsive Properties
      • Responsive Properties (Legacy)
      • Conditional formatting
      • States
      • Page Element
        • Page Element (Legacy)
      • Visual Elements
      • Containers
      • Container Layout Types
      • Containers (Legacy)
      • Input Forms
      • Reusable Elements
      • Element Templates (legacy)
    • Workflows
    • Events
      • General events
      • Element events
      • Custom events
      • Recurring event
      • Database trigger event
    • Actions
      • Account
      • Navigation
      • Data (things)
      • Email
      • Element
      • Custom
    • Data
      • Data Sources
      • Operators and comparisons
      • Search
      • Privacy
    • Styles
    • API
      • The Bubble API
        • The Data API
          • Authentication
          • Data API endpoints
          • Data API requests
        • The Workflow API
      • The API Connector
        • Authentication
        • Adding calls
    • Bubble-made Plugins
      • AddtoAny Share Buttons
      • Airtable
      • API Connector
      • Blockspring
      • Box
      • Braintree
      • Bubble App Connector
      • Chart.js
      • Circle Music Player
      • Draggable Elements
      • Dropzone
      • Facebook
      • Fitbit
      • Full Calendar
      • Google
      • Google Analytics
      • Google Optimize
      • Google Places
      • Ionic Elements
      • iTunes
      • Slidebar Menu
      • LinkedIn
      • Localize Translation
      • Mixpanel
      • Mouse & Keyboard Interactions
      • Multiselect Dropdown
      • Progress Bar
      • Rich Text Editor
      • Rich Text Editor (Legacy)
      • Screenshotlayer
      • SelectPDF
      • Slack
      • Segment
      • Slick Slideshow
      • SQL Database Connector
      • Star Rating
      • Stripe
      • Tinder-like Element
      • Twitter
      • YouTube
      • Zapier
    • Application Settings
      • App plan
      • General
      • Domain / email
      • Languages
      • SEO / metatags
      • API
      • Collaboration
      • Sub-apps
      • Versions
  • Account & Marketplace
    • Account and billing
      • Pricing and plans
        • Plans and billing
        • Billing cycle
        • FAQ: Pricing and Workload
      • Account Management
      • Building Apps for Others
      • Selling on the Marketplace
      • Plans & Billing (legacy)
    • Official Bubble Certification
      • Hiring certified developers
    • Building Plugins
      • The Plugin Editor
      • General Settings
      • Updating to Plugin API v4
      • Adding API Connections
      • Building Elements
      • Building Actions
      • Loading Data
      • Publishing and versioning
      • Github Integration
    • Building Templates
    • Application and data ownership
    • Marketplace policies
    • Bug reports
  • Vulnerability Disclosure Policy
  • Beta features
    • About the Beta features section
    • Native mobile apps 🔒
      • Introduction
        • What is a native mobile app?
        • Native mobile vs. web development
        • Differences in native and web elements
        • Native mobile app terminology
      • Building
        • Views and navigation
        • Native mobile actions
        • Components and gestures
        • Device resources
          • Location services
          • Camera/photo library
      • Previewing
      • Publishing
Powered by GitBook
On this page
  • How important is SEO for my app?
  • Closed apps
  • Public apps
  • Mixed apps
  • SEO basics
  • How search works
  • General SEO advice
  • OpenGraph
  • What is OpenGraph?
  • Who Developed OpenGraph?
  • How Does OpenGraph Affect SEO?
  • What do OpenGraph tags look like?
  • How do I use OpenGraph in Bubble

Was this helpful?

  1. User manual
  2. Maintenance
  3. SEO

Introduction to SEO

This page gives a general overview of what SEO is and some tips on how to plan your SEO efforts

How important is SEO for my app?

Bubble is a flexible platform that lets you build a wide range of different applications. As such, each application's need for search engine optimization can vary greatly: for some it can be a crucial source of revenue, while for others it is irrelevant.

In the first part of this article we'll go over three different categories of apps to help you determine whether SEO is relevant for your project.

Closed apps

If your app is designed to be used primarily by a closed group of users, such as a project management tool for your team or an inventory management system for your warehouse, you may not need to focus on SEO at all.

Since your users are already aware of your web app and will likely access it through a direct link or bookmark, you don't need to worry about attracting new users through search engines. In some cases, you may even take active steps to hide the app from search engines.

Public apps

if your app is designed to be used by a wider audience, such as a social media platform or a marketplace, SEO should be a top priority. When users search for keywords related to your web app on search engines like Google and Bing, you want your web app to appear at the top of the search results. If this describes your app, keep reading this article series to see how to work with Bubble's SEO tools.

Mixed apps

A common solution is the mixed app, where some parts are closed (such as a project management dashboard), and others are public (such as the front page that recruits new users to the software). In this case, SEO can also be an important part of your marketing strategy, but one or more your app's pages will still be hidden to search engines (which usually means they require users to be logged in to access them).

SEO basics

in essence, SEO is a way to make sure that your website is visible and accessible to the people who are looking for it. Imagine yourself performing a search in one of the major search engines: in most cases you will find what you're looking for among the first few results. SEO is the effort to try to be one of those pages.

How search works

Personalized and contextualized searches

Search algorithms have become incredibly complex since they were first invented. One of the major things to grasp with most modern search engines is that a page's position in the search ranking is not static or even the same for all users.

Personalized means that the search engine may build a profile of your search habits and preferences and tailor the results accordingly. The degree to which a search is personalized depends on factors such as whether the user is logged in to their account with the search provider, their profile settings and their cookie settings.

Contextualized means that they may also take into account different kinds of current data about you, such as the device you are using, the operating system, the geographical location of your IP address, and other pieces of information. Again, this depends on the user profile, browser- and cookie settings of the user performing the search.

The reason these two points are important to keep in mind, is that they suggest a key fact in SEO: top rankings are statistical probabilities, not static positions. In other words, your SEO efforts are a mission to increase the likelihood of being the number one result, not a linear race to a top position where everyone will see you. That's why searching for your own pages does not necessarily give you any meaningful indication as to how the page is doing: Google might simply deduce that you have a high interest in it and increase its ranking for you alone, since they likely have a history of you interacting with it in the past.

Top rankings are statistical probabilities, not static positions.

Title and description

In addition to personalizing the order of search results, search engines like Google are increasingly using their own algorithms to determine the most appropriate title and description for each search result. While Bubble provides dedicated fields for elements such as the page title and title, search engines may choose to pull a title and description from any of these fields or even generate their own based on the content of the page. This can include text from the page itself, such as headers or body content.

However, this doesn’t mean that these fields aren’t important—on the contrary, they provide valuable context for search engines. It simply means that the exact title or description you “suggest” may not always appear verbatim in search results.

Content and keywords

Google has released an excellent guide on how to create high-quality, people-first content. If your app depends on organic traffic, we strongly recommend reviewing this guide:

Search is based on keywords or search terms. What this means is that any user who searches for something will provide a search term like "How to make pancakes", and the search engine will go through its index looking for pages that are relevant to that term.

In the early days of search engines, they simply looked for a match: "How to make pancakes" would match "How to make pancakes", and the page named "Top 10 pancake recipes" would suffer. Today, search engines are smart enough to process queries linguistically and rephrase the question, take synonyms into account and understand the value of the content on the pages it crawls through.

It used to be important to simply stuff your page with keywords, but now search engines are looking for quality content which gives users what they're looking for.

This doesn't mean you should disregard keywords – they are still the bread and butter of a good SEO strategy – but you should write your content for humans to enjoy, not for bots to index.

General SEO advice

Now, let's look at some general advice on how to optimize your app and pages for SEO. Keep in mind that SEO is a wide field that's constantly evolving, so in this article we will only be able to cover the basics: still, adhering to these rules of thumb will set you off to a good start on your SEO journey:

  1. First and foremost, focus on creating quality content Search engine algorithms are constantly evolving, but one thing that remains consistent is the importance of valuable, informative content. Write articles, make videos, and create other content that is interesting and engaging to your target audience.

  2. Use keywords strategically When choosing them, make sure they are relevant to your content and that you use them in a natural way. Overusing keywords, also known as keyword stuffing, can hurt your rankings.

  3. Make sure your app is mobile-friendly Make sure that your app is easy to navigate on mobile devices. Google even favors mobile-friendly websites in their rankings. This even includes details like font size, contrast and download size. We recommend getting to know the to build pages that work on all screen sizes

  4. Build high-quality backlinks Backlinks are links from other websites that point to your website. Google views backlinks as a sign of authority and relevance. However, not all backlinks are created equal. It’s important to focus on building quality backlinks from reputable websites in your industry.

Remember, SEO is a long-term game. It takes time to see results, so don't get discouraged if you don't see immediate improvements. The advice above is not a complete roadmap to SEO results, but keeping these points in mind while you develop your app can help you make informed decisions about your pages

OpenGraph

What is OpenGraph?

OpenGraph is a set of rules created by Facebook (now Meta) that helps you control how your web pages look when shared on social media.

By using specific in the HTML of a page, developers can control how their content is presented when shared on social media platforms. This includes specifying the title, description, image (and sometimes more), ensuring that the content appears as intended when shared across various social networks.

Who Developed OpenGraph?

OpenGraph was developed by Facebook (now Meta) in 2010. The protocol was designed to enhance the user experience on social media platforms by enabling richer and more engaging content previews. Since its introduction, OpenGraph has become a standard in web development for controlling how web pages are represented on social networks.

How Does OpenGraph Affect SEO?

OpenGraph metadata can play an important role in SEO by influencing how your page appears in search engine results and on social media. Key OpenGraph tags, such as og:title and og:description, can directly affect the title and description displayed in search engine results pages (SERPs).

These tags help search engines understand the content of your page, improving its visibility and relevance.

What do OpenGraph tags look like?

OpenGraph tags are written in HTML code in the header section of your page. Bubble automatically generates the title, description and image tags and includes it in the HTML code of the page.

The code looks like this:

<meta property="og:title" content="A page title" />
<meta property="og:description" content="A brief description of your page." />
<meta property="og:image" content="https://www.yourwebsite.com/image.jpg" />

How do I use OpenGraph in Bubble

Integrating OpenGraph metadata allows you to optimize how your pages are presented when shared on social media, and can have an effect on how the page is presented in the results of a search page (such as Google).

OpenGraph fields are set in one of two ways (often both):

Page level

Metadata included on the page element should contain information about that specific page. If this field is left empty, the app level metadata will be used instead.

App level

App-level metadata will be applied whenever the metadata for a specific page is left blank. In other words, if metadata fields are filled at the page level, they will override the app-level metadata for that page.

Last updated 8 months ago

Was this helpful?

This is why tools like are useful and important, since they can give you an indication as to where the traffic to your pages comes from across potentially thousands of users, normalizing statistical outliers.

External page: Google:

Use meta descriptions and title tags Meta descriptions and title tags are snippets of text that may appear in search results. They should accurately describe the content of the page and entice people to click through to your app. You edit meta description and title tags in your .

Monitor your app's analytics Tools like Google Analytics can give you valuable insight into how people are finding and using your website. Google Analytics can be implemented using our dedicated or by adding a tag in your page header, and there are many other useful tools that can collect and aggregate data in different ways.

Make your app easy to navigate Web crawlers do two things: they crawl content, and they follow links. Make sure to link pages to each other when it makes sense, and link to your most important content from your index page – search engines consider those links important. They also use the labels of your links to understand the content it leads to. You can read more about different ways of setting up links in our .

Article:

Article:

Google Search Console
Creating helpful, reliable, people-first content
page's SEO settings
plugin
navigation guide
SEO: Page
SEO: App
OpenGraph lets you define the data that is displayed when the page is shared on social media. This example is from Facebook.