URL previews don't work on X (Twitter) (blockscout#1792)

Fixes blockscout#1791
alt-research · Apr 11, 2024 · 50910f8 · 50910f8
1 parent 3a9c6cb
commit 50910f8
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/configs/app/meta.ts b/configs/app/meta.ts
@@ -1,13 +1,13 @@
 import app from './app';
 import { getEnvValue, getExternalAssetFilePath } from './utils';
 
-const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
+const defaultImageUrl = '/static/og_placeholder.png';
 
 const meta = Object.freeze({
   promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') || 'true',
   og: {
     description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
-    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl,
+    imageUrl: app.baseUrl + (getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl),
   },
 });
 

diff --git a/nextjs/PageNextJs.tsx b/nextjs/PageNextJs.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { Route } from 'nextjs-routes';
 
+import config from 'configs/app';
 import useAdblockDetect from 'lib/hooks/useAdblockDetect';
 import useGetCsrfToken from 'lib/hooks/useGetCsrfToken';
 import * as metadata from 'lib/metadata';
@@ -34,9 +35,14 @@ const PageNextJs = (props: Props) => {
         <meta property="og:title" content={ opengraph.title }/>
         { opengraph.description && <meta property="og:description" content={ opengraph.description }/> }
         <meta property="og:image" content={ opengraph.imageUrl }/>
+        <meta property="og:type" content="website"/>
+
+        { /* Twitter Meta Tags */ }
         <meta name="twitter:card" content="summary_large_image"/>
+        <meta property="twitter:domain" content={ config.app.host }/>
+        <meta name="twitter:title" content={ opengraph.title }/>
+        { opengraph.description && <meta name="twitter:description" content={ opengraph.description }/> }
         <meta property="twitter:image" content={ opengraph.imageUrl }/>
-        <meta property="og:type" content="website"/>
       </Head>
       { props.children }
     </>