Skip to content
Astro Cloudinary

Getting Started with getCldOgImageUrl

The getCldOgImageUrl function helps you easily generate Social Card image URLs (Open Graph Images) using Cloudinary.

This URL can be then used when defining metadata for your page within Astro.

Basic Usage

getCldOgImageUrl makes it convenient to create Social Card URLs out-of-the-box.

The only needed prop is src:

Note: The image above is rendered using the CldImage component for preview only.

import { getCldOgImageUrl } from 'astro-cloudinary/helpers';


const url = getCldOgImageUrl({ src: '<Public ID>' });

The function simply returns a URL for the given image’s public ID including default width and height.

Adding Open Graph Meta Tags

Adding social cards in Astro is as simple as adding Open Graph and Twitter meta tags in the <head> of whatever page you’d like to include them on.

The only depending factor is where you manage your tags, which can include a Layout.astro file, inside of a managed Head.astro component, or other solutions.

To add your tags, generate your URL and apply the tags like the following:

---
import { getCldOgImageUrl } from 'astro-cloudinary/helpers';


const ogImageUrl = getCldOgImageUrl({ src: '<Public ID>' });
---
<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:secure_url" content={ogImageUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:title" content="<Twitter Title>" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content={ogImageUrl} />

Image Size

By default, the image canvas is based upon 1200x630. 630 is used to satisfy the 1.91:1 ratio requirement and minimum size requirement from linkedin.

You can use the width and the height to control the canvas size.

Image Format

While Cloudinary’s f_auto parameter (format of auto) is great for websites and mobile apps, having more control over the format helps to reduce initial encoding time, which is more critical for a social network to recognize the image and load it on first share.

The safe default format for most use cases is then jpg, as webp does not have broad support (likely nor does AVIF).

Read more about webp support: https://www.ctrl.blog/entry/webp-ogp.html

If you have the control in your application to produce multiple image sources, such has having a separate og:image and twitter:image, you can generate two (or more) URLs to produce as optimized a format as you can for the platform:

---
import { getCldOgImageUrl } from 'astro-cloudinary';


// getCldOgImageUrl defaults to jpg


const ogImageUrl = getCldOgImageUrl({
  src: '<Public ID>',
});


const twitterImageUrl = getCldOgImageUrl({
  src: '<Public ID>',
  format: 'webp',
});
---
<meta property="og:image" content={ogImageUrl} />
<meta property="og:image:secure_url" content={ogImageUrl} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="twitter:title" content="<Twitter Title>" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content={twitterImageUrl} />

Find out how else you can customize your Cloudinary image over on getCldOgImageUrl configuration.

Learn More about getCldOgImageUrl