Update the Opengraph Image of Your Website

The Opengraph Image (OG Image) is the image displayed when you share your website on social media, e.g., Facebook, X, etc. To test a website’s Opengraph Image, you can use the opengraph.xyz .

We provide OG Image for portfolio, blog list page and each blog post. Each language has its own OG Image. Thus, the all OG Image files are:

• English Portfolio: /src/app/en/
  • opengraph-image.png: The OG Image for portfolio.
  • opengraph-image.alt.txt: The alt text for the OG Image.
  • twitter-image.png: The Twitter Image for portfolio, can be same as the OG Image.
  • twitter-image.alt.txt: The alt text for the Twitter Image.
• English Blog List: /src/app/en/blog/
  • opengraph-image.png: The OG Image for blog list.
  • opengraph-image.alt.txt: The alt text for the OG Image.
  • twitter-image.png: The Twitter Image for blog list.
  • twitter-image.alt.txt: The alt text for the Twitter Image.
• English Blog Post: /src/app/en/blog/[slug]/
  • opengraph-image.tsx: The dynamic OG Image generated for blog post.
  • twitter-image.tsx: The dynamic Twitter Image generated for blog post.
• Chinese is the same as English, but in the /src/app/zh/ directory.

As you can see, there are two kinds of OG Image files: static and dynamic. The static ones are just images, and the dynamic ones are generated by a small piece of code.

Static OG Image Generation

You can use any OG Image with 1200 × 630 recommended size. Just put the image in the corresponding directory and name it opengraph-image.png.

A recommended tool for creating OG Images is the OG Image Generator , which allows you to easily create OG Images with a variety of templates and styles.

Dynamic OG Image Generation

The dynamic OG Image generate titles for each blog post. The blogCharacter in src/data.tsx is used to generate the OG Image. Here is an example: