> ## Documentation Index
> Fetch the complete documentation index at: https://cloudinary.com/documentation/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.js SDK](nextjs_integration).  

## Video tutorial

  This video is brought to you by Cloudinary's video player - embed your own!Use the controls to set the playback speed, navigate to chapters of interest and select subtitles in your preferred language.

## Tutorial contents
This tutorial presents the following topics. Click a timestamp to jump to that part of the video.
### Social media image cards
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=05 :player=cld} | Social media image cards can help to increase engagement within social media feeds, such as Twitter and LinkedIn. Using the [Open Graph protocol](https://ogp.me/) to serve these images and creating the images in the first place can be simplified by using the Next Cloudinary [CldOgImage component](nextjs_image_transformations#social_media_cards_with_cldogimage) inside a Next.js application.
|

### Use the CldOgImage component
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=38 :player=cld} | Install the Next Cloudinary library with `npm install next-cloudinary`, 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](cloudinary_glossary#public_id) of an image in your Cloudinary product environment.
|

### Use the CldImage component when designing the image
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=0 :sec=57 :player=cld} | 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=1 :sec=58 :player=cld} | Add a [text overlay](layers#text_overlays) and an [image overlay](layers#image_overlays), 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
{table:class=tutorial-bullets}|  | 
| --- | --- |
|{videotime:id=media :min=3 :sec=38 :player=cld} | Now you can preview the social media image cards by testing your deployed website in a tool such as [opengraph.xyz](https://www.opengraph.xyz/).
|

## Keep learning

> **READING**:
>
> * Learn more about the [Next.js SDK](nextjs_integration) and its components.

> * Watch more [Dev Hints videos](https://www.youtube.com/playlist?list=PL8dVGjLA2oMpaTbvoKCaRNBMQzBUIv7N8) on the [Cloudinary YouTube channel](https://www.youtube.com/cloudinary).

> * Learn more about [image](image_transformations) and [video](video_manipulation_and_delivery) transformations.

> * Check out the [Transformation URL API](transformation_reference) reference.

#### 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 
  

 

 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.