getCldOgImageUrl Examples

The below examples use the CldImage component to render the images. This is not required, you can use the URL returned by getCldOgImageUrl in any way you like.

Basic Image

src: The public ID of the image to use as a Social Card

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const url = getCldOgImageUrl({
  src: '<Your Public ID>',
})
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        width: 1200,
        height: 627,
        url
      }
    ]
  }
}

Change Background

removeBackground: Removes the background from an image.

underlay: The public ID of the image to use as the new background.

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const url = getCldOgImageUrl({
  src: '<Your Public ID>',
  removeBackground: true,
  underlay: '<Your Public ID>'
})
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        width: 1200,
        height: 627,
        url
      }
    ]
  }
}

The Cloudinary AI Background Removal add-on is required to use this feature.

Text Overlay

text: Adds basic text to the image

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const url = getCldOgImageUrl({
  src: '<Your Public ID>',
  overlays: [{
    text: {
      fontFamily: 'Source Sans Pro',
      fontSize: 120,
      fontWeight: 'bold',
      text: 'Next Cloudinary'
    }
  }]
})
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        width: 1200,
        height: 627,
        url
      }
    ]
  }
}

Configuration Basic Usage