Appearance
SEO & metadata
Two fields in a page's settings — its title and description — drive how the published page appears in browser tabs, search results, and social-media link previews. This page explains where those fields go and what FlowRunner generates from them.
The two fields
Every page has:
- Title — the page's name. It becomes the browser tab label and the primary heading search engines and social cards show.
- Description — an optional one- or two-sentence summary. It feeds the meta description used in search snippets and share previews.
You set both in the page's settings inside the designer. The title is required (a new page starts as "Page"); the description is optional but strongly recommended.
INFO
📸 Screenshot — the page settings panel with the Title and Description fields
What gets generated
When a visitor loads a published page at /p/<projectId>/<fileId>, FlowRunner builds the page's metadata from those fields:
| Output | Source |
|---|---|
<title> | Page title (falls back to the project name if empty) |
| Meta description | Page description |
robots | index, follow — the page is discoverable by search engines |
| OpenGraph | og:title, og:description, og:type = website |
| Twitter card | summary card with title and description |
The OpenGraph and Twitter tags are what make a shared link render as a rich preview card — with your title and description — instead of a bare URL, on platforms like Slack, iMessage, LinkedIn, and X.
TIP
Write the description for a human skimming search results: lead with what the page is or does, keep it under ~155 characters, and avoid keyword stuffing. If you leave it blank, previews fall back to showing just the title.
Metadata in exports
The same fields carry into your exports, so a page keeps its identity wherever it lands:
- HTML export writes the title into
<title>, and — when a description is set — emits both a<meta name="description">and an<meta property="og:description">tag. - Next.js export wires the title and description into the generated project's root layout
metadata, so the exported app carries the same tab title and description.
NOTE
Per-image OpenGraph previews (a custom share image) are not generated automatically. Social cards use the title and description; the image is left to the platform's default rendering.
Robots and discoverability
Published public pages are marked index, follow, meaning search engines are welcome to crawl and list them. If a page should not be public at all, that is a job for visibility rather than metadata — set the page to private so only signed-in workspace members can reach it. See Publish & share for how visibility works.