I spent 3 hours debugging why Google couldn't crawl my React app. Lighthouse scores were green. The app loaded fine in the browser. But Googlebot was seeing a blank <div id="root"></div> and walking away confused. The fix was 4 lines of meta tags and a prerender config I'd been skipping for months.
If you've ever launched a side project and wondered why it sits at position 94 forever this one's for you. These are the SEO mistakes I see constantly in developer-built projects, with the actual code to fix each one.
Mistake #1: Your <head> Is Almost Empty
This is the most common one. You scaffold a Vite or CRA project, get lost in the fun part (building features), and ship with a <title> tag that just says "React App."
Google uses your <head> to understand what your page is about. If it's empty or generic, you're asking the algorithm to guess and it usually guesses wrong.
Here's what a proper meta setup looks like:
<!-- index.html or your _document.tsx in Next.js -->
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- The basics Google actually reads -->
<title>SyncBoard – Real-Time Collaborative Whiteboards for Remote Teams</title>
<meta name="description" content="Create, share, and collaborate on visual boards in real time. No signup needed. Works in any browser." />
<!-- Open Graph for social sharing (also used by some search engines) -->
<meta property="og:title" content="SyncBoard – Real-Time Collaborative Whiteboards" />
<meta property="og:description" content="Visual collaboration for remote teams. No signup needed." />
<meta property="og:image" content="https://syncboard.app/og-image.png" />
<meta property="og:url" content="https://syncboard.app" />
<meta property="og:type" content="website" />
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="SyncBoard – Real-Time Collaborative Whiteboards" />
<meta name="twitter:description" content="Visual collaboration for remote teams." />
<meta name="twitter:image" content="https://syncboard.app/og-image.png" />
</head>
Result: Google now has a clear signal for what to rank your page for. Your Twitter/LinkedIn shares show a proper preview card instead of a broken link. That alone increases click-through rates.
For multi-page apps, each route needs its own unique title and description. In React, use react-helmet-async. In Next.js, use the built-in <Head> component or the newer metadata export.
Mistake #2: Client-Side Rendering Is Invisible to Crawlers (Sometimes)
Googlebot can execute JavaScript but it does so in a low-priority queue that can take days or weeks. For a brand-new site, that means your content might not get indexed for a long time, if ever.
The safest fix: generate your HTML on the server, or at build time.
// Next.js generateStaticParams for static generation
// This creates actual HTML files at build time. Zero JS required for indexing.
export async function generateStaticParams() {
const posts = await fetch('https://your-api.com/posts').then(r => r.json());
return posts.map(post => ({ slug: post.slug }));
}
export default async function BlogPost({ params }) {
const post = await fetch(`https://your-api.com/posts/${params.slug}`)
.then(r => r.json());
return (
<article>
<h1>{post.title}</h1>
<p>{post.excerpt}</p>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
);
}
If you're not on Next.js and can't do SSR/SSG, consider prerendering. Tools like prerender.io or vite-plugin-ssr can serve static HTML snapshots to crawlers while still delivering the full SPA experience to real users.
The key diagnostic: open your browser's DevTools, disable JavaScript, and reload your page. If it's blank so is Googlebot's view of your site.
Mistake #3: You Have No Structured Data
Structured data (JSON-LD) is how you communicate with search engines in their native language. It's what powers rich results star ratings in search, FAQ dropdowns, article publishing dates, product prices. You're leaving real estate on the results page unclaimed.
This one is frustratingly easy to add and almost nobody does it:
<!-- Add this to your <head> or just before </body> -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "SEO Mistakes That Are Silently Killing Your Dev Projects",
"description": "The most common SEO errors in developer-built projects, with working code fixes.",
"datePublished": "2026-05-19",
"dateModified": "2026-05-19",
"author": {
"@type": "Person",
"name": "Your Name",
"url": "https://yoursite.dev"
},
"publisher": {
"@type": "Organization",
"name": "YourBlog",
"logo": {
"@type": "ImageObject",
"url": "https://yoursite.dev/logo.png"
}
},
"image": "https://yoursite.dev/article-image.png",
"url": "https://yoursite.dev/articles/seo-mistakes"
}
</script>
For e-commerce, add Product schema. For tools and SaaS, SoftwareApplication schema. For FAQ pages, FAQPage schema. The Schema.org validator will tell you immediately if you've got it right.
Mistake #4: Your sitemap.xml Is Missing or Stale
Google finds new pages by crawling links but a sitemap is the express lane. Without one, internal pages (especially anything not linked from your homepage) might never get discovered.
Here's a minimal sitemap generator you can run at build time:
// scripts/generate-sitemap.js
import fs from 'fs';
const BASE_URL = 'https://yoursite.dev';
// Pull your routes from wherever they live a CMS, a file system, a DB
const routes = [
{ path: '/', changefreq: 'weekly', priority: 1.0 },
{ path: '/blog', changefreq: 'daily', priority: 0.9 },
{ path: '/projects', changefreq: 'monthly', priority: 0.7 },
{ path: '/about', changefreq: 'yearly', priority: 0.5 },
];
const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
${routes.map(route => `
<url>
<loc>${BASE_URL}${route.path}</loc>
<changefreq>${route.changefreq}</changefreq>
<priority>${route.priority}</priority>
<lastmod>${new Date().toISOString().split('T')[0]}</lastmod>
</url>`).join('')}
</urlset>`;
fs.writeFileSync('./public/sitemap.xml', sitemap.trim());
console.log(`✓ Sitemap generated with ${routes.length} URLs`);
Add node scripts/generate-sitemap.js to your build script, then submit https://yoursite.dev/sitemap.xml in Google Search Console. You'll start seeing crawl coverage improve within a few days.
For projects where you want all of this meta tags, OG images, JSON-LD, sitemaps managed in one place, I recently came across @power-seo, an npm package that handles the boilerplate of setting these up consistently across a site. It's worth a look if you're tired of copy-pasting meta tag templates between projects.
What I Actually Learned
-
The blank
<head>problem is epidemic in dev projects. It takes 20 minutes to fix and has an outsized impact on whether anyone discovers your work. - Test with JS disabled. It's the fastest way to see exactly what Googlebot sees. If your content disappears, you need SSR or prerendering.
-
JSON-LD is low-effort, high-reward. One
<script>tag can unlock rich results. Most devs skip it; that's your competitive edge. - Sitemaps aren't just for enterprise sites. Even a 5-page portfolio benefits from one. Generate it at build time and forget about it.
If you want to see how I pulled all of this together on a recent project, here's the writeup: https://ccbd.dev/blog/seo-mistakes-fixed-using-the-power-seo-toolkit
What's Your Biggest SEO Headache?
I'm curious which of these bit you hardest? Did you ship a React app that sat invisible in search for months? Are you on a team where "we'll add SEO later" is a running joke? Drop it in the comments. I read every one, and honestly the war stories are the best part of this community.
Top comments (0)