Merge pull request #6 from alt-research/fix/regenerate-og&twitter-meta

fix: regenerate og and twitter meta
alt-research · Mar 20, 2024 · 4bb547d · 4bb547d
2 parents 7fc2fc4 + b80ce7d
commit 4bb547d
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 26 deletions.
diff --git a/configs/app/meta.ts b/configs/app/meta.ts
@@ -1,32 +1,22 @@
 import app from './app';
 import { getEnvValue, getExternalAssetFilePath, parseEnvJson } from './utils';
 
-const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
-
-const protocol = getEnvValue('NEXT_PUBLIC_APP_PROTOCOL');
-const host = getEnvValue('NEXT_PUBLIC_APP_HOST');
-const port = getEnvValue('NEXT_PUBLIC_APP_PORT');
 const path = getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL');
-let imageUrl: string;
+let ogImageUrl: URL;
 
 // Hanlde Nextjs to collect page data
 try {
-  if (path) {
-    const ogImageUrl = new URL(path || '', `${ protocol }://${ host }:${ port }`);
-    imageUrl = ogImageUrl.href;
-  } else {
-    imageUrl = defaultImageUrl;
-  }
+  ogImageUrl = new URL(path || '', app.baseUrl);
 } catch (e) {
-  imageUrl = defaultImageUrl;
+  ogImageUrl = new URL('', 'https://placehodler');
 }
 
 const meta = Object.freeze({
   promoteBlockscoutInTitle: parseEnvJson<boolean>(getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE')) ?? true,
   og: {
+    url: ogImageUrl,
     title: getEnvValue('NEXT_PUBLIC_OG_TITLE') || '',
     description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
-    imageUrl,
   },
 });
 

diff --git a/lib/metadata/generate.ts b/lib/metadata/generate.ts
@@ -6,7 +6,6 @@ import config from 'configs/app';
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
 
 import compileValue from './compileValue';
-import getPageOgType from './getPageOgType';
 import * as templates from './templates';
 
 export default function generate<R extends Route>(route: R, apiData?: ApiData<R>): Metadata {
@@ -21,15 +20,13 @@ export default function generate<R extends Route>(route: R, apiData?: ApiData<R>
   const title = compiledTitle ? compiledTitle + (config.meta.promoteBlockscoutInTitle ? ' | Blockscout' : '') : '';
   const description = compileValue(templates.description.make(route.pathname), params);
 
-  const pageOgType = getPageOgType(route.pathname);
-
   return {
     title: title,
     description,
     opengraph: {
-      title: pageOgType !== 'Regular page' ? config.meta.og.title : '',
-      description: pageOgType !== 'Regular page' ? config.meta.og.description : '',
-      imageUrl: pageOgType !== 'Regular page' ? config.meta.og.imageUrl : '',
+      url: config.meta.og.url,
+      title: config.meta.og.title || title,
+      description: config.meta.og.description || description,
     },
   };
 }
diff --git a/lib/metadata/types.ts b/lib/metadata/types.ts
@@ -11,8 +11,8 @@ export interface Metadata {
     title: string;
     description: string;
     opengraph: {
+        url: URL;
         title: string;
-        description?: string;
-        imageUrl?: string;
+        description: string;
     };
 }
diff --git a/nextjs/PageNextJs.tsx b/nextjs/PageNextJs.tsx
@@ -32,11 +32,18 @@ const PageNextJs = (props: Props) => {
 
         { /* OG TAGS */ }
         <meta property="og:title" content={ opengraph.title }/>
-        { opengraph.description && <meta property="og:description" content={ opengraph.description }/> }
-        <meta property="og:image" content={ opengraph.imageUrl }/>
-        <meta name="twitter:card" content="summary_large_image"/>
-        <meta property="twitter:image" content={ opengraph.imageUrl }/>
+        <meta property="og:description" content={ opengraph.description }/>
+        <meta property="og:image" content={ opengraph.url.href }/>
         <meta property="og:type" content="website"/>
+        <meta property="og:url" content={ opengraph.url.origin }/>
+
+        { /* Twitter Meta Tags  */ }
+        <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content={ opengraph.url.host }/>
+        <meta property="twitter:url" content={ opengraph.url.origin }/>
+        <meta name="twitter:title" content={ opengraph.title }/>
+        <meta name="twitter:description" content={ opengraph.description }/>
+        <meta name="twitter:image" content={ opengraph.url.href }/>
       </Head>
       { props.children }
     </>