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