Изображение opengraph и twitter

Конвенции файлов opengraph-image и twitter-image позволяют задавать изображения Open Graph и Twitter для сегмента маршрута.

Они полезны для задания изображений, которые отображаются в социальных сетях и приложениях для обмена сообщениями, когда пользователь делится ссылкой на ваш сайт.

Существует два способа задать изображения Open Graph и Twitter:

Использование файлов изображений (.jpg, .png, .gif)
Использование кода для генерации изображений (.js, .ts, .tsx)

Файлы изображений (.jpg, .png, .gif)

Используйте файл изображения для задания изображения для совместного использования сегмента маршрута, поместив файл изображения opengraph-image или twitter-image в сегмент.

Next.js оценит файл и автоматически добавит соответствующие теги в элемент <head> вашего приложения.

Конвенция файла	Поддерживаемые типы файлов
`opengraph-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`twitter-image`	`.jpg`, `.jpeg`, `.png`, `.gif`
`opengraph-image.alt`	`.txt`
`twitter-image.alt`	`.txt`

opengraph-image

Добавьте файл изображения opengraph-image.(jpg|jpeg|png|gif) в любой сегмент маршрута.

<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

Добавьте файл изображения twitter-image.(jpg|jpeg|png|gif) в любой сегмент маршрута.

<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

Добавьте сопроводительный файл opengraph-image.alt.txt в том же сегменте маршрута, что и файл изображения opengraph-image.(jpg|jpeg|png|gif), в качестве его альтернативного текста.

About Acme

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

twitter-image.alt.txt

Добавьте сопроводительный файл twitter-image.alt.txt в том же сегменте маршрута, что и файл изображения twitter-image.(jpg|jpeg|png|gif), в качестве его альтернативного текста.

About Acme

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

Генерация изображений с помощью кода (.js, .ts, .tsx)

Помимо использования литеральных файлов изображений, вы можете программно генерировать изображения с помощью кода.

Сгенерируйте изображение для совместного использования сегмента маршрута, создав маршрут opengraph-image или twitter-image, который по умолчанию экспортирует функцию.

Конвенция файла	Поддерживаемые типы файлов
`opengraph-image`	`.js`, `.ts`, `.tsx`
`twitter-image`	`.js`, `.ts`, `.tsx`

Важно знать

По умолчанию сгенерированные изображения статически оптимизированы (генерируются во время сборки и кешируются), если они не используют динамические функции или некешированные данные.

Вы можете сгенерировать несколько изображений в одном файле, используя generateImageMetadata.

Самый простой способ сгенерировать изображение — использовать API ImageResponse из next/og.

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

<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" />

Свойства

Функция по умолчанию получает следующие свойства:

params (необязательно)

Объект, содержащий параметры динамического маршрута от корневого сегмента до сегмента opengraph-image или twitter-image, в котором он расположен.

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

Маршрут	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'] }`

Возвращаемое значение

Важно знать: ImageResponse удовлетворяет этому типу возвращаемого значения.

Экспорт конфигурации

Вы можете необязательно настроить метаданные изображения, экспортировав переменные alt, size, и contentType из маршрута opengraph-image или twitter-image.

Опция	Тип
`alt`	`string`
`size`	`{ width: number; height: number }`
`contentType`	`string` - тип MIME изображения

alt

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

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

размер

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

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

contentType

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

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

Настройка сегмента маршрута

opengraph-image и twitter-image — специализированные обработчики маршрутов, которые могут использовать те же параметры настройки сегмента маршрута, что и страницы и макеты.

Опция	Тип	Значение по умолчанию
`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() {}

Примеры

Использование внешних данных

В этом примере используется объект params и внешние данные для генерации изображения.

Важно знать: По умолчанию это сгенерированное изображение будет статически оптимизировано. Вы можете настроить индивидуальные fetch options или параметры сегментов маршрутов options, чтобы изменить это поведение.

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

История версий

Версия	Изменения
`v13.3.0`	`opengraph-image` и `twitter-image` были добавлены.

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image