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

# Install the site script on a website built with code

> Add the RankAI technical SEO & AEO script to a website built with code, including Next.js, React, and HTML sites.

Use this guide to add RankAI's technical SEO & AEO script to a website built and maintained through code, such as Next.js, React, or plain HTML. This includes sites built with AI coding tools. The script runs in the background and helps search engines understand your pages better. You add it to the **\<head>** of your site so it loads on every page where you want RankAI to apply changes.

In RankAI's platform selector, this option is called **Custom Built Site**. Installing the script is separate from [publishing articles through the API](/integrations/custom-site).

## Where to get your code

In your RankAI project, go to **Technical SEO** in the sidebar and click the **Apply Changes** button at the top right. Select **Custom Built Site** as the provider. You'll see a snippet of code like the one below. Copy the whole thing—your version will include your own project ID.

```
<script src="https://rankai.ai/apply.js" data-rankai-id="YOUR_PROJECT_ID" crossorigin="anonymous" defer></script>
```

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/custom-integration/technical-seo/apply-changes.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=d325ef2e549f7c20608b1f20029150a7" alt="Apply Changes button in Technical SEO" width="1877" height="857" data-path="resources/custom-integration/technical-seo/apply-changes.png" />

*Technical SEO → Apply Changes → select Custom Built Site, then copy the script from the step shown.*

Keep that code handy. In the next steps you'll add it to the \<head> of your site so it loads on every page where you want RankAI to apply technical SEO & AEO changes.

## Step 1: Locate where your \<head> is defined

Your site has a place where the shared top of every page is defined—usually the **\<head>** section. Add the RankAI script inside that \<head> so it loads on all relevant pages.

* **Next.js (App Router):** Open `app/layout.tsx` (or `app/layout.js`). The root layout wraps every page and typically includes the \<head> or metadata.
* **Next.js (Pages Router):** Open `pages/_document.tsx` (or `_document.js`). That file controls the HTML shell, including \<head>.
* **React (Create React App or similar):** Open `public/index.html`. The \<head> is in that file.
* **Plain HTML:** If you have one main template or layout file that every page uses, open that. If each page is a separate HTML file, add the script to each page's \<head> (see Step 3).

## Step 2: Add the script to the \<head> section

In the file you found, locate the **\<head>** section. Add the RankAI script **inside** \<head>, before the closing `</head>`. Paste the full line you copied from RankAI. Don't change or remove any part of it.

**Next.js App Router:** You can use the `<Script>` component from `next/script` in your root layout with `strategy="beforeInteractive"` or add the script tag inside the \<head> in that layout.

**Next.js Pages Router (\_document):** Inside the \<Head> component, add the script tag (or use next/script). The script must be in the head and load on every page.

**Plain HTML:** Paste the script on its own line inside \<head>, then save the file.

## Step 3: If there's no single layout file

Some projects don't have one layout or header file. If each page is a separate HTML file with its own \<head>, add the RankAI script to the \<head> of **each page** where you want RankAI to apply changes. Paste the same script line in every file, inside \<head> and before \</head>.

If you use a static site generator or build step that outputs HTML, add the script in the template or layout that generates the \<head> for each page so you don't have to edit every file by hand.

## Step 4: Save and deploy

Save your file (or files). If you use a dev server, restart it if needed. Then build and deploy your site as you normally do. The RankAI script will load on every page that includes it in the \<head>. RankAI will use it to apply the technical SEO & AEO settings you've chosen in your project.

## Step 5: Verify the script is installed

Back in your RankAI project, open **Technical SEO** and click **Check Script Connection**. If you see a message in green saying **Script detected on your site**, the script is connected correctly.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/custom-integration/technical-seo/check-connection.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=4cc324a3a3aabb8012b4ac6d79646a2e" alt="Check Script Connection in RankAI" width="1428" height="932" data-path="resources/custom-integration/technical-seo/check-connection.png" />

*Check Script Connection confirms the script is live on your site.*

## Quick checklist

* Copied the script from RankAI (Apply Changes → Custom Built Site)
* Found your layout or \<head> (e.g. layout.tsx, \_document.tsx, or index.html)
* Added the full script inside the \<head> section
* If no common file, added the script to the \<head> of each page
* Saved and deployed your site
* Clicked Check Script Connection in RankAI and saw "Script detected on your site"

## FAQ

### Where exactly do I put the script in Next.js App Router?

In `app/layout.tsx`, you can add the script using Next.js's `<Script>` component from `next/script` with `src` and `data-rankai-id` set, and `strategy="beforeInteractive"`. Or inject the script tag into the layout's head. The important part is that it runs on every page.

### How do I know if it's working?

After deploying, open your live site in a new tab. Use your browser's "View page source" (usually right-click → View Page Source) and search for "rankai" or "apply.js". If you see the script in the source code, it's loaded correctly. You can also use**Check Script Connection** in RankAI.

### Do I need to add the script to every page?

Add it to every page where you want RankAI to apply technical SEO & AEO changes. If you have a single layout or template that wraps all pages, adding it there once is enough. If you have multiple HTML files or different layouts, add it to each one that should receive the updates.

### Where can I get more support?

Contact your RankAI account team or check the help section in your dashboard.

## Related setup

For article publishing, use the [original CMS integration guide](/integrations/custom-site). Script detection confirms the installation; inspect the affected public pages to verify changes.

***

*Last reviewed: October 13, 2026.*


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.