Getting Started with NextJS Dynamic OpenGraph Images
How to dynamically generate OG images in NextJS 13. How to add tailwind to them, use different emojis, use fonts and pull in emojis.
Open Graph images in your Next.js applications optimize social media shares with visually-appealing previews. By tailoring OG images to your content within the powerful Next.js framework, you can ensure consistent branding, higher user engagement, and improved click-through rates on platforms like Facebook, Twitter, and LinkedIn.
------
Docs: https://vercel.com/docs/functions/edg...
Vercel OG Playground: https://og-playground.vercel.app/
My Site: https://github.com/jolbol1/JamesShopl...
-----
Twitter: / jollyshopland
Personal Site: https://jamesshopland.com
GitHub: https://github.com/jolbol1
JollyUI: https://jollycod.ing/ui
Where I Work: https://jollycod.ing/work
----
0:00 Intro
0:26 Setting up OG Route
3:00 Adding in dynamic info
6:15 Styling with Tailwind
8:05 Easily develop with OG Playground
9:00 Using custom fonts
11:20 Emoji Providers
12:30 Adding images local/remote
14:20 Adding it to metadata
15:00 Dynamic Blog Example
