DEV Community

Cover image for My Portfolio Site Was Invisible to AI. Here's What Fixed It.
Kaustubh Jogle
Kaustubh Jogle

Posted on

My Portfolio Site Was Invisible to AI. Here's What Fixed It.

#portfolio #seo #aeo #webdev

I built my portfolio site as a slick React SPA with a hero section, smooth scroll-spy navbar, the works. Looked great in a browser. Then I ran an framer AEO report.

27 out of 100. Bottom 25%.

The diagnosis was blunt: "AI can't understand this site yet. The site lacks essential text content."

Turns out, I'd built a site that was beautiful to humans and completely invisible to machines. Here's how I took it from 27 to ~85 in a single afternoon and what I wish I'd known before I started.

Wait, What's AEO?

AEO stands for AI Engine Optimization, think of it as SEO that specifically cares about how AI systems (ChatGPT, Gemini, Perplexity, Claude) understand and cite your content. It scores across four categories:

  • Findable — Can crawlers discover your pages?
  • Quotable — Is there enough real text to quote?
  • Understandable — Does the page have structured meaning?
  • Trustworthy — Does the content link to credible sources?

My site was mediocre on the first two and zeroed out on the last two. Cool.

The Root Problem: SPAs Are Invisible by Default

Here's the thing nobody tells you when you ship a Vite + React SPA: AI crawlers don't execute JavaScript. They see your index.html, which in my case looked like this:

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

That's it. That's what GPTBot, ClaudeBot, and PerplexityBot see in an empty div. My entire portfolio experience, projects, skills, and education existed only in a JavaScript-rendered DOM. To a crawler, my site was a blank page with a title.

The Fixes, Category by Category

Findable: The Low-Hanging Fruit (+14 points)

Two files I simply didn't have:

sitemap.xml — A single-page portfolio only needs one <url> entry. Took 30 seconds.

Canonical URL — One <link> tag in <head>. Without it, AI treats kaustubhjogle.site, www.kaustubhjogle.site, and kaustubhjogle.site/ as three different pages.

<link rel="canonical" href="https://kaustubhjogle.site/" />
Enter fullscreen mode Exit fullscreen mode

I also updated robots.txt to explicitly welcome AI crawlers. The default User-agent: * / Allow: / technically works, but naming them directly GPTBot, ClaudeBot, PerplexityBot, Google-Extended signals intent.

Quotable: The Big One (+14 points)

This was the category that hurt the most, because the fix forced me to confront an uncomfortable truth: my entire site had zero words of readable text as far as crawlers were concerned.

The solution? A <noscript> block. I wrote 500+ words of semantic HTML that mirrors my portfolio content, full of sentences about my experience, skills, projects, and education. It's invisible to JavaScript-enabled browsers but fully readable by crawlers.

<noscript>
  <main>
    <h1>Kaustubh Jogle — Software Engineer</h1>
    <section>
      <h2>Professional Experience</h2>
      <!-- ... Portfolio content -->
    </section>
    <!-- ... full portfolio content continues -->
  </main>
</noscript>
Enter fullscreen mode Exit fullscreen mode

This felt redundant. It is redundant. But it's also the difference between "AI can't understand this site" and "AI can quote you accurately."

I also added a FAQ section, both as a React component and in the <noscript> fallback. Questions like "What technologies does Kaustubh work with?" with proper answers. This maps directly to how people ask AI assistants about developers.

Understandable: Structure Over Style (+18 points)

My hero section had two <h1> tags, one for "KAUSTUBH", one for "JOGLE". Looked sick visually. Terrible semantically. Merged them into a single <h1> with <span> children:

<h1 className="display-giant ...">
  <span>KAUSTUBH</span>
  <span>JOGLE</span>
</h1>
Enter fullscreen mode Exit fullscreen mode

Same visual result. Correct heading hierarchy.

The biggest win here was JSON-LD structured data. I added three schemas to <head>:

  • Person — name, jobTitle, worksFor, alumniOf, sameAs (GitHub, LinkedIn), knowsAbout
  • WebSite — basic site metadata
  • FAQPage — all my FAQ question-answer pairs

This is the most reliable way for AI to understand what your page is about, not just that it exists.

I also filled in the OG tags I'd left empty: og:description, og:url, og:image. These weren't just empty strings; they were literally content="". Cringe.

Trustworthy: Links Actually Matter (+25 points)

This was the category I was scoring 0/25 on. The fix was straightforward but required touching almost every component.

Internal contextual links (nav and footer links don't count):

  • Hero tagline → "See my work experience →" linking to #experience
  • Experience description → "View my full tech stack →" linking to #tech
  • Skills section → "explore my projects →" linking to #projects

External citation links:

  • Education institutions → linked to tsec.edu and sbmp.ac.in
  • Project links changed from icon-only to visible text: "View Source" and "Try it Live"

The key insight: body links signal authority, nav links don't. The AEO checker specifically ignores navigation and footer links.

Finally, I created an llms.txt file, an emerging standard (like robots.txt but for AI) that describes your site in plain markdown. It's a bonus check that won't penalize you if missing, but adds points if present.

What I'd Do Differently

Start with the <noscript> block. If you're building a client-rendered SPA, write your noscript fallback first. It forces you to think about your content as plain text before you think about animations and layouts.

Don't treat meta tags as an afterthought. Those content="" empty strings? They shipped to production. For months. Embarrassing in retrospect, but incredibly common.

JSON-LD is not optional anymore. It used to feel like bonus points for SEO nerds. Now it's the primary way AI systems categorize your content. For a portfolio site, the Person schema alone does heavy lifting.

The Scorecard

Category Before After
Findable 11/25 25/25
Quotable 11/25 25/25
Understandable 5/25 25/25
Trustworthy 0/25 10/25
Total 27/100 85+/100

The Takeaway

AEO isn't some mystical new discipline. It's the stuff we've always known we should do: semantic HTML, proper meta tags, structured data, meaningful links, but skip because "it works in the browser."

The browser isn't the only consumer of your HTML anymore. AI is reading your markup right now, and it's grading you on whether you made it easy or impossible to understand.

For SPAs specifically, your framework renders beautiful UI. Your index.html renders nothing.
Bridge that gap, and you'll go from invisible to quotable.

Top comments (0)