Next.js ile Metadata Object ve generateMetadata Fonksiyonu Kullanımı

Can Yüksel

Erdoğancan Yüksel

21 Temmuz 2024

2 dakika 28 saniye okuma süresi

SEO performansını artırmak ve web sitesindeki meta bilgilerinin optimize edilmesi için Metadata Object ve generateMetadata Options kullanılabilmektedir.

metadata-object-generatemetadata

Not:

  • Metada Object ve generateMetadata fonksiyonu dışa aktarımları yalnızca Server Component'lerde desteklenir.
  • Aynı route içerisinde hem Metada Object hem de generateMetadata fonksiyonu kullanılamaz.

Kod örneği:

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: "Example Page",
  description: "Description about the example page."
};

export async function generateMetadata({ params }) {
  return {
    title: "Example Page",
    description: "Description about the example page."
  };
}

export default function Page() {}

Yukarıdaki örnekte görüldüğü gibi Server Component ve generateMetadata fonksiyonları aynı sayfada kullanılamaz. İhtiyaç doğrultusunda iki seçenekten biri seçilerek ilgili sayfada kullanılabilir.

Metadata Object Nedir?

Metadata Object, Next.js ile sayfa seviyesinde meta verileri tanımlamaya imkan sağlar. Bu nesne sayfa başlığı, açıklama gibi bilgileri içerebilir. Bu şekilde her sayfanın kendi meta bilgileri tanımlanabilir.

import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Example Page',
  description: 'Description about the example page.',
  alternates: {
    canonical: 'https://example.com'
  },
  robots: {
    index: true,
    follow: true,
    nocache: true
  },
  icons: {
    icon: [
      { url: '/images/favicon.ico', type: 'image/x-icon' },
      { url: '/images/favicon-500x-500.png', sizes: '500x500', type: 'image/png' },
      { url: '/images/favicon-192x192.png', sizes: '192x192', type: 'image/png' }
    ],
    apple: [
      { url: '/images/apple-icon.png', sizes: '180x180', type: 'image/png' }
    ]
  }
};

export default function Page() {}

Yukarıdaki gibi bir Metadata Object tanımlaması yaptığımızda <head> alanının içerisinde aşağıdaki gibi çıktı görebiliriz.

<head>
  <title>Example Page</title>
  <meta name="description" content="Description about the example page." />
  <link rel="canonical" href="https://example.com" />
  <meta name="robots" content="index, follow, nocache" />
  <link rel="icon" href="/images/favicon.ico" type="image/x-icon" />
  <link rel="icon" href="/images/favicon-500x-500.png" sizes="500x500" type="image/png" />
  <link rel="icon" href="/images/favicon-192x192.png" sizes="192x192" type="image/png" />
  <link rel="apple-touch-icon" href="/images/apple-icon.png" sizes="180x180" type="image/png" />
</head>

Önemli not: Favicon görselleri /public/images klasörü oluşturarak ilgili klasöre eklenmelidir. Aksi durumda ilgili görseller koda yansımayabilir.

Metadata Object Nedir?

generateMetadata Options, dinamik olarak meta verileri oluşturma imkanı sağlar. Özellikle dinamik sayfalar için oldukça kullanışlıdır. İçerik veya veriye dayalı olarak meta bilgileri dinamik olarak ayarlanabilir.

Kod örneği:

import type { Metadata } from 'next';

// Normal fonksiyon
export function generateMetadata(): Metadata {
  return {
    title: "Example Page",
    description: "Description about the example page."
  };
}

// Asenkron fonksiyon
export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "Example Page",
    description: "Description about the example page."
  };
}

Dinamik meta verilerinin oluşturulması:

Kod örneği:

import type { Metadata } from 'next';

type Props = {
  params: { id: string };
  searchParams: { [key: string]: string | string[] | undefined };
};

export function generateMetadata({ params, searchParams }: Props): Metadata {
  const title = `Post ${params.id}`;
  const description = searchParams.description
    ? `Description: ${searchParams.description}`
    : 'No description provided';

  return {
    title,
    description,
  };
}

export default function Page({ params, searchParams }: Props) {
  return (
    <div>
      <h1>{`Post ID: ${params.id}`}</h1>
      <p>{searchParams.description || 'No description'}</p>
    </div>
  );
}

Örneğin url'imiz şu şekilde olsun:

https://example.com/blog?id=123&sort=asc

  • params: Dinamik route parametrelerini içeren bir nesnedir. Örneğin, /blog/123 URL'si için params.id "123" olacaktır.
  • searchParams: URL'deki sorgu parametrelerini içeren bir nesnedir. Örneğin, /blog?id=123&sort=asc URL'si için searchParams {"id": "123", "sort": "asc"} olacaktır.

generateMetadata fonksiyonu;

  • params.id'yi kullanarak dinamik bir title oluşturur:
  • searchParams.description varsa description meta nesnesi oluşturur.
  • Page bileşeni ise params.id ve searchParams.description değerlerini kullanarak sayfa içeriğini dinamik olarak oluşturur.

Kod örneği:

<head> 
	<title>Post 123</title>
	<meta name="description" content="Description: About the example page." />
</head>
<div>
	<h1>Post ID: 123</h1>
	<p>About the example page.</p>
</div>

 Sonuç olarak Metadata Object veya generateMetadata Options, Next.js projelerinizde meta verilerini yönetmenin ve optimize etmenin etkili yoludur. İlgili özellikler kullanılarak web sitenizin SEO performansını artırabilir ve kullanıcı deneyimi iyileştirilebilir.