diff --git a/templates/website/src/utilities/getMediaUrl.ts b/templates/website/src/utilities/getMediaUrl.ts
index 7840c770ca5..f50af9130a4 100644
--- a/templates/website/src/utilities/getMediaUrl.ts
+++ b/templates/website/src/utilities/getMediaUrl.ts
@@ -9,6 +9,10 @@ import { getClientSideURL } from '@/utilities/getURL'
 export const getMediaUrl = (url: string | null | undefined, cacheTag?: string | null): string => {
   if (!url) return ''
 
+  if (cacheTag && cacheTag !== '') {
+    cacheTag = encodeURIComponent(cacheTag)
+  }
+
   // Check if URL already has http/https protocol
   if (url.startsWith('http://') || url.startsWith('https://')) {
     return cacheTag ? `${url}?${cacheTag}` : url
diff --git a/templates/with-vercel-website/src/utilities/getMediaUrl.ts b/templates/with-vercel-website/src/utilities/getMediaUrl.ts
index 7840c770ca5..f50af9130a4 100644
--- a/templates/with-vercel-website/src/utilities/getMediaUrl.ts
+++ b/templates/with-vercel-website/src/utilities/getMediaUrl.ts
@@ -9,6 +9,10 @@ import { getClientSideURL } from '@/utilities/getURL'
 export const getMediaUrl = (url: string | null | undefined, cacheTag?: string | null): string => {
   if (!url) return ''
 
+  if (cacheTag && cacheTag !== '') {
+    cacheTag = encodeURIComponent(cacheTag)
+  }
+
   // Check if URL already has http/https protocol
   if (url.startsWith('http://') || url.startsWith('https://')) {
     return cacheTag ? `${url}?${cacheTag}` : url