Dynamic Open Graph images for your blog posts are now available

Now it is possible to generate dynamic Open Graph images for your blog posts. With this, when someone shares a post on social networks, the featured image will be generated automatically from the content of the post. The contents are:

• Site logo
• Post title
• Author's photo and name

You will be able to customize the design of the images according to your project.

Today, there are two ways to define which OG image will be used in a blog post:

1. Adding an og_image field in the frontmatter of the .mdx file of the post

---
og_image: introducing-blogs-og.jpg
---

the image must be in the public/blog-og/ folder and the name and extension of the image file must be the same as defined in the frontmatter.

2. If an og_image field is not defined, the image will be generated automatically from the content of the post.

For example, the automatically generated image for this post is the following and supports internationalization, try changing the site language, but maybe you need to refresh the page to see the changes:

Changing the logo

In the public folder, you can replace the logo.svg file with your logo.

Changing the background image

In the public folder, you can replace the og-background.jpg file with the background image you want.

Changing the font

In the public/fonts folder, you can add the desired font and change the src/lib/fonts.ts file to load the new font:

export async function getFonts() {
  const [bold, regular] = await Promise.all([
    fetch(new URL(absoluteUrl('/fonts/Geist-Bold.ttf'), import.meta.url)).then(
      (res) => res.arrayBuffer()
    ),
 
    fetch(
      new URL(absoluteUrl('/fonts/Geist-Regular.ttf'), import.meta.url)
    ).then((res) => res.arrayBuffer()),
  ])
 
  return {
    bold,
    regular,
  }
}

Changing styles and structures

For a deeper change, edit the src/app/[locale]/blog/og/[slug]/route.tsx file