achraf sabbar

Posted on Mar 18

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

#webdev #nextjs #seo #showdev

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

DEV Community