fix: use webp for twitter og image

Closes #127
cloudinary-community · Sep 15, 2024 · f47e3f3 · f47e3f3
1 parent 1e51904
commit f47e3f3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/packages/svelte-cloudinary/src/components/CldOgImage.svelte b/packages/svelte-cloudinary/src/components/CldOgImage.svelte
@@ -79,18 +79,23 @@
 		...options
 	} = $$props as CldOgImageProps);
 
-	$: url = getCldOgImageUrl(options, config);
+	$: image = getCldOgImageUrl(options, config);
+
+	$: twitterImage = getCldOgImageUrl(
+		{ ...options, format: options.format ?? 'webp' },
+		config,
+	);
 </script>
 
 <svelte:head>
-	<meta property="og:image" content={url} />
-	<meta property="og:image:secure_url" content={url} />
+	<meta property="og:image" content={image} />
+	<meta property="og:image:secure_url" content={image} />
 	<meta property="og:image:width" content={width.toString()} />
 	<meta property="og:image:height" content={height.toString()} />
 	<meta property="og:image:alt" content={alt} />
 	{#if !excludeTags?.includes('twitter:title')}
 		<meta property="twitter:title" content={twitterTitle || ' '} />
 	{/if}
 	<meta property="twitter:card" content="summary_large_image" />
-	<meta property="twitter:image" content={url} />
+	<meta property="twitter:image" content={twitterImage} />
 </svelte:head>
diff --git a/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts b/packages/svelte-cloudinary/src/helpers/getCldOgImageUrl.ts
@@ -13,9 +13,9 @@ export function getCldOgImageUrl(
 	return getCldImageUrl(
 		{
 			...options,
-			format: options.format || 'jpg',
-			width: options.width || 1200,
-			height: options.height || 627,
+			format: options.format ?? 'jpg',
+			width: options.width ?? 1200,
+			height: options.height ?? 627,
 		},
 		configOverride,
 		analyticsOverride,