Merge pull request #7595 from schrodingersket/bugfix/7503

#7503: `ogImage` and `ogUrl` are now both processed server-side before being passed to the client in publicly shared paths.

Author: williamstein

src/packages/next/components/path/path.tsx

@@ -74,6 +74,7 @@ export interface PublicPathProps {
   created: string|null; // ISO 8601 string
   last_edited: string|null; // ISO 8601 string
   ogUrl?: string; // Open Graph URL for social media sharing
+  ogImage?: string; // Open Graph image for social media sharing
 }
 
 export default function PublicPath({

src/packages/next/pages/share/public_paths/[...id].tsx

@@ -19,21 +19,18 @@ export default (props: PublicPathProps) => (
   <>
     <PublicPath {...props} />
     <NextHead>
-      <meta property="og:type" content="article" />
+      <meta property="og:type" content="article"/>
+      <meta property="og:title" content={props.path}/>
 
-      <meta property="og:title" content={props.path} />
-      <meta property="og:description" content={props.description} />
-      <meta property="og:url" content={props.ogUrl} />
-      {props.customize && (
-        <meta
-          property="og:image"
-          content={
-            props.customize.logoSquareURL ||
-            `${props.customize.siteURL}${ogShareLogo.src}`
-          }
-        />
+      {props.description && (
+        <meta property="og:description" content={props.description}/>
+      )}
+      {props.ogUrl && (
+        <meta property="og:url" content={props.ogUrl}/>
+      )}
+      {props.ogImage && (
+        <meta property="og:image" content={props.ogImage}/>
       )}
-
       {props.created && (
         <meta property="article:published_time" content={props.created}/>
       )}
@@ -74,13 +71,18 @@ export async function getServerSideProps(context) {
 
     const customize = await withCustomize({ context, props });
 
-    if (customize != null) {
+    if (customize?.props?.customize != null) {
       // Add full URL for social media sharing
       //
       customize.props.ogUrl = `${customize.props.customize.siteURL}${shareURL(
         id,
         relativePath,
       )}`;
+
+      // Add image path for social media sharing
+      //
+      customize.props.ogImage = customize.props.customize.logoSquareURL ||
+        `${customize.props.customize.siteURL}${ogShareLogo.src}`;
     }
 
     return customize;