• Components
  • CldOgImage
  • Basic Usage

Getting Started with CldOgImage

Basic Usage

The basic required prop is src:


Place this 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:

<meta property="og:image" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1200,g_center/f_auto/q_auto/v1/images/galaxy" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/colbycloud-next-cloudinary/image/upload/c_fill,w_2400,h_1200,g_center/f_auto/q_auto/v1/images/galaxy" />
<meta property="og:image:width" content="2400" />
<meta property="og:image:height" content="1200" />
<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_2400,h_1200,g_center/f_auto/q_auto/v1/images/galaxy" />

But you can use any of the available features from CldImage to build your CldOgImage.

You can further take advantage of Cloudinary features like background removal and overlays by adding additional props:

    text: {
      color: 'white',
      fontFamily: 'Source Sans Pro',
      fontSize: 200,
      fontWeight: 'bold',
      text: 'Next Cloudinary'
  alt="Next Cloudinary over picture of a turtle on top of a galaxy"
  twitterTitle="Next Cloudinary"

Watch & Learn

View on YouTube

Learn More about CldOgImage

Last updated on February 28, 2023