This guide shows you how to add RankAI's technical SEO script to your custom-built website. 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.
Where to get your code
In your RankAI project, go to Technical SEO & GEO 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>
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 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(orapp/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 settings you've chosen in your project.
Step 5: Verify the script is installed
Back in your RankAI project, open Technical SEO & GEO and click Check Script Connection. If you see a message in green saying Script detected on your site, the script is connected correctly.
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 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.
