# Fix guides — every problem VibeCheck catches

> Field guides for every performance, SEO, AI-readiness and web-essentials problem VibeCheck detects in AI-built frontends — with the exact fix and code.

VibeCheck runs in the corner of your app and catches what an AI agent quietly broke: jank, leaks, DOM bloat, layout shift, and failing SEO / AI-readiness audits. Every issue it can emit has a guide here — what it is, why it hurts, the literal string the detector reports, and the fix with code, per framework.

## Performance

Runtime problems that make an AI-built page slow, janky, or heavy — DOM bloat, memory leaks, layout shift, long tasks, oversized images and bundles. Each one is caught live by a VibeCheck detector as it happens in the browser.

- [Excessive DOM size](https://vibecheck.wcgw.fun/fix/excessive-dom-size.md): A huge DOM slows style, layout and memory on every frame. Virtualize long lists and flatten wrappers to get node count back under control.
- [JavaScript memory leak](https://vibecheck.wcgw.fun/fix/memory-leak.md): A leaking heap grows until the tab janks or crashes. Find the listeners, timers and subscriptions that are never cleaned up and release them.
- [Cumulative layout shift (CLS)](https://vibecheck.wcgw.fun/fix/cumulative-layout-shift.md): Content that jumps as the page loads fails Core Web Vitals and mis-taps users. Reserve space for images, ads and late content to stop the shift.
- [Long tasks blocking the main thread](https://vibecheck.wcgw.fun/fix/long-tasks.md): Long tasks freeze the page and wreck INP. Break up heavy work, defer it, or move it to a worker so the main thread stays responsive to input.
- [Console.log spam](https://vibecheck.wcgw.fun/fix/console-log-spam.md): Debug logs left in production leak internals, slow hot paths, and bury real errors. Strip them at build time and add a no-console lint rule.
- [Duplicate network requests](https://vibecheck.wcgw.fun/fix/duplicate-network-requests.md): The same endpoint fetched several times wastes bandwidth and risks race conditions. Deduplicate with a query cache or a shared in-flight request.
- [Unoptimized images](https://vibecheck.wcgw.fun/fix/unoptimized-images.md): Images without dimensions shift layout; oversized ones waste bandwidth. Add width/height, lazy-load below the fold, and serve the right size.
- [Large image files](https://vibecheck.wcgw.fun/fix/large-image-files.md): Multi-hundred-KB images blow your LCP and mobile data budget. Compress to WebP/AVIF, resize to display size, and serve from an image CDN.
- [Large JavaScript bundles](https://vibecheck.wcgw.fun/fix/large-javascript-bundles.md): Oversized JS bundles delay interactivity and waste mobile data. Code-split by route, tree-shake imports, and lazy-load heavy components.
- [Heavy dependencies](https://vibecheck.wcgw.fun/fix/heavy-dependencies.md): Heavy libraries add weight and known pitfalls. Lazy-load them, import a lighter subset, or swap for a native API to cut bundle size and jank.

## Search visibility

Discoverability problems that keep search engines from ranking — or even reading — your pages: missing titles and descriptions, absent Open Graph and canonical tags, heading and alt-text gaps, and missing sitemap/robots files.

- [Missing page title](https://vibecheck.wcgw.fun/fix/missing-page-title.md): With no <title>, search results and browser tabs fall back to your URL. Add one unique, descriptive title under 60 characters.
- [Page title is too long](https://vibecheck.wcgw.fun/fix/title-too-long.md): Google truncates titles past ~60 characters, hiding the end in search results. Trim your <title> so the whole headline shows.
- [Page title is a framework default](https://vibecheck.wcgw.fun/fix/placeholder-page-title.md): Shipping a default title like “React App” or “Vite App” tells Google your page is an unfinished template. Replace it with a real title.
- [Page title is very short](https://vibecheck.wcgw.fun/fix/title-too-short.md): A one- or two-word <title> wastes your strongest ranking signal. Write a descriptive 30–60 character title with real keywords.
- [Missing meta description](https://vibecheck.wcgw.fun/fix/missing-meta-description.md): No meta description lets Google write its own snippet from page text — usually a worse pitch. Add a 150–160 character summary.
- [Meta description is too long](https://vibecheck.wcgw.fun/fix/meta-description-too-long.md): Search engines cut descriptions off past ~160 characters. Trim yours so the call to action is not lost in the ellipsis.
- [Missing social preview image (og:image)](https://vibecheck.wcgw.fun/fix/missing-og-image.md): With no og:image, links to your page show a blank box on Slack, X, and iMessage. Add a 1200×630 preview image so shares look real.
- [Missing og:title](https://vibecheck.wcgw.fun/fix/missing-og-title.md): Without og:title, shared links fall back to your raw <title>, which may not be share-optimised. Set an explicit og:title.
- [Missing og:description](https://vibecheck.wcgw.fun/fix/missing-og-description.md): With no og:description, shared links show no supporting text under the title. Add one to make link previews compelling.
- [Missing og:url](https://vibecheck.wcgw.fun/fix/missing-og-url.md): og:url tells platforms the canonical address to credit shares to, even with tracking params. Set it so shares consolidate.
- [Missing Twitter/X card](https://vibecheck.wcgw.fun/fix/missing-twitter-card.md): Without twitter:card, links on X show a plain URL instead of a rich preview. Add summary_large_image for a full-width card.
- [Missing canonical link](https://vibecheck.wcgw.fun/fix/missing-canonical-url.md): Duplicate URLs (trailing slash, query params) split your ranking. Add <link rel="canonical"> to point search engines at one address.
- [No H1 heading](https://vibecheck.wcgw.fun/fix/missing-h1-heading.md): The <h1> is your page’s strongest on-page topic signal. If it is missing, add exactly one that names what the page is about.
- [Multiple H1 headings](https://vibecheck.wcgw.fun/fix/multiple-h1-headings.md): Several <h1>s scatter your page’s topic signal. Keep one <h1> and demote the rest to <h2> so the outline is clear.
- [Images missing alt text](https://vibecheck.wcgw.fun/fix/missing-image-alt-text.md): Images with no alt attribute are invisible to screen readers and search engines. Add descriptive alt text (or alt="" if decorative).
- [Vague link text](https://vibecheck.wcgw.fun/fix/generic-link-text.md): Links that say “click here” or “read more” tell search engines and screen readers nothing. Use text that names the destination.
- [Unfriendly URL slug](https://vibecheck.wcgw.fun/fix/unfriendly-url-slug.md): URLs with IDs, underscores, or capital letters are hard to read, share, and rank. Use clean, lowercase, hyphenated keyword slugs.
- [Page is set to “noindex”](https://vibecheck.wcgw.fun/fix/accidental-noindex.md): A noindex tag tells search engines to drop the page from results entirely. If it is not deliberate — often a staging leftover — remove it.
- [Missing or invalid sitemap.xml](https://vibecheck.wcgw.fun/fix/missing-sitemap.md): Without a sitemap, search engines discover pages the slow way. Generate a /sitemap.xml listing your URLs and reference it from robots.txt.
- [Missing robots.txt](https://vibecheck.wcgw.fun/fix/missing-robots-txt.md): A robots.txt tells crawlers what to index and where your sitemap is. Add one so crawling is intentional, not guessed.

## AI readiness

Answer-engine problems that stop AI assistants (ChatGPT, Perplexity, Claude, Google AI Overviews) from reading, trusting, and citing your content — missing structured data, client-only rendering, blocked AI crawlers, and absent agent-discovery signals.

- [Missing structured data (JSON-LD)](https://vibecheck.wcgw.fun/fix/missing-structured-data.md): Answer engines extract facts from schema.org JSON-LD. Without it they guess from prose. Add JSON-LD so AI and Google read your page correctly.
- [Invalid structured data (JSON-LD)](https://vibecheck.wcgw.fun/fix/invalid-structured-data.md): Malformed JSON-LD is silently skipped by search and answer engines. Fix the syntax and schema.org @context so your structured data actually counts.
- [Missing <main> landmark](https://vibecheck.wcgw.fun/fix/missing-main-landmark.md): Without a <main> landmark, assistants and screen readers can’t find your primary content. Wrap the main content in a single semantic <main>.
- [Missing author and date signals](https://vibecheck.wcgw.fun/fix/missing-author-metadata.md): Answer engines weigh authorship and freshness when choosing sources. Add author and published-date signals so your content is trusted and cited.
- [Content only renders with JavaScript](https://vibecheck.wcgw.fun/fix/content-requires-javascript.md): Crawlers and AI agents that don’t run JS see an empty page. Server-render or prerender your content so it’s in the HTML, not built client-side.
- [Missing llms.txt](https://vibecheck.wcgw.fun/fix/missing-llms-txt.md): llms.txt hands AI assistants a clean markdown summary of your site so they read it accurately. Add one at /llms.txt to guide LLMs to your best pages.
- [No markdown content negotiation](https://vibecheck.wcgw.fun/fix/missing-markdown-negotiation.md): Serving a markdown version to agents that ask for it lets them read your content without parsing the DOM. Add Accept: text/markdown negotiation.
- [robots.txt blocks AI crawlers](https://vibecheck.wcgw.fun/fix/ai-crawlers-blocked.md): If robots.txt disallows GPTBot, ClaudeBot or PerplexityBot, assistants can’t read or cite you. Allow the AI crawlers you want to appear in answers.
- [No agent interface (MCP) advertised](https://vibecheck.wcgw.fun/fix/missing-mcp-discovery.md): Sites that want agents to take actions can advertise an MCP server so assistants discover their tools. Add a /.well-known/mcp.json for agent discovery.

## Web essentials

The document-head fundamentals every page needs — viewport, charset, language, favicon. AI scaffolds routinely skip them because the generated component owns the body and nobody edits the base HTML document.

- [Missing viewport meta tag](https://vibecheck.wcgw.fun/fix/missing-viewport-meta.md): Without a viewport meta tag, mobile browsers render your page at desktop width. Add one line to make the layout responsive again.
- [Missing charset declaration](https://vibecheck.wcgw.fun/fix/missing-charset.md): A missing <meta charset> lets browsers guess your encoding, mangling emoji and accented text. Declare UTF-8 as the first tag in <head>.
- [Missing lang attribute on <html>](https://vibecheck.wcgw.fun/fix/missing-lang-attribute.md): A missing lang attribute stops screen readers picking the right voice and search engines detecting language. Add lang to your <html> element.
- [Missing favicon](https://vibecheck.wcgw.fun/fix/missing-favicon.md): No favicon means a blank browser tab and a 404 on every load. Add a <link rel="icon"> so your site is recognisable in tabs and bookmarks.

---

Fix hub from VibeCheck — https://vibecheck.wcgw.fun/fix. Full site index for LLMs: https://vibecheck.wcgw.fun/llms.txt