# Meta Tags and SEO Optimization

# 1. React Helmet Implementation
import { Helmet } from 'react-helmet';

const ProductPage = ({ product }) => {
  return (
    

      
        
        
        
        
        {/* Open Graph */}
        
        
        
        
        
        
        {/* Twitter Card */}
        
        
        
        
        
        {/* Canonical URL */}
        
      
      
      

        
{product.name}
        
{product.description}
      
    
  );
};

# 2. Vue.js Meta Management
// vue-meta implementation
import { createMetaManager } from 'vue-meta';

const app = createApp(App);
app.use(createMetaManager());

// In component
export default {
  metaInfo: {
    title: 'Product Page',
    titleTemplate: '%s - My Store',
    meta: [
      {
        name: 'description',
        content: 'Product description'
      },
      {
        property: 'og:title',
        content: 'Product Title'
      },
      {
        property: 'og:description',
        content: 'Product description'
      }
    ]
  }
};

# 3. Angular Meta Service
import { Meta, Title } from '@angular/platform-browser';

@Component({
  selector: 'app-product',
  template: `
    

      
{{ product.name }}
      
{{ product.description }}
    
  `
})
export class ProductComponent {
  constructor(
    private meta: Meta,
    private title: Title
  ) {}
  
  ngOnInit() {
    this.title.setTitle(`${this.product.name} - My Store`);
    
    this.meta.updateTag({
      name: 'description',
      content: this.product.description
    });
    
    this.meta.updateTag({
      property: 'og:title',
      content: this.product.name
    });
    
    this.meta.updateTag({
      property: 'og:description',
      content: this.product.description
    });
  }
}

# 4. Dynamic Meta Tag Updates
class SEOManager {
  constructor() {
    this.defaultMeta = {
      title: 'My App',
      description: 'Default description',
      keywords: 'default, keywords',
      image: '/default-image.jpg'
    };
  }
  
  updateMeta(metaData) {
    const meta = { ...this.defaultMeta, ...metaData };
    
    // Update title
    document.title = meta.title;
    
    // Update meta tags
    this.updateMetaTag('name', 'description', meta.description);
    this.updateMetaTag('name', 'keywords', meta.keywords);
    
    // Update Open Graph tags
    this.updateMetaTag('property', 'og:title', meta.title);
    this.updateMetaTag('property', 'og:description', meta.description);
    this.updateMetaTag('property', 'og:image', meta.image);
    this.updateMetaTag('property', 'og:url', window.location.href);
    
    // Update Twitter Card tags
    this.updateMetaTag('name', 'twitter:title', meta.title);
    this.updateMetaTag('name', 'twitter:description', meta.description);
    this.updateMetaTag('name', 'twitter:image', meta.image);
    
    // Update canonical URL
    this.updateCanonicalUrl(meta.canonicalUrl);
  }
  
  updateMetaTag(attribute, name, content) {
    let meta = document.querySelector(`meta[${attribute}="${name}"]`);
    
    if (!meta) {
      meta = document.createElement('meta');
      meta.setAttribute(attribute, name);
      document.head.appendChild(meta);
    }
    
    meta.setAttribute('content', content);
  }
  
  updateCanonicalUrl(url) {
    let canonical = document.querySelector('link[rel="canonical"]');
    
    if (!canonical) {
      canonical = document.createElement('link');
      canonical.setAttribute('rel', 'canonical');
      document.head.appendChild(canonical);
    }
    
    canonical.setAttribute('href', url);
  }
}

const seoManager = new SEOManager();

# 5. Structured Data Implementation
// JSON-LD structured data
const generateProductSchema = (product) => {
  return {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": product.name,
    "description": product.description,
    "image": product.images,
    "brand": {
      "@type": "Brand",
      "name": product.brand
    },
    "offers": {
      "@type": "Offer",
      "price": product.price,
      "priceCurrency": "USD",
      "availability": product.inStock ? "https://schema.org/InStock" : "https://schema.org/OutOfStock"
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": product.rating,
      "reviewCount": product.reviewCount
    }
  };
};

const generateArticleSchema = (article) => {
  return {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": article.title,
    "description": article.description,
    "image": article.image,
    "author": {
      "@type": "Person",
      "name": article.author
    },
    "publisher": {
      "@type": "Organization",
      "name": "My Website",
      "logo": {
        "@type": "ImageObject",
        "url": "https://mywebsite.com/logo.png"
      }
    },
    "datePublished": article.publishedDate,
    "dateModified": article.modifiedDate
  };
};

// Inject structured data
const injectStructuredData = (schema) => {
  const script = document.createElement('script');
  script.type = 'application/ld+json';
  script.textContent = JSON.stringify(schema);
  document.head.appendChild(script);
};

# 6. Server-Side Rendering (SSR)
// Next.js SSR example
export async function getServerSideProps(context) {
  const { id } = context.params;
  
  try {
    const product = await fetchProduct(id);
    
    return {
      props: {
        product,
        seo: {
          title: `${product.name} - My Store`,
          description: product.description,
          keywords: product.keywords.join(', '),
          image: product.image,
          canonicalUrl: `https://mystore.com/products/${id}`
        }
      }
    };
  } catch (error) {
    return {
      notFound: true
    };
  }
}

// Nuxt.js SSR example
export default {
  async asyncData({ params, $axios }) {
    try {
      const product = await $axios.$get(`/api/products/${params.id}`);
      
      return {
        product,
        seo: {
          title: `${product.name} - My Store`,
          description: product.description,
          keywords: product.keywords.join(', '),
          image: product.image
        }
      };
    } catch (error) {
      throw new Error('Product not found');
    }
  },
  
  head() {
    return {
      title: this.seo.title,
      meta: [
        { name: 'description', content: this.seo.description },
        { name: 'keywords', content: this.seo.keywords },
        { property: 'og:title', content: this.seo.title },
        { property: 'og:description', content: this.seo.description },
        { property: 'og:image', content: this.seo.image }
      ]
    };
  }
};

# 7. Prerendering for Static Sites
// Prerender configuration
const prerenderRoutes = [
  '/',
  '/about',
  '/products',
  '/contact'
];

// Generate static pages
const generateStaticPages = async () => {
  const routes = await getDynamicRoutes();
  const allRoutes = [...prerenderRoutes, ...routes];
  
  for (const route of allRoutes) {
    await generatePage(route);
  }
};

const generatePage = async (route) => {
  const html = await renderPage(route);
  const filePath = path.join('dist', route, 'index.html');
  
  await fs.writeFile(filePath, html);
  console.log(`Generated: ${route}`);
};

# 8. Sitemap Generation
// Dynamic sitemap generation
const generateSitemap = async () => {
  const baseUrl = 'https://mywebsite.com';
  const routes = await getAllRoutes();
  
  const sitemap = `

  ${routes.map(route => `
    
      ${baseUrl}${route.path}
      ${route.lastModified}
      ${route.changeFrequency}
      ${route.priority}
    
  `).join('')}
`;
  
  await fs.writeFile('public/sitemap.xml', sitemap);
};

# 9. Robots.txt Configuration
// robots.txt
User-agent: *
Allow: /

# Sitemap
Sitemap: https://mywebsite.com/sitemap.xml

# Disallow admin areas
Disallow: /admin/
Disallow: /api/
Disallow: /_next/

# Allow specific bots
User-agent: Googlebot
Allow: /

User-agent: Bingbot
Allow: /

# 10. SEO Monitoring and Analytics
class SEOMonitor {
  constructor() {
    this.metrics = {};
  }
  
  trackPageView(page) {
    // Google Analytics
    if (typeof gtag !== 'undefined') {
      gtag('config', 'GA_TRACKING_ID', {
        page_title: page.title,
        page_location: page.url
      });
    }
    
    // Custom analytics
    this.sendAnalytics('page_view', {
      page: page.url,
      title: page.title,
      timestamp: Date.now()
    });
  }
  
  trackSearchQuery(query) {
    this.sendAnalytics('search_query', {
      query: query,
      timestamp: Date.now()
    });
  }
  
  trackCTR(element, position) {
    this.sendAnalytics('ctr', {
      element: element,
      position: position,
      timestamp: Date.now()
    });
  }
  
  sendAnalytics(event, data) {
    // Send to analytics service
    fetch('/api/analytics', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        event,
        data,
        url: window.location.href,
        userAgent: navigator.userAgent
      })
    });
  }
  
  generateSEOReport() {
    const report = {
      title: document.title,
      description: document.querySelector('meta[name="description"]')?.content,
      keywords: document.querySelector('meta[name="keywords"]')?.content,
      canonical: document.querySelector('link[rel="canonical"]')?.href,
      ogTitle: document.querySelector('meta[property="og:title"]')?.content,
      ogDescription: document.querySelector('meta[property="og:description"]')?.content,
      ogImage: document.querySelector('meta[property="og:image"]')?.content,
      h1Count: document.querySelectorAll('h1').length,
      h2Count: document.querySelectorAll('h2').length,
      imageCount: document.querySelectorAll('img').length,
      imageAltCount: document.querySelectorAll('img[alt]').length,
      linkCount: document.querySelectorAll('a').length,
      internalLinkCount: document.querySelectorAll('a[href^="/"]').length,
      externalLinkCount: document.querySelectorAll('a[href^="http"]').length
    };
    
    return report;
  }
}

const seoMonitor = new SEOMonitor();