Generating Social Media Cards
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.
Example
import { CldOgImage } from 'next-cloudinary';
<CldOgImage
src="images/white"
overlays={[
{
publicId: 'images/mountain',
position: {
x: 0,
y: 0,
gravity: 'north_east',
},
effects: [
{
crop: 'fill',
gravity: 'auto',
width: 800,
height: 1200
}
]
},
{
width: 1400,
crop: 'fit',
text: {
color: 'black',
fontFamily: 'Source Sans Pro',
fontSize: 160,
fontWeight: 'bold',
text: 'Next Cloudinary'
},
position: {
x: 100,
y: -100,
gravity: 'west',
},
},
{
width: 1400,
crop: 'fit',
text: {
color: 'black',
fontFamily: 'Source Sans Pro',
fontSize: 80,
text: 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!'
},
position: {
x: 100,
y: 100,
gravity: 'west',
},
},
]}
twitterTitle="Next Cloudinary"
alt="Next Cloudinary with picture of a mountain"
/>