Streamline metadata (#97)

* Update README.md

* linting

* Finetuning metadata

* Long hyphen

* Updated profile meta title

* Updated twitter card title

* Removed period

* Reverted README.md

gatsby-config.ts

@@ -5,7 +5,7 @@ const config: GatsbyConfig = {
   siteMetadata: {
     title: 'MetaMask Snaps Directory',
     description:
-      'Discover and customize your web3 experience with the MetaMask Snaps directory. Explore various community Snaps to enhance your web3 interactions and unlock new possibilities.',
+      'Explore community-built Snaps to customize your web3 experience via our official directory.',
     siteUrl: 'https://snaps.metamask.io',
     author: 'MetaMask',
   },

src/pages/snap/{Snap.location}/{Snap.slug}.tsx

@@ -233,8 +233,8 @@ type HeadProps = SnapPageProps & {
 };
 
 export const Head: FunctionComponent<HeadProps> = ({ data }) => {
-  const title = `${data.snap.name} - ${data.site.siteMetadata.title}`;
-  const description = `Discover and install ${data.snap.name} on the MetaMask Snaps Directory to enhance your web3 experience. Easily find and install useful Snaps to customize your MetaMask wallet.`;
+  const title = `${data.snap.name} on the MetaMask Snaps Directory`;
+  const description = `Customize your web3 experience with ${data.snap.name}.`;
   const image = `${data.site.siteMetadata.siteUrl}${data.snap.banner.publicURL}`;
 
   return (
@@ -251,7 +251,7 @@ export const Head: FunctionComponent<HeadProps> = ({ data }) => {
       <meta name="og:image:height" content="630" />
       <meta name="twitter:card" content="summary_large_image" />
       <meta name="twitter:creator" content={data.site.siteMetadata.author} />
-      <meta name="twitter:title" content={title} />
+      <meta name="twitter:title" content={data.snap.name} />
       <meta name="twitter:description" content={description} />
       <meta name="twitter:image" content={image} />
     </>