Open Graph 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 wird die Datei auswerten und automatisch die entsprechenden Tags zum <head>-Element Ihrer App hinzufügen.

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

Wissenswert:

Die Dateigröße von twitter-image darf 5MB nicht überschreiten, und die Dateigröße von opengraph-image darf 8MB nicht überschreiten. Wenn die Bilddateigröße diese Grenzen überschreitet, schlägt der Build fehl.

`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 gleichen Routensegment wie die opengraph-image.(jpg|jpeg|png|gif)-Bilddatei hinzu, um den 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 gleichen Routensegment wie die twitter-image.(jpg|jpeg|png|gif)-Bilddatei hinzu, um den 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`

Wissenswert:

Standardmäßig werden generierte Bilder statisch optimiert (zum Build-Zeitpunkt generiert und zwischengespeichert), es sei denn, sie verwenden Dynamische APIs oder nicht zwischengespeicherte Daten.

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

opengraph-image.js und twitter-image.js sind spezielle Route Handler, die standardmäßig zwischengespeichert werden, es sei denn, sie verwenden eine Dynamische API oder eine dynamische Konfigurationsoption.

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

import { ImageResponse } from 'next/og'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'

// 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 laden, process.cwd() ist das Next.js-Projektverzeichnis
  const interSemiBold = await readFile(
    join(process.cwd(), 'assets/Inter-SemiBold.ttf')
  )

  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 exportierte opengraph-image
      // Größenkonfiguration wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}

import { ImageResponse } from 'next/og'
import { readFile } from 'node:fs/promises'
import { join } from 'node:path'

// 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 laden, process.cwd() ist das Next.js-Projektverzeichnis
  const interSemiBold = await readFile(
    join(process.cwd(), 'assets/Inter-SemiBold.ttf')
  )

  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 exportierte opengraph-image
      // Größenkonfiguration wiederverwenden, um auch die Breite und Höhe von ImageResponse festzulegen.
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: 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 Standardexport-Funktion erhält folgende Props:

`params` (optional)

Ein Objekt, das das dynamische Routenparameter-Objekt 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' }`

Rückgabewerte

Wissenswert: ImageResponse erfüllt diesen Rückgabetyp.

Konfigurations-Exports

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` - image MIME type

`alt`

export const alt = 'Mein Alt-Text für das Bild'

export default function Image() {}

export const alt = 'Mein Alt-Text für das Bild'

export default function Image() {}

<head> output

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

`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 Handlers, die dieselben Routensegment-Konfigurationsoptionen wie Seiten und Layouts verwenden können.

Beispiele

Verwendung externer Daten

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

Wissenswert: 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/og'

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/og'

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

Verwendung der Node.js-Laufzeitumgebung mit lokalen Assets

Dieses Beispiel verwendet die Node.js-Laufzeitumgebung, um ein lokales Bild im Dateisystem zu laden und als ArrayBuffer an das src-Attribut eines <img>-Elements zu übergeben. Das lokale Asset sollte relativ zum Stammverzeichnis Ihres Projekts platziert werden, nicht relativ zum Speicherort der Quelldatei.

import { ImageResponse } from 'next/og'
import { join } from 'node:path'
import { readFile } from 'node:fs/promises'

export default async function Image() {
  const logoData = await readFile(join(process.cwd(), 'logo.png'))
  const logoSrc = Uint8Array.from(logoData).buffer

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

import { ImageResponse } from 'next/og'
import { join } from 'node:path'
import { readFile } from 'node:fs/promises'

export default async function Image() {
  const logoData = await readFile(join(process.cwd(), 'logo.png'))
  const logoSrc = Uint8Array.from(logoData).buffer

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img src={logoSrc} height="100" />
      </div>
    )
  )
}

Versionsverlauf

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

Open Graph Image und Twitter Image

On this page