Preface#
Deprecated: I now manually generate OG Images.
Vercel provides the @vercel/og package, which can generate OG Images (The Open Graph protocol). There is a ready-to-use API https://og-playground.vercel.app that can be called using the following format: https://og-image.vercel.app/eallion.png. However, there is a big problem with this approach - 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 used the following format to call it: https://og.eallion.com/api/og?title=蜗牛. Later, I switched to the "Source Han Serif" font. However, as mentioned earlier, I now manually generate OG Images, as I only update my blog once a year.
Note#
🚨 Note: The free plan of Vercel's Edge Applications only supports a maximum of 1MB, and the smallest Chinese font 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 your phone to open Taobao can give you more ideas. What else can't be achieved? Additionally, Vercel has detailed official documentation, unlike my ramblings. Even a layman like me can create an application by following the official documentation, not to mention the availability of ChatGPT now. 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, as the maximum size is only 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 parts in pages/api/og.tsx:
Font Path:pages/api/og.tsx#L11Default Title:pages/api/og.tsx#L21 The 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 parts can be modified as needed. This is a Next.js application.
3. Font Compression#
The idea behind font compression is to use tools 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 tool, which can be easily processed by following the tool's 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 character sets. 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. Vercel Deployment#
Go to the Vercel dashboard, select Add New Project Import Git Repository, choose your own repository vercel.og, and then Import. Choose 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. Full 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