fix: improve metadata

src/app/(home)/page.tsx

@@ -6,7 +6,7 @@ import ChartBox from './_components/ChartBox';
 import RecentSwaps from './_components/RecentSwaps';
 
 export const metadata: Metadata = {
-  title: 'Rango Exchange Explorer',
+  title: 'Track all transactions on Rango Exchange',
 };
 
 export default async function HomePage() {

src/app/layout.tsx

@@ -2,29 +2,38 @@ import { Footer } from 'src/components/common/Footer';
 import './globals.css';
 import Header from 'src/components/common/Header';
 import { Metadata } from 'next';
-
-const description = 'Track all transactions on Rango Exchange';
-const socialTitle = 'Rango Exchange Explorer';
-const BASE_URL = 'https://scan.rango.exchange';
-const APP_NAME = 'Rango Exchange Explorer';
+import {
+  APP_NAME,
+  BASE_URL,
+  DEFAULT_DESCRIPTION,
+  DEFAULT_KEYWORDS,
+  OPEN_GRAPH_TYPE,
+  SOCIAL_TITLE,
+  TWITTER_CARD,
+  TWITTER_SITE,
+} from 'src/constant/meta';
 
 export const metadata: Metadata = {
-  title: 'Rango Exchange Explorer',
-  description: description,
-  keywords:
-    'Rango Exchange, Rango dApp, Multi-chain DEX aggregator, Cross-Chain Swap, binance bridge, 1inch, crypto API, Metamask',
+  title: {
+    default: APP_NAME,
+    template: `${APP_NAME} | %s`,
+  },
+  description: DEFAULT_DESCRIPTION,
+  keywords: DEFAULT_KEYWORDS,
+
   twitter: {
-    card: 'summary_large_image',
-    site: '@rangoexchange',
-    title: 'socialTitle',
-    description,
-    creator: '@rangoexchange',
+    card: TWITTER_CARD,
+    site: TWITTER_SITE,
+    title: SOCIAL_TITLE,
+    description: DEFAULT_DESCRIPTION,
+    creator: TWITTER_SITE,
   },
+
   openGraph: {
-    title: socialTitle,
-    type: 'website',
+    title: SOCIAL_TITLE,
+    type: OPEN_GRAPH_TYPE,
     url: `${BASE_URL}/`,
-    description,
+    description: DEFAULT_DESCRIPTION,
     siteName: APP_NAME,
   },
 };

src/constant/meta.ts

@@ -1 +1,19 @@
+export const BASE_URL = 'https://scan.rango.exchange';
 export const WEBSITE_URL = 'https://explorer.rango.exchange';
+export const APP_NAME = 'Rango Exchange Explorer';
+export const DEFAULT_DESCRIPTION = 'Track all transactions on Rango Exchange';
+export const DEFAULT_KEYWORDS = [
+  'Rango Exchange',
+  'Rango dApp',
+  'Multi-chain DEX aggregator',
+  'Cross-Chain Swap',
+  'binance bridge',
+  '1inch',
+  'crypto API',
+  'Metamask',
+];
+
+export const SOCIAL_TITLE = 'Rango Exchange Explorer';
+export const TWITTER_CARD = 'summary_large_image';
+export const TWITTER_SITE = '@rangoexchange';
+export const OPEN_GRAPH_TYPE = 'website';