# Meta description is too long in React

> How to fix meta description is too long in React — with the exact fix and copy-paste code.

_Category: Search visibility · Detector `seo` · Check `meta-description-too-long` · Severity: warning_

Search engines truncate the snippet at roughly 160 characters, so a long description loses its ending — often the exact call to action you wanted seen. Descriptions pulled from the first paragraph of content routinely overflow this budget.

## The fix for React

Clamp the content string before rendering the meta tag.

```tsx
<meta name="description" content={summary.slice(0, 160)} />
```

### Steps

1. Count the characters in the rendered description
2. Rewrite it to land the key message within ~155 characters
3. Re-check it renders in full in a search preview tool

## 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:** `Meta description is too long`
- **Threshold:** meta description longer than 160 characters (DESC_MAX)

## FAQ

### What is the ideal meta description length?

150–160 characters. That fits the desktop snippet without truncation while still giving room to pitch.

### Is it bad to go over 160?

It is not penalised, but the extra text is simply hidden. Put everything that matters in the first ~155 characters.

See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/meta-description-too-long.md

---

Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/meta-description-too-long. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt