3 min read

Webflow technical SEO integration guide

This guide shows you how to add RankAI's technical SEO script to your Webflow 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 Webflow's built-in Custom Code area and then publish.

Where to get your code

In your RankAI project, go to Technical SEO & GEO and look for the Apply Changes button at the top right and Click it. Select Webflow 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.

<script src="https://rankai.ai/apply.js" data-rankai-id="YOUR_PROJECT_ID" crossorigin="anonymous" defer></script>
Apply Changes buttonGet Code button
Copy the code on the 5th step.

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

Step 1: Log in to your Webflow account

Open your browser and go to webflow.com. Click Log in in the top right (or Sign in if you're already on the site). Enter the email and password you use for Webflow.

After you log in, you'll see your dashboard. That's the screen where you can see all your sites and projects. Click on the site you want to add the RankAI script to.

Step 2: Open your site settings

Once you're inside your site (in the Webflow Designer or the site dashboard), you need to open the settings for this site. Look for a Settings or gear icon. It's often in the left sidebar or at the top of the screen. Click it to open the site settings.

You should now see a left panel with options like General, Hosting, Integrations, and more. We need the Custom Code section in the next step.

Webflow login page

Step 3: Open the Custom Code tab

In the left panel of the site settings, scroll down until you see Custom Code. It's usually near the bottom of the list. Click Custom Code.

You'll see two areas: one for code that goes in the Head of your site (the top of the page, before the main content) and one for code that goes in the Footer. We need the Head section. That's where the RankAI script should go so it loads at the top of your pages.

Custom Code tab

Step 4: Add the script to the Head section

Click inside the Head code box (sometimes labeled "Head" or "Code in <head>"). Paste the code you copied from RankAI. You can use right-click then Paste, or the keyboard shortcut (Ctrl+V on Windows, Cmd+V on Mac).

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 box (for example from analytics), paste the RankAI script on a new line above or below it.

Leave the Footer code box empty for this script. Only the Head section is needed.

Custom Code tab

Step 5: Publish your site

The script won't go live until you publish. In the top-right corner of the Webflow Designer or dashboard, click the Publish button. Choose the domain or hosting you use (e.g. Webflow hosting or your custom domain) and confirm. Wait until you see a message that the site has been published.

That's it. The RankAI script is now on your site. It will load on every page automatically. You don't need to do anything else in Webflow. RankAI will use it to apply the technical SEO settings you've chosen in your project.

Step 6: 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.

Check Script Connection in RankAI

Quick checklist

  • Logged in to your Webflow account
  • Opened your site and then site settings
  • Clicked the Custom Code tab in the left panel
  • Pasted the full script into the Head section (not the Footer)
  • Clicked Publish in the top-right corner
  • Checked script connection in RankAI (Check Script Connection)

FAQ

Use the Head section. That way the script loads at the top of the page as intended. Putting it in the footer can sometimes delay it or change how it runs.

I don't see Custom Code in my settings. Where is it?

Custom Code is in the site-level settings, not inside a single page. Make sure you opened the settings for the whole site (via the gear icon or Site Settings). Then scroll down in the left panel. If you're on a paid plan, Custom Code should be listed. On some plans it may be under a different name; check Webflow's docs for your plan.

How do I know if it's working?

After you publish, open your live 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.

Back to Webflow integration