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
| Prop Name | Type | Example |
|---|---|---|
| alt | string | "Next Cloudinary" |
| excludeTags | array | ['twitter:title'] |
| keys | object | {'og:image': 'my-og-image'} |
| twitterTitle | string | "Next Cloudinary" |
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="..." />