CSEdge 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

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:

Step 3 — Browse the tabs

SEO Validation

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

Accessibility Audit

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

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:

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

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

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

License

MIT © Durgesh Vaigandla — CSEdge