, which may not be share-optimised. Set an explicit og:title. _Category: Search visibility · Detector `seo` · Check `og-title-missing` · Severity: info_ `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 - Share cards reuse the SEO title, brand suffix and all - Headlines on social cards read awkwardly or get truncated - No independent control over the share headline ## How VibeCheck detects it The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP. - **Issue string:** `Missing og:title` - **Threshold:** no <meta property="og:title"> ## Root causes - Only the `<title>` was set; `og:*` was skipped - The head is unmanaged - Assumed the platform would “figure it out” ## The fix Add `og:title` with a short, punchy headline written for a social card (roughly under 60 characters, no long brand suffix). It can differ from your `<title>`. ### Steps 1. Write a short share-optimised headline 2. Emit it as `<meta property="og:title">` 3. Preview the card in a share debugger ```html <meta property="og:title" content="Invoicing that pays you faster" /> ``` ## Framework-specific fixes ### React Render the `og:title` meta tag in the component (React 19). ```tsx <meta property="og:title" content="Invoicing that pays you faster" /> ``` ### Next.js Set `openGraph.title` in metadata; it defaults to your title if omitted, so set it only when you want different copy. ```tsx export const metadata: Metadata = { openGraph: { title: 'Invoicing that pays you faster' }, } ``` ### Vue Add it to `useHead` with a `property` key. ```ts useHead({ meta: [{ property: 'og:title', content: 'Invoicing that pays you faster' }] }) ``` ### Svelte Emit it in `<svelte:head>`. ```svelte <svelte:head> <meta property="og:title" content="Invoicing that pays you faster" /> </svelte:head> ``` ### Vanilla JS Add the `og:title` tag to each page’s `<head>`. It can differ from the `<title>`, so write it for the share card. ```html <meta property="og:title" content="Invoicing that pays you faster" /> ``` ## FAQ ### Is `og:title` required if I already have a <title>? Platforms fall back to `<title>`, so it is not strictly required — but setting `og:title` lets you write card-specific copy and avoid a truncated brand suffix. ### How long can `og:title` be? Keep it under ~60 characters. Cards truncate long titles, and a short punchy headline performs better. ### Should `og:title` include 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. ## Related problems - [Missing social preview image (og:image)](https://vibecheck.wcgw.fun/fix/missing-og-image.md) — Search visibility - [Missing og:description](https://vibecheck.wcgw.fun/fix/missing-og-description.md) — Search visibility - [Missing Twitter/X card](https://vibecheck.wcgw.fun/fix/missing-twitter-card.md) — Search visibility - [Missing page title](https://vibecheck.wcgw.fun/fix/missing-page-title.md) — Search visibility --- Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-og-title. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt

# Missing og:title > Without og:title, shared links fall back to your raw , which may not be share-optimised. Set an explicit og:title. _Category: Search visibility · Detector `seo` · Check `og-title-missing` · Severity: info_ `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 - Share cards reuse the SEO title, brand suffix and all - Headlines on social cards read awkwardly or get truncated - No independent control over the share headline ## How VibeCheck detects it The `seo` detector flags this live in the browser and reports it to the widget's Problems list — and to your coding agent over MCP. - **Issue string:** `Missing og:title` - **Threshold:** no <meta property="og:title"> ## Root causes - Only the `<title>` was set; `og:*` was skipped - The head is unmanaged - Assumed the platform would “figure it out” ## The fix Add `og:title` with a short, punchy headline written for a social card (roughly under 60 characters, no long brand suffix). It can differ from your `<title>`. ### Steps 1. Write a short share-optimised headline 2. Emit it as `<meta property="og:title">` 3. Preview the card in a share debugger ```html <meta property="og:title" content="Invoicing that pays you faster" /> ``` ## Framework-specific fixes ### React Render the `og:title` meta tag in the component (React 19). ```tsx <meta property="og:title" content="Invoicing that pays you faster" /> ``` ### Next.js Set `openGraph.title` in metadata; it defaults to your title if omitted, so set it only when you want different copy. ```tsx export const metadata: Metadata = { openGraph: { title: 'Invoicing that pays you faster' }, } ``` ### Vue Add it to `useHead` with a `property` key. ```ts useHead({ meta: [{ property: 'og:title', content: 'Invoicing that pays you faster' }] }) ``` ### Svelte Emit it in `<svelte:head>`. ```svelte <svelte:head> <meta property="og:title" content="Invoicing that pays you faster" /> </svelte:head> ``` ### Vanilla JS Add the `og:title` tag to each page’s `<head>`. It can differ from the `<title>`, so write it for the share card. ```html <meta property="og:title" content="Invoicing that pays you faster" /> ``` ## FAQ ### Is `og:title` required if I already have a <title>? Platforms fall back to `<title>`, so it is not strictly required — but setting `og:title` lets you write card-specific copy and avoid a truncated brand suffix. ### How long can `og:title` be? Keep it under ~60 characters. Cards truncate long titles, and a short punchy headline performs better. ### Should `og:title` include 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. ## Related problems - [Missing social preview image (og:image)](https://vibecheck.wcgw.fun/fix/missing-og-image.md) — Search visibility - [Missing og:description](https://vibecheck.wcgw.fun/fix/missing-og-description.md) — Search visibility - [Missing Twitter/X card](https://vibecheck.wcgw.fun/fix/missing-twitter-card.md) — Search visibility - [Missing page title](https://vibecheck.wcgw.fun/fix/missing-page-title.md) — Search visibility --- Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-og-title. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt