> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hadoseo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vercel SEO: Prerender Your Vercel React App for Google & AI Search

> Fix SEO for Vercel CSR apps. Prerender your .vercel.app React site so Google, AI search engines, and social media can index your content. No SSR migration needed.

## Vercel SEO: Fix Search Indexing for React Apps on Vercel

[Vercel](https://vercel.com) is an instant cloud development platform for frontend and full-stack applications. While Vercel offers excellent hosting, client-side rendered (CSR) React apps may still need prerendering for optimal SEO.

<Info>
  **Status:** ✅ Fully Supported. Prerender Vercel CSR apps without migrating to SSR
</Info>

## When Your Vercel App Needs Prerendering

Hado SEO is beneficial for Vercel apps when:

* You're using **Create React App** or similar CSR frameworks
* Your app fetches data client-side after initial load
* You're not using Next.js with SSR/SSG
* Search engines aren't indexing your dynamic content

<Note>
  If you're using **Next.js with SSR or SSG**, your pages are already server-rendered and may not need Hado SEO. However, Hado can still help with caching and bot optimization.
</Note>

## How to Set Up SEO for Your Vercel App

<Steps>
  <Step title="Get your Vercel app URL">
    Your Vercel deployment URL looks like:

    ```
    https://your-project.vercel.app
    ```

    Find this in your Vercel project dashboard.
  </Step>

  <Step title="Remove domain from Vercel (if applicable)">
    If your custom domain is currently pointed to Vercel:

    1. Go to Vercel Dashboard → Your Project → Settings → Domains
    2. Remove your custom domain
    3. Keep your `.vercel.app` URL active

    <Warning>
      You cannot use Vercel's domain management simultaneously with Hado SEO. The domain must be configured at your registrar.
    </Warning>
  </Step>

  <Step title="Add your domain in Hado SEO">
    1. Sign up at [hadoseo.com/auth](https://hadoseo.com/auth)
    2. Enter your custom domain
    3. Paste your Vercel app URL (`.vercel.app`)
  </Step>

  <Step title="Configure DNS at your registrar">
    Update DNS at your domain registrar (not Vercel):

    | Type | Name | Value          |
    | ---- | ---- | -------------- |
    | A    | @    | `137.66.32.95` |
    | A    | www  | `137.66.32.95` |
  </Step>

  <Step title="Verify and launch">
    Click **Verify DNS** in your Hado dashboard.
  </Step>
</Steps>

## How Prerendering Works with Vercel

With Hado SEO, your traffic flow becomes:

```
User → Hado Edge → Vercel (.vercel.app)
Bot  → Hado Edge → Pre-rendered cache
```

Human visitors are passed through to your Vercel app with minimal latency. Bots receive pre-rendered HTML.

## Vercel SEO Best Practices: Meta Tags & Open Graph

### Using React Helmet

```jsx theme={null}
import { Helmet } from 'react-helmet-async';

function ProductPage({ product }) {
  return (
    <>
      <Helmet>
        <title>{product.name} | My Store</title>
        <meta name="description" content={product.description} />
        <meta property="og:title" content={product.name} />
        <meta property="og:image" content={product.image} />
        <link rel="canonical" href={`https://mystore.com/products/${product.id}`} />
      </Helmet>
      {/* Page content */}
    </>
  );
}
```

### Environment-Specific URLs

Make sure your meta tags use your custom domain, not the Vercel URL:

```jsx theme={null}
// ✅ Good
<meta property="og:url" content="https://mystore.com/products/123" />

// ❌ Bad
<meta property="og:url" content="https://mystore.vercel.app/products/123" />
```

## Verify Your Vercel App Is SEO-Optimized

<CardGroup cols={2}>
  <Card title="Bot Crawler Test" icon="robot" href="https://hadoseo.com/free-seo-bot-crawler-test">
    Verify prerendering is working
  </Card>

  <Card title="Check Social Previews" icon="share-nodes" href="https://hadoseo.com/free-og-preview-checker">
    Test Open Graph tags
  </Card>
</CardGroup>

<Card title="SEO Best Practices" icon="chart-line" href="/guides/seo-optimization">
  Complete SEO optimization guide
</Card>