# Missing og:title in React

> How to fix missing og:title in React — with the exact fix and copy-paste code.

_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.

## The fix for React

Render the `og:title` meta tag in the component (React 19).

```tsx
<meta property="og:title" content="Invoicing that pays you faster" />
```

### Steps

1. Write a short share-optimised headline
2. Emit it as `<meta property="og:title">`
3. Preview the card in a share debugger

## 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">

## 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.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-og-title.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-og-title. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt