<p class="has-line-data" data-line-start="0" data-line-end="1">In this Hasty Treat, Scott and Wes talk about OG images, interesting ways you can work with them, and ways you can work dynamically with them.</p> <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:11">00:11</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=02:18">02:18</a> What are OG images?</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=06:19">06:19</a> Testing OG images</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="https://polypane.app/">Polypane, The browser for ambitious web developers</a></li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="https://metatags.io/">Meta Tags — Preview, Edit and Generate</a></li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="https://developers.facebook.com/tools/debug/">Sharing Debugger - Meta for Developers</a></li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="https://cards-dev.twitter.com/validator">Card Validator | Twitter Developers</a></li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=08:27">08:27</a> Creating an OG image</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="https://github.com/vercel/satori">vercel/satori: Enlightened library to convert HTML and CSS to SVG</a></li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href= "https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation"> Open Graph (OG) Image Generation | Vercel Docs</a></li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href= "https://vercel.com/blog/introducing-vercel-og-image-generation-fast-dynamic-social-card-images"> Introducing OG Image Generation: Fast, dynamic social card images at the Edge – Vercel</a></li> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href="#t=09:41">09:41</a> Dynamically generating OG images</li> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://wesbos.com/thumbnail?thumbnail=/static/0005c028a536c87975eb84ae3d32ae57/aeron.jpg&title=Uses&url=https://wesbos.com/uses"> wesbos.com/thumbnail/?thumbnail=%2Fstatic%2F0005c028a536c87975eb84ae3d32ae57%2Faeron.jpg&title=Uses&url=https%3A%2F%2Fwesbos.com%2Fuses</a></li> <li class="has-line-data" data-line-start="17" data-line-end="18"> <a href="#t=21:16">21:16</a> Using Puppeteer</li> <li class="has-line-data" data-line-start="18" data-line-end="19"> <a href="https://pptr.dev/">Puppeteer | Puppeteer</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> <a href= "https://developers.cloudflare.com/browser-rendering/platform/puppeteer/"> Puppeteer · Browser Rendering docs</a></li> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://cloudinary.com/ip/gr-sea-gg-brand-home-base?campaignid=18164753405&adgroupid=144188713167&keyword=cloudinary&device=c&matchtype=e&adposition=&gad=1"> Cloudinary - Image and Video Upload, Store ad Monetization</a></li> <li class="has-line-data" data-line-start="21" data-line-end="22"> <a href="https://playwright.dev/">Fast and reliable end-to-end testing for modern web apps | Playwright</a></li> <li class="has-line-data" data-line-start="22" data-line-end="23"> <a href="#t=28:47">28:47</a> Canva API</li> <li class="has-line-data" data-line-start="23" data-line-end="25"> <a href="https://www.canva.com/developers/">Build The Tools Behind Great Design | Canva Developers</a></li> </ul>  <a id="Tweet_us_your_tasty_treats_25"></a>Tweet us your tasty treats <ul> <li class="has-line-data" data-line-start="27" data-line-end="28"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="28" data-line-end="29"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="29" data-line-end="30"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="30" data-line-end="31"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="31" data-line-end="32"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="32" data-line-end="33"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="33" data-line-end="34"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://bsky.app/profile/wesbos.com">Wes Bos on Bluesky</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://bsky.app/profile/tolin.ski">Scott on Bluesky</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://bsky.app/profile/syntax.fm">Syntax on Bluesky</a></li> </ul>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

OG Image Options

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews