Social media image cards in Next.js (video tutorial)

Overview

Learn how to create social media image cards for feeds such as Twitter and LinkedIn, using the CldOgImage component of the Next Cloudinary library.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Social media image cards

0:05	Social media image cards can help to increase engagement within social media feeds, such as Twitter and LinkedIn. Using the Open Graph protocol to serve these images and creating the images in the first place can be simplified by using the Next Cloudinary CldOgImage component inside a Next.js application.

Use the CldOgImage component

0:38	Install the Next Cloudinary library, set the NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME environment variable to the cloud name of your Cloudinary product environment, and import the CldOgImage component from next-cloudinary in your Next.js application. Create a new CldOgImage component outside the Head component. Then, set the src attribute to the public ID of an image in your Cloudinary product environment.

Use the CldImage component when designing the image

0:57	The CldOgImage component generates the metadata required for the social media feeds, so the generated image is not visible on the page. To make it easier to design, use the CldImage component, which has the same API as CldOgImage.

Add transformations to the design

1:58	Add a text overlay and an image overlay, checking how it looks on the page. When you're happy with it, you can copy the transformations to the CldOgImage component and delete the CldImage component.

Preview the social media image cards

3:38	Now you can preview the social media image cards by testing your deployed website in a tool such as opengraph.xyz.

---

Keep learning

If you like this, you might also like...

 

 

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.