Missing SEO Meta Tags in AI-Generated Sites: Invisible to Google

Why AI-Generated Sites Show Up Poorly in Google

When Bolt or v0 scaffolds a Next.js app, the generated layout.tsx or _app.tsx often contains a bare-minimum <head> section - perhaps a <title> tag and nothing else. Sometimes even the title is a placeholder like "My App" or "Vite + React." Every other meta tag - the ones Google, Twitter, LinkedIn, and Slack use to understand your page - is absent.

Page titles and meta descriptions are among the first things to get right in on-page SEO. Google's Search Central documentation says Google sometimes uses the meta description for the search snippet when it describes the page better than the page text, and that identical descriptions on every page aren't helpful. The snippet is what searchers read before they decide to click.

For social sharing, Open Graph tags are the difference between a rich preview card and a bare link. Slack, LinkedIn, Twitter/X, and WhatsApp all use og:title, og:description, and og:image to generate the preview when someone shares your URL. Without them, your link looks unprofessional and generates less clicks - regardless of how good your content is.

A Backlinko study of 11.8 million Google search results found that the vast majority of title tags in Google exactly or partially match the keyword they rank for, which suggests a relevant title is the ticket to entry for page one. Title tags matter for ranking and CTR. AI-generated apps that leave titles as "My App" are starting from zero.

The Essential Meta Tags: What You Need and Why

What AI-Generated Pages Look Like Without Meta Tags

// ❌ BAD - Bare-bones head section in an AI-generated Next.js app
// app/layout.tsx
export const metadata = {
  title: 'My App',
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>{children}</body>
    </html>
  );
}

Apart from the charset and viewport tags that Next.js always adds, this produces one head tag: <title>My App</title>. No description, no Open Graph tags, no canonical URL, no robots directive. Google will index this page, but the search listing will show a generic auto-generated description pulled from the page body, the tab will say "My App" for every page, and any social share will produce a bare link.

The Complete Meta Tag Implementation

// ✅ GOOD - Complete metadata for Next.js App Router
// app/layout.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: {
    default: 'YourApp - Tagline Here',
    template: '%s - YourApp',
  },
  description: 'A clear 150-character description of what your app does and who it is for. Use specific language.',
  keywords: ['your keyword', 'second keyword', 'brand name'],
  authors: [{ name: 'Your Company' }],
  openGraph: {
    type: 'website',
    title: 'YourApp - Tagline Here',
    description: 'Same or slightly different description for social sharing.',
    siteName: 'YourApp',
    images: [
      {
        url: 'https://yourapp.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'YourApp preview',
      },
    ],
  },
  twitter: {
    card: 'summary_large_image',
    title: 'YourApp - Tagline Here',
    description: 'A description optimized for Twitter display.',
    images: ['https://yourapp.com/og-image.png'],
  },
  robots: {
    index: true,
    follow: true,
  },
};

Keep the canonical URL and og:url out of the root layout. Next.js passes a layout's metadata down to every page that doesn't set its own, so a canonical of https://yourapp.com there would mark your homepage as the canonical version of every page. Set them per page instead, as in the dynamic example below.

For pages router or plain HTML, the equivalent raw HTML looks like this:

// ✅ GOOD - Complete meta tags in plain HTML / Pages Router
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>YourApp - Tagline Here</title>
  <meta name="description" content="150-character description of your page." />

  <!-- Canonical URL -->
  <link rel="canonical" href="https://yourapp.com/this-page" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://yourapp.com/this-page" />
  <meta property="og:title" content="YourApp - Tagline Here" />
  <meta property="og:description" content="Description for social sharing." />
  <meta property="og:image" content="https://yourapp.com/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="YourApp" />

  <!-- Twitter / X -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="YourApp - Tagline Here" />
  <meta name="twitter:description" content="Description for Twitter." />
  <meta name="twitter:image" content="https://yourapp.com/og-image.png" />
</head>

Dynamic Meta Tags for Content Pages

The root layout handles site-wide defaults. Individual pages - blog posts, product pages, landing pages - need their own meta tags that describe the specific content. This is where AI-generated apps often fall short even when the root layout is correct.

// ✅ GOOD - Per-page dynamic metadata in Next.js
// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata(
  { params }: { params: Promise<{ slug: string }> }
): Promise<Metadata> {
  const { slug } = await params; // params is a Promise since Next.js 15
  const post = await getPost(slug);

  return {
    title: post.title,
    description: post.excerpt,
    alternates: {
      canonical: `https://yourapp.com/blog/${slug}`,
    },
    openGraph: {
      type: 'article',
      url: `https://yourapp.com/blog/${slug}`,
      title: post.title,
      description: post.excerpt,
      publishedTime: post.publishedAt,
      images: [{ url: post.coverImage, width: 1200, height: 630 }],
    },
  };
}

How to Fix Missing Meta Tags in Your AI-Generated App

1. Audit your current state: Open your site in a browser, right-click, "View Page Source," and search for og:title, description, and canonical. If they're not there, you have work to do.
2. Create your OG image: Generate a 1200×630 PNG that works as a social preview card. Figma has free templates. Host it at a permanent URL like /og-image.png.
3. Set the root layout metadata first: Site-wide title template, default description, OG image, and Twitter card settings. This covers every page immediately.
4. Add page-specific metadata: For your most important pages (homepage, pricing, key landing pages), write unique titles and descriptions optimized for the search terms those pages target.
5. Scan automatically: VibeDoctor's Vibe Check loads the page at your URL and checks the title, meta description, og:title, og:image, favicon, canonical URL and viewport tag (SEO-001 through SEO-007), next to a Lighthouse SEO audit. It checks the page you scan, not every page on the site. Free to sign up.
6. Validate with social debuggers: After deploying, check your OG tags with Facebook's Sharing Debugger and LinkedIn's Post Inspector, and paste the URL into a draft post on X. These show what each platform will display when your URL is shared.

FAQ