Name: Testing an opengraph image with the Twitter Card Validator
Uploaded: 2020-03-20T12:37:32-05:00
Description: The twitter card validator is useful for testing opengraph meta tags. Sometimes it doesn't show up exactly right and we use actual tweets to test the real resolution.

Designing OpenGraph unfurls in Figma

Building an OpenGraph image React component in CodeSandbox, based on a Figma design

Setting up a new GitHub repo to deploy functions on Netlify with Make and netlify.toml

Scaffolding and deploying a Netlify Function in JavaScript

Using Playwright to screenshot the DOM and return an image from a Netlify Function

Compiling a React to an IIFE with Rollup to execute and render in a headless browser

Setting the viewport on a Playwright headless browser

Testing an opengraph image with the Twitter Card Validator

Passing variables to serverless functions using query strings

Using Cloudinary as a write-through cache for a Netlify Function that generates images

Using _redirects files on Netlify to make .netlify function URLs more user-friendly

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React

The twitter card validator is useful for testing opengraph meta tags. Sometimes it doesn't show up exactly right and we use actual tweets to test the real resolution.

https://app.egghead.io/api/v1/lessons/html-5-testing-an-opengraph-image-with-the-twitter-card-validator/subtitles

Chris Biscardi: [00:00] Now that we know our image generation function works in production, we're going to need it to generate an actual OpenGraph image. Luckily, we already have a site that we're deploying. In our index.html we'll replace itWorked with a set of HTML.

[00:13] In this case we'll set up a set of Meta Tags for Twitter specifically. The Twitter image we're using is the URL to our function. We aren't currently passing in any variables to this function, so this is just a test.

[00:26] Now that we've deployed our site, we can do a Google search for the Twitter Card validator. This will bring us to cards-dev.twitter.com/validator. Using this page, we can test our OpenGraph images.

[00:36] We'll take the production URL and hit Preview. Note that you might have to hit this twice, as Twitter will go out and make the request and cache it.

[00:44] This is not exactly how it's going to look when we share it on Twitter, because there are some differences between the Card validator and the way that the representation of the dimensions shows up in the tweet unfurl.

[00:54] Let's make an actual tweet. Once we're on Twitter, we can go to the Tweet button and paste in our URL. I'll say something like, "Just testing, going to delete this in a second."

[01:07] Now we can see that my OpenGraph image has shown up. It looks quite nice. [inaudible] look for the screenshot I took. I'm pretty happy with the way that our OpenGraph image turned out.

[01:16] Unfortunately, every time somebody hits our HTML page, this image is going to be regenerated. That's not great, because it will mean that I have to run more functions for more time with more memory than I would if we had generated it once and then cached it.

[01:33] We can cache OpenGraph images because typically they don't change a lot from deploy to deploy.

Testing an opengraph image with the Twitter Card Validator

Share this video with your friends

Course

Building an OpenGraph image generation API with Cloudinary, Netlify Functions, and React