From 21a74c9707397d07437426b22aef548eae8afcc9 Mon Sep 17 00:00:00 2001
From: Sawit Trisirisatayawong <sawit.tr@gmail.com>
Date: Thu, 2 Feb 2023 19:49:08 +0700
Subject: [PATCH] feat: initial working og

---
 src/lib/components/Meta.tsx | 33 +++++++++++++++++++++++++++++++--
 src/lib/components/Seo.tsx  |  2 +-
 2 files changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Meta.tsx b/src/lib/components/Meta.tsx
index 257a81b31..c0d62d1fc 100644
--- a/src/lib/components/Meta.tsx
+++ b/src/lib/components/Meta.tsx
@@ -1,6 +1,10 @@
+import { SELECTED_CHAIN } from "env";
+
 const APP_NAME = "celatone";
 
 const Meta = () => {
+  const chainName = SELECTED_CHAIN || "";
+  const title = `${chainName.charAt(0).toUpperCase() + chainName.slice(1)}`;
   return (
     <>
       <meta name="application-name" content={APP_NAME} />
@@ -10,10 +14,35 @@ const Meta = () => {
       <meta name="format-detection" content="telephone=no" />
       <meta name="mobile-web-app-capable" content="yes" />
       <meta name="theme-color" content="#FFFFFF" />
+      <title>{`${title} Explorer | Celatone`}</title>
+      <meta
+        name="description"
+        content="A smart contract powered explorer for the Cosmos."
+      />
 
-      <link rel="shortcut icon" href="/favicon.ico" />
+      {/* Open Graph / Facebook */}
+      <meta property="og:type" content="website" />
+      <meta property="og:title" content="Celatone Explorer" />
+      <meta
+        property="og:description"
+        content="A smart contract powered explorer for the Cosmos."
+      />
+      <meta
+        property="og:image"
+        content="https://assets.alleslabs.dev/branding/banners/celatone-cover.jpg"
+      />
 
-      <link rel="manifest" href="/manifest.json" />
+      {/* Twitter */}
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:title" content="Celatone Explorer" />
+      <meta
+        property="twitter:description"
+        content="A smart contract powered explorer for the Cosmos."
+      />
+      <meta
+        property="twitter:image"
+        content="https://assets.alleslabs.dev/branding/banners/celatone-cover.jpg"
+      />
     </>
   );
 };
diff --git a/src/lib/components/Seo.tsx b/src/lib/components/Seo.tsx
index be5e401af..987e3a6f6 100644
--- a/src/lib/components/Seo.tsx
+++ b/src/lib/components/Seo.tsx
@@ -3,7 +3,7 @@ import { NextSeo } from "next-seo";
 
 export const CelatoneSeo = () => {
   const { currentChainRecord } = useWallet();
-  const title = `Celatone ${currentChainRecord?.chain.pretty_name} Explorer`;
+  const title = `${currentChainRecord?.chain.pretty_name} Explorer | Celatone`;
 
   return (
     <NextSeo