SEO Configuration Guide

This guide covers Search Engine Optimization (SEO) configuration for the 3Lens documentation site, including meta tags, sitemaps, structured data, and best practices.

Overview

3Lens documentation is optimized for search engines through:

Meta tags: Open Graph and Twitter Cards for social sharing
Sitemap: XML sitemap for search engine indexing
Structured data: JSON-LD for rich search results
Clean URLs: SEO-friendly URL structure

Meta Tags

Default Meta Tags

The VitePress configuration includes default meta tags applied to all pages:

typescript

// docs/.vitepress/config.ts
export default defineConfig({
  head: [
    // Primary meta tags
    ['meta', { name: 'theme-color', content: '#646cff' }],
    ['meta', { name: 'author', content: '3Lens Contributors' }],
    ['meta', { 
      name: 'keywords', 
      content: 'Three.js, debugging, 3D, WebGL, inspector, devtools' 
    }],
    
    // Open Graph
    ['meta', { property: 'og:type', content: 'website' }],
    ['meta', { property: 'og:site_name', content: '3Lens' }],
    ['meta', { property: 'og:image', content: 'https://3lens.dev/og-image.png' }],
    
    // Twitter Cards
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['meta', { name: 'twitter:site', content: '@3lens_dev' }],
    ['meta', { name: 'twitter:image', content: 'https://3lens.dev/og-image.png' }],
  ]
})

Page-Specific Meta Tags

Add page-specific meta tags using frontmatter:

markdown

---
title: Getting Started with 3Lens
description: Learn how to install and configure 3Lens for Three.js debugging
head:
  - - meta
    - property: og:title
      content: Getting Started with 3Lens
  - - meta
    - property: og:description
      content: Learn how to install and configure 3Lens for Three.js debugging
  - - meta
    - property: og:url
      content: https://3lens.dev/guide/getting-started
---

# Getting Started

Open Graph Images

Create compelling Open Graph images for better social sharing:

Image Specifications

Property	Recommendation
Size	1200×630 pixels
Format	PNG or JPEG
File size	< 300KB
Aspect ratio	1.91:1

Per-Page Images

For important pages, create custom OG images:

markdown

---
head:
  - - meta
    - property: og:image
      content: https://3lens.dev/images/og/getting-started.png
---

Default Image

Place the default Open Graph image at:

docs/public/og-image.png

Twitter Cards

3Lens uses summary_large_image cards for rich previews:

typescript

['meta', { name: 'twitter:card', content: 'summary_large_image' }],
['meta', { name: 'twitter:site', content: '@3lens_dev' }],
['meta', { name: 'twitter:creator', content: '@3lens_dev' }],

Test your Twitter cards at: Twitter Card Validator

Sitemap

Configuration

The sitemap is automatically generated by VitePress:

typescript

// docs/.vitepress/config.ts
export default defineConfig({
  sitemap: {
    hostname: 'https://3lens.dev',
    transformItems: (items) => {
      // Filter or modify sitemap items
      return items.filter(item => !item.url.includes('/internal/'))
    }
  }
})

Sitemap Output

After building, the sitemap is available at:

docs/.vitepress/dist/sitemap.xml

Example sitemap entry:

xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://3lens.dev/</loc>
    <lastmod>2024-01-15T00:00:00.000Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://3lens.dev/guide/getting-started</loc>
    <lastmod>2024-01-15T00:00:00.000Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Excluding Pages

Exclude pages from the sitemap using frontmatter:

markdown

---
sitemap: false
---

# Internal Page

This page won't appear in the sitemap.

Submitting to Search Engines

Submit your sitemap to search engines:

Google: Google Search Console
Bing: Bing Webmaster Tools

Structured Data (JSON-LD)

What is JSON-LD?

JSON-LD (JavaScript Object Notation for Linked Data) helps search engines understand your content and display rich results.

Software Application Schema

Add structured data for the 3Lens library:

typescript

// docs/.vitepress/config.ts
export default defineConfig({
  head: [
    [
      'script',
      { type: 'application/ld+json' },
      JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'SoftwareApplication',
        'name': '3Lens',
        'applicationCategory': 'DeveloperApplication',
        'operatingSystem': 'Any',
        'description': 'A powerful debugging and inspection toolkit for Three.js applications',
        'url': 'https://3lens.dev',
        'downloadUrl': 'https://www.npmjs.com/package/@3lens/core',
        'softwareVersion': '1.0.0',
        'author': {
          '@type': 'Organization',
          'name': '3Lens Contributors'
        },
        'license': 'MIT',
        'programmingLanguage': ['TypeScript', 'JavaScript'],
        'offers': {
          '@type': 'Offer',
          'price': '0',
          'priceCurrency': 'USD'
        }
      })
    ]
  ]
})

Documentation Schema

Add documentation schema for better indexing:

typescript

[
  'script',
  { type: 'application/ld+json' },
  JSON.stringify({
    '@context': 'https://schema.org',
    '@type': 'TechArticle',
    'headline': '3Lens Documentation',
    'description': 'Official documentation for the 3Lens Three.js debugging toolkit',
    'url': 'https://3lens.dev',
    'author': {
      '@type': 'Organization',
      'name': '3Lens Contributors'
    },
    'publisher': {
      '@type': 'Organization',
      'name': '3Lens'
    },
    'mainEntityOfPage': {
      '@type': 'WebPage',
      '@id': 'https://3lens.dev'
    }
  })
]

Add breadcrumb navigation schema for page hierarchy:

typescript

// In a custom VitePress theme component
const breadcrumbSchema = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  'itemListElement': [
    {
      '@type': 'ListItem',
      'position': 1,
      'name': 'Home',
      'item': 'https://3lens.dev'
    },
    {
      '@type': 'ListItem',
      'position': 2,
      'name': 'Guide',
      'item': 'https://3lens.dev/guide/'
    },
    {
      '@type': 'ListItem',
      'position': 3,
      'name': 'Getting Started',
      'item': 'https://3lens.dev/guide/getting-started'
    }
  ]
}

Testing Structured Data

Validate your structured data:

URL Structure

Clean URLs

VitePress is configured for clean URLs:

typescript

// docs/.vitepress/config.ts
export default defineConfig({
  cleanUrls: true
})

This transforms:

/guide/getting-started.html → /guide/getting-started

URL Best Practices

Practice	Example
Use lowercase	`/guide/getting-started` ✅
Use hyphens	`/guide/getting-started` ✅
Keep it short	`/guide/start` ✅
Include keywords	`/guide/threejs-debugging` ✅

Redirects

Configure redirects for changed URLs in your deployment platform:

Netlify (netlify.toml):

toml

[[redirects]]
  from = "/old-page"
  to = "/new-page"
  status = 301

Vercel (vercel.json):

json

{
  "redirects": [
    { "source": "/old-page", "destination": "/new-page", "permanent": true }
  ]
}

Robots.txt

Configuration

Create docs/public/robots.txt:

User-agent: *
Allow: /

Sitemap: https://3lens.dev/sitemap.xml

Blocking Pages

To prevent indexing of specific pages:

User-agent: *
Disallow: /internal/
Disallow: /drafts/
Disallow: /api/private/

Sitemap: https://3lens.dev/sitemap.xml

Canonical URLs

Setting Canonical URLs

Add canonical URLs to prevent duplicate content issues:

markdown

---
head:
  - - link
    - rel: canonical
      href: https://3lens.dev/guide/getting-started
---

Automatic Canonicals

For automatic canonical URL generation, extend the VitePress theme:

typescript

// docs/.vitepress/theme/index.ts
import { useRoute } from 'vitepress'

export default {
  enhanceApp({ app }) {
    // Add canonical URL logic
  }
}

Performance for SEO

Core Web Vitals

Optimize for Google's Core Web Vitals:

Metric	Target	Measure
LCP	< 2.5s	Largest Contentful Paint
FID	< 100ms	First Input Delay
CLS	< 0.1	Cumulative Layout Shift

Image Optimization

markdown

<!-- Use modern formats -->
![3Lens Screenshot](/images/screenshot.webp)

<!-- Add alt text for accessibility and SEO -->
![3Lens overlay showing scene hierarchy and property inspector](/images/screenshot.webp)

Lazy Loading

VitePress automatically lazy-loads images below the fold.

Monitoring SEO

Google Search Console

Verify domain ownership
Submit sitemap
Monitor:
- Index coverage
- Core Web Vitals
- Search performance

Key Metrics to Track

Metric	Tool	Target
Indexed pages	Search Console	All public pages
Crawl errors	Search Console	0
Core Web Vitals	PageSpeed Insights	Pass
Mobile usability	Search Console	No issues

SEO Checklist

Before Launch

[ ] Configure meta tags (title, description, OG, Twitter)
[ ] Create Open Graph image
[ ] Generate sitemap
[ ] Create robots.txt
[ ] Add structured data (JSON-LD)
[ ] Configure clean URLs
[ ] Set up canonical URLs

After Launch

[ ] Submit sitemap to Google Search Console
[ ] Submit sitemap to Bing Webmaster Tools
[ ] Verify all pages are indexed
[ ] Check for crawl errors
[ ] Monitor Core Web Vitals
[ ] Test rich results

Next Steps

Analytics Setup - Track user engagement
Maintenance - Keep content healthy
Deployment - Deploy your site

SEO Configuration Guide ​

Overview ​

Meta Tags ​

Default Meta Tags ​

Page-Specific Meta Tags ​

Open Graph Images ​

Image Specifications ​

Per-Page Images ​

Default Image ​

Twitter Cards ​

Sitemap ​

Configuration ​

Sitemap Output ​

Excluding Pages ​

Submitting to Search Engines ​

Structured Data (JSON-LD) ​

What is JSON-LD? ​

Software Application Schema ​

Documentation Schema ​

Breadcrumb Schema ​

Testing Structured Data ​

URL Structure ​

Clean URLs ​

URL Best Practices ​

Redirects ​

Robots.txt ​

Configuration ​

Blocking Pages ​

Canonical URLs ​

Setting Canonical URLs ​

Automatic Canonicals ​

Performance for SEO ​

Core Web Vitals ​

Image Optimization ​

Lazy Loading ​

Monitoring SEO ​

Google Search Console ​

Key Metrics to Track ​

SEO Checklist ​

Before Launch ​

After Launch ​

Next Steps ​

SEO Configuration Guide

Overview

Meta Tags

Default Meta Tags

Page-Specific Meta Tags

Open Graph Images

Image Specifications

Per-Page Images

Default Image

Twitter Cards

Sitemap

Configuration

Sitemap Output

Excluding Pages

Submitting to Search Engines

Structured Data (JSON-LD)

What is JSON-LD?

Software Application Schema

Documentation Schema

Breadcrumb Schema

Testing Structured Data

URL Structure

Clean URLs

URL Best Practices

Redirects

Robots.txt

Configuration

Blocking Pages

Canonical URLs

Setting Canonical URLs

Automatic Canonicals

Performance for SEO

Core Web Vitals

Image Optimization

Lazy Loading

Monitoring SEO

Google Search Console

Key Metrics to Track

SEO Checklist

Before Launch

After Launch

Next Steps