opengraph-image und twitter-image

Die Dateikonventionen opengraph-image und twitter-image ermöglichen es Ihnen, Open Graph- und Twitter-Bilder für ein Routensegment festzulegen.

Sie sind nützlich, um die Bilder zu definieren, die in sozialen Netzwerken und Messaging-Apps angezeigt werden, wenn ein Benutzer einen Link zu Ihrer Website teilt.

Es gibt zwei Möglichkeiten, Open Graph- und Twitter-Bilder festzulegen:

Verwendung von Bilddateien (.jpg, .png, .gif)
Verwendung von Code zur Bildgenerierung (.js, .ts, .tsx)

Bilddateien (.jpg, .png, .gif)

Verwenden Sie eine Bilddatei, um das geteilte Bild eines Routensegments festzulegen, indem Sie eine opengraph-image- oder twitter-image-Bilddatei im Segment platzieren.

Next.js wertet die Datei aus und fügt automatisch die entsprechenden Tags zum <head>-Element Ihrer App hinzu.

Dateikonvention	Unterstützte Dateitypen
`opengraph-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`twitter-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`opengraph-image.alt`	`.txt`
`twitter-image.alt`	`.txt`

`opengraph-image`

Fügen Sie eine opengraph-image.(jpg|jpeg|png|gif)-Bilddatei zu einem beliebigen Routensegment hinzu.

<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`

Fügen Sie eine twitter-image.(jpg|jpeg|png|gif)-Bilddatei zu einem beliebigen Routensegment hinzu.

<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`

Fügen Sie eine begleitende opengraph-image.alt.txt-Datei im selben Routensegment wie die opengraph-image.(jpg|jpeg|png|gif)-Bilddatei hinzu, um deren Alt-Text festzulegen.

opengraph-image.alt.txt

About Acme

<head> output

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

`twitter-image.alt.txt`

Fügen Sie eine begleitende twitter-image.alt.txt-Datei im selben Routensegment wie die twitter-image.(jpg|jpeg|png|gif)-Bilddatei hinzu, um deren Alt-Text festzulegen.

twitter-image.alt.txt

About Acme

<head> output

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

Bilder mit Code generieren (.js, .ts, .tsx)

Zusätzlich zur Verwendung von Bilddateien können Sie Bilder auch programmatisch generieren.

Generieren Sie das geteilte Bild eines Routensegments, indem Sie eine opengraph-image- oder twitter-image-Route erstellen, die eine Funktion als Standardexport bereitstellt.

Dateikonvention	Unterstützte Dateitypen
`opengraph-image`	`.js`, `.ts`, `.tsx`
`twitter-image`	`.js`, `.ts`, `.tsx`

Gut zu wissen

Standardmäßig werden generierte Bilder statisch optimiert (zum Build-Zeitpunkt generiert und zwischengespeichert), es sei denn, sie verwenden dynamische Funktionen oder ungecachte Daten.

Sie können mehrere Bilder in derselben Datei mit generateImageMetadata generieren.

Der einfachste Weg, ein Bild zu generieren, ist die Verwendung der ImageResponse-API aus next/server.

import { ImageResponse } from 'next/server'

// Routensegment-Konfiguration
export const runtime = 'edge'

// Bildmetadaten
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

// Bildgenerierung
export default async function Image() {
  // Schriftart
  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-Optionen
    {
      // Der Einfachheit halber können wir die exportierten opengraph-image
      // Größenkonfiguration wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: await interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}

import { ImageResponse } from 'next/server'

// Routensegment-Konfiguration
export const runtime = 'edge'

// Bildmetadaten
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}

export const contentType = 'image/png'

// Bildgenerierung
export default async function Image() {
  // Schriftart
  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-Optionen
    {
      // Der Einfachheit halber können wir die exportierten opengraph-image
      // Größenkonfiguration wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...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

Die als Standard exportierte Funktion erhält folgende Props:

`params` (optional)

Ein Objekt, das die dynamischen Routenparameter vom Root-Segment bis zu dem Segment enthält, in dem sich opengraph-image oder twitter-image befindet.

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

export default function Image({ params }) {
  // ...
}

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'] }`

Rückgabewerte

Gut zu wissen: ImageResponse erfüllt diesen Rückgabetyp.

Konfigurationsexporte

Sie können optional die Metadaten des Bildes konfigurieren, indem Sie die Variablen alt, size und contentType aus der opengraph-image- oder twitter-image-Route exportieren.

Option	Typ
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string` - Bild-MIME-Typ

`alt`

export const alt = 'Mein Bild-Alt-Text'

export default function Image() {}

export const alt = 'Mein Bild-Alt-Text'

export default function Image() {}

<head> output

<meta property="og:image:alt" content="Mein Bild-Alt-Text" />

`size`

export const size = { width: 1200, height: 630 }

export default function Image() {}

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`

export const contentType = 'image/png'

export default function Image() {}

export const contentType = 'image/png'

export default function Image() {}

<head> output

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

Routensegment-Konfiguration

opengraph-image und twitter-image sind spezialisierte Route Handler, die dieselben Routensegment-Konfigurationsoptionen wie Pages und Layouts verwenden können.

Option	Typ	Standard
`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'`

export const runtime = 'edge'

export default function Image() {}

export const runtime = 'edge'

export default function Image() {}

Beispiele

Verwendung externer Daten

Dieses Beispiel verwendet das params-Objekt und externe Daten, um das Bild zu generieren.

Gut zu wissen: Standardmäßig wird dieses generierte Bild statisch optimiert. Sie können die individuellen fetch-Optionen oder Routensegment-Optionen konfigurieren, um dieses Verhalten zu ändern.

import { ImageResponse } from 'next/server'

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,
    }
  )
}

import { ImageResponse } from 'next/server'

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 }) {
  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,
    }
  )
}

Versionsverlauf

Version	Änderungen
`v13.3.0`	`opengraph-image` und `twitter-image` eingeführt.

opengraph-image und twitter-image

On this page