> ## 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.

# Framer technical SEO & AEO integration guide

> Step-by-step guide to add the RankAI technical SEO & AEO script to your Framer site using the Custom Code settings.

This guide shows you how to add RankAI's technical SEO & AEO script to your Framer site. The script runs in the background on your site and helps search engines understand your pages better. You don't need any coding experience. We'll add one block of code in Framer's Site Settings under Custom Code and save.

## Where to get your code

In your RankAI project, go to **Technical SEO** and look for the **Apply Changes** button at the top right and Click it. Select **Framer** as the provider. snippet of code that looks like the one below. Copy the whole thing. Your version will have your own project ID in it.

```html theme={null}
<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/wordpress-integration/technical-seo/apply-changes.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=3ddd5e612f8a96716c1a7d354dd01f82" alt="Apply Changes button" width="1877" height="857" data-path="resources/wordpress-integration/technical-seo/apply-changes.png" />

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/get-code.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=916f204f174145cae3f1dc1603732636" alt="Get Code button" width="887" height="778" data-path="resources/framer-integration/technical-seo/get-code.png" />

*Copy the code on the 5th step.*

Keep that code handy. In the next steps we'll add it to your Framer site so it loads on every page.

## Step 1: Go to your Framer dashboard

Open your browser and go to **framer.com**. Log in if you aren't already. You'll see your dashboard with a list of your projects (sites). That's the screen where you can open or manage your Framer sites.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/projects.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=bfd95356bb1cb951a9fa377f602c97c4" alt="Framer projects" width="1566" height="862" data-path="resources/framer-integration/technical-seo/projects.png" />

## Step 2: Select the project

Click on the project (site) you want to add the RankAI script to. The project will open, usually in the Framer editor. You need to be inside the project to reach Site Settings in the next step.

## Step 3: Open Site Settings, then Custom Code

In the top-left area of the screen you'll see a dropdown. Click that dropdown. In the menu that opens, select **Site Settings**. Then click **Custom Code** in the settings panel or sidebar.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/select-tab.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=e882c9804b74068c54de7c35a80682d3" alt="Site settings" width="1561" height="886" data-path="resources/framer-integration/technical-seo/select-tab.png" />

## Step 4: Add Custom Code

Click the **+** on the right end of scripts heading.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/add-custom-code.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=00dead79198b77666a0610f39a6d6fd0" alt="Add Custom Code" width="1538" height="842" data-path="resources/framer-integration/technical-seo/add-custom-code.png" />

## Step 5: Add the script to the end of the \<head> tag

In the Custom Code section, Give it the Name **Rankai Script**, Set Placement to **End of \</head>** and paste the code you copied from RankAI to Code field.

Make sure you paste the **entire** line, from `<script` to `</script>`. Don't change or remove any part of it. If you already have other code in the Head field (for example analytics), paste the RankAI script on a new line above or below it.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/create-custom-code-entry.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=44532378a1534774b99e4a57c865fb03" alt="Add Custom Code" width="1310" height="847" data-path="resources/framer-integration/technical-seo/create-custom-code-entry.png" />

## Step 6: Click Add

Click the button **Add** at the bottom the popup. Wait until you see a message that your changes were saved.

Publish your Framer site so the saved custom code reaches the public website. RankAI uses the installed script to apply the technical SEO & AEO settings chosen in your project.

<img src="https://mintcdn.com/rank-ai/Y6IIR1ZQMun_fptm/resources/framer-integration/technical-seo/save-custom-code.png?fit=max&auto=format&n=Y6IIR1ZQMun_fptm&q=85&s=ef03f09a3bb40b160eb4cea4c26cf2f1" alt="Save Custom Code" width="1298" height="857" data-path="resources/framer-integration/technical-seo/save-custom-code.png" />

## Step 7: Verify the script is installed correctly

Now go to RankAI tab again and click **Check Script Connection**. If you see a text in green saying **Script detected on your site**, the script is connected correctly.

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

## Quick checklist

* Went to your Framer dashboard
* Selected the project (site)
* Opened the top-left dropdown → Site Settings → Custom Code
* Scrolled to the Custom Code section
* Pasted the full script into the Head / end of \<head> field
* Clicked Add and published the Framer site
* Checked script connection in RankAI (Check Script Connection)

## FAQ

### Should the script go in the Head or the body/footer?

Use the **Head** option (or "End of \<head> tag"). That way the script loads at the top of the page as intended. Framer may also offer a body or footer code area; for RankAI, use the Head section.

### I don't see Custom Code in Site Settings. Where is it?

Custom Code is under **Site Settings → Custom Code**. Open the top-left dropdown, choose Site Settings, then Custom Code.

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

After saving, open your published site in a new tab. You can use your browser's "View page source" option (usually right-click then View Page Source) and search for "rankai" or "apply.js". If you see the script in the source code, it's loaded correctly.

### 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/framer). Script detection confirms the installation; inspect the affected public pages to verify changes.

***

*Last reviewed: October 12, 2026.*


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