og-imageを使ってOGP画像を動的に作成する方法

  const rglr = readFileSync(`${__dirname}/../_fonts/Inter-Regular.woff2`).toString("base64");
  const bold = readFileSync(`${__dirname}/../_fonts/Inter-Bold.woff2`).toString("base64");
  const mono = readFileSync(`${__dirname}/../_fonts/Vera-Mono.woff2`).toString("base64");
  const noto = readFileSync(`${__dirname}/../_fonts/NotoSansJP-Bold.woff2`).toString("base64");

あとはCssを出力しているgetCssの中で定義して使用するだけで完了です。

  function getCss(fontSize: string) {
    let foreground = "#333333";

    return `
    @font-face {
      font-family: 'Noto';
      font-style:  normal;
      font-weight: normal;
      src: url(data:font/woff2;charset=utf-8;base64,${noto}) format('woff2');
    }

    .heading {
      font-family: 'Noto', sans-serif;
      font-size: ${sanitizeHtml(fontSize)};
      font-weight: 700;
      color: ${foreground};
      line-height: 1.3;
      max-width: 1000px
    }
    `;
  }

BudouX導入

Webで問題になりがちな日本語の改行位置を調整します。BudouXはGoogleが開発している、日本語改行位置を自動的にいい感じに調整してくれるツールです。

こんな感じに調整してくれます。

ビフォー

アフター

インストール・使い方

BudouX 🍇

getHtmlの中でHTMLを出力して返り値に渡してあげると完了です。

  import { loadDefaultJapaneseParser } from "budoux";
...
  export function getHtml(parsedReq: ParsedRequest) {
    const { text, md, fontSize } = parsedReq;
    const parser = loadDefaultJapaneseParser();
    const title = parser.translateHTMLString(text);
    return `<!DOCTYPE html>
  <html>
    <meta charset="utf-8">
    <title>Generated Image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      ${getCss(fontSize)}
    </style>
    <body>
      <div class="grid">
        <div class="heading">${emojify(
          md ? marked(title) : sanitizeHtml(title)
        )}
        </div>
      </div>
    </body>
  </html>`;
  }

og-imageはHTMLページをレンダリングしてスクリーンショットを撮っているだけのようなのでBudouXの導入も簡単でしたね。

morimorig3.com

og-imageを使ってOGP画像を動的に作成する方法

og-imageとは

手順

ホスティングまで

日本語化

BudouX導入

参考