Triển khai và xác minh hình ảnh OG trong ứng dụng Next.js

Chọn metadata dựa trên tệp hoặc dựa trên mã một cách có chủ ý

• Hình ảnh Next.js metadata và OG — Tổng quan về App Router chính thức
• API generateMetadata — Tham khảo metadata động chính thức
• Quy ước opengraph-image — Tệp chính thức và tài liệu tham khảo ImageResponse

metadata tĩnh với metadataBase

metadataBase phân giải URL metadata tương đối; URL ảnh công khai tuyệt đối như https://starterpackai.com/og/home.png giúp kiểm tra bên ngoài ứng dụng dễ hơn.

import type { Metadata } from 'next'

export const metadata: Metadata = {
  metadataBase: new URL('https://starterpackai.com'),
  title: 'A clear page title',
  description: 'A concise share description',
  openGraph: {
    images: ['https://starterpackai.com/og/home.png'],
  },
}

generateMetadata nhận biết tuyến đường trong Next.js 16

Trong Next.js 16 App Router, params có kiểu Promise; hãy await params trước khi tải dữ liệu theo tuyến và trả về generateMetadata.

import type { Metadata } from 'next'

type Props = { params: Promise<{ slug: string }> }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { slug } = await params
  const post = await getPost(slug)

  return {
    title: post.title,
    openGraph: { images: [post.ogImageUrl] },
  }
}

opengraph-image động với ImageResponse

Trong opengraph-image.tsx phía máy chủ, hãy await params rồi trả về ImageResponse với kích thước được khai báo rõ ràng.

import { ImageResponse } from 'next/og'

export const size = { width: 1200, height: 630 }
export const contentType = 'image/png'

export default async function Image({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return new ImageResponse(
    <div style={{ display: 'flex', padding: 80 }}>{slug}</div>,
    size
  )
}

Danh sách kiểm tra xác minh triển khai

• ✓Xác nhận metadata hoặc generateMetadata chạy trong phân đoạn tuyến Thành phần Máy chủ.
• ✓Mở HTML đã triển khai và xác minh các giá trị og:title, og:description và og:image cuối cùng.
• ✓Mở hình ảnh công khai tuyệt đối URL trong một phiên riêng biệt và xác minh phản hồi hình ảnh thành công.
• ✓Kiểm tra thành phần 1200×630 được hiển thị ở kích thước thẻ liên kết nhỏ.
• ✓Chạy trình kiểm tra metadata công khai, sau đó sử dụng trình gỡ lỗi dành riêng cho nền tảng khi bộ đệm không đồng ý.