Missing og:title in Next.js
og:title is the bold headline on a shared link card. When it is absent, platforms fall back to the page <title> — which is tuned for search results, not for a social card, and sometimes carries a long brand suffix that gets cut. Setting it explicitly lets you write copy that fits the card.
Symptoms
How VibeCheck catches it
In your widget · Problems
Missing og:title
To your coding agent · MCP
agent › get_detected_issues
→ { detector: "seo", issue: "Missing og:title", threshold: "no <meta property="og:title">" }
The same string in your widget and in your agent’s context — no screenshot, no copy-paste.
Root causes
The fix for Next.js
Set openGraph.title in metadata; it defaults to your title if omitted, so set it only when you want different copy.
export const metadata: Metadata = {
openGraph: { title: 'Invoicing that pays you faster' },
}Steps
- Write a short share-optimised headline
- Emit it as
<meta property="og:title"> - Preview the card in a share debugger
FAQ
- Is
og:titlerequired if I already have a<title>? - Platforms fall back to
<title>, so it is not strictly required — but settingog:titlelets you write card-specific copy and avoid a truncated brand suffix. - How long can
og:titlebe? - Keep it under ~60 characters. Cards truncate long titles, and a short punchy headline performs better.
- Should
og:titleinclude my brand name? - On a share card, usually not. The card already shows the domain, so a bare “Invoicing that pays you faster” reads cleaner than “… | Acme”. Keep the brand suffix in your
<title>, where the search result benefits from it.