🎱

【デザイン不要】@vercel/ogを使っていい感じの動的OGPをつくる

2022/10/22に公開2件

Next.js

はじめに

最近vercelからリリースされた@vercel/ogですが、exampleにシンプルな例しかなく、実用する上で困ったことがいくつかありました。

簡単なOGP画像を生成するところから始めて、表示する文字を動的にしたり、背景画像を設定したり、カスタムフォントを設定してみてOGP画像がいい感じになることを目指します。

↓完成形

@vercel/ogとは

以下公式ドキュメントから引用した文章です。

Performance: With a small amount of code needed to generate images, Edge Functions can be started almost instantly. This allows the image generation process to be fast and recognized by tools like the Open Graph Debugger

Ease of use: You can define your images using HTML and CSS and the library will dynamically generate images from the markup

Cost-effectiveness: @vercel/og automatically adds the correct headers to cache computed images at the edge, helping reduce cost and recomputation

@vercel/ogはvercelによりEdge ネットワークにデプロイされ、いい感じにキャッシュしてくれるため高いパフォーマンスを発揮します。

また最大の利点としてJSXでスタイルを記述することができます。JSXは内部でvercel製のsatoriというOSSによりsvgへと変換されます。

API RoutesとCanvasを使う方法について

動的OGPについては以下のブログで詳しくまとめられているのですが、有力な方法として、NextjsのAPI Routesとnode-canvasを組み合わせて生成する方法があります。

API内でCanvasを使ってゴニョゴニョした後、画像のバイナリを返して動的OGPを生成する方法です。

https://blog.ojisan.io/dynamic-ogp

しかし、node-canvasでスタイルを記述するのは、改行位置なども自分で決める必要があったり、node-canvasのサイズが大きすぎてvercelの裏でデプロイされるLambdaの制限に引っかかりやすくなったりとなかなか辛いものでした。

それと比べると、@vercel/ogではJSX宣言的にスタイルを定義できることに利点があります。また、Serverless Functionではなく、ユーザーにより近いEdge Functionとして実行されるのでパフォーマンスにも期待できます。

とりあえずOGPを表示させてみる

それでは本題に入ります。

とりあえず、ドキュメントの通り、Hello Worldと表示されるシンプルなOG画像を生成します。

pages/api/og.tsx

import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

export default function ogp() {
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

export const config = {
  runtime: "experimental-edge",
};

という記述によりEdge Functionとして実行されます。

ルートページにimgタグでogp画像を表示してみます。ここではgetServersideProps内でbaseUrlを取得しています。

pages/index.tsx

import type {
  NextPage,
  GetServerSideProps,
  GetServerSidePropsContext,
} from "next";
import Head from "next/head";

type Props = {
  baseUrl: string;
};

const Home: NextPage<Props> = ({ baseUrl }) => {
  return (
    <div>
      <Head>
        <title>OGP Example</title>
        <meta property="og:image" content={`${baseUrl}/api/og`} />
      </Head>
      <img src={`${baseUrl}/api/og`} alt="" />
    </div>
  );
};

export default Home;

const getBaseUrl = (context: GetServerSidePropsContext) => {
  const protocol = context.req.headers["x-forwarded-proto"] || "http";
  const baseUrl = context.req
    ? `${protocol}://${context.req.headers.host}`
    : "";
  return baseUrl;
};
export const getServerSideProps: GetServerSideProps = async (context) => {
  const baseUrl = getBaseUrl(context);

  return {
    props: {
      baseUrl,
    },
  };
};

無事表示されました　👏

表示する文字を動的にする

次にHello Worldではなく動的な文字列を表示します。
クエリに&title=hogehogeのように指定し関数内でクエリの文字列を取り出すことによって動的な文字列を表示します。

ここもドキュメントの通りです。

pages/api/og.tsx

+ import { NextRequest } from 'next/server';
 import { ImageResponse } from "@vercel/og";

 export const config = {
   runtime: "experimental-edge",
 };

+ export default function ogp(req: NextRequest) {
- export default function ogp() {
+  const { searchParams } = new URL(req.url);

+  const hasTitle = searchParams.has("title");
+  const title = hasTitle
+    ? searchParams.get("title")?.slice(0, 100)
+    : "My default title";
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 128,
          background: "white",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
+      {title}
-      Hello world!
      </div>
    ),
    {
      width: 1200,
      height: 600,
    }
  );
}

urlにクエリをつけます。

 <img src={`${baseUrl}/api/og?title=ここにはタイトルが入ります`} alt="" />

動的な文字列を表示することができました　👏

背景画像を設定する

次に背景画像を設定します。今のままではダサいのでOGPを「いい感じ」にしていきます。

↓のサイトで適当な背景画像を生成します。いくつかのテンプレートが用意されていて、パラメータを調整することで良さげな背景画像を生成することができます。
https://app.haikei.app/

1200×630の大きさでsvg形式でexportします。

@vercel/ogでは

svg形式の画像
外部の画像
をサポートしています。

public以下の静的な画像をよしなに使いたいニーズもありそうですが、方法が見つかりませんでした。

exportしたsvg形式の画像は下のようにencodeUriComponentでエンコードしてbackgroundImageに指定します。ちなみにbackgroundSizeを指定しないと背景画像が表示されません。

+ backgroundImage: `url(${`data:image/svg+xml,${encodeURIComponent(
+             '<svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><filter id="blur1" x="-10%" y="-10%" width="120%" height="120%"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="201" result="effect1_foregroundBlur"></feGaussianBlur></filter></defs><rect width="1200" height="630" fill="#6600FF"></rect><g filter="url(#blur1)"><circle cx="603" cy="131" fill="#00CC99" r="447"></circle><circle cx="38" cy="287" fill="#6600FF" r="447"></circle><circle cx="1182" cy="342" fill="#00CC99" r="447"></circle><circle cx="633" cy="523" fill="#00CC99" r="447"></circle><circle cx="1020" cy="539" fill="#6600FF" r="447"></circle><circle cx="843" cy="207" fill="#00CC99" r="447"></circle></g></svg>'
+           )}`})`,
+ backgroundRepeat: "no-repeat",
+ backgroundPosition: "center",
+ backgroundSize: "100% 100%",

imgタグで指定したい時も、同様にエンコードしてsrc属性を指定することで画像を表示させることができます

文字のサイズと色を調整すると、こんな感じになりました。ちょっといい感じになりました。

カスタムフォントを設定する

@vercel/ogではデフォルトで日本語での表示をサポートしているのですが、ここで一つ問題があります。

文字列中に全角スペースがあったり、！のような全角の記号があるとsatori内でパースできずエラーになってしまうようです。

error - uncaughtException: Error [ERR_UNHANDLED_ERROR]: Unhandled error. (Error: Unsupported OpenType signature <htm
    at Object.parseBuffer [as parse] (webpack-internal:///(middleware)/./node_modules/@shuding/opentype.js/dist/opentype.module.js:11455:15)
    at vt.addFonts (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:18:19200)
    at gu (webpack-internal:///(middleware)/./node_modules/satori/dist/index.wasm.js:19:29617)
    at async Object.start (webpack-internal:///(middleware)/./node_modules/@vercel/og/dist/index.js:10:2912))

この問題は日本語フォントを適用することで解決できます。

Google　Fontsあたりからお好きなフォントをダウンロードしておきます。

@vercel/ogではカスタムフォントをサポートしているので、問題は解決したように思われますが、もう一つ問題があります。

それは日本語のフォントファイルが大きすぎてEdge Functionの制限に引っかかってしまうことです。
たとえばNotoSansJPのBoldは4.7MBあります。RobotoのBoldは167KBなのでいかに日本語ファイルのサイズが大きいかがわかります。

フォントファイルをサブセット化することでサイズを削減します。サブセット化とは必要な文字以外をフォントファイルから削除してファイルを軽量化することです。

常用漢字、ひらがな、カタカナ、英数字、記号を残してそれ以外を削除します。

亜哀挨愛曖悪握圧扱宛嵐安案暗以衣位囲医依委威為畏胃尉異移萎偉椅彙意違維慰遺緯域育一壱逸茨芋引印因咽姻員院淫陰飲隠韻右宇羽雨唄鬱畝浦運雲永泳英映栄営詠影鋭衛易疫益液駅悦越謁閲円延沿炎宴怨媛援園煙猿遠鉛塩演縁艶汚王凹央応往押旺欧殴桜翁奥横岡屋億憶臆虞乙俺卸音恩温穏下化火加可仮何花佳価果河苛科架夏家荷華菓貨渦過嫁暇禍靴寡歌箇稼課蚊牙瓦我画芽賀雅餓介回灰会快戒改怪拐悔海界皆械絵開階塊楷解潰壊懐諧貝外劾害崖涯街慨蓋該概骸垣柿各角拡革格核殻郭覚較隔閣確獲嚇穫学岳楽額顎掛潟括活喝渇割葛滑褐轄且株釜鎌刈干刊甘汗缶完肝官冠巻看陥乾勘患貫寒喚堪換敢棺款間閑勧寛幹感漢慣管関歓監緩憾還館環簡観韓艦鑑丸含岸岩玩眼頑顔願企伎危机気岐希忌汽奇祈季紀軌既記起飢鬼帰基寄規亀喜幾揮期棋貴棄毀旗器畿輝機騎技宜偽欺義疑儀戯擬犠議菊吉喫詰却客脚逆虐九久及弓丘旧休吸朽臼求究泣急級糾宮救球給嗅窮牛去巨居拒拠挙虚許距魚御漁凶共叫狂京享供協況峡挟狭恐恭胸脅強教郷境橋矯鏡競響驚仰暁業凝曲局極玉巾斤均近金菌勤琴筋僅禁緊錦謹襟吟銀区句苦駆具惧愚空偶遇隅串屈掘窟熊繰君訓勲薫軍郡群兄刑形系径茎係型契計恵啓掲渓経蛍敬景軽傾携継詣慶憬稽憩警鶏芸迎鯨隙劇撃激桁欠穴血決結傑潔月犬件見券肩建研県倹兼剣拳軒健険圏堅検嫌献絹遣権憲賢謙鍵繭顕験懸元幻玄言弦限原現舷減源厳己戸古呼固孤弧股虎故枯個庫湖雇誇鼓錮顧五互午呉後娯悟碁語誤護口工公勾孔功巧広甲交光向后好江考行坑孝抗攻更効幸拘肯侯厚恒洪皇紅荒郊香候校耕航貢降高康控梗黄喉慌港硬絞項溝鉱構綱酵稿興衡鋼講購乞号合拷剛傲豪克告谷刻国黒穀酷獄骨駒込頃今困昆恨根婚混痕紺魂墾懇左佐沙査砂唆差詐鎖座挫才再災妻采砕宰栽彩採済祭斎細菜最裁債催塞歳載際埼在材剤財罪崎作削昨柵索策酢搾錯咲冊札刷刹拶殺察撮擦雑皿三山参桟蚕惨産傘散算酸賛残斬暫士子支止氏仕史司四市矢旨死糸至伺志私使刺始姉枝祉肢姿思指施師恣紙脂視紫詞歯嗣試詩資飼誌雌摯賜諮示字寺次耳自似児事侍治持時滋慈辞磁餌璽鹿式識軸七叱失室疾執湿嫉漆質実芝写社車舎者射捨赦斜煮遮謝邪蛇尺借酌釈爵若弱寂手主守朱取狩首殊珠酒腫種趣寿受呪授需儒樹収囚州舟秀周宗拾秋臭修袖終羞習週就衆集愁酬醜蹴襲十汁充住柔重従渋銃獣縦叔祝宿淑粛縮塾熟出述術俊春瞬旬巡盾准殉純循順準潤遵処初所書庶暑署緒諸女如助序叙徐除小升少召匠床抄肖尚招承昇松沼昭宵将消症祥称笑唱商渉章紹訟勝掌晶焼焦硝粧詔証象傷奨照詳彰障憧衝賞償礁鐘上丈冗条状乗城浄剰常情場畳蒸縄壌嬢錠譲醸色拭食植殖飾触嘱織職辱尻心申伸臣芯身辛侵信津神唇娠振浸真針深紳進森診寝慎新審震薪親人刃仁尽迅甚陣尋腎須図水吹垂炊帥粋衰推酔遂睡穂随髄枢崇数据杉裾寸瀬是井世正生成西声制姓征性青斉政星牲省凄逝清盛婿晴勢聖誠精製誓静請整醒税夕斥石赤昔析席脊隻惜戚責跡積績籍切折拙窃接設雪摂節説舌絶千川仙占先宣専泉浅洗染扇栓旋船戦煎羨腺詮践箋銭潜線遷選薦繊鮮全前善然禅漸膳繕狙阻祖租素措粗組疎訴塑遡礎双壮早争走奏相荘草送倉捜挿桑巣掃曹曽爽窓創喪痩葬装僧想層総遭槽踪操燥霜騒藻造像増憎蔵贈臓即束足促則息捉速側測俗族属賊続卒率存村孫尊損遜他多汰打妥唾堕惰駄太対体耐待怠胎退帯泰堆袋逮替貸隊滞態戴大代台第題滝宅択沢卓拓託濯諾濁但達脱奪棚誰丹旦担単炭胆探淡短嘆端綻誕鍛団男段断弾暖談壇地池知値恥致遅痴稚置緻竹畜逐蓄築秩窒茶着嫡中仲虫沖宙忠抽注昼柱衷酎鋳駐著貯丁弔庁兆町長挑帳張彫眺釣頂鳥朝貼超腸跳徴嘲潮澄調聴懲直勅捗沈珍朕陳賃鎮追椎墜通痛塚漬坪爪鶴低呈廷弟定底抵邸亭貞帝訂庭逓停偵堤提程艇締諦泥的笛摘滴適敵溺迭哲鉄徹撤天典店点展添転塡田伝殿電斗吐妬徒途都渡塗賭土奴努度怒刀冬灯当投豆東到逃倒凍唐島桃討透党悼盗陶塔搭棟湯痘登答等筒統稲踏糖頭謄藤闘騰同洞胴動堂童道働銅導瞳峠匿特得督徳篤毒独読栃凸突届屯豚頓貪鈍曇丼那奈内梨謎鍋南軟難二尼弐匂肉虹日入乳尿任妊忍認寧熱年念捻粘燃悩納能脳農濃把波派破覇馬婆罵拝杯背肺俳配排敗廃輩売倍梅培陪媒買賠白伯拍泊迫剝舶博薄麦漠縛爆箱箸畑肌八鉢発髪伐抜罰閥反半氾犯帆汎伴判坂阪板版班畔般販斑飯搬煩頒範繁藩晩番蛮盤比皮妃否批彼披肥非卑飛疲秘被悲扉費碑罷避尾眉美備微鼻膝肘匹必泌筆姫百氷表俵票評漂標苗秒病描猫品浜貧賓頻敏瓶不夫父付布扶府怖阜附訃負赴浮婦符富普腐敷膚賦譜侮武部舞封風伏服副幅復福腹複覆払沸仏物粉紛雰噴墳憤奮分文聞丙平兵併並柄陛閉塀幣弊蔽餅米壁璧癖別蔑片辺返変偏遍編弁便勉歩保哺捕補舗母募墓慕暮簿方包芳邦奉宝抱放法泡胞俸倣峰砲崩訪報蜂豊飽褒縫亡乏忙坊妨忘防房肪某冒剖紡望傍帽棒貿貌暴膨謀頰北木朴牧睦僕墨撲没勃堀本奔翻凡盆麻摩磨魔毎妹枚昧埋幕膜枕又末抹万満慢漫未味魅岬密蜜脈妙民眠矛務無夢霧娘名命明迷冥盟銘鳴滅免面綿麺茂模毛妄盲耗猛網目黙門紋問冶夜野弥厄役約訳薬躍闇由油喩愉諭輸癒唯友有勇幽悠郵湧猶裕遊雄誘憂融優与予余誉預幼用羊妖洋要容庸揚揺葉陽溶腰様瘍踊窯養擁謡曜抑沃浴欲翌翼拉裸羅来雷頼絡落酪辣乱卵覧濫藍欄吏利里理痢裏履璃離陸立律慄略柳流留竜粒隆硫侶旅虜慮了両良料涼猟陵量僚領寮療瞭糧力緑林厘倫輪隣臨瑠涙累塁類令礼冷励戻例鈴零霊隷齢麗暦歴列劣烈裂恋連廉練錬呂炉賂路露老労弄郎朗浪廊楼漏籠六録麓論和話賄脇惑枠湾腕ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをんァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ　 、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥‘’“”（）〔〕［］｛｝〈〉《》「」『』【】＋－±×÷＝≠＜＞≦≧∞∴♂♀°′″℃￥¥＄￠￡％＃＆＊＠§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬Å‰♯♭♪ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдеёжзийклмнопрстуфхцчшщъыьэюя─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂｡｢｣､･ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ≒≡∫∮∑√⊥∠∟⊿∵∩∪ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚ０１２３４５６７８９abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 !"#$%&'()-^\@[;:],./\=~|`{+*}<>?_

今回はサブセットフォントメーカーというアプリでサブセット化しました。
4.7MBあったNotoSansJP-Boldは527 KBまで軽量化しました。

後はドキュメント通りにカスタムフォントを適用します。
asetts以下にフォントファイルを配置し以下のように書き換えます。

pages/api/og.tsx

 import { NextRequest } from "next/server";
 import { ImageResponse } from "@vercel/og";

 export const config = {
   runtime: "experimental-edge",
 };

+ const font = fetch(
+   new URL("../../assets/NotoSansJP-Bold.otf", import.meta.url)
+ ).then((res) => res.arrayBuffer());

 export default async function ogp(req: NextRequest) {
   const { searchParams } = new URL(req.url);
+  const fontData = await font;

   const hasTitle = searchParams.has("title");
   const title = hasTitle
     ? searchParams.get("title")?.slice(0, 100)
     : "My default title";
   return new ImageResponse(
     (
      <div
        style={{
          fontSize: 80,
          backgroundImage: `url(${`data:image/svg+xml,${encodeURIComponent(
            '<svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><filter id="blur1" x="-10%" y="-10%" width="120%" height="120%"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="201" result="effect1_foregroundBlur"></feGaussianBlur></filter></defs><rect width="1200" height="630" fill="#6600FF"></rect><g filter="url(#blur1)"><circle cx="603" cy="131" fill="#00CC99" r="447"></circle><circle cx="38" cy="287" fill="#6600FF" r="447"></circle><circle cx="1182" cy="342" fill="#00CC99" r="447"></circle><circle cx="633" cy="523" fill="#00CC99" r="447"></circle><circle cx="1020" cy="539" fill="#6600FF" r="447"></circle><circle cx="843" cy="207" fill="#00CC99" r="447"></circle></g></svg>'
          )}`})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center",
          backgroundSize: "100% 100%",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
    +      fontFamily: '"NotoSansJP"',
          textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
        }}
      >
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 600,
+      fonts: [
+        {
+          name: "NotoSansJP",
+          data: fontData,
+          style: "normal",
+        },
+      ],
     }
   );
 }

カスタムフォントが適用され、全角の記号などにも対応できるようになりました👏

レイアウトを組む

最後に仕上げとしてレイアウトを組んでみます。

前述した通り、@vercel/ogはJSXでスタイルを定義することができるのですが、注意点としてすべてのcssプロパティが使えるわけではありません。

一番代表的なところで言うと、displayプロパティにはflexかnoneしか指定することができず、block などは指定することができません。

適応できるプロパティはsatoriのREADMEから確認することができます。（YogaというReact Nativeと同じレイアウトエンジンを使っているらしい）

ここでは一例としてブログサイトのOGPを作ります。

ブログのタイトル
投稿日
ユーザー名

を表示させてみます。https://github.com/<username>.pngでgithubのプロフィール画像が取れることを利用して、外部画像も表示させてみます。

最終的なコードは以下のようになりました。

pages/api/og.tsx

import { NextRequest } from "next/server";
import { ImageResponse } from "@vercel/og";

export const config = {
  runtime: "experimental-edge",
};

const font = fetch(
  new URL("../../assets/NotoSansJP-Bold.otf", import.meta.url)
).then((res) => res.arrayBuffer());

export default async function ogp(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const fontData = await font;

  const hasTitle = searchParams.has("title");
  const title = hasTitle
    ? searchParams.get("title")?.slice(0, 100)
    : "My default title";
  const hasUserName = searchParams.has("userName");
  const userName = hasUserName ? searchParams.get("userName") : "unknown";
  return new ImageResponse(
    (
      <div
        style={{
          fontSize: 50,
          backgroundImage: `url(${`data:image/svg+xml,${encodeURIComponent(
            '<svg id="visual" viewBox="0 0 1200 630" width="1200" height="630" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"><defs><filter id="blur1" x="-10%" y="-10%" width="120%" height="120%"><feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood><feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend><feGaussianBlur stdDeviation="201" result="effect1_foregroundBlur"></feGaussianBlur></filter></defs><rect width="1200" height="630" fill="#6600FF"></rect><g filter="url(#blur1)"><circle cx="603" cy="131" fill="#00CC99" r="447"></circle><circle cx="38" cy="287" fill="#6600FF" r="447"></circle><circle cx="1182" cy="342" fill="#00CC99" r="447"></circle><circle cx="633" cy="523" fill="#00CC99" r="447"></circle><circle cx="1020" cy="539" fill="#6600FF" r="447"></circle><circle cx="843" cy="207" fill="#00CC99" r="447"></circle></g></svg>'
          )}`})`,
          backgroundRepeat: "no-repeat",
          backgroundPosition: "center",
          backgroundSize: "100% 100%",
          width: "100%",
          height: "100%",
          display: "flex",
          textAlign: "center",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          fontFamily: '"NotoSansJP"',
          textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
          position: "relative",
        }}
      >
        <h2
          style={{
            width: "100%",
            color: "white",
            fontSize: 60,
            fontFamily: '"NotoSansJP"',
            textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
          }}
        >
          {title}
        </h2>
        <div
          style={{
            display: "flex",
            position: "absolute",
            width: "100%",
            bottom: 0,
            paddingLeft: 30,
            paddingRight: 30,
            justifyContent: "space-between",
          }}
        >
          <h2
            style={{
              color: "white",
              fontSize: 40,
              fontFamily: '"NotoSansJP"',
              textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
            }}
          >
            2022.10.22
          </h2>
          <div
            style={{
              display: "flex",
              alignItems: "center",
            }}
          >
            <img
              src={`https://github.com/${userName}.png`}
              alt=""
              width="60"
              height="60"
              style={{ borderRadius: 60, marginRight: 10 }}
            />
            <h2
              style={{
                color: "white",
                fontSize: 40,
                fontFamily: '"NotoSansJP"',
                textShadow: "0px 4px 4px rgba(0, 0, 0, 0.25)",
              }}
            >
              {userName}
            </h2>
          </div>
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: "NotoSansJP",
          data: fontData,
          style: "normal",
        },
      ],
    }
  );
}

OGP画像を呼び出す部分はこんな感じです。

pages/index.tsx

//省略
const Home: NextPage<Props> = ({ baseUrl }) => {
  const title = "【デザイン不要】@vercel/ogを使っていい感じの動的OGPをつくる";
  const userName = "hiromu617";
  const date = new Date();
  const postDate = new Intl.DateTimeFormat("ja").format(date);
  return (
    <div>
      <Head>
        <title>OGP Example</title>
        <meta property="og:image" content={`${baseUrl}/api/og`} />
      </Head>
      <img
        src={`${baseUrl}/api/og?title=${title}&userName=${userName}&postDate=${postDate}`}
        alt=""
      />
    </div>
  );
};
//省略

OGP画像の完成形は以下のようになりました。

おわりに

@vercel/ogを使用していい感じの動的OGP画像を作ることができました。スタイルの定義に少し癖はあるもののとても簡単でした。参考にしていただければ幸いです。

↓本文中で使用したコードです。

参考記事

Discussion

henter

that's awesome !

hiromu

Thanks!