ใช้งานและตรวจสอบอิมเมจ OG ในแอป Next.js

เลือกตามไฟล์หรือตามรหัส metadata จงใจ

• Next.js metadata และรูปภาพ OG — ภาพรวม App Router อย่างเป็นทางการ
• generateMetadata API — ข้อมูลอ้างอิงแบบไดนามิก metadata อย่างเป็นทางการ
• การประชุม opengraph-image — ไฟล์อย่างเป็นทางการและการอ้างอิง ImageResponse

metadata แบบคงที่พร้อม metadataBase

metadataBase ใช้แก้ URL metadata แบบสัมพัทธ์ ส่วน URL รูปสาธารณะแบบเต็ม เช่น https://starterpackai.com/og/home.png ช่วยให้ตรวจจากภายนอกแอปได้ง่าย

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 ใน Next.js 16

ใน Next.js 16 App Router ค่า params เป็น Promise จึงต้อง await params ก่อนโหลดข้อมูลของเส้นทางและส่งคืน 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 พร้อม ImageResponse

ใน opengraph-image.tsx ฝั่งเซิร์ฟเวอร์ ให้ await params แล้วส่งคืน ImageResponse ด้วยขนาดที่ระบุชัดเจน

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
  )
}

รายการตรวจสอบการยืนยันการทำให้ใช้งานได้

• ✓ยืนยันว่า metadata หรือ generateMetadata ทำงานในส่วนเส้นทางของส่วนประกอบเซิร์ฟเวอร์
• ✓เปิด HTML ที่ปรับใช้ และตรวจสอบค่า og:title, og:description และ og:image สุดท้าย
• ✓เปิดรูปภาพสาธารณะแบบสัมบูรณ์ URL ในเซสชันแยกต่างหาก และตรวจสอบการตอบสนองของรูปภาพที่สำเร็จ
• ✓ตรวจสอบองค์ประกอบ 1200×630 ที่เรนเดอร์ด้วยลิงก์การ์ดขนาดเล็ก
• ✓เรียกใช้ตัวตรวจสอบ metadata สาธารณะ จากนั้นใช้ดีบักเกอร์เฉพาะแพลตฟอร์มเมื่อแคชไม่เห็นด้วย