Next.js / Metadata ба SEO

Metadata ба SEO

Сайт хийгээд дуусваас Google хайлтанд харагдах ёстой. Хэрэглэгч хаяг хуулаад найздаа илгээхэд сайхан preview харагдах ёстой. Эдгээр бүгдийг metadata удирддаг. Next.js App Router дотор metadata тохируулах нь маш цэгцтэй, хялбар.

Статик metadata

Хуудас бүрт metadata объект export хийснээр тухайн хуудасны гарчиг, тайлбарыг тохируулна:

typescript
// app/courses/page.tsx
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Сургалтууд — Ulaanbaatar.app',
  description: 'JavaScript, TypeScript, Python, React болон бусад хөгжүүлэлтийн курс Монгол хэлээр.',
  keywords: ['JavaScript', 'TypeScript', 'Next.js', 'код сурах', 'Монгол'],
};

export default function CoursesPage() {
  return <main>Сургалтуудын жагсаалт</main>;
}

Хөтчийн tab дээр "Сургалтууд — Ulaanbaatar.app" харагдана. Google хайлтанд description текст харагдана.

Динамик metadata

Dynamic route дотор — жишээлбэл /courses/[courseSlug] — metadata нь хуудас бүрт өөр байх ёстой. generateMetadata функц ашиглана:

typescript
// app/courses/[courseSlug]/page.tsx
import { Metadata } from 'next';
import { getCourse } from '@/lib/courses';

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

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

  if (!course) {
    return { title: 'Курс олдсонгүй' };
  }

  return {
    title: `${course.title} — Ulaanbaatar.app`,
    description: course.description,
  };
}

export default async function CoursePage({ params }: Props) {
  const { courseSlug } = await params;
  const course = await getCourse(courseSlug);
  return <main>{course?.title}</main>;
}

generateMetadata нь params-г await хийдэг тул Next.js 15-тэй бүрэн нийцдэг.

title template — нэр давтахгүй байх

layout.tsx дотор title.template тохируулбал хуудас бүрд сайтын нэрийг автоматаар нэмдэг:

typescript
// app/layout.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s — Ulaanbaatar.app",
    default: "Ulaanbaatar.app — Монгол хэлний кодчиллын платформ",
  },
  description: "Монгол хөгжүүлэгчдэд зориулсан онлайн код сургалт.",
};

Одоо /courses хуудаст зөвхөн title: 'Сургалтууд' гэж бичихэд автоматаар 'Сургалтууд — Ulaanbaatar.app' болно. Давтан бичих шаардлагагүй.

robots болон canonical

Хайлтын системд зориулсан нэмэлт тохиргоо:

typescript
// app/layout.tsx
export const metadata: Metadata = {
  title: { template: "%s — Ulaanbaatar.app", default: "Ulaanbaatar.app" },
  description: "Монгол хэлний кодчиллын платформ.",
  robots: {
    index: true, // Google индексэд оруулна
    follow: true, // линкүүдийг дагана
  },
  alternates: {
    canonical: "https://www.ulaanbaatar.app",
  },
};

canonical нь ижил контент олон URL-д байгаа үед аль нь үндсэн хаяг болохыг Google-д хэлдэг — SEO-д чухал.

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

Open Graph зураг тохируулна. Хэрэглэгч холбоос хуулахад Facebook, Twitter, Slack дотор харагдах preview зургийг Next.js-ээр хэрхэн автоматаар үүсгэхийг сурна.

← Өмнөх хичээлCookie ба HeaderДараах хичээл →Open Graph зураг