Social Card Image Templates
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: 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
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
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',
},
},
]
}),
}
]
}
}