[SEO] Implement Comprehensive SEO with Open Graph, Structured Data, Sitemap, and Metadata

[KarenZita01]

Description

The frontend has no SEO implementation. As a public-facing dashboard and landing page, it should be discoverable via search engines. The current landing page has a <title> tag in layout.tsx but lacks meta descriptions, Open Graph tags, structured data, sitemaps, and other SEO essentials.

SEO gaps:

• metadata in layout.tsx only has title and description
• No Open Graph tags for social sharing
• No Twitter Card tags
• No JSON-LD structured data
• No sitemap.xml generation
• No robots.txt
• No canonical URLs
• No hreflang tags for multilingual content
• No meta keywords for important pages
• No page-specific metadata overrides
• No breadcrumb structured data for navigation

Technical Context & Impact

• Affected Components/Files: app/layout.tsx, app/page.tsx, public/robots.txt (missing), public/sitemap.xml (missing)
• Impact: Poor search engine visibility; limited social sharing

Step-by-Step Implementation Guide

1. Enhance metadata generation: Create src/lib/seo/metadata.ts:
   • generateMetadata({ title, description, path, image }) returning full metadata object
   • Generate title template: pageTitle | EquipChain
   • Base URL from NEXT_PUBLIC_SITE_URL env var
2. Add Open Graph and Twitter Card tags to layout metadata:
   • og:title, og:description, og:image, og:url, og:type
   • twitter:card, twitter:site, twitter:creator
   • Default social image in /public/og-image.png (1200x630)
3. Create sitemap: app/sitemap.ts:
   • Static routes: /, /dashboard, /meters, /billing, /streams
   • Dynamic routes from API (meter pages, user pages)
   • Last modified dates, change frequency, priority
4. Create robots.txt: app/robots.ts:
   • Allow all crawlers on production
   • Disallow /admin/*, /api/* on all environments
   • Sitemap URL reference
5. Add JSON-LD structured data: src/lib/seo/json-ld.ts:
   • WebApplication schema with application name, URL, operating system
   • Organization schema for EquipChain
   • BreadcrumbList for navigation paths
   • PotentialAction for search endpoint
6. Add per-page metadata: Each route exports generateMetadata with page-specific title and description
7. Add hreflang tags: For multilingual setup, include alternate links for each locale
8. Set up Google Search Console verification: Add google-site-verification meta tag via env var
9. Add breadcrumb schema: BreadcrumbJsonLd component for structured breadcrumbs

Verification & Testing Steps

1. View page source -> verify <title>, <meta>, <script type="application/ld+json"> present
2. Test with Facebook Sharing Debugger -> verify Open Graph tags parsed correctly
3. Run Google Rich Results Test -> verify all structured data is valid
4. Visit /sitemap.xml -> verify all pages listed
5. Visit /robots.txt -> verify correct allow/disallow rules
6. Run Lighthouse SEO audit -> score 100
7. Verify social preview: share link on Twitter -> correct card renders