Getting Started with CldOgImage
The CldOgImageComponent give you the ability to use the same CldImage API to easily generate Open Graph images (or social cards) inside of Next.js.
Using the Next.js 13 App Router? This component is only supported in the Pages directory. Try the getCldOgImageUrl helper inside of your metadata configuration.
Basic Usage
The basic required prop is src:
CldOgImage does not render an
<img>tag, meaning it can't be visually embedded on a page. The following examples make use of the<CldImage>tag to showcase what's possible.
import { CldOgImage } from 'next-cloudinary';
<CldOgImage
src="<Public ID>"
/>Place the CldOgImage component anywhere outside of the Head component.
The CldOgImage component must be placed outside of the Next.js Head component as the Head component does not accept React components as children.
The resulting HTML will be applied to the Head of the document including all applicable open graph tags (opens in a new tab):
<meta property="og:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_jpg/q_auto/v1/images/galaxy" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_jpg/q_auto/v1/images/galaxy" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_1200,h_627,g_center/c_limit,w_1200/f_webp/q_auto/v1/images/galaxy" />Transformations
You can further take advantage of Cloudinary features like background removal and overlays by adding additional props.
The CldOgImage component uses the same API as CldImage, meaning you can use the same transformations and effects.
CldOgImage does not render an
<img>tag, meaning it can't be visually embedded on a page. The following examples make use of the<CldImage>tag to showcase what's possible.
import { CldImage } from 'next-cloudinary';
<CldOgImage
src="<Public ID>"
tint="100:0762a0"
removeBackground
opacity="40"
overlays={[{
text: {
color: 'white',
fontFamily: 'Source Sans Pro',
fontSize: 80,
fontWeight: 'bold',
text: '<Text>'
}
}]}
underlay="<Public ID>"
alt="<Description>"
twitterTitle="<Title>"
/>