Meta-Lens

Preview · Validate · Optimize
SEO metadata, accessibility, and crawler configuration — directly from localhost, inside VS Code.

What is Meta-Lens?

Meta-Lens is a VS Code extension that gives you a live SEO and accessibility audit dashboard for any locally-running web page. Instead of deploying to staging to test your meta tags, you run your dev server and open Meta-Lens — within seconds you see your SEO score, social media previews, accessibility issues, and crawler validation, all without leaving your editor.

No internet required. No API keys. No data leaves your machine.

Features

Feature	Status
🔍 Google Search preview (desktop + mobile)	✅ v1.0
🔗 LinkedIn link preview	✅ v1.0
🐦 Twitter / X card preview	✅ v1.0
💬 WhatsApp link preview	✅ v1.0
🏷️ Full metadata inspector (all `<head>` tags)	✅ v1.0
📊 SEO score (0–100) with categorized issues	✅ v1.0
♿ Accessibility audit (WCAG-based checks)	✅ v1.0
🤖 Crawler dashboard (robots.txt · llms.txt · sitemap.xml)	✅ v1.0
🗺️ Sitemap generator (writes `sitemap.xml` to workspace)	✅ v1.0
📂 Route explorer (Next.js, Astro, Nuxt, SvelteKit)	✅ v1.0
⚡ Live refresh on file save	✅ v1.0
🔄 Auto localhost port detection	✅ v1.0
📋 JSON-LD / Structured Data viewer	✅ v1.0
📥 HTML export report	✅ v1.0
💻 CLI (`metalens preview <url>`)	✅ v1.0

Getting Started

Step 1 — Start your dev server

# Next.js
npm run dev           # → localhost:3000

# Vite / React
npm run dev           # → localhost:5173

# Astro
npm run dev           # → localhost:4321

# Any static server
npx serve .           # → localhost:3000

Step 2 — Open Meta-Lens

Choose any of these:

Method	How
Activity Bar	Click the 🔍 Meta-Lens icon in the left sidebar
Command Palette	`Ctrl+Shift+P` → `Meta-Lens: Open Meta-Lens Preview`
SEO Audit shortcut	`Ctrl+Shift+P` → `Meta-Lens: Run SEO Audit`
Editor toolbar	Click the `$(eye)` icon when editing `.html`, `.tsx`, `.jsx`, `.vue`, or `.astro`
Status bar	Click $(eye) Meta-Lens in the bottom-right corner

Step 3 — Browse the tabs

Tab	What you see
Google	Desktop + mobile SERP card with title/description length validation
LinkedIn	Link preview card with Open Graph tag checklist
Twitter / X	`summary_large_image` or `summary` card preview
WhatsApp	Chat bubble link preview
Metadata	Every meta tag — Basic SEO, Open Graph, Twitter Cards, JSON-LD
SEO	Score gauge (0–100), H1 check, canonical check, issue list with fix hints
Accessibility	WCAG checks: lang, alt texts, viewport zoom, input labels, title tag
Crawler	robots.txt · llms.txt content & validation · sitemap.xml status
Routes	All detected pages in your project — click to preview instantly

SEO Validation

Meta-Lens scores your page from 0–100 and reports Errors, Warnings, and Suggestions:

Check	Type
Missing `<title>`	🔴 Error
Title too short / long (ideal: 50–60 chars)	🟠 Warning
Missing `<meta name="description">`	🔴 Error
Description too short / long (ideal: 120–160 chars)	🟠 Warning
Missing `og:image`	🔴 Error
Missing `og:title` / `og:description`	🟠 Warning
Missing `twitter:card`	🟠 Warning
Missing or multiple `<h1>` tags	🟠 Warning
No canonical URL	🟠 Warning
No JSON-LD structured data	🔵 Info
Missing `lang` on `<html>`	🔵 Info

Accessibility Audit

Automated WCAG-based checks (score 0–100):

Check	Why it matters
`lang` attribute on `<html>`	Required by screen readers
`alt` attribute on all `<img>`	Screen reader image descriptions
`aria-label` / text on `<button>`	Screen reader button names
`aria-label` / `id` on `<input>`	Form field labeling
`<title>` tag exists	Document title for assistive tech
Viewport does not restrict zoom	Required for low-vision users

Crawler Dashboard

Meta-Lens fetches and validates crawler configuration files from your origin:

`robots.txt`

Checks if the file exists (HTTP 200)
Validates that a User-agent: rule is present
Displays the full file content

`llms.txt`

Checks if the file exists
Validates that the content is non-trivial (>20 chars)
Displays the full file content

`sitemap.xml`

Detects if a sitemap is present at /sitemap.xml
Validates that it contains a <urlset> element
If missing, a Generate button writes a sitemap.xml to your workspace root

Route Explorer

Automatically detects pages in your project:

Framework	Pattern detected
Next.js App Router	`app/**/page.tsx`
Next.js Pages Router	`pages/*/.tsx`
Astro	`src/pages/*/.astro`
Nuxt	`pages/*/.vue`
SvelteKit	`src/routes/**/+page.svelte`

Click any static route to instantly preview its metadata.

Export Report

Click the ⬇ Download button in the top header to export a formatted seo-report.html to your workspace root. The report includes:

SEO score and Accessibility score
Full list of errors, warnings, and suggestions with fix hints
Timestamp and URL

Open the file in a browser and print to PDF for sharing with your team.

CLI Usage

# Install globally (after publishing to npm)
npm install -g @csedge-foundry/metalens

# Run a quick audit from the terminal
metalens preview http://localhost:3000
metalens preview https://yoursite.com

Output:

Meta-Lens — http://localhost:3000

SEO Score: 74/100
❌ Missing og:image
⚠  Title too long (68 chars)
⚠  No canonical URL set
ℹ  No JSON-LD structured data found

Accessibility Score: 90/100
⚠  2 images missing alt attribute

Configuration

Open VS Code Settings (Ctrl+,) and search Meta-Lens, or add to settings.json:

{
  // Default port when auto-detection finds nothing
  "meta-lens.defaultPort": 3000,

  // Auto-refresh when you save a file
  "meta-lens.autoRefresh": true,

  // Scan common ports automatically on open
  "meta-lens.autoDetectPort": true
}

Ports scanned automatically: 3000, 3001, 4000, 4321, 5173, 5174, 8000, 8080, 8888, 9000

How It Works

Developer saves file
      ↓
VS Code fires onDidSaveTextDocument
      ↓
MetaLensPanel fetches HTML from localhost
      ↓
Parser extracts all <head> meta tags
      ↓
Fetcher checks /robots.txt, /llms.txt, /sitemap.xml
      ↓
SEO engine scores & validates (0–100)
      ↓
Accessibility engine runs WCAG checks
      ↓
React webview renders all tabs instantly

Supported Frameworks

Framework	Route Detection	Metadata Reading
Next.js (App Router)	✅	✅
Next.js (Pages Router)	✅	✅
Astro	✅	✅
Nuxt	✅	✅
SvelteKit	✅	✅
React (Vite / CRA)	—	✅
Vue (Vite)	—	✅
Angular	—	✅
Plain HTML	—	✅
WordPress / Laravel / Django / any server	—	✅

Troubleshooting

Panel shows blank / "Detecting localhost server..."

Your dev server isn't running. Start it first (npm run dev), then click Open Preview or use the address bar to type your URL manually.

"Failed to fetch" / "Nothing is running on localhost:3000"

Verify your dev server is up and listening on the expected port. Type the correct URL in the Meta-Lens address bar (e.g., http://localhost:5173).

Preview shows stale data

Click ↻ Refresh, or check that meta-lens.autoRefresh is true in settings.

Routes tab shows nothing

Open Meta-Lens from within a Next.js, Astro, Nuxt, or SvelteKit project. The extension scans from the workspace root.

og:image doesn't load in the preview

The image URL in your og:image tag must be accessible from your local machine. Relative paths like /og.png are resolved against the localhost origin.

Roadmap

Feature	Version
VS Code Marketplace launch	v1.0
Structured data deep validation	v1.1
Lighthouse-style performance score	v1.1
Bulk route audit (scan all pages at once)	v1.2
Shareable JSON audit report	v1.2
OpenAI / Gemini AI fix suggestions	v2.0
Browser extension (Chrome / Firefox)	v2.0
Cloud sync & history	v2.0

Want a feature? Open an issue.

Contributing

See CONTRIBUTING.md for the full development setup guide.

Quick start:

git clone https://github.com/Durgesh-Vaigandla/meta-lens.git
cd meta-lens
npm install
npm run watch
# Press F5 in VS Code to launch the Extension Development Host

CSEdge Meta-Lens

CSEdge