Next.js 15 メタタグ完全ガイド — og:imageからhreflangまで

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

export const metadata: Metadata = {  title: 'MillionsCode — 韓国用語 韓国用語 韓国用語',  description: '18韓国用語 韓国用語 韓国用語 韓国用語 韓国用語 韓国用語 韓国用語 韓国用語',  keywords: ['韓国用語 韓国用語', 'SEO', 'calculation韓国用語', 'exchange rate'],  authors: [{ name: 'MillionsCode', url: 'https://millionscode.com' }],  openGraph: {  title: 'MillionsCode',  description: '韓国用語 韓国用語 韓国用語',  url: 'https://millionscode.com',  siteName: 'MillionsCode',  locale: 'ko_KR',  type: 'website',  },  twitter: {  card: 'summary_large_image',  title: 'MillionsCode',  description: '韓国用語 韓国用語 韓国用語',  },
}

// app/blog/[id]/page.tsx
import type { Metadata } from 'next'

interface Props {  params: Promise<{ id: string }>
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {  const { id } = await params  const post = await getPost(id)  return {  title: `${post.title} | MillionsCode`,  description: post.description,  openGraph: {  title: post.title,  description: post.description,  url: `https://millionscode.com/blog/${post.slug}`,  images: [  {  url: `https://millionscode.com/api/og?title=${encodeURIComponent(post.title)}`,  width: 1200,  height: 628,  alt: post.title,  },  ],  type: 'article',  publishedTime: post.created_at,  modifiedTime: post.updated_at,  },  }
}

// app/api/og/route.tsx
import { ImageResponse } from 'next/og'

export const runtime = 'edge'

export async function GET(request: Request) {  const { searchParams } = new URL(request.url)  const title = searchParams.get('title') ?? 'MillionsCode'  return new ImageResponse(  (  <div  style={{  background: '#0a0a0a',  width: '100%',  height: '100%',  display: 'flex',  flexDirection: 'column',  alignItems: 'center',  justifyContent: 'center',  padding: '60px',  }}  >  <div style={{ color: 'white', fontSize: 60, fontWeight: 'bold', textAlign: 'center' }}>  {title}  </div>  <div style={{ color: '#888', fontSize: 30, marginTop: 20 }}>  millionscode.com  </div>  </div>  ),  { width: 1200, height: 628 }  )
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {  const { lang, slug } = await params  const BASE = 'https://millionscode.com'  const LANGS = ['ko', 'en', 'ja', 'zh', 'es', 'fr', 'de', 'ar', 'hi', 'ru', 'id']  const languages: Record<string, string> = {}  for (const l of LANGS) {  languages[l] = l === 'ko'  ? `${BASE}/blog/${slug}`  : `${BASE}/${l}/blog/${slug}`  }  languages['x-default'] = `${BASE}/blog/${slug}`  return {  alternates: {  canonical: lang === 'ko' ? `${BASE}/blog/${slug}` : `${BASE}/${lang}/blog/${slug}`,  languages,  },  }
}

export const metadata: Metadata = {  robots: {  index: true,  follow: true,  googleBot: {  index: true,  follow: true,  'max-video-preview': -1,  'max-image-preview': 'large',  'max-snippet': -1,  },  },
}

// ページの layout または page コンポーネント内
export default function BlogPage({ post }: { post: Post }) {  const jsonLd = {  '@context': 'https://schema.org',  '@type': 'BlogPosting',  headline: post.title,  description: post.description,  datePublished: post.created_at,  dateModified: post.updated_at,  author: {  '@type': 'Person',  name: 'MillionsCode',  url: 'https://millionscode.com/about',  },  }  return (  <>  <script  type="application/ld+json"  dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}  />  {/* ページコンテンツ */}  </>  )
}