Metadata

Next.js, gelişmiş SEO ve web paylaşılabilirliği için uygulama meta verilerinizi (örneğin HTML head öğenizin içindeki meta ve link etiketleri) tanımlamak için kullanılabilecek bir Meta Veri API'sine sahiptir.

Uygulamanıza meta veri eklemenin iki yolu vardır:

Konfigürasyon tabanlı Meta Veriler: Statik bir metadata nesnesini veya dinamik bir generateMetadata işlevini bir layout.js veya page.js dosyasına aktarın.
Dosya tabanlı Meta Veriler: Rota segmentlerine statik veya dinamik olarak oluşturulan özel dosyalar ekleyin.

Bu iki seçenekle Next.js, sayfalarınız için ilgili <head> öğelerini otomatik olarak oluşturacaktır. Ayrıca şu seçeneği kullanarak dinamik OG görüntüleri oluşturabilirsiniz ImageResponse kurucu.

Static Metadata

Statik meta verileri tanımlamak için, layout.js veya statik page.js dosyasından bir Metadata nesnesini dışa aktarın.

layout.tsx | page.tsx

import type { Metadata } from 'next'
 
export const metadata: Metadata = {
  title: '...',
  description: '...',
}
 
export default function Page() {}

Mevcut tüm seçenekler için API Referansına bakın.

Dynamic Metadata

Dinamik değerler gerektiren meta verileri fetch adresine göndermek için generateMetadata işlevini kullanabilirsiniz.

app/products/[id]/page.tsx

import type { Metadata, ResolvingMetadata } from 'next'
 
type Props = {
  params: { id: string }
  searchParams: { [key: string]: string | string[] | undefined }
}
 
export async function generateMetadata(
  { params, searchParams }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  // read route params
  const id = params.id
 
  // fetch data
  const product = await fetch(`https://.../${id}`).then((res) => res.json())
 
  // optionally access and extend (rather than replace) parent metadata
  const previousImages = (await parent).openGraph?.images || []
 
  return {
    title: product.title,
    openGraph: {
      images: ['/some-specific-page-image.jpg', ...previousImages],
    },
  }
}
 
export default function Page({ params, searchParams }: Props) {}

Kullanılabilir tüm parametreler için API Referansına bakın.

Bildiğim iyi oldu:

generateMetadata aracılığıyla hem statik hem de dinamik meta veriler yalnızca Sunucu Bileşenlerinde desteklenir.

fetch generateMetadata , generateStaticParams, Düzenler, Sayfalar ve Sunucu Bileşenleri arasında aynı veriler için istekler otomatik olarak not edilir. fetch kullanılamıyorsa React cache kullanılabilir.

Next.js, kullanıcı arayüzünü istemciye aktarmadan önce generateMetadata içinde veri getirme işleminin tamamlanmasını bekleyecektir. Bu, akışlı yanıtın ilk bölümünün <head> etiketlerini içermesini garanti eder.

File-based metadata

Bu özel dosyalar meta veriler için kullanılabilir:

Bunları statik meta veriler için kullanabilir veya bu dosyaları kodla programlı olarak oluşturabilirsiniz.

Uygulama ve örnekler için Meta Veri Dosyaları API Başvurusu ve Dinamik Görüntü Oluşturma bölümlerine bakın.

Behavior

Dosya tabanlı meta veriler daha yüksek önceliğe sahiptir ve yapılandırma tabanlı meta verileri geçersiz kılar.

Default Fields

Bir rota meta veri tanımlamasa bile her zaman eklenen iki varsayılan meta etiketi vardır:

Meta charset etiketi web sitesi için karakter kodlamasını ayarlar.
Meta viewport etiketi web sitesinin farklı cihazlara göre ayarlanması için viewport genişliğini ve ölçeğini ayarlar.

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

Bilmekte fayda var: Varsayılanın üzerine yazabilirsiniz viewport meta etiketi.

Ordering

Meta veriler, kök segmentten başlayarak son page.js segmentine en yakın segmente kadar sırayla değerlendirilir. Örneğin:

app/layout.tsx (Kök Düzeni)
app/blog/layout.tsx (İç İçe Blog Düzeni)
app/blog/[slug]/page.tsx (Blog Sayfası)

Merging

Değerlendirme sırasını takiben, aynı rotadaki birden fazla segmentten dışa aktarılan Meta Veri nesneleri, bir rotanın nihai meta veri çıktısını oluşturmak için yüzeysel olarak birleştirilir. Yinelenen anahtarlar sıralamalarına göre değiştirilir.

Bu, aşağıdaki gibi iç içe geçmiş alanlara sahip meta veriler anlamına gelir openGraph ve robots daha önceki bir segmentte tanımlananlar, onları tanımlayan son segment tarafından üzerine yazılır.

Overwriting fields

app/layout.js

export const metadata = {
  title: 'Acme',
  openGraph: {
    title: 'Acme',
    description: 'Acme is a...',
  },
}

app/blog/page.js

export const metadata = {
  title: 'Blog',
  openGraph: {
    title: 'Blog',
  },
}
 
// Output:
// <title>Blog</title>
// <meta property="og:title" content="Blog" />

Yukarıdaki örnekte:

title app/layout.js adresinden app/blog/page.js adresinde title ile değiştirilir.
app/layout.js 'deki tüm openGraph alanları app/blog/page.js 'de değiştirilir çünkü app/blog/page.js, openGraph meta verilerini ayarlar. openGraph.description 'un olmadığına dikkat edin.

Bazı iç içe alanları segmentler arasında paylaşırken diğerlerinin üzerine yazmak isterseniz, bunları ayrı bir değişkene çekebilirsiniz:

app/shared-metadata.js

export const openGraphImage = { images: ['http://...'] }

app/page.js

import { openGraphImage } from './shared-metadata'
 
export const metadata = {
  openGraph: {
    ...openGraphImage,
    title: 'Home',
  },
}

app/about/page.js

import { openGraphImage } from '../shared-metadata'
 
export const metadata = {
  openGraph: {
    ...openGraphImage,
    title: 'About',
  },
}

Yukarıdaki örnekte, OG görüntüsü app/layout.js ve app/about/page.js arasında paylaşılırken başlıklar farklıdır.

Inheriting fields

app/layout.js

export const metadata = {
  title: 'Acme',
  openGraph: {
    title: 'Acme',
    description: 'Acme is a...',
  },
}

app/about/page.js

export const metadata = {
  title: 'About',
}
 
// Output:
// <title>About</title>
// <meta property="og:title" content="Acme" />
// <meta property="og:description" content="Acme is a..." />

Notlar

title app/layout.js adresinden app/about/page.js adresinde title ile değiştirilir.
app/layout.js 'deki tüm openGraph alanları app/about/page.js 'de miras alınır çünkü app/about/page.js, openGraph meta verilerini ayarlamaz.

Dynamic Image Generation

ImageResponse yapıcısı, JSX ve CSS kullanarak dinamik görüntüler oluşturmanıza olanak tanır. Bu, Open Graph görüntüleri, Twitter kartları ve daha fazlası gibi sosyal medya görüntüleri oluşturmak için kullanışlıdır.

ImageResponse Edge Runtime'ı kullanır ve Next.js, edge'de önbelleğe alınan görüntülere doğru başlıkları otomatik olarak ekleyerek performansı artırmaya ve yeniden hesaplamayı azaltmaya yardımcı olur.

Kullanmak için ImageResponse adresini next/og adresinden içe aktarabilirsiniz:

app/about/route.js

import { ImageResponse } from 'next/og'
 
export const runtime = 'edge'
 
export async function GET() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          textAlign: 'center',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  )
}

ImageResponse Rota İşleyicileri ve dosya tabanlı Meta Veriler dahil olmak üzere diğer Next.js API'leri ile iyi bir şekilde entegre olur. Örneğin, derleme zamanında veya istek zamanında dinamik olarak Open Graph görüntüleri oluşturmak için ImageResponse adresini bir opengraph-image.tsx dosyasında kullanabilirsiniz.

ImageResponse flexbox ve mutlak konumlandırma, özel yazı tipleri, metin kaydırma, merkezleme ve iç içe görüntüler gibi yaygın CSS özelliklerini destekler. Desteklenen CSS özelliklerinin tam listesine bakın.

Bildiğim iyi oldu:

Örnekler Vercel OG Playground adresinde mevcuttur.

ImageResponse HTML ve CSS'yi PNG'ye dönüştürmek için @vercel/og, Satori ve Resvg kullanır.

Yalnızca Edge Runtime desteklenir. Varsayılan Node.js çalışma zamanı çalışmayacaktır.

Yalnızca flexbox ve CSS özelliklerinin bir alt kümesi desteklenir. Gelişmiş düzenler (örn. display: grid) çalışmayacaktır.

Maksimum paket boyutu 500KB. Paket boyutu JSX, CSS, yazı tipleri, resimler ve diğer varlıklarınızı içerir. Sınırı aşarsanız, varlıkların boyutunu küçültmeyi veya çalışma zamanında getirmeyi düşünün.

Yalnızca ttf, otf ve woff yazı tipi biçimleri desteklenir. Yazı tipi ayrıştırma hızını en üst düzeye çıkarmak için woff yerine ttf veya otf tercih edilir.

JSON-LD

JSON-LD, içeriğinizi anlamak için arama motorları tarafından kullanılabilen yapılandırılmış veriler için bir formattır. Örneğin, bir kişiyi, bir olayı, bir organizasyonu, bir filmi, bir kitabı, bir tarifi ve diğer birçok varlık türünü tanımlamak için kullanabilirsiniz.

JSON-LD için mevcut önerimiz, yapılandırılmış verileri layout.js veya page.js bileşenlerinizde bir <script> etiketi olarak oluşturmaktır. Örneğin:

app/products/[id]/page.tsx

export default async function Page({ params }) {
  const product = await getProduct(params.id)
 
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }
 
  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  )
}

Yapılandırılmış verilerinizi Google için Zengin Sonuçlar Testi veya genel Şema İşaretleme Doğrulayıcısı ile doğrulayabilir ve test edebilirsiniz.

gibi topluluk paketlerini kullanarak JSON-LD'nizi TypeScript ile yazabilirsiniz. schema-dts:

import { Product, WithContext } from 'schema-dts'
 
const jsonLd: WithContext<Product> = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: 'Next.js Sticker',
  image: 'https://nextjs.org/imgs/sticker.png',
  description: 'Dynamic at the speed of static.',
}