opengraph-image and twitter-image

opengraph-image ve twitter-image dosya kuralları, bir rota segmenti için Open Graph ve Twitter görüntüleri ayarlamanıza olanak tanır.

Bir kullanıcı sitenizin bağlantısını paylaştığında sosyal ağlarda ve mesajlaşma uygulamalarında görünen görüntüleri ayarlamak için kullanışlıdırlar.

Open Graph ve Twitter görsellerini ayarlamanın iki yolu vardır:

Görüntü dosyalarını kullanma (.jpg, .png, .gif)
Görüntü oluşturmak için kod kullanma (.js, .ts, .tsx)

Image files (.jpg, .png, .gif)

Segmente bir opengraph-image veya twitter-image görüntü dosyası yerleştirerek bir rota segmentinin paylaşılan görüntüsünü ayarlamak için bir görüntü dosyası kullanın.

Next.js dosyayı değerlendirecek ve uygulamanızın <head> öğesine uygun etiketleri otomatik olarak ekleyecektir.

File convention	Supported file types
`opengraph-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`twitter-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`opengraph-image.alt`	`.txt`
`twitter-image.alt`	`.txt`

`opengraph-image`

Herhangi bir rota segmentine bir opengraph-image.(jpg|jpeg|png|gif) görüntü dosyası ekleyin.

<head> output

<meta property="og:image" content="<generated>" />
<meta property="og:image:type" content="<generated>" />
<meta property="og:image:width" content="<generated>" />
<meta property="og:image:height" content="<generated>" />

`twitter-image`

Herhangi bir rota segmentine twitter-image.(jpg|jpeg|png|gif) görüntü dosyası ekleyin.

<head> output

<meta name="twitter:image" content="<generated>" />
<meta name="twitter:image:type" content="<generated>" />
<meta name="twitter:image:width" content="<generated>" />
<meta name="twitter:image:height" content="<generated>" />

`opengraph-image.alt.txt`

Alt metni olan opengraph-image.(jpg|jpeg|png|gif) görüntüsüyle aynı rota segmentine eşlik eden bir opengraph-image.alt.txt dosyası ekleyin.

opengraph-image.alt.txt

About Acme

<head> output

<meta property="og:image:alt" content="About Acme" />

`twitter-image.alt.txt`

Alt metni olan twitter-image.(jpg|jpeg|png|gif) görüntüsüyle aynı rota segmentine eşlik eden bir twitter-image.alt.txt dosyası ekleyin.

twitter-image.alt.txt

About Acme

<head> output

<meta property="twitter:image:alt" content="About Acme" />

Generate images using code (.js, .ts, .tsx)

Gerçek görüntü dosyalarını kullanmanın yanı sıra, kod kullanarak programlı bir şekilde görüntü oluşturabilirsiniz.

Bir işlevi varsayılan olarak dışa aktaran bir opengraph-image veya twitter-image rotası oluşturarak bir rota segmentinin paylaşılan görüntüsünü oluşturun.

File convention	Supported file types
`opengraph-image`	`.js`, `.ts`, `.tsx`
`twitter-image`	`.js`, `.ts`, `.tsx`

Bildiğim iyi oldu

Varsayılan olarak, oluşturulan görüntüler dinamik işlevler veya önbelleğe alınmamış veriler kullanmadıkları sürece statik olarak optimize edilir (derleme zamanında oluşturulur ve önbelleğe alınır).

kullanarak aynı dosyada birden fazla Görüntü oluşturabilirsiniz. generateImageMetadata.

Bir görüntü oluşturmanın en kolay yolu next/og adresindeki ImageResponse API'sini kullanmaktır.

app/about/opengraph-image.tsx

import { ImageResponse } from 'next/og'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
 
export const contentType = 'image/png'
 
// Image generation
export default async function Image() {
  // Font
  const interSemiBold = fetch(
    new URL('./Inter-SemiBold.ttf', import.meta.url)
  ).then((res) => res.arrayBuffer())
 
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported opengraph-image
      // size config to also set the ImageResponse's width and height.
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: await interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}

<head> output

<meta property="og:image" content="<generated>" />
<meta property="og:image:alt" content="About Acme" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

Props

Varsayılan dışa aktarma işlevi aşağıdaki destekleri alır:

`params` (optional)

Kök segmentten opengraph-image veya twitter-image segmentine kadar olan dinamik rota parametreleri nesnesini içeren bir nesne.

app/shop/[slug]/opengraph-image.tsx

export default function Image({ params }: { params: { slug: string } }) {
  // ...
}

Route	URL	`params`
`app/shop/opengraph-image.js`	`/shop`	`undefined`
`app/shop/[slug]/opengraph-image.js`	`/shop/1`	`{ slug: '1' }`
`app/shop/[tag]/[item]/opengraph-image.js`	`/shop/1/2`	`{ tag: '1', item: '2' }`
`app/shop/[...slug]/opengraph-image.js`	`/shop/1/2`	`{ slug: ['1', '2'] }`

Returns

Bilmekte fayda var: ImageResponse bu dönüş türünü karşılar.

Config exports

İsteğe bağlı olarak alt, size ve contentType değişkenlerini opengraph-image veya twitter-image rotasından dışa aktararak görüntünün meta verilerini yapılandırabilirsiniz.

Option	Type
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string` - image MIME type

`alt`

opengraph-image.tsx | twitter-image.tsx

export const alt = 'My images alt text'
 
export default function Image() {}

<head> output

<meta property="og:image:alt" content="My images alt text" />

`size`

opengraph-image.tsx | twitter-image.tsx

export const size = { width: 1200, height: 630 }
 
export default function Image() {}

<head> output

<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

`contentType`

opengraph-image.tsx | twitter-image.tsx

export const contentType = 'image/png'
 
export default function Image() {}

<head> output

<meta property="og:image:type" content="image/png" />

Route Segment Config

opengraph-image ve twitter-image, Sayfalar ve Düzenlerle aynı rota segmenti yapılandırma seçeneklerini kullanabilen özel Rota İşleyicileridir.

Option	Type	Default
`dynamic`	`'auto' \| 'force-dynamic' \| 'error' \| 'force-static'`	`'auto'`
`revalidate`	`false \| 'force-cache' \| 0 \| number`	`false`
`runtime`	`'nodejs' \| 'edge'`	`'nodejs'`
`preferredRegion`	`'auto' \| 'global' \| 'home' \| string \| string[]`	`'auto'`

app/opengraph-image.tsx

export const runtime = 'edge'
 
export default function Image() {}

Examples

Using external data

Bu örnek, görüntüyü oluşturmak için params nesnesini ve harici verileri kullanır.

Bilmenizde fayda var: Varsayılan olarak, oluşturulan bu görüntü statik olarak optimize edilecektir. Ayrı ayrı yapılandırabilirsiniz fetch options veya rota segmentleri seçeneklerini kullanarak bu davranışı değiştirebilirsiniz.

app/posts/[slug]/opengraph-image.tsx

import { ImageResponse } from 'next/og'
 
export const runtime = 'edge'
 
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
export const contentType = 'image/png'
 
export default async function Image({ params }: { params: { slug: string } }) {
  const post = await fetch(`https://.../posts/${params.slug}`).then((res) =>
    res.json()
  )
 
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 48,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        {post.title}
      </div>
    ),
    {
      ...size,
    }
  )
}

Version History

Version	Changes
`v13.3.0`	`opengraph-image` and `twitter-image` introduced.