How I Build Fast, SEO-Friendly Websites Using React & Next.js

Building Websites That Both Google and Users Love

Most developers focus on making websites look good. Few focus on making them fast AND discoverable. In my experience building 15+ production websites, I've learned that performance and SEO are not optional — they're the foundation of every successful business website.

In this post, I'll share my exact process for building websites that score 90+ on Google PageSpeed, rank well on search engines, and provide an excellent user experience.

My SEO-First Development Process

Step 1: Semantic HTML Structure

Before writing any React component, I plan the HTML structure. Search engines rely on semantic HTML to understand your content.

Here's what I always include:

• One <h1> per page — clearly describes the page's main topic
• Logical heading hierarchy — h1 → h2 → h3, never skip levels
• Semantic elements — <header>, <main>, <article>, <section>, <footer>, <nav>
• Descriptive alt text for every image
• Internal linking between related pages

// Good: Semantic structure
<main>
  <article>
    <h1>Web Development Services in Lucknow</h1>
    <section>
      <h2>What I Offer</h2>
      <p>Custom website development for businesses...</p>
    </section>
  </article>
</main>
 
// Bad: Div soup
<div>
  <div>
    <div className="title">Web Development Services</div>
    <div>What I Offer</div>
  </div>
</div>

Step 2: Next.js Metadata API for On-Page SEO

Every page on your website needs proper meta tags. Next.js makes this easy with the Metadata API:

// app/services/page.tsx
export const metadata = {
  title: "Web Development Services | Ajay Upadhyay",
  description: "Custom website development, admin dashboards, and web applications for startups and businesses. Built with React, Next.js & Node.js.",
  keywords: ["web development services", "freelance developer", "next.js developer"],
  openGraph: {
    title: "Web Development Services | Ajay Upadhyay",
    description: "Custom websites for businesses that convert visitors into customers.",
    type: "website",
    images: ["/og-image.jpg"],
  },
  twitter: {
    card: "summary_large_image",
    title: "Web Development Services",
    description: "Custom websites for businesses.",
    images: ["/og-image.jpg"],
  },
};

Key SEO elements I set for every page:

• Title tag (50-60 characters) — includes primary keyword
• Meta description (150-160 characters) — compelling summary with keywords
• Open Graph tags — for social media sharing (Facebook, LinkedIn)
• Twitter Card tags — for Twitter/X sharing
• Canonical URL — prevents duplicate content issues
• Robots meta — controls indexing behavior

Step 3: Core Web Vitals Optimization

Google uses Core Web Vitals as a ranking signal. There are three metrics that matter:

LCP (Largest Contentful Paint) — Target: Under 2.5 seconds

LCP measures how fast the main content loads. To optimize:

• Use next/image with priority prop for above-the-fold images
• Preload critical fonts using next/font
• Server-side render the initial page content
• Avoid large JavaScript bundles that block rendering

import Image from "next/image";
 
// Hero image with priority loading
<Image
  src="/hero-image.jpg"
  alt="Business website development services"
  width={1200}
  height={630}
  priority  // Preloads this image
  className="object-cover"
/>

CLS (Cumulative Layout Shift) — Target: Under 0.1

CLS measures visual stability. Nothing is more annoying than content jumping around while you're trying to read.

• Always set width/height on images and videos
• Use next/font to prevent font-swap layout shifts
• Reserve space for dynamic content (ads, embeds)
• Avoid injecting content above existing content

INP (Interaction to Next Paint) — Target: Under 200ms

INP measures responsiveness to user interactions.

• Avoid heavy JavaScript on the main thread
• Use React.lazy() for components that aren't immediately needed
• Debounce expensive operations like search and filtering
• Use useTransition for non-urgent state updates

Step 4: Image Optimization Strategy

Images are usually the heaviest assets on a website. Here's my optimization approach:

1. Use next/image everywhere — automatic WebP/AVIF conversion, lazy loading, responsive sizing
2. Compress images before upload — I use tools like Squoosh or TinyPNG
3. Use appropriate formats — WebP for photos, SVG for icons and logos
4. Implement blur placeholders — shows a blurred preview while the image loads

<Image
  src="/project-screenshot.jpg"
  alt="E-commerce dashboard built with Next.js"
  width={800}
  height={450}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Step 5: Structured Data (Schema Markup)

Structured data helps Google understand your content and can get you rich snippets in search results — star ratings, FAQ dropdowns, breadcrumbs, and more.

I add JSON-LD structured data for:

• Organization schema — business name, logo, contact info
• LocalBusiness schema — for businesses targeting local customers
• Article schema — for blog posts (shows publish date, author in search results)
• FAQ schema — for FAQ sections (shows expandable Q&A in search results)
• BreadcrumbList — shows page hierarchy in search results

// Example: Article structured data for blog posts
<script type="application/ld+json">
{JSON.stringify({
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "How I Build Fast, SEO-Friendly Websites",
  "author": {
    "@type": "Person",
    "name": "Ajay Upadhyay"
  },
  "datePublished": "2026-03-15",
  "description": "Complete guide to building SEO-optimized websites with Next.js"
})}
</script>

Step 6: Technical SEO Checklist

Before launching any website, I go through this checklist:

• XML Sitemap generated and submitted to Google Search Console
• robots.txt properly configured
• Canonical URLs set on all pages
• 404 page custom designed
• 301 redirects for any changed URLs
• HTTPS enabled (free with Vercel)
• Mobile responsive — tested on real devices
• PageSpeed score 90+ on both mobile and desktop
• Open Graph image set for social sharing
• Google Analytics and Google Search Console connected
• Meta Pixel installed for Facebook/Instagram ad tracking

Step 7: Performance Monitoring

After launch, I set up monitoring to catch performance regressions:

• Google Search Console — track indexing, clicks, impressions, and keyword rankings
• Google Analytics 4 — user behavior, traffic sources, conversion tracking
• PageSpeed Insights — regular Core Web Vitals checks
• Lighthouse CI — automated performance testing on every deployment

Real Results: Before & After

Here's what these optimizations look like in practice:

Tools I Use for SEO & Performance

• Google Search Console — free keyword tracking and indexing management
• Google PageSpeed Insights — Core Web Vitals testing
• Ahrefs / Ubersuggest — keyword research and competitor analysis
• Screaming Frog — technical SEO audits
• Schema.org Validator — validate structured data markup

Want a Fast, SEO-Optimized Website?

If you're looking for a developer who builds websites with performance and SEO as a priority, not an afterthought — let's talk.

I build custom websites using React, Next.js, and Node.js that are designed to rank on Google and convert visitors into customers.

Get a free consultation →