Next.js / Open Graph зураг

Open Graph зураг

Найздаа холбоос илгээхэд Telegram, Facebook, Slack дотор автоматаар зураг, гарчиг, тайлбар бүхий preview харагддаг. Тэр preview-г Open Graph тохиргоо удирддаг. Next.js App Router дотор OG зургийг код ашиглан динамикаар үүсгэж болно — зурагч дуудах шаардлагагүй!

Статик OG зураг

Хамгийн энгийн арга: app/ директор дотор opengraph-image.png файл байрлуулна. Next.js автоматаар олж metadata-д нэмнэ — нэг ч мөр код бичихгүйгээр.

код
app/
├── opengraph-image.png      →  нүүр хуудасны OG зураг
├── courses/
│   └── opengraph-image.png  →  /courses хуудасны OG зураг

Зургийн хэмжээ: 1200 × 630 пиксел байхыг зөвлөдөг.

Динамик OG зураг — ImageResponse

opengraph-image.tsx файл үүсгэж React component дотор зургийг код ашиглан буудна. ImageResponse нь тэр component-г PNG зураг болгон хөрвүүлдэг:

tsx
// app/courses/[courseSlug]/opengraph-image.tsx
import { ImageResponse } from "next/og";
import { getCourse } from "@/lib/courses";

export const runtime = "edge";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";

interface Props {
  params: Promise<{ courseSlug: string }>;
}

export default async function OgImage({ params }: Props) {
  const { courseSlug } = await params;
  const course = await getCourse(courseSlug);

  return new ImageResponse(
    <div
      style={{
        width: "100%",
        height: "100%",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor: "#0b1120",
        color: "#f1f5f9",
        fontFamily: "sans-serif",
        padding: "60px",
      }}
    >
      <div style={{ fontSize: 28, color: "#94a3b8", marginBottom: 16 }}>
        Ulaanbaatar.app
      </div>
      <div style={{ fontSize: 64, fontWeight: "bold", textAlign: "center" }}>
        {course?.title ?? "Курс"}
      </div>
      <div style={{ fontSize: 28, color: "#94a3b8", marginTop: 20 }}>
        {course?.description ?? ""}
      </div>
    </div>,
  );
}

Одоо /courses/javascript хуудасны холбоосыг Telegram-д илгээхэд "JavaScript үндэс" гэсэн гарчигтай, харанхуй дэвсгэртэй preview зураг автоматаар харагдана.

metadata дотор OG тохируулах

opengraph-image.tsx файл байгаа үед Next.js автоматаар OG meta tag нэмдэг. Гэхдээ илүү дэлгэрэнгүй тохируулах шаардлагатай бол metadata дотор гараар нэмнэ:

typescript
// app/courses/[courseSlug]/page.tsx
import { Metadata } from "next";

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { courseSlug } = await params;
  const course = await getCourse(courseSlug);

  return {
    title: course?.title,
    description: course?.description,
    openGraph: {
      title: course?.title,
      description: course?.description,
      url: `https://www.ulaanbaatar.app/courses/${courseSlug}`,
      siteName: "Ulaanbaatar.app",
      images: [
        {
          url: `https://www.ulaanbaatar.app/courses/${courseSlug}/opengraph-image`,
          width: 1200,
          height: 630,
        },
      ],
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title: course?.title,
      description: course?.description,
    },
  };
}

twitter.card: 'summary_large_image' гэдэг нь Twitter/X дээр том зурагтай preview харуулна.

Дараагийн хичээлд:

next/image component ашиглан зургийг хэрхэн автоматаар оновчлох, шахах, lazy load хийхийг сурна. Core Web Vitals оноог сайжруулах зургийн best practice-г ойлгоно.

← Өмнөх хичээлMetadata ба SEOДараах хичээл →next/image оновчлол