feat: optimize SEO (#2)

packages/site/gatsby-config.ts

@@ -1,5 +1,6 @@
 import { GatsbyConfig } from 'gatsby';
 import dotenv from 'dotenv';
+import { SEO_DATA } from './seo-data';
 
 dotenv.config({
   path: `.env.${process.env.NODE_ENV}`,
@@ -13,13 +14,6 @@ const config: GatsbyConfig = {
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-postcss',
-    // {
-    //   resolve: 'gatsby-plugin-sri',
-    //   options: {
-    //     hash: 'sha512',
-    //     crossorigin: false,
-    //   },
-    // },
     {
       resolve: 'gatsby-plugin-csp',
       options: {
@@ -44,14 +38,15 @@ const config: GatsbyConfig = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        name: 'Template Snap',
+        name: 'RSS3 Social Notifier Snap',
         icon: 'src/assets/RSS3.svg',
         theme_color: '#0072FF',
         background_color: '#FFFFFF',
         display: 'standalone',
       },
     },
   ],
+  siteMetadata: SEO_DATA,
 };
 
 export default config;

packages/site/seo-data.ts

@@ -0,0 +1,44 @@
+const site =
+  process.env.NODE_ENV === 'production'
+    ? 'https://snap.rss3.io'
+    : 'http://localhost:8000';
+
+export const SEO_DATA = {
+  title: 'RSS3 Snap - The Open Information Snap',
+  description:
+    "RSS3 Snap for MetaMask offers a quick and easy way to stay on top of your frens' social activities.",
+  language: 'en-US',
+  url: site,
+  image: `${site}/images/og.png`,
+  logo: 'https://rss3.io/images/logo.svg',
+  twitter: '@rss3_',
+  website: {
+    context: 'https://schema.org',
+    type: 'WebSite',
+    name: 'RSS3',
+    url: 'https://rss3.io',
+  },
+  organization: {
+    context: 'https://schema.org',
+    type: 'Organization',
+    name: 'RSS3',
+    url: 'https://rss3.io/',
+    logo: 'https://rss3.io/images/logo.svg',
+    sameAs: ['https://twitter.com/rss3_'],
+  },
+  keywords: [
+    'blockchain',
+    'notifier',
+    'RSS3 Notifier',
+    'decentralization',
+    'RSS3 Metamask snap',
+    'Metamask snap',
+    'Open Information',
+    'Open Information Layer',
+    'Open Web',
+    'RSS3',
+    'RSS3 Explorer',
+    'web3',
+    'web3 activities',
+  ],
+};

packages/site/src/components/SEO.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { useSiteMetadata } from '@/hooks/use-site-metadata';
+
+export type ISEOProps = {
+  title?: string;
+  description?: string;
+  pathname?: string;
+};
+export const SEO = ({
+  title = '',
+  description = '',
+  pathname = '',
+  children,
+}: React.PropsWithChildren & ISEOProps) => {
+  const {
+    title: defaultTitle,
+    description: defaultDescription,
+    language,
+    url,
+    image,
+    logo,
+    twitter,
+    website,
+    organization,
+    keywords,
+  } = useSiteMetadata();
+
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    language,
+    url: `${url}${pathname}`,
+    image,
+    logo,
+    twitter,
+    website,
+    organization,
+    keywords,
+  };
+
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      <meta name="image" content={seo.image} />
+
+      {/* Twitter Card */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={seo.title} />
+      <meta name="twitter:url" content={seo.url} />
+      <meta name="twitter:description" content={seo.description} />
+      <meta name="twitter:image" content={seo.image} />
+      <meta name="twitter:creator" content={seo.twitter} />
+      <meta name="keywords" content={seo.keywords.join(',')} />
+
+      {/* Open Graph */}
+      <meta property="og:title" content={seo.title} />
+      <meta property="og:description" content={seo.description} />
+      <meta property="og:image" content={seo.image} />
+
+      {/** Icons */}
+      <link
+        rel="icon"
+        href="https://rss3.io/favicon-32x32.png"
+        sizes="32x32"
+        type="image/png"
+      />
+      <link
+        rel="mask-icon"
+        href="https://rss3.io/safari-pinned-tab.svg"
+        color="#0072ff"
+      />
+      <link
+        rel="apple-touch-icon"
+        href="https://rss3.io/apple-touch-icon.png"
+      />
+
+      {/** Other */}
+      <meta name="msapplication-TileColor" content="#0072ff" />
+      <meta name="google" content="notranslate" />
+
+      {/** ld json */}
+      <script type="application/ld+json">
+        {JSON.stringify(seo.website, null, 2)}
+      </script>
+
+      <script type="application/ld+json">
+        {JSON.stringify(seo.organization, null, 2)}
+      </script>
+      {children}
+    </>
+  );
+};

packages/site/src/hooks/use-site-metadata.ts

@@ -0,0 +1,55 @@
+import { graphql, useStaticQuery } from 'gatsby';
+import { SEO_DATA } from '../../seo-data';
+
+export type TSEO_DATA = typeof SEO_DATA;
+export const useSiteMetadata = () => {
+  const data = useStaticQuery<{ site: { siteMetadata: TSEO_DATA } }>(graphql`
+    query {
+      site {
+        siteMetadata {
+          title
+          description
+          language
+          url
+          image
+          logo
+          twitter
+          website {
+            context
+            type
+            name
+            url
+          }
+          organization {
+            context
+            type
+            name
+            url
+            logo
+            sameAs
+          }
+          keywords
+        }
+      }
+    }
+  `);
+
+  const { website, organization } = data.site.siteMetadata;
+  return {
+    ...data.site.siteMetadata,
+    website: {
+      '@content': website.context,
+      '@type': website.type,
+      name: website.name,
+      url: website.url,
+    },
+    organization: {
+      '@content': organization.context,
+      '@type': organization.type,
+      name: organization.name,
+      url: organization.url,
+      logo: organization.logo,
+      sameAs: organization.sameAs,
+    },
+  };
+};

packages/site/src/pages/index.tsx

@@ -1,39 +1,32 @@
 import { useContext } from 'react';
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { navigate } from 'gatsby';
-import { MetamaskActions, MetaMaskContext } from '../hooks';
 import {
-  // addOwnWalletAddress,
   connectSnap,
   getSnap,
   isLocalSnap,
   sendClearState,
-  // sendGetState,
-  // sendSetState,
   shouldDisplayReconnectButton,
-  // showAlert,
-  // showAllActivities,
-  // showAllMonitoredAddresses,
-  // showLastUpdated,
   testImage,
-} from '../utils';
+} from '@/utils';
 import {
   ConnectButton,
   InstallFlaskButton,
   ReconnectButton,
   ResetButton,
-} from '../components';
-import { defaultSnapOrigin, isProduction } from '../config';
+} from '@/components';
+import { defaultSnapOrigin, isProduction } from '@/config';
+import { MetamaskActions, MetaMaskContext } from '@/hooks';
 import {
   Card,
-  // CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
+import { SEO } from '@/components/SEO';
 
 const Index = () => {
   const [state, dispatch] = useContext(MetaMaskContext);
@@ -253,3 +246,5 @@ const Index = () => {
 };
 
 export default Index;
+
+export const Head = () => <SEO />;