The Ultimate SEO Checklist for Framer Templates (Increase Your Sales)

If you're selling Framer templates, design is only half the battle.

Buyers judge templates two ways: how they look in the preview, and whether they hold up as a real, working website. Increasingly, buyers check the second one before paying — running a quick Lighthouse audit, viewing page source, or testing the demo on mobile. A template that scores 100% on Lighthouse and follows Framer template SEO best practices sells more, gets fewer refund requests, and earns better reviews. A template that doesn't reads as unfinished, no matter how good the design is.

This is the complete Framer SEO checklist we use before shipping any FramerHub template or component — the exact items, the "why" behind each one, and exactly how to implement it inside Framer. Work through it in order before your next template goes live.

Why SEO-Readiness Is a Sales Feature, Not Just a Ranking Factor

Most template creators think about SEO as something the buyer deals with after purchase. That's backwards. A template's SEO foundation — its heading structure, its metadata fields, its Core Web Vitals — is baked into the build. The buyer inherits whatever you shipped.

That means SEO readiness is a product feature you can market, the same way you'd market "fully responsive" or "CMS-connected." It's also a trust signal: agencies buying templates for client work need to know the foundation is solid before they hand it off, because they're the ones who'll answer for it if the client's site doesn't rank.

Here's the full checklist, broken into the seven areas that actually move the needle.

1. Semantic HTML Structure

Framer lets you change the HTML tag of any frame — this is the single most under-used SEO feature in the editor, and it costs nothing to set correctly.

• Nav: Set the top navigation frame to <nav>
• Hero heading: Set to <h1> — only one per page
• Section headings: Set to <h2>
• Sub-headings inside sections: Set to <h3>
• Main content wrapper: Set to <main> where applicable
• Footer: Set to <footer>

Why it matters: Google's crawlers (and AI crawlers, which read structure even more literally) use HTML tags to understand what a page is, not just what it says. A page built entirely from <div> layers with no semantic tags forces the crawler to guess at hierarchy — and it often guesses wrong, which shows up as poor featured-snippet eligibility and weaker topical relevance.

How to check it: In Framer, select each frame and look at the Tag dropdown in the right panel (under Layout or Accessibility, depending on the frame type). Go through the layer tree top to bottom on every unique page template — not just the homepage. It's common to catch a second <h1> hiding in a footer CTA or a testimonial block.

Common mistake: Setting every bold heading-looking text to <h1> because it "looks important." One H1 per page, full stop. Everything else cascades down from <h2>.

2. Text Styles & Hierarchy

Don't manually style text block by block. Use Framer's Text Styles panel to define a real hierarchy once, and reuse it everywhere.

• Define H1, H2, H3, H4, Body, Caption, Link as named text styles.
• Set a consistent type scale (e.g., H1 at 48–64px, H2 at 32–40px, H3 at 24px, Body at 16–18px).
• Ensure Body text is at least 16px — Google flags small mobile text as a usability issue, and it directly hurts readability scores.
• Set adequate line-height (1.4–1.6 for body copy) so text doesn't feel cramped on mobile.

Why it matters: Beyond readability, a defined text-style system means every page in your template inherits the same hierarchy automatically. If you (or a buyer) ever rebrand, you change the style definition once instead of hunting through 40 manually-styled text layers.

How to check it: Open the Assets → Text Styles panel. If you see more than 8–10 one-off text styles for a template with 4-5 pages, you're not using the system — you're recreating it per-instance.

3. Image Optimization

SEO-optimized Framer templates load fast, and images are the most common cause of a slow one.

• Alt text: Add descriptive, specific alt text to every image — "Dashboard screenshot showing revenue chart" beats "image1." This matters for accessibility, image search, and increasingly for AI crawlers summarizing your page.
• WebP conversion: Framer converts uploaded images to WebP automatically — don't disable this. It's roughly 25–35% smaller than PNG/JPEG at equivalent visual quality.
• Pre-compress before uploading: Framer's auto-conversion doesn't fix a 12MB source file into a small one — it just changes format. Run images through TinyPNG, Squoosh, or ImageOptim first. Target under 500KB per image, under 200KB for anything below the fold.
• Correct dimensions: If an image displays at 600px wide, upload at roughly 1200px (2x for retina), not 4000px. Oversized source images bloat page weight even after compression.
• Hero image priority: Your hero image is almost always the Largest Contentful Paint (LCP) element. It needs to be the most aggressively optimized image on the page, since everything below the fold is already lazy-loaded by Framer.

For a deeper technical breakdown of image and asset optimization, see our full guide on .

4. Meta Data & Social Sharing

Go to Site Settings → General (and per-page SEO panel) and set up:

• Title Template: {{title}} | {{site.title}} — this way every page gets a consistent, branded title without you retyping the site name each time.
• Meta Description: Write a unique, compelling description for every page — not just the homepage. Aim for 150–160 characters that include the page's core keyword naturally.
• Social Image (OG Image): Design a dedicated 1200×630px Open Graph image. A broken or missing OG image is one of the fastest ways a template reads as unfinished when shared on Slack, X, or LinkedIn.
• Favicon: Small detail, frequently skipped. Upload a proper favicon and touch icon set — it's one of the first things buyers notice in a browser tab.

Common mistake: Leaving every CMS detail page (blog posts, product pages) with the same generic meta description inherited from a template default. Each CMS item needs its own title and description pulled from CMS fields, not a static fallback.

5. Technical SEO Settings

Framer makes Framer technical SEO easy, but the settings still have to be checked, not assumed.

• Sitemap: Enable "Generate Sitemap" in Site Settings — Framer builds and serves sitemap.xml automatically once this is on.
• Robots.txt: Confirm it isn't blocking search engines. Framer generates a sensible default, but double-check if you've added custom rules for a staging or demo subdomain — it's common to accidentally leave a Disallow: / from a demo environment in place after launch.
• Canonical URLs: Framer handles these automatically for most cases, but verify manually if the template supports custom domains or has duplicate content across CMS category filters.
• Redirects: If the template replaces an older site structure, set up 301 redirects in Site Settings rather than letting old URLs 404.

Tip: Don't stop at traditional search engines. AI crawlers (ChatGPT, Perplexity, Gemini) read your site differently — see our guide on making a for the llms.txt and structured-data setup.

6. Performance (Core Web Vitals)

Run your template demo through PageSpeed Insights or Chrome DevTools' Lighthouse tab before listing it anywhere.

A template with animations that shift layout on load, or a hero video that delays LCP by 4 seconds, will fail Core Web Vitals even if the design is excellent. For the full tactical breakdown, including code overrides, font loading, and CMS query optimization, read our complete guide on .

7. Structured Data for CMS Pages

If your template includes a CMS collection (blog, portfolio, products), add JSON-LD schema to the detail page template using Framer's CMS variables in Custom Code:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": {{Title | json}},
  "description": {{Description | json}},
  "datePublished": {{DatePublished | json}},
  "image": {{ImageURL | json}}
}
</script>

Why it matters: Structured data is what turns a plain blue link into a rich result — star ratings, FAQ dropdowns, article dates — in Google's results. It's also increasingly how AI answer engines decide what a page is before deciding whether to cite it.

Since this is added once to the CMS detail-page template, it automatically applies to every item in the collection — one setup, infinite pages covered.

The "Template Seller" Secret: Make SEO a Selling Point

When you list your template on a marketplace, don't bury SEO readiness in the fine print — lead with it:

• ✅ SEO-Optimized Structure (single H1, proper H2–H4 hierarchy)
• ✅ 90+ Lighthouse Performance Score
• ✅ Automatic WebP Image Delivery
• ✅ Semantic HTML5 Tags (nav, main, footer)
• ✅ Pre-Configured Meta Titles & OG Images
• ✅ Schema-Ready CMS Templates

This tells buyers your template isn't just pretty — it's built to actually perform once it's live, which is exactly what an agency buyer needs to justify the purchase to their own client.

SEO-Ready Template vs. Typical Marketplace Template

Quick Pre-Launch Audit (5 Minutes, Every Template)

Before you list a template, run this fast pass — it catches the mistakes above without re-reading the whole checklist:

1. View page source (Cmd/Ctrl + U) on the demo. Search for <h1 — confirm there's exactly one, and it isn't empty.
2. Run Lighthouse (Chrome DevTools → Lighthouse tab, Performance + SEO categories). Anything below 90 on either needs a fix before listing.
3. Share the demo URL in a private Slack channel or Notes app and check the link preview. If the OG image is broken or missing, buyers will see it too.
4. Visit /sitemap.xml and /robots.txt directly in the browser. Confirm the sitemap lists your real pages and robots.txt isn't blocking Disallow: /.
5. Resize to mobile width in DevTools and check that body text is legible without zooming and nothing shifts as it loads.

This five-minute pass won't catch everything on the full checklist, but it catches the specific mistakes that make an otherwise well-designed template look unfinished to a buyer scanning it for thirty seconds before deciding whether to purchase.

Conclusion

SEO isn't magic. It's a checklist, and it's one most template creators skip because it isn't visible in a marketplace screenshot.

By making your Framer templates SEO-ready — clean semantic structure, real metadata, compressed images, and verified Core Web Vitals — you give your customers a head start on their own marketing, which translates directly into fewer refunds, better reviews, and repeat buyers.

For the broader ranking strategy beyond templates (content, backlinks, keyword targeting), read our full . And if you'd rather start from a foundation that's already built this way, browse — every product ships with this checklist already applied.