<CldOgImage />

The CldOgImage component provides a simple way to use Cloudinary for your open graph image. It supports all of the same transforms/effects as <CldImage />.

Basic Usage

The only required props are src and alt:

<script>
    import { CldOgImage } from 'svelte-cloudinary';
</script>

<CldOgImage
  src="images/turtle"
  alt="Turtle"
/>

This will generate the following meta tags:

<meta
  property="og:image"
  content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
/>
<meta
  property="og:image:secure_url"
  content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
/>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="Turtle" />
<meta property="twitter:title" content=" " />
<meta property="twitter:card" content="summary_large_image" />
<meta
  property="twitter:image"
  content="https://res.cloudinary.com/svelte-cloudinary/image/upload/f_auto/q_auto/v1/images/turtle?_a=BATAXdTE0"
/>

Twitter Title

You’ll need to set the twitterTitle prop if you want the images to render on twitter correctly.

<script>
  import { CldOgImage } from 'svelte-cloudinary';
</script>

<CldOgImage
  twitterTitle="Turtles!"
  src="images/turtle"
  alt="Turtle"
/>

Which will generate the following meta tag:

<meta property="twitter:title" content="Turtles!" />