Testing an opengraph image with the Twitter Card Validator

Chris Biscardi
InstructorChris Biscardi
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 years ago

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.

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.

egghead
egghead
~ 24 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today