diff --git a/src/lib/Card.svelte b/src/lib/Card.svelte
index d628788..930ac8c 100644
--- a/src/lib/Card.svelte
+++ b/src/lib/Card.svelte
@@ -9,6 +9,8 @@
 	function validImage(url) {
 		return url.includes('https://');
 	}
+
+  let starsRatingMaskWidth = !!ratings ? (ratings / 5) * 100 : 0;
 </script>
 
 <div class="cardroot" class:debug={dev}>
@@ -33,7 +35,7 @@
 							<span class="stars stars-1">
 								{#each Array.from({ length: 5 }) as star}★{/each}
 							</span>
-							<span class="stars stars-2" style:width="{(ratings / 5) * 100}%">
+							<span class="stars stars-2" style:width="{starsRatingMaskWidth}%">
 								<span class="inner">
 									{#each Array.from({ length: 5 }) as star}★{/each}
 								</span>
diff --git a/src/routes/og/extract-params.js b/src/routes/og/extract-params.js
index fd5bca8..f91009f 100644
--- a/src/routes/og/extract-params.js
+++ b/src/routes/og/extract-params.js
@@ -8,8 +8,8 @@ export function extractSearchParams(searchParams) {
 		title: searchParams.get('title') ?? undefined,
 		image: searchParams.get('image') ?? undefined,
 		variants: searchParams.get('variants') === 'true' ? true : false,
-		ratings: searchParams.get('ratings') ?? undefined,
-		ratings_count: searchParams.get('ratings_count') ?? undefined,
+		ratings: searchParams.get('ratings') && searchParams.get('ratings') !== 'undefined' ? parseFloat(searchParams.get('ratings')) : undefined,
+		ratings_count: searchParams.get('ratings_count') && searchParams.get('ratings_count') !== 'undefined' ? parseInt(searchParams.get('ratings_count')) : undefined,
 	};
 	return renderparams;
 }