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.
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.
Place the CldOgImage component anywhere outside of the Head component.
The resulting HTML will be applied to the Head of the document including all applicable open graph tags (opens in a new tab):
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.