Introduction#
Deprecated: I am now manually generating OG Images.
Vercel provides an official package called @vercel/og that can generate OG Images (The Open Graph protocol). There is a readily available API https://og-playground.vercel.app for calling it, using the following format: https://og-image.vercel.app/eallion.png. However, there is a major issue with it - it does not support Chinese characters. Additionally, when the "Smiley Sans" font was just released, it was perfect for titles. So, I used @vercel/og to create a Next.js application, deployed it on Vercel, and called it using the format: https://og.eallion.com/api/og?title=蜗牛. Later, I switched to using the "Source Han Serif" font. However, as mentioned earlier, I am now manually generating OG Images, as I only update my blog once a year.
Note#
🚨 Note: The free plan of Vercel's Edge Applications has a maximum limit of 1MB, and the minimum Chinese font size is much larger than that. However, there is a method mentioned later in this article that extracts only the characters used and compresses the font size. There are always more solutions than difficulties. Even shaking a phone to open Taobao can give you ideas. What else is impossible to achieve? Additionally, Vercel has detailed official documentation, unlike my ramblings. Even someone like me, who is completely unfamiliar with this, can create an application by following the official documentation. Moreover, now there is ChatGPT. Therefore, it is recommended to refer to the official documentation:
Cloudflare Pages also has an official plugin, but I haven't studied it:
Tutorial#
1. Preparation#
Background Image: Prepare a background image with a resolution of 1200x630. Of course, the smaller the file size, the better, keeping in mind that the maximum size is 1MB. Then, convert the image to base64: https://base64.guru/converter/encode/image This can further compress the file size.Font: Prepare a.ttffont file. I tried using Google Fonts online fonts, but they didn't work at the time. Also, pay attention to the license.
2. Local Debugging#
Fork the GitHub repository: https://github.com/eallion/vercel.og
After forking, clone your repository to your local machine and install the dependencies:
git clone https://github.com/XXXXXXX/vercel.og # XXXXXXX is your GitHub username
cd vercel.og
npm install --save
npm run dev
Then, open http://localhost:3000/api/og?title= in your browser to see the effect.
Customize the following sections in pages/api/og.tsx:
Font Path:pages/api/og.tsx#L11Default Title:pages/api/og.tsx#L21 Default value when no value is passedBackground Image:pages/api/og.tsx#L53Main Title:pages/api/og.tsx#L81Author:pages/api/og.tsx#L108Font:pages/api/og.tsx#L116-L120
Other customizable sections can be modified as desired. This is a Next.js application.
3. Compressing the Font#
The idea behind compressing the font is to use a tool to extract only the characters used in the blog title, greatly reducing the font size. To extract the characters used in the title, I used aui/font-spider, which is a tool that can be easily used by following the documentation. Based on this tool, I used eallion/font-spider-smiley-opengraph to extract the title using my blog's summary file. This is just one way to extract the character set. I hope there are better ways to explore together. Copy the compressed .ttf font file to the public/ directory.
PS: After making the modifications, remember to push them to the GitHub repository.
4. Deploying to Vercel#
Go to the Vercel dashboard, select Add New Project Import Git Repository, choose your repository vercel.og, and then Import. Select Next.js as the Framework Preset, and click Deploy to wait for the deployment to complete. After successful deployment, open "Domain + /api/og?title= + Content" to use it. The API path is /api/og. Complete API: https://og.eallion.vercel.app/api/og?title=. For some regions, you may need to bind a domain to access it.
Others#
The tool I currently use to manually generate OG Images is: https://cover.eallion.com
From: youngle316/cover-paint