Skip to content
SEOJuice Docs

Vercel Integration

If your site is hosted on Vercel (Next.js, SvelteKit, Remix, Astro, or any framework), integrate SEOJuice with a script tag or use Edge Middleware for server-side rendering.

Script tag

Add the SEOJuice script to your site’s layout:

Next.js (App Router)

In your root layout.tsx:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <script
          type="text/javascript"
          src="https://cdn.seojuice.io/suggestions.v1.js"
          defer
        />
        <noscript>
          <img src="https://smart.seojuice.io/pixel" width="1" height="1" alt="" style={{display: 'none'}} />
        </noscript>
      </body>
    </html>
  );
}

Next.js (Pages Router)

In your _document.tsx:

import { Html, Head, Main, NextScript } from 'next/document'


export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <NextScript />
        <script
          type="text/javascript"
          src="https://cdn.seojuice.io/suggestions.v1.js"
          defer
        />
        <noscript>
          <img src="https://smart.seojuice.io/pixel" width="1" height="1" alt="" style={{display: 'none'}} />
        </noscript>
      </body>
    </Html>
  );
}

SvelteKit, Remix, Astro, or Other Frameworks

Add the script tag before </body> in your main layout/template file.

Edge Middleware (server-side)

To make optimizations visible to crawlers without JavaScript, inject them at the edge using Vercel’s Edge Middleware and the SEOJuice Node.js SDK:

middleware.ts
import { fetchSuggestions, injectSEO } from 'seojuice/injection';
import { NextResponse } from 'next/server';


export async function middleware(request) {
  const response = await fetch(request);
  const html = await response.text();


  const suggestions = await fetchSuggestions(request.url, {
    baseURL: 'https://smart.seojuice.io/suggestions',
    timeout: 5000,
  });


  const transformedHTML = injectSEO({
    html,
    suggestions,
    injectLinks: true,
    injectMetaTags: true,
    injectStructuredData: true,
  });


  return new NextResponse(transformedHTML, {
    headers: response.headers,
  });
}

Now every optimization is in the HTML before it reaches the browser, so crawlers see it without rendering JavaScript.

Content Security Policy

If your Vercel deployment has a strict CSP, add these domains:

script-src 'self' https://cdn.seojuice.io;
connect-src 'self' https://smart.seojuice.io;

Verify Your Integration

After deploying:

  1. Visit your production URL (not localhost)
  2. Open DevTools → Network tab → filter for seojuice
  3. Confirm suggestions.v1.js loads with 200 status
  4. Check the SEOJuice dashboard for connected status

For troubleshooting, see Integration Verification.