Bubble lets you set meta tags at both the app level and individual page level. In the page Property Editor, you can set dynamic page titles, descriptions, and Open Graph image URLs that update based on database content. These meta tags are served server-side, meaning social media platforms and search engines see them immediately without rendering JavaScript.
Customize Meta Tags for SEO and Social Sharing in Bubble
This tutorial covers setting up page-level meta tags in Bubble for better SEO and social media previews. You will learn how to configure titles, descriptions, and OG images both globally and per page, including dynamic values for data-driven pages. This is essential for any Bubble app that needs organic traffic or professional social sharing previews.
Prerequisites
- A Bubble account with an existing app
- Basic understanding of what meta tags are (title, description, OG tags)
- At least one page with dynamic content (optional but recommended)
Step-by-step guide
Set App-Wide Default Meta Tags
Set App-Wide Default Meta Tags
Go to Settings → SEO/metatags. Fill in the 'App title' field with your app name. Set a default 'Page description' (up to 155 characters) that describes your app. Upload or set a default 'OG Image' URL — this image appears when your app link is shared on social media. These defaults apply to every page that does not have its own custom meta tags.
Expected result: All pages in your app have baseline meta tags from the app-wide settings.
Override Meta Tags on Individual Pages
Override Meta Tags on Individual Pages
Navigate to any page in the Design tab. Click on the page background (not any element) to open the page Property Editor. In the Appearance tab, find the 'Page title' field — enter a unique title for this page (e.g., 'Pricing — YourApp'). Set the 'Page description' field with a 155-character description specific to this page. Set the 'OG image' field if this page needs a different social sharing image. These override the app-wide defaults for this specific page.
Pro tip: Keep page titles under 60 characters and descriptions under 155 characters. Include your primary keyword near the beginning of the title.
Expected result: Individual pages have unique meta tags that override the app-wide defaults.
Add Dynamic Meta Tags for Data-Driven Pages
Add Dynamic Meta Tags for Data-Driven Pages
For pages with a Type of content (e.g., a Product detail page), you can use dynamic expressions in meta tags. Click the page background, go to the Property Editor, and in the 'Page title' field, click 'Insert dynamic data'. Set it to: Current Page Product's name followed by static text '— YourApp'. For the description, use: Current Page Product's description truncated to 155 characters. For the OG image, use: Current Page Product's image. These dynamic values resolve server-side when the URL is requested.
Expected result: Each product, post, or item page has unique meta tags based on the database record being displayed.
Add Custom Meta Tags in the Page Header
Add Custom Meta Tags in the Page Header
For advanced meta tags not covered by Bubble's built-in fields, go to Settings → SEO/metatags → 'Script/meta tags in header'. Here you can add raw HTML meta tags like Twitter Card type (<meta name="twitter:card" content="summary_large_image">), canonical URLs, robots directives, or structured data (JSON-LD). For page-specific header tags, use an HTML element on the page itself with the 'Page header type' option if supported by your plan.
Expected result: Custom meta tags appear in the page HTML head section for enhanced SEO and social sharing control.
Verify Your Meta Tags
Verify Your Meta Tags
Deploy your app (or use the preview URL) and test your meta tags. Open your page in a browser and use View Source (Ctrl+U or Cmd+U) to check the <head> section for title, meta description, og:title, og:description, and og:image tags. Test social sharing previews at developers.facebook.com/tools/debug (Facebook), cards-dev.twitter.com/validator (Twitter), and LinkedIn Post Inspector. If tags are incorrect, update them in Bubble and redeploy. Use the 'Scrape Again' button on Facebook's debugger to refresh cached previews.
Expected result: All meta tags display correctly in page source and social sharing previews show the right title, description, and image.
Complete working example
1META TAG CONFIGURATION CHECKLIST231. APP-WIDE DEFAULTS (Settings → SEO/metatags)4 App title: YourApp5 Page description: Build amazing products with YourApp — the platform for...6 OG Image: https://yourapp.com/images/default-og.png7 Favicon: 32x32 PNG uploaded in Settings892. STATIC PAGES (per-page Property Editor)10 Home page:11 Title: YourApp — Build Products Without Code12 Description: YourApp helps founders build and launch products in days...13 OG Image: (use default)14 15 Pricing page:16 Title: Pricing — YourApp17 Description: Simple pricing for every stage. Start free, upgrade as you grow...18 OG Image: /images/pricing-og.png19 20 About page:21 Title: About Us — YourApp22 Description: Meet the team behind YourApp. Our mission is to...23243. DYNAMIC PAGES (using Insert dynamic data)25 Product page (Type: Product):26 Title: Current Page Product's name & " — YourApp"27 Description: Current Page Product's description :truncated to 15528 OG Image: Current Page Product's image29 30 Blog post page (Type: BlogPost):31 Title: Current Page BlogPost's title & " | YourApp Blog"32 Description: Current Page BlogPost's excerpt :truncated to 15533 OG Image: Current Page BlogPost's featured_image34354. CUSTOM HEADER TAGS (Settings → Script/meta tags in header)36 <meta name="twitter:card" content="summary_large_image">37 <meta name="twitter:site" content="@yourtwitterhandle">38 <meta property="og:type" content="website">39405. VERIFICATION TOOLS41 - View Source: Check <head> section for correct tags42 - Facebook Sharing Debugger: developers.facebook.com/tools/debug43 - Twitter Card Validator: cards-dev.twitter.com/validator44 - Google Rich Results Test: search.google.com/test/rich-resultsCommon mistakes when customizing web page meta tags in Bubble.io: Step-by-Step Guide
Why it's a problem: Leaving all pages with the same default meta title
How to avoid: Set unique, descriptive titles for every page. Use dynamic expressions for data-driven pages.
Why it's a problem: Using OG images that are too small or the wrong aspect ratio
How to avoid: Use images at least 1200x630 pixels (1.91:1 aspect ratio) for Open Graph. Upload optimized images to keep file size under 1MB.
Why it's a problem: Not testing meta tags after deployment
How to avoid: Always test deployed URLs with Facebook Debugger and View Source. Check both static and dynamic pages.
Best practices
- Keep page titles under 60 characters and meta descriptions under 155 characters for optimal search display.
- Include your primary keyword near the beginning of the page title.
- Use unique, specific descriptions for every page rather than generic boilerplate.
- Set OG images to at least 1200x630 pixels for optimal social media display.
- Use dynamic meta tags on all data-driven pages so each item has unique SEO metadata.
- Add Twitter Card meta tags for better Twitter sharing previews.
- Test social sharing previews with Facebook Debugger and Twitter Card Validator before launching.
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I have a Bubble.io app with a home page, pricing page, and dynamic product pages. How do I set up meta tags (title, description, OG image) for each page type? I need both static and dynamic meta tags for SEO and social sharing.
Configure meta tags for all pages. Set app-wide defaults in Settings. Override with unique titles and descriptions on the home, pricing, and about pages. Add dynamic meta tags on the product page using Current Page Product data.
Frequently asked questions
Are Bubble meta tags rendered server-side?
Yes. Page titles, descriptions, and OG tags set through Bubble's page properties are served in the HTML head section server-side. Social platforms and search engine crawlers see them without needing to execute JavaScript.
Can I set different meta tags for the same page based on conditions?
The built-in page meta tag fields do not support conditions. For dynamic pages, use the page's Type of content data. For completely different meta tags based on user state, you would need to use separate pages.
How do I add structured data (JSON-LD) for rich search results?
Add JSON-LD markup in Settings → SEO/metatags → Script/meta tags in header. For page-specific structured data, use an HTML element on the page with a script tag containing the JSON-LD.
Why do my social sharing previews show the wrong image?
Social platforms cache OG data. After updating your OG image, use the Facebook Sharing Debugger's 'Scrape Again' button to refresh the cache. Also verify the image URL is publicly accessible and meets the minimum size requirement (1200x630px).
Do I need separate meta tags for mobile and desktop?
No. Meta tags are the same regardless of device. Bubble serves responsive pages, so the same URL with the same meta tags works for both mobile and desktop users and crawlers.
Can RapidDev help with SEO optimization for my Bubble app?
Yes. RapidDev can audit your Bubble app's SEO setup, configure meta tags across all pages, implement structured data, set up sitemaps, and integrate prerendering services for comprehensive search optimization.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation