Skip to content
SEOJuice Docs

Vercel Integration

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

Option 1: Client-Side Script (Quick Setup)

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
        />
      </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
        />
      </body>
    </Html>
  );
}

SvelteKit, Remix, Astro, or Other Frameworks

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

Option 2: Server-Side via Edge Middleware (Advanced)

For better SEO crawlability, you can inject SEOJuice optimizations at the edge using Vercel’s Edge Middleware and the SEOJuice Node.js SDK:

middleware.ts
import { fetchSuggestions, injectSEO } from '@seojuice/sdk';
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,
  });
}

This renders all SEOJuice optimizations into the HTML before it reaches the browser, making them visible to search engine crawlers without JavaScript rendering.

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.