microCMS×imgixで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,
}}
/>
~略
</>
);
};