TechTrends Now - Tech News for Builders and Operators

I run a small web development agency called Best Web Devlopment agency in varanasi
based in Varanasi, India. This is a technical breakdown of how I built
and optimised a Next.js website that started ranking on Google within
45 days — covering the exact implementation decisions that made the
difference.

The Stack

Framework:     Next.js 14 (App Router)
Hosting:       Vercel
CMS:           Custom MongoDB + Node.js API
Styling:       Tailwind CSS
Analytics:     Google Analytics 4
SEO:           next-sitemap + custom schema

1. App Router Metadata Implementation

The biggest SEO win in Next.js 14 is the new Metadata API.
Static metadata on every page is no longer optional.

// app/layout.js
export const metadata = {
  metadataBase: new URL('https://synor.in'),
  title: {
    default: 'Synor — Web Development Agency Varanasi',
    template: '%s | Synor'
  },
  description: 'Professional web development and digital marketing agency in Varanasi.',
  openGraph: {
    type: 'website',
    locale: 'en_IN',
    url: 'https://synor.in',
    siteName: 'Synor',
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
    }
  }
}

For dynamic blog pages I generate metadata per post:

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug)
  return {
    title: post.seoTitle,
    description: post.seoDescription,
    keywords: post.seoKeywords,
    openGraph: {
      title: post.seoTitle,
      description: post.seoDescription,
      images: [{ url: post.featuredImage }],
    }
  }
}

2. LocalBusiness Schema Markup

This was the single biggest ranking factor for local keywords.
I inject schema directly in the root layout:

// components/LocalBusinessSchema.js
export default function LocalBusinessSchema() {
  const schema = {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Synor",
    "description": "Web development and digital marketing agency in Varanasi",
    "url": "https://synor.in",
    "telephone": "+919125258698",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "Awas Vikas Colony, Pandeypur",
      "addressLocality": "Varanasi",
      "addressRegion": "Uttar Pradesh",
      "postalCode": "221002",
      "addressCountry": "IN"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": "25.3176",
      "longitude": "82.9739"
    },
    "openingHours": "Mo-Sa 09:00-18:00",
    "priceRange": "₹₹",
    "areaServed": {
      "@type": "City",
      "name": "Varanasi"
    },
    "sameAs": [
      "https://www.linkedin.com/company/synor",
      "https://github.com/synor"
    ]
  }

  return (

  )
}

3. ISR for Blog Pages

Static generation for every blog post with 1 hour revalidation.
This gives you static page speed with dynamic content freshness:

// app/blog/[slug]/page.js
export const revalidate = 3600 // 1 hour

export async function generateStaticParams() {
  const posts = await getAllPostSlugs()
  return posts.map(post => ({
    slug: post.slug
  }))
}

Result — blog pages consistently score 95+ on PageSpeed Insights
because they serve as static HTML with no server render delay.

4. Dynamic Sitemap Generation

// app/sitemap.js
export default async function sitemap() {
  const blogs = await getAllBlogs()
  const caseStudies = await getAllCaseStudies()

  const blogUrls = blogs.map(blog => ({
    url: `https://synor.in/blog/${blog.slug}`,
    lastModified: blog.updatedAt,
    changeFrequency: 'weekly',
    priority: 0.8,
  }))

  const caseStudyUrls = caseStudies.map(cs => ({
    url: `https://synor.in/case-studies/${cs.slug}`,
    lastModified: cs.updatedAt,
    changeFrequency: 'monthly',
    priority: 0.9,
  }))

  return [
    {
      url: 'https://synor.in',
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
    },
    {
      url: 'https://synor.in/services',
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.9,
    },
    ...blogUrls,
    ...caseStudyUrls,
  ]
}

This auto-updates every time a new blog or case study is published
from the CMS — no manual sitemap management needed.

5. FAQ Schema on Blog Posts

Every blog has an FAQ section. Adding FAQ schema gets you
featured snippets on Google — the answer box above all results:

// components/FAQSchema.js
export default function FAQSchema({ faqs }) {
  const schema = {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": faqs.map(faq => ({
      "@type": "Question",
      "name": faq.question,
      "acceptedAnswer": {
        "@type": "Answer",
        "text": faq.answer
      }
    }))
  }

  return (

  )
}

6. Image Optimization

Next.js Image component with WebP conversion and lazy loading
on every image across the site:

import Image from 'next/image'

// Every image on the site uses this pattern

The alt text pattern ${post.title} — Synor Web Development
naturally includes target keywords on every image without
keyword stuffing.

7. Core Web Vitals Fixes That Moved the Needle

Three specific fixes that improved PageSpeed from 67 to 91 on mobile:

Fix 1 — Font preloading

// app/layout.js

Fix 2 — Above fold image priority

// Hero image gets priority={true} — loads before anything else

Fix 3 — Suspense boundaries for dynamic content

}>

This prevents the entire page from blocking on data fetching —
users see the layout instantly while content loads.

Results After 45 Days

Page moved from position 90+ to position 85 on target keyword
23 out of 40 pages indexed within first 30 days
Mobile PageSpeed consistently 88 to 92
Core Web Vitals all green in Search Console
First organic traffic from Google within 3 weeks of launch

Still climbing — will post a follow-up at the 90 day mark.

What I Would Do Differently

Add schema markup from day 1 — I added it in week 2 which delayed indexing by about a week
Submit sitemap manually on launch day — do not wait for Google to discover it
Request indexing manually for every page in Search Console immediately after publishing — this alone cut indexing time from weeks to days

If you are building a local business website in Next.js and want
to rank on Google, the technical fundamentals above are the
non-negotiables. Content and backlinks matter — but broken
technical SEO kills everything else you do.

Happy to answer questions about any specific implementation
in the comments.

— Shashwat, Synor


markdown

How I Built a Local SEO Optimised Next.js Website That Ranked on Google in 45 Days

The Stack

1. App Router Metadata Implementation

2. LocalBusiness Schema Markup

3. ISR for Blog Pages

4. Dynamic Sitemap Generation

5. FAQ Schema on Blog Posts

6. Image Optimization

7. Core Web Vitals Fixes That Moved the Needle

Results After 45 Days

What I Would Do Differently

Comments (0)

United States

Related News

Jeff Bezos Seeking $100 Billion to Buy Manufacturing Companies, 'Transform' Them With AI

Firefox Announces Built-In VPN and Other New Features - and Introduces Its New Mascot

Can Private Space Companies Replace the ISS Before 2030?

Juicier Steaks Soon? The UK Approves Testing of Gene-Edited Cow Feed

White House Unveils National AI Policy Framework To Limit State Power