feat: initial working og

alleslabs · Feb 2, 2023 · 21a74c9 · 21a74c9
1 parent 0d4ea9f
commit 21a74c9
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 3 deletions.
diff --git 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
@@ -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