Open Graph and Twitter Cards are two metadata standards that allow you to control how your content appears when shared on social media platforms. They are essential for driving traffic to your site and increasing engagement.

LandingBud comes with built-in support for Open Graph and Twitter Cards. There are two ways you can customize OG images and Twitter Cards. Keep in mind the NextJS folder structure, meaning if you want one OG for the whole site, it needs to be in the root of the app.

Always check the official NextJS documentation (opens in a new tab) for the latest information on this topic.

Static images

Simply add a opengraph-image and twitter-image file to your folder. You can use .jpg, .jpeg, .png, and .gif files.

Programmatic images

For some use cases, you might want to generate the OG image on the fly. One example is when you have a blog and want to show the featured image and/or title of the post.

LandingBud has exactly this implemented, see src/app/[locale]/blog/[slug]/opengraph-image.tsx. It uses the next/og library from Vercel to generate the images dynamically. Vercel has some great examples of what you can do with this library here (opens in a new tab)