DEV Community: hunterx13

How I built a Next.js app with 1,500+ localized routes and perfect Technical SEO 🚀

hunterx13 — Sat, 21 Mar 2026 00:16:48 +0000

Building a micro-SaaS is only half the battle. Getting Google to care about it is the real challenge.

When I set out to build ProMetadata—a suite of 14 tools to inject, extract, clean, and score image/PDF metadata—I knew my growth strategy had to be 100% organic search. I didn't want to rely on paid ads. I needed an architecture that would allow me to scale globally from day one while maintaining perfect Core Web Vitals.

Here is a breakdown of the technical SEO architecture I built using Next.js to support 20 languages and over 1,500 static routes.

🌍 1. The Multilingual Architecture (20 Locales, Zero Layout Shift)

To capture global search volume, the app needed to be accessible in 20 different languages (from English and French to Japanese, Hindi, and Arabic).

Dynamic Middleware: I set up Next.js middleware to handle dynamic routing for all 20 locales seamlessly.
100% SSG: Speed is a massive ranking factor. Every single localized route is statically generated (SSG).
Localized Metadata: It’s not just the UI that translates. The Title, Description, and OpenGraph tags are dynamically generated for the specific locale on the server before the page is served to the client.

🗺️ 2. Taming a 1,500+ URL Sitemap

Managing a sitemap for a multi-language site with 14 distinct tools can get messy fast. I built an automated sitemap generator that outputs all 1,500+ localized URLs with strict rules:

Hreflang Integration: Alternates (hreflang) are embedded directly inside the sitemap.xml and the HTML head to ensure Google never penalizes for duplicate content across regions.
Strict Prioritization: The generator assigns intelligent priorities automatically (e.g., 1.0 for the Home page, 0.9 for Alternative pages, 0.8 for individual Tools).
Freshness Tags: Explicit lastmod and changefreq tags are applied to every entry to guide crawler budgets.

🧠 3. Heavy Structured Data (JSON-LD)

Google loves structured data. Instead of just adding a basic schema, I programmatically injected specific JSON-LD schemas across all 14 tool pages:

SoftwareApplication Schema: Applied globally across all tool pages to define exactly what the application does to search engines.
FAQ & HowTo Schemas: Automatically injected into the tools. If someone searches "How to batch rename EXIF data" or "How to inject SEO metadata," Google can pull the exact steps from my HowTo schema directly into a rich snippet.

🥊 4. Programmatic Competitor Targeting

To capture bottom-of-the-funnel traffic, I built dedicated comparison pages (like /metadata2go-alternative).

From a technical standpoint, this page is highly optimized with targeted URL paths, specialized metadata, and comparison grids that highlight features competitors lack, such as:

Bulk SEO optimization
Webhook integrations
Full metadata injection (not just extraction)

⚡ 5. Resource Optimization

You can have the best metadata in the world, but if your site takes 4 seconds to load, you're dead in the water.

Strict Canonicals: Implemented across all localized paths to consolidate link equity and prevent keyword cannibalization.
Asset Naming: Even the site logo is optimized (prometadata-metadata-tool-logo.png) with programmatic alt text across all components.
Web Vitals: By relying heavily on Next.js standard image optimization, system fonts, and static generation, the Lighthouse scores stay pinned in the green.

The Takeaway

Building this level of technical SEO into the foundation of a Next.js app takes a lot of upfront work, but the compound interest of organic traffic is worth it.

If you are building a tool right now, don't wait until after launch to think about your URL structure, hreflang tags, and schemas. Build them into your components from day one.

You can check out the live architecture and try the tools for free here: ProMetadata

How are other devs handling massive localized sitemaps in Next.js App Router? Let me know in the comments! 👇

I Built a Free Metadata Injection + EXIF Suite — Here's Why and How

hunterx13 — Wed, 18 Mar 2026 15:22:30 +0000

Every time I uploaded images to a CMS, I hit the same wall.

Files had zero metadata. No EXIF. No XMP. No keywords. Just raw pixels named IMG_20240312_084521.jpg.

Google Image Search couldn't make sense of them. Rankings suffered.

Existing tools only let you view or remove metadata — nobody was solving the injection problem for non-technical users. So I built ProMetadata.

🔍 The Problem Nobody Talks About

Most developers know metadata exists. Few know how badly missing metadata hurts SEO.

Here's what Google sees when it crawls a file with zero metadata:

File:             IMG_20240312.jpg
EXIF title: "      [empty]"
XMP description: " [empty]"
IPTC keywords:    [empty]
Alt text:         [empty]

Google confidence this image is relevant: ~0%

Now the same image — properly injected:

File:             red-leather-wallet-mens-slim.jpg
EXIF title: "      \"Men's Slim Red Leather Wallet\""
XMP description: " \"Handcrafted slim wallet, fits 8 cards\""
IPTC keywords:    "wallet, leather, mens accessories"
Alt text:         "Men's slim red leather wallet"

Google confidence: High ✅

Same image. Completely different SEO outcome.

🛠️ What ProMetadata Does

Free. No login. No installation.

Tool	What it does
Inject Metadata	Add EXIF, XMP, IPTC to images and PDFs
Extract Metadata	Deep forensic analysis of any file
Metadata Cleaner	Strip GPS, camera info, author data
SEO Scoring	Lighthouse — but for your files
ALT Text Generator	AI-generated SEO alt text
WebP Converter	Bulk high-fidelity WebP conversion
Bulk Optimizer	Compress + convert + inject in one pass
Sitemap Generator	Image and PDF sitemaps for indexing
Metadata Validator	Audit files for missing EXIF and SEO gaps
CMS Webhook	Auto-process images entering your CMS

⚙️ How I Built It — Technical Decisions

Next.js App Router + Server-Side Metadata

Every tool page uses generateMetadata() server-side. Google gets fully populated meta tags on first crawl — not client-rendered emptiness.

// app/[locale]/inject/page.tsx
export async function generateMetadata({ 
  params: { locale } 
}: { 
  params: { locale: string } 
}) {
  const t = await getTranslations({ locale, namespace: 'inject' });

  return {
    title: t('meta.title'),
    description: t('meta.description'),
    alternates: {
      canonical: `https://prometadata.com/${locale}/inject`,
      languages: {
        'en': 'https://prometadata.com/en/inject',
        'fr': 'https://prometadata.com/fr/inject',
        'ar': 'https://prometadata.com/ar/inject',
        'es': 'https://prometadata.com/es/inject',
      }
    }
  };
}

Multilingual From Day One

10+ languages with proper hreflang tags on every page. Arabic is a massively underserved market for developer tools — almost zero competitors have proper RTL metadata tooling.

The key insight: same SEO effort in Arabic = 5× easier to rank because competition is near zero.

Privacy-First File Processing

All file processing happens in the browser where possible, or on ephemeral serverless functions. Files are never stored. This matters — people using a metadata cleaner are privacy-conscious by definition. If you store their files, you lose their trust immediately.

SoftwareApplication Schema on Every Tool Page

{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "ProMetadata Metadata Injector",
  "url": "https://prometadata.com/inject",
  "applicationCategory": "UtilitiesApplication",
  "operatingSystem": "Web",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  }
}

This gets you rich results in Google and citation in AI search tools like Perplexity.

🔗 The CMS Webhook — For Developers

This is the feature I'm most excited about. The CMS Webhook auto-processes images as they enter your CMS:

// Your CMS fires a webhook on new image upload
// ProMetadata processes and returns the optimized file

POST https://prometadata.com/api/webhook
Content-Type: application/json

{
  "url": "https://your-cms.com/uploads/photo.jpg",
  "operations": [
    "inject_metadata",
    "convert_webp", 
    "rename_seo"
  ],
  "metadata": {
    "title": "Product photo — Red Wallet",
    "keywords": ["wallet", "leather", "product"]
  }
}

Every image entering your CMS comes out SEO-ready automatically. No manual work for your content team.

💡 3 Things I Learned Building This

1. The metadata tooling space is frozen in 2015

Most existing tools haven't updated their UI or feature set in years. The top-ranking competitors look like they were built in jQuery and never touched again. There's a massive opportunity for a modern, fast, well-designed alternative.

2. Privacy is a bigger use case than I expected

I thought developers and SEO professionals would dominate my user base. Turns out journalists, photographers, lawyers, and privacy-conscious individuals are equally large. Metadata leaks GPS coordinates, device serial numbers, and author names — most people have no idea their photos contain this data.

3. Bulk processing is the conversion point

Single file = free forever. The moment someone needs to process 50+ files, they feel the friction and understand the value of upgrading. Design your free tier around demonstrating the pain of doing it one file at a time.

📊 The SEO Architecture Behind It

Since this is a tool site, every page needs to rank independently. The structure I settled on:

prometadata.com/                    ← brand + overview
prometadata.com/[locale]/[tool]     ← tool pages rank for primary keywords
prometadata.com/blog/               ← informational content, topical authority
prometadata.com/[tool]/[format]     ← programmatic pages for long-tail keywords

Example programmatic pages:
/inject-metadata-jpg
/inject-metadata-png  
/remove-metadata-iphone-photo
/view-exif-data-canon-photo

10 tools × 20 formats × 10 languages = 2,000 indexed pages each targeting a specific long-tail keyword. Built with generateStaticParams in Next.js.

🚀 Try It

prometadata.com — free, no account needed, works on any browser.

I'd love feedback from the dev.to community specifically on:

What metadata workflows are painful in your current setup?
Would you use the CMS webhook in a production pipeline?
Any file formats or edge cases you wish were supported?

Drop a comment — every piece of feedback shapes the roadmap directly.

Built with Next.js · Deployed on Vercel · Free forever for single files

Follow the build: prometadata.com