Back to blog
    Tutorial

    How to Set Up Pre-rendering for Framer

    Alex Chen
    December 31, 2023
    8 min read

    Step-by-step tutorial to set up pre-rendering on your Framer site with Rank Deploy. Boost Google indexing and organic visibility in under 10 minutes.

    Introduction: Why Framer Needs Pre-rendering

    Framer has become the favorite tool for designers to create interactive and visually impressive websites. But like all modern no-code tools, it generates JavaScript sites that can be difficult for Google to index.

    Framer's Specific Challenge

    Framer uses React under the hood, which means:

  1. Content is rendered client-side (CSR)
  2. Initial HTML contains little textual content
  3. Animations and transitions are managed in JavaScript
  4. Search engines may have difficulty "seeing" your content
  5. The Solution: Pre-rendering with Rank Deploy

    Pre-rendering solves this problem by:

    1. Visiting your pages with a full browser

    2. Waiting for all content to load

    3. Capturing the final HTML

    4. Serving it to search engine robots

    Prerequisites Before Starting

    Before you begin, make sure you have:

  6. **A published Framer site** with a custom domain
  7. **A Rank Deploy account** (free trial is sufficient)
  8. **Access to your DNS configuration** (Cloudflare, GoDaddy, OVH, etc.)
  9. **10 minutes** in front of you
  10. Important Note About Domains

    Pre-rendering only works with a custom domain. Framer subdomains (*.framer.app) are not supported because you don't control their DNS.

    Step 1: Create Your Account and Add Your Site

    1.1 Sign Up on Rank Deploy

    1. Go to [rankdeploy.com](https://rankdeploy.com)

    2. Click "Get Started Free"

    3. Sign in with GitHub or email

    4. Complete your account setup

    1.2 Add Your Framer Site

    Once logged into the dashboard:

    1. Click "**Add a site**"

    2. Enter your Framer site URL (e.g., https://mysite.com)

    3. Select "**Framer**" as the platform

    4. Click "Continue"

    Our system will automatically analyze your site to:

  11. Verify it's accessible
  12. Detect pages to pre-render
  13. Estimate the number of pages
  14. Step 2: Configure DNS

    This step is crucial. You will redirect your site traffic to our proxy, which will serve pre-rendered pages to robots.

    2.1 Get DNS Information

    After adding your site, Rank Deploy will provide you with:

    Type: CNAME

    Name: www (or @ for root domain)

    Value: proxy.rank-deploy.com

    TTL: Auto (or 3600)

    2.2 Configure at Your Registrar

    Example with Cloudflare:

    1. Log in to Cloudflare

    2. Select your domain

    3. Go to "DNS"

    4. Modify existing record or create a new one

    5. Enter the provided values

    6. Temporarily disable Cloudflare proxy (gray cloud)

    Example with OVH:

    1. Go to OVH customer area

    2. Select your domain

    3. "DNS Zone" tab

    4. Modify or add a CNAME record

    5. Enter the values

    Example with GoDaddy:

    1. Log in to your account

    2. "My products" → Your domain → "DNS"

    3. Modify CNAME record

    4. Save

    2.3 Propagate Changes

    DNS propagation typically takes:

  15. 5-15 minutes with Cloudflare
  16. 30-60 minutes with most registrars
  17. Up to 24-48h in rare cases
  18. How to verify:

    # On Mac/Linux

    dig www.yoursite.com CNAME

    # Expected result

    www.yoursite.com. CNAME proxy.rank-deploy.com.

    Step 3: Verification and First Crawl

    3.1 Verify Configuration

    Return to your Rank Deploy dashboard:

    1. Click on your site

    2. Go to "Configuration" tab

    3. Click "**Verify DNS**"

    If everything is correct, you'll see:

    ✅ DNS correctly configured

    3.2 Launch First Crawl

    1. Go to "**Pages**" tab

    2. Click "**Crawl now**"

    3. Our system will:

  19. Discover all pages on your site
  20. Generate a static HTML version of each
  21. Store them to serve to robots
  22. Estimated time:

  23. 10 pages: ~1 minute
  24. 50 pages: ~5 minutes
  25. 100+ pages: ~10-15 minutes
  26. 3.3 Verify Generated Pages

    Once the crawl is complete, you'll see the list of pre-rendered pages with:

  27. Page URL
  28. Status (success/error)
  29. Size of generated HTML
  30. Last generation date
  31. Step 4: Test Pre-rendering

    4.1 Manual Test

    Verify that robots receive the pre-rendered version:

    # Simulate a Googlebot request

    curl -A "Googlebot" https://www.yoursite.com

    You should see complete HTML with all your content visible.

    4.2 Test with Google Search Console

    1. Go to Search Console

    2. Use "URL Inspection"

    3. Enter a URL from your site

    4. Verify content is correctly displayed

    4.3 Request Indexing

    Still in Search Console:

    1. Click "Request indexing"

    2. Repeat for your most important pages

    3. Submit your updated sitemap

    Step 5: Advanced Configuration

    5.1 Update Frequency

    By default, pages are regenerated daily. You can adjust:

  32. **Static pages**: weekly
  33. **Blog**: daily
  34. **Product pages**: after each modification
  35. 5.2 Exclude Pages

    Certain pages should not be pre-rendered:

  36. Login/signup pages
  37. Admin pages
  38. Checkout pages
  39. In your dashboard, add these paths to the exclusion list.

    5.3 Crawl Priorities

    Define which pages are most important:

  40. High priority: homepage, product pages
  41. Medium priority: blog, category pages
  42. Low priority: legal notices, terms
  43. Troubleshooting Common Issues

    "DNS not detected"

  44. Wait for propagation (up to 24h)
  45. Check record spelling
  46. Temporarily disable Cloudflare proxy
  47. "Render error on some pages"

  48. Verify the page loads correctly in a browser
  49. Wait for initial animations to complete
  50. Contact support if the problem persists
  51. "Content different from original"

  52. Normal for personalized content (user login)
  53. Verify you don't have an active A/B test
  54. Done!

    Your Framer site is now optimized for SEO. Search engine robots will automatically receive static HTML versions of your pages, ensuring complete and fast indexing.

    Recommended Next Steps

    1. **Submit your sitemap** in Google Search Console

    2. **Create content** optimized for your target keywords

    3. **Track your performance** in the Rank Deploy dashboard

    4. **Optimize your titles** and meta descriptions

    FAQ Framer Configuration

    Does pre-rendering affect my Framer animations?

    No, your users still see the normal site with all animations. Only robots receive the static version.

    Do I need to reconfigure after updating my site?

    No, pages are automatically regenerated according to the defined frequency.

    Can I use Framer with a domain hosted elsewhere?

    Yes, as long as you can modify your domain's DNS records.

    AC

    Alex Chen

    Developer Advocate

    Ready to Improve Your SEO?

    Get started for free and see your pages indexed in hours.