# Missing meta description in React
> How to fix missing meta description in React — with the exact fix and copy-paste code.
_Category: Search visibility · Detector `seo` · Check `meta-description-missing` · Severity: warning_
The meta description is the paragraph under your title in search results — your one chance to pitch the click. Without it, Google scrapes some text off the page and often picks a boilerplate or nav fragment. AI-built pages skip it because it lives in ``, which the generated components never touch.
## The fix for React
Render `` in the component (React 19 hoists it to ``).
```tsx
```
### Steps
1. Write a 150–160 character summary with the page’s value and a keyword
2. Emit it as `` via your head/metadata mechanism
3. Confirm it appears in view-source and is unique per route
## 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 meta description`
- **Threshold:** no
## FAQ
### Does a meta description affect ranking?
Not directly. It affects click-through rate by controlling the snippet, and higher CTR is a positive signal. Treat it as ad copy for the search result.
### How long should it be?
About 150–160 characters. Longer gets truncated; much shorter wastes the space. Make each one unique to the page.
### Will Google always use my description?
No — Google may rewrite the snippet to match the query. A good description still wins the majority of the time and is worth writing.
See the general, framework-agnostic fix: https://vibecheck.wcgw.fun/fix/missing-meta-description.md
---
Fix guide from VibeCheck — https://vibecheck.wcgw.fun/fix/missing-meta-description. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt