Social Card Image Templates

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.

Article

Update the Cloudinary public ID, headline, body, and alt with your own values and add the following code when defining metadata for a page.

Note: you can alternatively use this function to pass dynamic values using the generateMetadata function (opens in a new tab).

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const publicId = 'images/galaxy';
const headline = 'High-Performance Image & Video Delivery at Scale in Next.js';
const tagline = 'Next Cloudinary';
const logoPublicId = 'images/cloudinary-logo-white';
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        // Prefer a different size? Be sure to update the width and height of the
        // metadata as well as the image configuration of getCldOgImageUrl
        width: 1200,
        height: 630,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [
            {
              background: 'rgb:010A44'
            },
            {
              color: 'rgb:2A005F',
              colorize: '100'
            },
            {
              gradientFade: 'symmetric'
            }
          ],
          overlays: [
            {
              publicId,
              width: 1200,
              height: 630,
              crop: 'fill',
              effects: [
                { opacity: 20 }
              ]
            },
            {
              width: 1000,
              crop: 'fit',
              text: {
                color: 'white',
                fontFamily: 'Merriweather',
                fontSize: 58,
                fontWeight: 'bold',
                lineSpacing: 10,
                lineSpacing: 10,
                text: headline
              },
              position: {
                x: 100,
                y: 100,
                gravity: 'north_west'
              },
            },
            {
              publicId,
              width: 1000,
              height: 2,
              effects: [{
                colorize: '100,co_white',
                opacity: 70
              }],
              position: {
                x: 100,
                y: 175,
                gravity: 'south_west'
              },
            },
            {
              width: 60,
              crop: 'fit',
              publicId: logoPublicId,
              position: {
                x: 100,
                y: 102,
                gravity: 'south_west'
              },
            },
            {
              text: {
                color: 'white',
                fontFamily: 'Lato',
                fontSize: 37,
                fontWeight: 'bold',
                text: tagline
              },
              position: {
                x: 180,
                y: 100,
                gravity: 'south_west'
              },
            },
          ]
        })
      }
    ]
  }
}

Full

Next Cloudinary with picture of a mountain

Update the Cloudinary public ID, headline, body, and alt with your own values and add the following code when defining metadata for a page.

Note: you can alternatively use this function to pass dynamic values using the generateMetadata function (opens in a new tab).

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const publicId = 'images/mountain';
const headline = 'Next Cloudinary';
const body = 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!';
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        // Prefer a different size? Be sure to update the width and height of the
        // metadata as well as the image configuration of getCldOgImageUrl
        width: 1200,
        height: 630,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [{ colorize: '100,co_black' }],
          overlays: [
            {
              publicId,
              width: 1200,
              height: 630,
              crop: 'fill',
              effects: [{
                opacity: 60
              }]
            },
            {
              width: 700,
              crop: 'fit',
              text: {
                alignment: 'center',
                color: 'white',
                fontFamily: 'Source Sans Pro',
                fontSize: 80,
                fontWeight: 'bold',
                text: headline
              },
              position: {
                y: -50,
              },
            },
            {
              width: 700,
              crop: 'fit',
              text: {
                alignment: 'center',
                color: 'white',
                fontFamily: 'Source Sans Pro',
                fontSize: 37,
                text: body
              },
              position: {
                y: 50,
              },
            },
          ]
        })
      }
    ]
  }
}

One Third

Update the Cloudinary public ID, headline, body, and alt with your own values and add the following code when defining metadata for a page.

Note: you can alternatively use this function to pass dynamic values using the generateMetadata function (opens in a new tab).

import { Metadata } from 'next';
import { getCldOgImageUrl } from 'next-cloudinary';
 
const publicId = 'images/mountain';
const headline = 'Next Cloudinary';
const body = 'Get the power of Cloudinary in a Next.js project with Next Cloudinary!';
 
export const metadata: Metadata = {
  openGraph: {
    images: [
      {
        // Prefer a different size? Be sure to update the width and height of the
        // metadata as well as the image configuration of getCldOgImageUrl
        width: 1200,
        height: 630,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [{ colorize: '100,co_white' }],
          overlays: [
            {
              publicId,
              position: {
                gravity: 'north_east',
              },
              effects: [
                {
                  crop: 'fill',
                  gravity: 'auto',
                  width: '0.33',
                  height: '1.0'
                }
              ],
              flags: ['relative']
            },
            {
              width: 625,
              crop: 'fit',
              text: {
                color: 'black',
                fontFamily: 'Source Sans Pro',
                fontSize: 80,
                fontWeight: 'bold',
                text: headline
              },
              position: {
                x: 125,
                y: -50,
                gravity: 'west',
              },
            },
            {
              width: 625,
              crop: 'fit',
              text: {
                color: 'black',
                fontFamily: 'Source Sans Pro',
                fontSize: 37,
                text: body
              },
              position: {
                x: 125,
                y: 50,
                gravity: 'west',
              },
            },
          ]
        }),
      }
    ]
  }
}

Learn More

Using Custom Domains