Designing Open Graph Images
Open graph images has become a standard to improve the display and usability of your links on social media.
Thus, it is essential to understand how to design them better.
Common best practices:
- Keeping the file size under 8 MB
- Using a high-quality image with a minimum dimension of 1200 x 630 pixels.
Text
While designing the text content inside the image, it is better to set much larger font sizes as the image might shrink based on the platform.
It improves readability of the text.
Content
Your content needs to be minimal as possible and it only needs to show the most important ones as we are presenting a preview of the content’s of the website within a small link preview. Make sure to include the most important things that showcase the functionality of the website and highlight the logo, company name and follow your brand’s design system to create a better and consistent experience for the end user.
There should be padding between the edges of the image and the content inside. This ensures there are enough space to allow for a much more cleaner image.
The visual hierarchy is very important in this scenario. You need to present your content in a user friendly way. The much better the visual hierarchy, the more new users are tempted to visit the website that’s shared via social media.
You can preview your Open Graph Image on this website: https://www.opengraph.xyz.
With the new advancments in Next.js 13, it has made it even more powerful to generate metadata content with the newImageResponse API.
Learn more about:
- Next.js Metadata API
- Opengraph Protocol
