🔍 My Next.js Portfolio Was Invisible to Google & ChatGPT — Here's How I Fixed It
👋 Hey! I'm Dhruv Sheladiya , a Full Stack Developer working with the MERN Stack, React.js, Next.js & Node.js . This is the story of how I found out my own portfolio was basically invisible , and the 5 fixes that changed that. 😬 The Embarrassing Discovery I Googled my own name. Here's what I found: What I expected What actually happened ✅ My portfolio at the top ❌ Barely showing up ✅ A nice…
Dhruv Sheladiya, a Full Stack Developer, discovered that his own portfolio was invisible to Google and ChatGPT. After Googling his name, he found that:
✅ His portfolio appeared at the top
❌ It barely showed up
✅ It had a nice preview image
❌ It had no image
✅ ChatGPT recognized him
❌ It didn't have enough information about Dhruv
The issue stemmed from an animated loader on the homepage, which only contained HTML for the loader. Crawlers couldn't see the name, heading, or links. However, the page worked fine for real users. For crawlers, the HTML only contained the loader, resulting in an empty page that ChatGPT couldn't process.
The root cause was that the crawlers didn't see the essential content. To fix this, Dhruv implemented server-rendering for the important content using a Server Component in his layout.js file. This added an accessible profile block that crawlers could see, but didn't alter the design. He also included a JSON-LD structured data file that connected all his profiles, ensuring Google could link them accurately.
Lastly, Dhruv addressed the openGraph image issue, which was much larger than required. He used the sharp library to resize the image to the appropriate dimensions (1200×630) and reduced its weight from 1.77 MB to 80 KB. Following these steps, his portfolio became visible to crawlers, Google, and AI chatbots like ChatGPT.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
