SEO & Metadata Builder

SEO & Metadata Builder

Prerequisites & Dependencies

• Node.js 18+ or a build tool (Vite, Webpack, Next.js)
• Mandatory packages: npm i next-seo (for Next.js) or manual template generation
• Access to the application's data: page title, description, site URL, author, and entity types
• Optional: npm i react-helmet for dynamic meta management in React

Execution Steps

1. Inventory all pages that need SEO metadata: home, articles, product pages, error pages
2. For each page, collect the required fields: title, description, url, image, type, siteName, and social handles
3. Generate HTML meta tags: <title>, <meta name="description">, <meta charset>, <meta viewport>
4. Add Open Graph tags: og:title, og:description, og:image, og:url, og:type, og:locale
5. Add Twitter Card tags: twitter:card, twitter:title, twitter:description, twitter:image, twitter:creator
6. Generate JSON-LD structured data: @context, @type (e.g., Article, Product, Organization), and relevant properties (author, datePublished, price, availability)
7. Insert all tags into your _document.js (Next.js) or head component, ensuring they are server-rendered and hydrated correctly
8. Validate your markup: use Google Search Console, Facebook Sharing Debugger, and schema.org validators

// Example: Comprehensive SEO component for Next.js using next-seo
import React from 'react';
import { NextSeo } from 'next-seo';

const SeoMetadata = ({ title, description, image, slug }) => (
  <NextSeo
    title={title}
    description={description}
    openGraph={{
      type: 'website',
      url: `https://example.com${slug}`,
      images: [{ url: image, width: 1200, height: 630 }],
    }}
    twitter={{
      card: 'summary_large_image',
      title,
      description,
      images: [image],
    }}
    jsonLD={[
      {
        '@context': 'https://schema.org',
        '@type': 'Organization',
        name: 'Example Corp',
        url: 'https://example.com',
        logo: '/logo.png',
      },
    ]}
  />
);

export default SeoMetadata;