A lot of portfolios are invisible. The work is good, the design is clean, and almost nobody finds it — because the site was never set up to be found. This is the first half of what I’ve learned about getting a Framer site to rank: the fundamentals and the setup. I’ll cover what the three kinds of optimization actually are, how to measure where you stand, and how to design your Framer site so it scores well. I’ll walk through it on my own portfolio as I go. The second half — actually submitting your site and getting it indexed — is its own piece.
What SEO, GEO, and AEO actually mean
There are three terms worth knowing, and they’re no longer interchangeable.
SEO — Search Engine Optimization. The classic one. It’s making your site’s content and metadata parsable and easy to digest for search engines. Google and Bing are the two players that matter; optimize for those.
GEO — Generative Engine Optimization. This is for the conversational interfaces — ChatGPT, Perplexity, Claude. It’s getting your site surfaced inside AI chat conversations. This matters more every month, as more and more buying and discovery happens through AI integrations — Shopify inside ChatGPT, one-click buys in Perplexity, recommendations folded into Amazon. If you’re not legible to those systems, you don’t exist inside them.
AEO — Answer Engine Optimization. Those little preview answers Google shows at the top of the results, summarizing a page so the user can spot the answer without clicking through. Still powerful: an enormous amount of traffic moves through Google, and landing in one of those snippets converts well.
For a portfolio, you want all three. The good news is that the work you do for one mostly helps the others.
How to measure where you stand
Before you change anything, get a baseline. Everything here is free.
Yoast SEO Checker. Go to yoast.com/tools/seo-checker, paste your URL, and you get a guided report with actionable feedback. Work through the suggestions and aim for green marks. One thing not to panic about: red marks on your social links. Instagram and Facebook block SEO crawlers, so those will flag no matter what you do.
Detailed SEO extension. It’s in the Chrome extension store — look for the purple “D” logo. It surfaces your metadata in one panel. The things worth checking: nofollow links, schemas, and your heading hierarchy. It also shows your Open Graph data, which is what gets pulled when someone shares your link.
Lighthouse. Built into Chrome DevTools. It runs a performance and SEO audit on the page. Run it in an incognito tab, not a normal one — extensions and cached state in your normal window skew the results. Set it to Desktop mode with the Navigation default. It analyzes the page load and hands you scores for performance, accessibility, best practices, and SEO.
The workflow I’d use: run Yoast first to find the problem areas, use the Detailed SEO extension to dig into the specifics, cross-reference what the two are telling you, then run Lighthouse as a final check.
Designing a Framer site for good SEO
This is where most of the work is. Start at the site level, then go page by page.
Site-level settings
In Framer, these live under Settings, then Site Settings.
Site title. Fill the whole text box — roughly the length Framer gives you. Include something about you and what you do. The test is whether it’s instantly clear to anyone scanning it, AI included.
Site description. Keep it to about 150 characters — shorter than you think. Treat it as an extension of your title that references your main page content. Use the preview to see how it actually renders.
Visual assets. Three things to set: the favicon that shows in the browser tab, the social preview image that appears when your link is shared, and the Apple touch icon that’s part of the web app manifest. If you skip the social preview, Framer just grabs the first image on your site — which is almost never the one you’d have chosen.
Google Analytics. Go to analytics.google.com, sign up, add your site, and copy the tracking key. Paste it into Framer’s settings, save, and verify it’s reporting.
Page-level settings
Every page, including the homepage. Use the same title and description rules as the site level. Then check “Allow search engines to index this page.” Indexing lets engines list you — but it doesn’t send people to you. Think of it as a restaurant with an “Open” sign in the window but no signage telling anyone what it serves. Necessary, not sufficient. Add a custom social preview image for each page too, rather than relying on the first-image auto-pick.
Page titles. Don’t lead with your brand name. Lead with the project or page, then your brand: “Project Name — Your Brand,” not “Your Brand — Project Name.” The specific thing should come first.
Page descriptions. Descriptive, and genuinely relevant to what’s on that page.
JSON schema
This is extra metadata documentation that tells search engines what your site is about and how it’s structured. Yoast’s checker will validate it for you.
To create it, you can use an AI tool or jsonschema.io. Compile the key information about yourself, generate the schema, then validate it.
A few rules that keep it useful:
- Only include high-value content. Don’t dump everything you possibly can into it.
- Add it to the end of the head tag, not the beginning — putting it first slows the page down.
- You can add schema to the homepage and to individual pages. It’s not strictly required on every page, but it doesn’t hurt.
Set your canonical link while you’re in here, too.
How content is arranged on the page
This is the part people skip, and it’s the part that moves your score.
Heading hierarchy. One H1 per page, maximum. From there, nest cleanly: H1, then H2, then H3, then H4. Everything that isn’t a heading should be body text. And note — search engines detect both labeled headings and text that’s merely styled to look like a heading, so you can’t fake your way around the structure with font sizes.
In Framer, select the text, click the plus button, then the style button, and apply the right heading style. Build distinct visual styles for each level. If you’ve got several text elements that all look like headings, make sure only one is actually marked H1 and the rest are body text. Use as many body styles as you need. Multiple H1s will dock your SEO score — engines need a clear hierarchy to understand the page.
Image alt text. A short text description of each image, for accessibility and for search engines. In Framer, select the image, go to field styles, click the image, and add your alt text there. Worth knowing: the alt-image title is the tooltip on hover, not an SEO field — Framer doesn’t expose a separate SEO title, that takes custom code. Give every image alt text. Descriptive but concise, with relevant keywords used naturally.
Nofollow links. A nofollow is an attribute that tells search engines not to follow a link, so an external site doesn’t drag on your own SEO. Use it on links to domains you don’t own or fully trust — LinkedIn, social media, external resources. Don’t use it on your own internal pages. In Framer, click the link or button, find the link relationship (REL) option, and toggle nofollow on for every external link.
In practice: keep your About page, Work page, and résumé as normal internal links; add nofollow to LinkedIn, Instagram, Notion pages, and reading lists.
Accessibility and contrast. This is the Lighthouse pass. Open your site in Chrome, open DevTools with Cmd+Option+I (Ctrl+Shift+I on Windows) in an incognito tab for accurate results, and go to the Lighthouse tab on the far right. Set Desktop, Navigation default, check all the categories, and run it — it takes a minute or two.
What you’re reading: performance (load speed and largest contentful paint), accessibility (contrast, element sizing), best practices (general web standards), and the SEO score (your technical setup). One caveat — a 100 on the SEO score doesn’t mean you’re done. Accessibility and best practices feed into how you rank too. Fix the critical issues first, then work down the list.
What comes next
That’s the setup. Once your site is built to be found, the remaining job is telling the internet to actually go look at it — Google Search Console, Bing Webmaster Tools, submitting your sitemap (Framer auto-generates one), and faster indexing through tools like IndexNow. That’s the second half, and I’ll walk through it on its own.