nextjs-seo-optimization

Files (1)

• SKILL.md

SKILL.md (first lines)

# Next.js SEO Optimization Skill

## When to Use

Use this skill when:
- Building new pages requiring SEO
- Optimizing existing pages for search ranking
- Implementing dynamic metadata (products, articles)
- Adding Open Graph tags for social sharing
- Generating sitemaps and robots.txt
- Implementing structured data (Schema.org)
- Improving Core Web Vitals for ranking

## Core Concepts

### 1. Metadata (Next.js 13+)

```typescript
// app/layout.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'MyShop - Best Deals and Coupons',
  description: 'Find the best deals from top marketplaces. Exclusive coupons, free shipping and cashback.',
  keywords: 'deals, coupons, cashback, free shipping',
  metadataBase: new URL('https://myshop.com'),
  openGraph: {
    type: 'website',
    locale: 'en_US',
    url: 'https://myshop.com',
    siteName: 'MyShop',
    images: [
      {
        url: '/og-image.png',
        width: 1200,
        height: 630,
        alt: 'MyShop - Best deals online'
      }
    ]
  },
  twitter: {
    card: 'summary_large_image',
    title: 'MyShop',
    description: 'Best coupons and deals from top marketplaces',
    images: ['/og-image.png']
  },
  robots: {
    index: true,
    follow: true,
    'max-image-preview': 'large',
    'max-snippet': -1,
    'max-video-preview': -1,
  }
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head>
        {/* Additional meta tags */}
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#FF6B35" />
        
        {/* Preconnect to external domains */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
      </head>
      <body>{children}</body>
    </html>
  )
}
```

### 2. Dynamic Metadata (Products)

```typescript
// app/products/[slug]/page.tsx
import type { Metadata } from 'next'
import { getProduct } from '@/lib/api'

interface Props {
  params: { slug: string }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const product = await getProduct(params.slug)

  if (!product) {
    return {
      title: 'Product not found',
      description: 'The requested product does not exist'
    }
  }

  // Dynamic metadata based on product data
  return {
    title: `${product.title} | MyShop`,
    description: product.description.substring(0, 160),
    keywords: `${product.title}, coupon, deal, ${product.category}`,
    openGraph: {
      type: 'product',
      url: `https://myshop.com/products/${product.slug}`,
      title: product.title,
      description: product.description,
      images: [
        {
          url: product.imageUrl,
          width: 1200,
          height: 630,
          alt: product.title
        }
      ]
    },
    twitter: {

From ils15/pantheon-legacy, MIT.

More from ils15/pantheon-legacy