Bubble Open Graph Tags: How to Set OG Meta in No-Code Bubble Apps

The Bubble OG tag challenge

Bubble is a no-code app builder that renders pages with JavaScript on the client side. This creates a challenge for OG tags: social crawlers typically don't execute JavaScript, so dynamically injected meta tags may not be visible.

Bubble provides several mechanisms to add static and dynamic OG tags, including built-in page SEO settings, the SEO/metatags plugin, and HTML elements. The approach you use depends on whether your OG content is static or dynamic.

Method 1: Built-in page SEO settings

For static OG tags, use Bubble's built-in page settings:

1. In the Bubble editor, double-click anywhere on the page to open Page Properties
2. Scroll down to SEO / metatags
3. Set Page title and Meta description — these are rendered server-side and visible to crawlers

Note: Bubble's built-in page title and meta description do render server-side. However, custom Open Graph tags (og:image, og:title etc.) need the plugin or HTML element approach below.

Method 2: SEO/metatags plugin

Install the official SEO/metatags plugin from the Bubble marketplace:

1. Go to Plugins → Add plugins → search "SEO metatags"
2. Install "SEO/metatags" by Bubble
3. Add an HTML element or use the plugin's element on your page
4. Configure the plugin element with your OG values — you can use dynamic data from Bubble's database

Method 3: HTML element with meta tags

For full control, add an HTML element to your page and write meta tags directly:

1. From the element palette, drag an HTML element onto the page
2. In the HTML element's content, enter your OG tags:

<meta property="og:title" content="Your App Name" />
<meta property="og:description" content="Your app description." />
<meta property="og:image" content="https://example.com/og.jpg" />
<meta property="og:url" content="https://yourapp.bubbleapps.io" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

Bubble renders HTML elements as-is in the page source, but the position in the DOM may affect how crawlers interpret them.

Dynamic OG tags with URL parameters

For dynamic pages (e.g., a product page that changes based on a URL parameter), you can use Bubble's "Page URL" and "Get data from URL" to populate OG tags dynamically:

1. In the HTML element, use Bubble's dynamic data binding to insert values from the current page's data source
2. Set the HTML element content to reference dynamic fields like Current Page Product's Name

Important: because Bubble is client-side rendered, dynamically loaded meta tags may not be seen by all social media crawlers. For maximum compatibility, consider using Bubble's "Page is prerendered" option (available on paid plans) or a prerendering service.

Common Bubble OG mistakes

• JavaScript-only meta tags: Bubble apps are client-side by default. Meta tags set in Bubble's workflows or via JavaScript may not be visible to crawlers. Use the HTML element or page settings instead.
• Using the .bubbleapps.io domain: if you use a custom domain, ensure og:url references the custom domain, not the default Bubble URL.
• Not verifying after publish: always check your OG tags on the live URL after publishing — the Bubble editor preview may behave differently.