CldOgImage Configuration

The CldOgImage component is built on top of the same APIs used for CldImage, giving you the ability to apply the same transformations to your social cards as you can any image.

See CldImage for all image transformations.

General Props

Image Size

By default, the image canvas is based upon 2400x1254, but resized down to 1200x627, meaning, you can design the image as if it were a 2400x1254 image, but the resulting image will be sized down to 1200x627 to avoid an overly large image.

627 (with a canvas of 1254) is used to satisfy the 1.91:1 ratio requirement and minimum size requirement from linkedin.

The resizing mechanism provides backwards compatibility for existing usage as well as a way to maintain a consistent “canvas” size when designing a social image card.

You can use the width and the height to control the canvas and widthResize to change the final size the image is scaled to.

The height is ultimately calculated using the width value and the widthResize values to maintain the correct ratio.

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 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

However, Twitter does support webp, so we’re able to customize the format using the Twitter specific tag, and generally a separate webp version for that platform to optimize where we can.

Excluding Tags

The summary_large_image Twitter card type requires the inclusion of a twitter:title card. Because of this, the component includes it by default for simplified use along with a prop to change the value.

To exclude this tag to manage it on your own, use the excludeTags prop:

excludeTags={['twitter:title']}

Keys

By default, CldOgImage includes static keys on each meta tag rendered to help avoid duplication in the DOM.

To allow customization and control in the event you want to minimize duplication with existing meta tags, you can specify custom keys for each tag.

For instance, by default og:image tag will effectively render with:

<meta key="og-image" property="og:image" content="..." />

Where if you pass in the keys prop with the following:

keys={{'og:image': 'my-og-image'}}

The tag will render with:

<meta key="my-og-image" property="og:image" content="..." />