SEO Optimization Guide for LeadFive Website
🎯 SEO Implementation Overview
This guide documents all SEO optimizations implemented in the LeadFive website v2.
📋 SEO Checklist
✅ Meta Tags & Head Optimization
- Dynamic meta titles with template system
- Meta descriptions for all pages
- Keywords meta tags
- Canonical URLs
- Open Graph tags (Facebook, LinkedIn)
- Twitter Card tags
- Viewport meta tag for mobile
- Theme color meta tag
- Favicon and app icons
- Manifest.json for PWA
✅ Structured Data (JSON-LD)
- Organization schema on layout
- WebSite schema with search action
- BreadcrumbList schema
- Article schema for blog posts
- Service schema for service pages
- FAQ schema support
✅ Technical SEO
- XML Sitemap generation (next-sitemap)
- Robots.txt with sitemap reference
- 404 error page
- Error boundary for 500 errors
- Loading states for better UX
- Service Worker for offline support
- Web Vitals monitoring
✅ Performance Optimization
- Image optimization with Next.js Image
- Lazy loading for images
- WebP and AVIF format support
- Responsive images with srcset
- Critical CSS inlining
- Bundle size optimization
- Cache headers for static assets
- Compression enabled
- Prefetch and preconnect hints
✅ URL Structure & Navigation
- SEO-friendly URL patterns
- Trailing slash redirects
- WWW to non-WWW redirect
- Clean URL rewrites
- Breadcrumb navigation
- Internal linking optimization
✅ Security Headers
- X-Frame-Options
- X-Content-Type-Options
- X-XSS-Protection
- Referrer-Policy
- Permissions-Policy
- Content Security Policy
✅ Mobile Optimization
- Responsive design
- Mobile-friendly navigation
- Touch-friendly buttons
- Optimized fonts for mobile
- PWA capabilities
✅ Content Optimization
- Proper heading hierarchy (H1-H6)
- Alt text for images
- Descriptive link text
- Content hierarchy optimization
- Keyword optimization in content
✅ Analytics & Monitoring
- Google Analytics integration
- Web Vitals tracking
- SEO monitoring component (dev mode)
- Performance monitoring
- Error tracking
🚀 Implementation Details
1. Meta Tags Implementation
Located in app/layout.tsx
, the main metadata configuration includes:
export const metadata: Metadata = {
metadataBase: new URL("https://leadfive.co.jp"),
title: {
default: "AI×心理学で売上を科学する | LeadFive",
template: "%s | LeadFive",
},
description: "...",
keywords: [...],
openGraph: {...},
twitter: {...},
robots: {...},
}
2. Structured Data
JSON-LD structured data is implemented using Script components:
const jsonLd = {
"@context": "https://schema.org",
"@type": "Organization",
// ... organization details
}
3. Image Optimization
Using Next.js Image component with:
- Automatic format selection (WebP/AVIF)
- Responsive sizing
- Lazy loading
- Blur placeholders
4. Performance Features
- Service Worker for offline support
- Web Vitals monitoring
- Bundle splitting and optimization
- Cache strategies for static assets
5. SEO Utilities
Located in lib/seo.ts
:
generateSEO()
- Generate page-specific metadatagenerateJsonLd()
- Create structured data
📊 SEO Monitoring
Development Tools
- SEO Monitor Component (
components/SEOMonitor.tsx
)- Real-time SEO metrics
- Heading structure analysis
- Image optimization check
- Link analysis
- Performance metrics
- Web Vitals Tracking (
components/WebVitals.tsx
)- Core Web Vitals monitoring
- Performance metrics tracking
- Analytics integration
🔧 Configuration Files
next-sitemap.config.js
- Automatic sitemap generation
- Dynamic path configuration
- Priority and frequency settings
next.config.ts
- Image optimization settings
- Security headers
- URL rewrites and redirects
- Webpack optimization
robots.txt
- Crawler directives
- Sitemap references
- Crawl delay settings
📝 Best Practices Implemented
- Title Tags: 30-60 characters, unique for each page
- Meta Descriptions: 120-160 characters, compelling CTAs
- URLs: Clean, descriptive, keyword-rich
- Images: Optimized, with alt text, lazy loaded
- Content: Structured with proper headings, keyword-optimized
- Mobile: Fully responsive, PWA-ready
- Speed: Optimized bundles, caching, compression
🛠️ Maintenance Tasks
Regular Tasks
- Update sitemap after adding new pages
- Monitor Core Web Vitals scores
- Check for broken links
- Update meta descriptions for better CTR
- Review and update keywords
- Analyze search console data
Deployment Checklist
- Build and test sitemap generation
- Verify robots.txt is accessible
- Check all meta tags are rendering
- Test structured data with Google’s tool
- Verify analytics tracking
- Test page speed scores
📚 Resources
- Google Search Console
- Schema.org Validator
- PageSpeed Insights
- Mobile-Friendly Test
- Rich Results Test
🎯 Target Metrics
- Core Web Vitals: All green scores
- PageSpeed Score: 90+ on mobile and desktop
- SEO Score: 95+ on Lighthouse
- Mobile Usability: 100% mobile-friendly
- Structured Data: No errors in testing tools