OG Image (og-img)

С помощью og-img вы можете легко добавлять динамические изображения Open Graph на свой Qwik-сайт. Они отображаются, например, когда вашим сайтом делятся в социальных сетях или через службы обмена сообщениями.

og-img - это пакет, не зависящий от фреймворка, для генерации изображений Open Graph с использованием Satori и resvg.

Чтобы начать работу, установите пакет npm:

npm install og-img

Как это работает

Чтобы сгенерировать изображение, достаточно вернуть ImageResponse через конечную точку сервера. Чтобы создать такой маршрут, добавьте новый маршрут на свой сайт Qwik и экспортируйте функцию onGet в индексном файле. Чтобы легко определить содержимое изображения, вы можете использовать литерал шаблона с тегом html.

Чтобы получить правильную подсветку синтаксиса для литералов тегов шаблона в Visual Studio Code, вы можете установить расширение lit-html.

src/routes/og-image/index.ts

import type { RequestHandler } from '@builder.io/qwik-city';
import { fetchFont, ImageResponse, html } from 'og-img';
 
export const onGet: RequestHandler = async ({ send }) => {
  send(
    new ImageResponse(
      // Use Tailwind CSS or style attribute
      html`
        <div tw="text-4xl text-green-700" style="background-color: tan">
          Hello, world!
        </div>
      `,
      {
        width: 1200,
        height: 600,
        fonts: [
          {
            name: 'Roboto',
            // Use `fs` (Node.js only) or `fetch` to read font file
            data: await fetchFont(
              'https://www.example.com/fonts/roboto-400.ttf'
            ),
            weight: 400,
            style: 'normal',
          },
        ],
      }
    )
  );
};

Затем всё, что вам нужно сделать, это указать на эту конечную точку API с помощью метатега в шапке вашего сайта Qwik, чтобы вставить изображение Open Graph.

<head>
  <title>Привет, мир!</title>
  <meta property="og:image" content="https://www.example.com/og-image" />
</head>

Вы также можете генерировать метатег динамически, экспортируя объект head в свои маршруты.

src/routes/index.tsx

import { component$ } from '@builder.io/qwik';
import type { DocumentHead } from '@builder.io/qwik-city';
 
export default component$(() => {
  return <h1>Привет, мир!</h1>;
});
 
export const head: DocumentHead = {
  title: 'Привет, мир!',
  meta: [
    {
      property: 'og:image',
      content: 'https://www.example.com/og-image',
    },
  ],
};

Вы можете использовать параметры URL для динамического изменения содержимого изображения Open Graph. Взгляните на Open Graph image Valibot. Исходный код можно найти здесь.

Участники

Спасибо всем участникам, которые помогли сделать эту документацию лучше!