Templates
Social Media Cards

Social Card Image Templates

Article

Next Cloudinary High-Performance Image & Video Delivery at Scale in Next.js over 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/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: 627,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [
            {
              background: 'rgb:010A44'
            },
            {
              color: 'rgb:2A005F',
              colorize: '100'
            },
            {
              gradientFade: 'symmetric'
            }
          ],
          overlays: [
            {
              publicId,
              width: 2400,
              height: 1254,
              crop: 'fill',
              effects: [
                { opacity: 20 }
              ]
            },
            {
              width: 2000,
              crop: 'fit',
              text: {
                color: 'white',
                fontFamily: 'Lato',
                fontSize: 130,
                fontWeight: 'black',
                lineSpacing: 20,
                lineSpacing: 20,
                text: headline
              },
              position: {
                x: 200,
                y: 200,
                gravity: 'north_west'
              },
            },
            {
              publicId,
              width: 2000,
              height: 4,
              effects: [{
                colorize: '100,co_white',
                opacity: 70
              }],
              position: {
                x: 200,
                y: 350,
                gravity: 'south_west'
              },
            },
            {
              width: 120,
              crop: 'fit',
              publicId: logoPublicId,
              position: {
                x: 200,
                y: 205,
                gravity: 'south_west'
              },
            },
            {
              width: 1400,
              crop: 'fit',
              text: {
                color: 'white',
                fontFamily: 'Lato',
                fontSize: 74,
                fontWeight: 'bold',
                text: tagline
              },
              position: {
                x: 360,
                y: 200,
                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: 627,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [{ colorize: '100,co_black' }],
          overlays: [
            {
              publicId,
              width: 2400,
              height: 1254,
              crop: 'fill',
              effects: [{
                opacity: 60
              }]
            },
            {
              width: 1400,
              crop: 'fit',
              text: {
                alignment: 'center',
                color: 'white',
                fontFamily: 'Source Sans Pro',
                fontSize: 160,
                fontWeight: 'bold',
                text: headline
              },
              position: {
                y: -100,
              },
            },
            {
              width: 1400,
              crop: 'fit',
              text: {
                alignment: 'center',
                color: 'white',
                fontFamily: 'Source Sans Pro',
                fontSize: 74,
                text: body
              },
              position: {
                y: 100,
              },
            },
          ]
        })
      }
    ]
  }
}

One Third

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: 627,
        url: getCldOgImageUrl({
          src: publicId,
          effects: [{ colorize: '100,co_white' }],
          overlays: [
            {
              publicId,
              position: {
                gravity: 'north_east',
              },
              effects: [
                {
                  crop: 'fill',
                  gravity: 'auto',
                  width: 800,
                  height: 1254
                }
              ]
            },
            {
              width: 1250,
              crop: 'fit',
              text: {
                color: 'black',
                fontFamily: 'Source Sans Pro',
                fontSize: 160,
                fontWeight: 'bold',
                text: headline
              },
              position: {
                x: 250,
                y: -100,
                gravity: 'west',
              },
            },
            {
              width: 1250,
              crop: 'fit',
              text: {
                color: 'black',
                fontFamily: 'Source Sans Pro',
                fontSize: 74,
                text: body
              },
              position: {
                x: 250,
                y: 100,
                gravity: 'west',
              },
            },
          ]
        }),
      }
    ]
  }
}

Learn More