From 2cdad25d929c59e3a79fe1869c04aab8338bdaac Mon Sep 17 00:00:00 2001
From: Jaya Krishna <namburu1995@gmail.com>
Date: Tue, 6 May 2025 20:38:22 +0530
Subject: [PATCH 1/2] fix: default twitter og preview to use big card

---
 fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx   | 6 ++++++
 fixtures/ssg/pages/another-page/+Head.tsx                  | 6 ++++++
 fixtures/ssg/pages/index/+Head.tsx                         | 6 ++++++
 .../cli/templates/ssg/app/route-templates/html/+Head.tsx   | 6 ++++++
 packages/react-sdk/src/page-settings-meta.tsx              | 7 +++++++
 5 files changed, 31 insertions(+)

diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx b/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
index 4ce7e26b934d..f9b0723af48f 100644
--- a/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
+++ b/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
@@ -25,6 +25,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
+  const isTwitterCardSizeExists = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
   return (
     <>
       {data.url && <meta property="og:url" content={data.url} />}
@@ -55,6 +58,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
+      {isTwitterCardSizeExists === false && (
+        <meta property="twitter:card" content="summary_large_image" />
+      )}
 
       {favIconAsset && (
         <link
diff --git a/fixtures/ssg/pages/another-page/+Head.tsx b/fixtures/ssg/pages/another-page/+Head.tsx
index babaa77f8140..f4f5dd3690b7 100644
--- a/fixtures/ssg/pages/another-page/+Head.tsx
+++ b/fixtures/ssg/pages/another-page/+Head.tsx
@@ -25,6 +25,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
+  const isTwitterCardSizeExists = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
   return (
     <>
       {data.url && <meta property="og:url" content={data.url} />}
@@ -55,6 +58,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
+      {isTwitterCardSizeExists === false && (
+        <meta property="twitter:card" content="summary_large_image" />
+      )}
 
       {favIconAsset && (
         <link
diff --git a/fixtures/ssg/pages/index/+Head.tsx b/fixtures/ssg/pages/index/+Head.tsx
index 4ce7e26b934d..f9b0723af48f 100644
--- a/fixtures/ssg/pages/index/+Head.tsx
+++ b/fixtures/ssg/pages/index/+Head.tsx
@@ -25,6 +25,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
+  const isTwitterCardSizeExists = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
   return (
     <>
       {data.url && <meta property="og:url" content={data.url} />}
@@ -55,6 +58,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
+      {isTwitterCardSizeExists === false && (
+        <meta property="twitter:card" content="summary_large_image" />
+      )}
 
       {favIconAsset && (
         <link
diff --git a/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx b/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
index a987789212ce..eb6dd9391feb 100644
--- a/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
+++ b/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
@@ -25,6 +25,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
+  const isTwitterCardSizeExists = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
   return (
     <>
       {data.url && <meta property="og:url" content={data.url} />}
@@ -55,6 +58,9 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
+      {isTwitterCardSizeExists === false && (
+        <meta property="twitter:card" content="summary_large_image" />
+      )}
 
       {favIconAsset && (
         <link
diff --git a/packages/react-sdk/src/page-settings-meta.tsx b/packages/react-sdk/src/page-settings-meta.tsx
index 9aaa44bf78d8..50146ca99541 100644
--- a/packages/react-sdk/src/page-settings-meta.tsx
+++ b/packages/react-sdk/src/page-settings-meta.tsx
@@ -137,5 +137,12 @@ export const PageSettingsMeta = ({
 
   metas.push(...pageMeta.custom);
 
+  const isTwitterCardSizeExists = pageMeta.custom.some(
+    (meta) => meta.property === "twitter:card"
+  );
+  if (isTwitterCardSizeExists === false) {
+    metas.push({ property: "twitter:card", content: "summary_large_image" });
+  }
+
   return metas.map((meta, index) => <Meta key={index} {...meta} />);
 };

From b2f694f15f48c5b345a0fea0e412afff61d3dd2d Mon Sep 17 00:00:00 2001
From: Jaya Krishna <namburu1995@gmail.com>
Date: Wed, 7 May 2025 21:31:43 +0530
Subject: [PATCH 2/2] rename twitter:card size check for readability

---
 .../ssg-netlify-by-project-id/pages/index/+Head.tsx    | 10 ++++++----
 fixtures/ssg/pages/another-page/+Head.tsx              | 10 ++++++----
 fixtures/ssg/pages/index/+Head.tsx                     | 10 ++++++----
 .../templates/ssg/app/route-templates/html/+Head.tsx   | 10 ++++++----
 packages/react-sdk/src/page-settings-meta.tsx          |  8 ++++++--
 5 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx b/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
index f9b0723af48f..e907d9db93b3 100644
--- a/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
+++ b/fixtures/ssg-netlify-by-project-id/pages/index/+Head.tsx
@@ -25,7 +25,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
-  const isTwitterCardSizeExists = pageMeta.custom.some(
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
     (meta) => meta.property === "twitter:card"
   );
   return (
@@ -58,9 +58,11 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
-      {isTwitterCardSizeExists === false && (
-        <meta property="twitter:card" content="summary_large_image" />
-      )}
+      {(pageMeta.socialImageAssetName !== undefined ||
+        pageMeta.socialImageUrl !== undefined) &&
+        isTwitterCardSizeDefined === false && (
+          <meta property="twitter:card" content="summary_large_image" />
+        )}
 
       {favIconAsset && (
         <link
diff --git a/fixtures/ssg/pages/another-page/+Head.tsx b/fixtures/ssg/pages/another-page/+Head.tsx
index f4f5dd3690b7..67d80a19e475 100644
--- a/fixtures/ssg/pages/another-page/+Head.tsx
+++ b/fixtures/ssg/pages/another-page/+Head.tsx
@@ -25,7 +25,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
-  const isTwitterCardSizeExists = pageMeta.custom.some(
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
     (meta) => meta.property === "twitter:card"
   );
   return (
@@ -58,9 +58,11 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
-      {isTwitterCardSizeExists === false && (
-        <meta property="twitter:card" content="summary_large_image" />
-      )}
+      {(pageMeta.socialImageAssetName !== undefined ||
+        pageMeta.socialImageUrl !== undefined) &&
+        isTwitterCardSizeDefined === false && (
+          <meta property="twitter:card" content="summary_large_image" />
+        )}
 
       {favIconAsset && (
         <link
diff --git a/fixtures/ssg/pages/index/+Head.tsx b/fixtures/ssg/pages/index/+Head.tsx
index f9b0723af48f..e907d9db93b3 100644
--- a/fixtures/ssg/pages/index/+Head.tsx
+++ b/fixtures/ssg/pages/index/+Head.tsx
@@ -25,7 +25,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
-  const isTwitterCardSizeExists = pageMeta.custom.some(
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
     (meta) => meta.property === "twitter:card"
   );
   return (
@@ -58,9 +58,11 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
-      {isTwitterCardSizeExists === false && (
-        <meta property="twitter:card" content="summary_large_image" />
-      )}
+      {(pageMeta.socialImageAssetName !== undefined ||
+        pageMeta.socialImageUrl !== undefined) &&
+        isTwitterCardSizeDefined === false && (
+          <meta property="twitter:card" content="summary_large_image" />
+        )}
 
       {favIconAsset && (
         <link
diff --git a/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx b/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
index eb6dd9391feb..88350e320ba3 100644
--- a/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
+++ b/packages/cli/templates/ssg/app/route-templates/html/+Head.tsx
@@ -25,7 +25,7 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       format: "raw",
     })}`;
   }
-  const isTwitterCardSizeExists = pageMeta.custom.some(
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
     (meta) => meta.property === "twitter:card"
   );
   return (
@@ -58,9 +58,11 @@ export const Head = ({ data }: { data: PageContext["data"] }) => {
       {pageMeta.custom.map(({ property, content }) => (
         <meta key={property} property={property} content={content} />
       ))}
-      {isTwitterCardSizeExists === false && (
-        <meta property="twitter:card" content="summary_large_image" />
-      )}
+      {(pageMeta.socialImageAssetName !== undefined ||
+        pageMeta.socialImageUrl !== undefined) &&
+        isTwitterCardSizeDefined === false && (
+          <meta property="twitter:card" content="summary_large_image" />
+        )}
 
       {favIconAsset && (
         <link
diff --git a/packages/react-sdk/src/page-settings-meta.tsx b/packages/react-sdk/src/page-settings-meta.tsx
index 50146ca99541..0e349cbc04e8 100644
--- a/packages/react-sdk/src/page-settings-meta.tsx
+++ b/packages/react-sdk/src/page-settings-meta.tsx
@@ -137,10 +137,14 @@ export const PageSettingsMeta = ({
 
   metas.push(...pageMeta.custom);
 
-  const isTwitterCardSizeExists = pageMeta.custom.some(
+  const isTwitterCardSizeDefined = pageMeta.custom.some(
     (meta) => meta.property === "twitter:card"
   );
-  if (isTwitterCardSizeExists === false) {
+  if (
+    (pageMeta.socialImageAssetName !== undefined ||
+      pageMeta.socialImageUrl !== undefined) &&
+    isTwitterCardSizeDefined === false
+  ) {
     metas.push({ property: "twitter:card", content: "summary_large_image" });
   }