Programmable Media

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

Last updated: Sep-12-2024

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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Jump to this spot in the video  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

Related topics

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

Using the Next.js Image Component
Deliver images using the Next.js Image component
Upload Assets in React
Upload assets using the Upload widget in a React App
Named Transformations
Simplify & standardize complex delivery URLs

 

Cloudinary Academy

 

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.

 

✔️ Feedback sent!

Rate this page: