SEO Meta Tags

⚠️ PRELIMINARY FEATURE - BETA
This feature is currently in beta testing. The API and functionality may change in future releases. We welcome feedback and suggestions as we refine this feature.

Overview

The seoMeta field type allows you to define SEO meta tags at the form/page level. These tags are extracted during Server-Side Rendering (SSR) and injected into the HTML <head> section, enabling:

Search Engine Optimization - Better indexing by Google, Bing, etc.
Social Media Previews - Rich previews when links are shared on Slack, Facebook, LinkedIn, Twitter, Discord, etc.
Dynamic Meta Tags - Use _calc expressions to populate tags from database data

Field Structure

Basic Schema

{
  "type": "seoMeta",
  "metaTags": {
    "title": "Page Title - Your Brand",
    "description": "Page description for search results",
    "og:title": "Social Media Title",
    "og:image": "https://yourdomain.com/image.jpg"
  }
}

Properties

Property

Type

Required

Description

type

String

Yes

Must be "seoMeta"

metaTags

Object

Yes

Meta tag definitions

Behavior

In Editor (GUI)

Visible - Field appears in the form designer in the tree view
Editable - Designers can modify meta tags
No Rendering - Does not render in the actual form

In Production (Runtime)

Hidden - Field does not appear to users
SSR - Meta tags are extracted during SSR for bots/crawlers
Client-Side - Meta tags are also injected into document.head at runtime for regular users, enabling correct browser tab titles, social sharing from the SPA, and <html lang> attributes

Meta Tags Object

The metaTags object supports two types of values:

1. Static Values

{
  "title": "About Us - Acme Corp",
  "og:image": "https://cdn.acme.com/about.jpg"
}

2. Dynamic Values with `_calc`

{
  "title_calc": "model.product.name + ' - $' + model.product.price",
  "description_calc": "model.product.description || 'Default description'"
}

Important: The _calc suffix is removed when rendering:

title_calc → becomes title in HTML
og:image_calc → becomes og:image in HTML

Supported Meta Tag Types

Special Keys

These keys have unique behavior and do not render as <meta> tags:

Key

Behavior

title

Sets <title> tag (browser tab / search result title)

language

Sets <html lang="..."> attribute. Defaults to "en" if omitted

_comment*

Ignored — for developer notes and organization

Standard Meta Tags

Use name="" attribute:

{
  "description": "Page description",
  "keywords": "keyword1, keyword2",
  "author": "Your Name",
  "robots": "index, follow"
}

Renders as:

<meta name="description" content="Page description">
<meta name="keywords" content="keyword1, keyword2">

Open Graph (Facebook, LinkedIn, Slack)

Use property="" attribute:

{
  "og:title": "Social Media Title",
  "og:description": "Social media description",
  "og:image": "https://example.com/image.jpg",
  "og:type": "website",
  "og:url": "https://example.com/page"
}

Renders as:

<meta property="og:title" content="Social Media Title">
<meta property="og:image" content="https://example.com/image.jpg">

Twitter Card

Use name="" attribute:

{
  "twitter:card": "summary_large_image",
  "twitter:title": "Twitter Title",
  "twitter:description": "Twitter description",
  "twitter:image": "https://example.com/twitter.jpg"
}

Renders as:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Twitter Title">

Article Meta (Blog Posts)

Use property="" attribute:

{
  "og:type": "article",
  "article:published_time": "2024-01-15T10:00:00Z",
  "article:author": "John Doe",
  "article:section": "Technology"
}

Product Meta (E-commerce)

Use property="" attribute:

{
  "og:type": "product",
  "product:price:amount": "29.99",
  "product:price:currency": "USD",
  "product:availability": "in stock"
}

Dynamic Expressions with `_calc`

Add _calc to any key to evaluate it as a JavaScript expression. The expression has access to the model object from the form's data model.

{
  "title_calc": "model.product.name + ' | My Store'"
}

If both a static key and its _calc counterpart exist, _calc takes precedence.

Complete Examples

Static Page

{
  "type": "seoMeta",
  "metaTags": {
    "title": "About Us - Acme Corporation",
    "description": "Learn about Acme Corp's mission, values, and team",
    "og:title": "About Acme Corp",
    "og:image": "https://cdn.acme.com/about-og.jpg",
    "og:type": "website",
    "twitter:card": "summary_large_image"
  }
}

Dynamic Page (using `_calc`)

Any key with a _calc suffix is evaluated as a JavaScript expression with access to model. The _calc version takes priority over the static key.

{
  "type": "seoMeta",
  "metaTags": {
    "title_calc": "model.product.name + ' - $' + model.product.price + ' | Acme Store'",
    "description_calc": "model.product.description?.substring(0, 160)",
    "og:title_calc": "model.product.name",
    "og:image_calc": "model.product.images?.[0]?.url || 'https://cdn.acme.com/default.jpg'",
    "og:type": "product",
    "twitter:card": "summary_large_image"
  }
}

Requirements

Server-Side Rendering (SSR) Enabled per page

The seoMeta field only works with SSR enabled. Meta tags are extracted and rendered when:

A bot/crawler accesses the page (Googlebot, Facebookbot, etc.)
SSR is enabled for the form's layout in site settings
The form is successfully loaded with data

Form Data (`onFormRequest`)

For dynamic _calc expressions:

The form's onFormRequest hook must be enabled
The hook must populate the model object with data
SSR will fetch this data automatically

For static values:

No onFormRequest needed
Tags are rendered as-is

Validation & Best Practices

Character Limits

Tag

Recommended Length

title

50-60 characters

description

150-160 characters

og:title

60-90 characters

og:description

55-65 characters

twitter:title

70 characters

Image Requirements

Platform

Size

Aspect Ratio

Open Graph (Facebook, LinkedIn, Slack)

1200x630px

1.91:1

Twitter Large Image

1200x675px

16:9

Twitter Summary

120x120px (min)

1:1

Best Practices

✅ Always include fallbacks in _calc expressions
✅ Use absolute URLs for images
✅ Test previews on actual platforms (Slack, Facebook, etc.)
✅ Keep descriptions concise and compelling
✅ Use high-quality images (1200x630px minimum)
❌ Don't use relative URLs for og:image
❌ Don't exceed character limits (truncated by platforms)

Testing

Test as Bot

Use curl with a bot user-agent:

curl -H "User-Agent: Googlebot" https://yourdomain.com/page

Look for meta tags in the <head> section.

Facebook Debugger: https://developers.facebook.com/tools/debug/
Twitter Card Validator: https://cards-dev.twitter.com/validator
LinkedIn Inspector: https://www.linkedin.com/post-inspector/
Slack: Just paste the link in any channel

Troubleshooting

Meta Tags Not Appearing

Check:

Is SSR enabled for this layout?
Is the form loading successfully?
Are you testing with a bot user-agent?
Does the seoMeta field exist in the form schema?

Dynamic Values Not Working

Check:

Is onFormRequest enabled for the form?
Is the model object populated with data?
Are _calc expressions syntactically correct?
Check server logs for evaluation errors

Solution:

Clear the platform's cache using their debugging tools
Facebook/LinkedIn/Twitter cache previews for 7 days
Use their inspector tools to force a refresh

Security

XSS Prevention

All meta tag values are automatically HTML-escaped to prevent XSS attacks:

<script>alert('xss')</script>
// Becomes:
&lt;script&gt;alert('xss')&lt;/script&gt;

Expression Safety

_calc expressions are evaluated with:

Limited scope (only model object available)
Error catching (failures are logged, not exposed)
No access to require(), process, or other Node.js APIs

Auto-Generated Tags

The following are injected automatically if not explicitly defined in metaTags:

Tag

Value

<link rel="canonical">

Current page URL

og:url

Current page URL

Page Language

Set the page language with the language key:

{
  "language": "fr",
  "title": "Titre de la Page"
}

Renders as:

<html lang="fr">

For dynamic language based on model data:

{
  "language_calc": "model.userLanguage || 'en'"
}

If omitted, defaults to "en".

Dynamic robots.txt and sitemap.xml

BetterForms automatically generates robots.txt and sitemap.xml for each tenant. Pages with ssr.enabled: true are allowed/listed; everything else is disallowed. No configuration required beyond enabling SSR per layout.

Feedback

This is a preliminary feature. Please share feedback or suggestions in the Slack channel #suggestions.

Last Updated: February 2026

PreviousCustom Validators NextMisc Page Settings

Last updated 6 days ago

Was this helpful?

hashtagOverview

hashtagField Structure

hashtagBasic Schema

hashtagProperties

hashtagBehavior

hashtagIn Editor (GUI)

hashtagIn Production (Runtime)

hashtagMeta Tags Object

hashtag1. Static Values

hashtag2. Dynamic Values with _calc

hashtagSupported Meta Tag Types

hashtagSpecial Keys

hashtagStandard Meta Tags

hashtagOpen Graph (Facebook, LinkedIn, Slack)

hashtagTwitter Card

hashtagArticle Meta (Blog Posts)

hashtagProduct Meta (E-commerce)

hashtagDynamic Expressions with _calc

hashtagComplete Examples

hashtagStatic Page

hashtagDynamic Page (using _calc)

hashtagRequirements

hashtagServer-Side Rendering (SSR) Enabled per page

hashtagForm Data (onFormRequest)

hashtagValidation & Best Practices

hashtagCharacter Limits

hashtagImage Requirements

hashtagBest Practices

hashtagTesting

hashtagTest as Bot

hashtagTest Social Previews

hashtagTroubleshooting

hashtagMeta Tags Not Appearing

hashtagDynamic Values Not Working

hashtagSocial Previews Not Updating

hashtagSecurity

hashtagXSS Prevention

hashtagExpression Safety

hashtagAuto-Generated Tags

hashtagPage Language

hashtagDynamic robots.txt and sitemap.xml

hashtagRelated Documentation

hashtagFeedback

Overview

Field Structure

Basic Schema

Properties

Behavior

In Editor (GUI)

In Production (Runtime)

Meta Tags Object

1. Static Values

2. Dynamic Values with `_calc`

Supported Meta Tag Types

Special Keys

Standard Meta Tags

Open Graph (Facebook, LinkedIn, Slack)

Twitter Card

Article Meta (Blog Posts)

Product Meta (E-commerce)

Dynamic Expressions with `_calc`

Complete Examples

Static Page

Dynamic Page (using `_calc`)

Requirements

Server-Side Rendering (SSR) Enabled per page

Form Data (`onFormRequest`)

Validation & Best Practices

Character Limits

Image Requirements

Best Practices

Testing

Test as Bot

Test Social Previews

Troubleshooting

Meta Tags Not Appearing

Dynamic Values Not Working

Social Previews Not Updating

Security

XSS Prevention

Expression Safety

Auto-Generated Tags

Page Language

Dynamic robots.txt and sitemap.xml

Related Documentation

Feedback