Last updated: Feb-09-2023
On this page:
Learn how to create social media image cards for feeds such as Twitter and LinkedIn, using the CldOgImage component of the Next Cloudinary library.
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
Install the Next Cloudinary library, set the
Use the CldImage component when designing the image
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 the
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.|
- Watch more Dev Hints videos on the Cloudinary YouTube channel.
- Learn more about image and video transformations.
- Check out the Transformation URL API reference.
If you like this, you might also like...
Using the Next.js Image ComponentDeliver images using the Next.js Image component
Upload Assets in ReactUpload assets using the Upload widget in a React App
Named TransformationsSimplify & standardize complex delivery URLs
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.