841-biborokuWebフロントエンドの備忘録

microCMS×imgixでOGPを自動生成する

OGP画像をmicroCMSで紹介されている「imgixで動的画像・OGPを作成する」を参考に設定しました。


自動生成したOGP



src/components/createOgImage.tsx

import base64url from "base64url";

export const createOgImage = (title: string, color: string) => {
  const ogImageUrl = `${ベースになる画像URL}?w=1200&h=630&blend64=${base64url(
    `https://assets.imgix.net/~text?txtsize=50&txt-color=${color}&w=1000&h=230&txt-align=middle,left&txtfont=Hiragino%20Sans%20W6&txt-track=2&txt64=${base64url(
      title
    )}`
  )}&blend-mode=normal&blend-x=100&blend-y=200&monochrome=95${color}&fm=png`;
  return { ogImageUrl };
};

選択したカテゴリによってロゴカラーを変化させる

使用したimgixパラメータは、「monochrome」。

色を設定することで全体の色相を変化させることができます。


用意したベース画像のロゴは、指定した色によって変化させるためあえてグレースケールにしています。


カテゴリのAPIスキーマにイメージカラー(imgColor)のフィールドを追加し、カラーコードを設定します。

1つ目のカテゴリに指定したimgColorをmonochromeに設定することで、選択したカテゴリによってOGP画像内のロゴカラーを変化させています。

タイトルが複数行になっても上下中央に配置する

w=1000&h=230

タイトルが入る枠の幅と高さ位置を設定。

高さは最大3行を想定した高さにしました。


txt-align=middle,left

タイトル枠に対してテキストに配置を上下中央の左寄せにします。


blend-x=100&blend-y=200

X軸

(OGP画像の幅(1200px)-テキスト枠の幅(1000px))÷2=100

Y軸

OGP画像の高さ(630px)÷2-タイトル枠(230px)÷2=200

OGP画像を設定する

記事詳細ページに先ほど作成したコンポーネントを読み込み画像のURLを生成する。

生成したURLをnext-seoのimages->urlに設定するだけでOK。

src/pages/entry/[slug].tsx

import { createOgImage } from "@/components/createOgImage";
~略
const PostDetail: NextPage<PostPageProps> = ({ postData, categories }) => {
  const { ogImageUrl } = createOgImage(post.title, post.category[0].imgColor);
  return (
    <>
      <NextSeo
        title={post.title}
        canonical={pageUrl}
        openGraph={{
          url: pageUrl,
          images: [
            {
              url: ogImageUrl,  //生成したOGPのURLを設定
            },
          ],
          title: post.title,
        }}
      />
~略
    </>
  );
};

シェア