# How to customize web page meta tags in Bubble.io: Step-by-Step Guide
- Tool: Bubble
- Difficulty: Beginner
- Time required: 10-15 min
- Compatibility: All Bubble plans
- Last updated: March 2026
## TL;DR
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.
## Before you start
- 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
### 1. 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.
### 2. 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.
### 3. 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.
### 4. 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 (), 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.
### 5. 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 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 code example
File: `Workflow summary`
```text
META TAG CONFIGURATION CHECKLIST
1. APP-WIDE DEFAULTS (Settings → SEO/metatags)
App title: YourApp
Page description: Build amazing products with YourApp — the platform for...
OG Image: https://yourapp.com/images/default-og.png
Favicon: 32x32 PNG uploaded in Settings
2. STATIC PAGES (per-page Property Editor)
Home page:
Title: YourApp — Build Products Without Code
Description: YourApp helps founders build and launch products in days...
OG Image: (use default)
Pricing page:
Title: Pricing — YourApp
Description: Simple pricing for every stage. Start free, upgrade as you grow...
OG Image: /images/pricing-og.png
About page:
Title: About Us — YourApp
Description: Meet the team behind YourApp. Our mission is to...
3. DYNAMIC PAGES (using Insert dynamic data)
Product page (Type: Product):
Title: Current Page Product's name & " — YourApp"
Description: Current Page Product's description :truncated to 155
OG Image: Current Page Product's image
Blog post page (Type: BlogPost):
Title: Current Page BlogPost's title & " | YourApp Blog"
Description: Current Page BlogPost's excerpt :truncated to 155
OG Image: Current Page BlogPost's featured_image
4. CUSTOM HEADER TAGS (Settings → Script/meta tags in header)
5. VERIFICATION TOOLS
- View Source: Check section for correct tags
- Facebook Sharing Debugger: developers.facebook.com/tools/debug
- Twitter Card Validator: cards-dev.twitter.com/validator
- Google Rich Results Test: search.google.com/test/rich-results
```
## Common mistakes
- **Leaving all pages with the same default meta title** — Google treats pages with identical titles as duplicate content, which hurts SEO rankings. Fix: Set unique, descriptive titles for every page. Use dynamic expressions for data-driven pages.
- **Using OG images that are too small or the wrong aspect ratio** — Social platforms require minimum image sizes (Facebook: 1200x630px). Small images appear as tiny thumbnails or do not display at all. Fix: Use images at least 1200x630 pixels (1.91:1 aspect ratio) for Open Graph. Upload optimized images to keep file size under 1MB.
- **Not testing meta tags after deployment** — Meta tags that look correct in the editor may render differently in production, especially dynamic tags that depend on database content. Fix: 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.
## 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.
---
Source: https://www.rapidevelopers.com/bubble-tutorial/customize-web-page-meta-tags-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/customize-web-page-meta-tags-in-bubble