← Back to Home

Example Page with Custom SEO

This is an example page demonstrating custom SEO configuration with Open Graph, Twitter Cards, and JSON-LD structured data

•By Your Name

Customizable SEO Configuration

This page demonstrates how to customize SEO metadata for individual pages. Each page can have its own:

  • Custom title and description
  • Unique Open Graph images and metadata
  • Twitter Card configuration
  • JSON-LD structured data for rich snippets
  • Canonical URLs

Mobile Optimization

This boilerplate is built with mobile-first principles to prevent crashes and ensure smooth performance on all devices:

  • Proper viewport configuration prevents zoom issues
  • Touch-friendly tap targets (minimum 44x44px)
  • Font sizes optimized for mobile readability (minimum 16px for inputs)
  • Responsive images and layouts
  • Smooth scrolling and touch interactions

API Integration

The boilerplate includes Hono.js for fast, type-safe API routes. Try the API endpoints:

GET/api/healthHealth check endpoint
GET/api/testTest endpoint
POST/api/echoEcho your request
GET/api/users/123Get user by ID

Deployment

This project is optimized for Cloudflare Pages. To deploy:

  1. Build the project: npm run pages:build
  2. Deploy to Cloudflare Pages: npm run pages:deploy
  3. Configure environment variables in your Cloudflare dashboard

Environment Variables

Create a .env.local file with the following variables:

NEXT_PUBLIC_SITE_URL=https://yourdomain.com
NEXT_PUBLIC_SITE_NAME=Your Site Name
NEXT_PUBLIC_TWITTER_HANDLE=@yourhandle