add meta tags

ShahriarKh · Dec 9, 2022 · 808a501 · 808a501
1 parent d2e8a7b
commit 808a501
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/components/Footer.module.scss b/components/Footer.module.scss
@@ -22,8 +22,9 @@
         outline: none;
         border-bottom: solid 2px transparent;
 
-        &:hover, &:focus     {
+        &:hover,
+        &:focus {
             border-bottom-color: $yellow;
         }
     }
-}
+}
diff --git a/components/SearchBox.module.scss b/components/SearchBox.module.scss
@@ -11,6 +11,7 @@
     text-align: center;
     // grid-column: 1 / span 3;
     flex-grow: 3;
+    max-width: 100%;
 
     &:focus {
         outline-color: $yellow;
@@ -19,5 +20,6 @@
     &::placeholder {
         font-weight: 400;
         font-style: italic;
+        color: $pink;
     }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -32,6 +32,22 @@ export default function Home(props) {
         <>
             <Head>
                 <title>Twemoji Cheatsheet</title>
+                <meta
+                    name="description"
+                    content="🥪 A super simple cheatsheet to browse Twemojis! Filter by catgeroy (and, or) version and find the emoji you want. Easily grab the unicode, hexcode, download SVG or PNG and get some info about that emoji."
+                />
+                <meta name="robots" content="index, follow" />
+                <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+                <meta property="og:title" content="Twemoji Cheatsheet" />
+                <meta
+                    property="og:description"
+                    content="🥪 A super simple cheatsheet to browse Twemojis! Filter by catgeroy (and, or) version and find the emoji you want. Easily grab the unicode, hexcode, download SVG or PNG and get some info about that emoji."
+                />
+                <meta
+                    property="og:image"
+                    content="https://user-images.githubusercontent.com/31452340/159780805-2e2b146d-5c50-4245-ba6b-9cc7dcdd9a18.png"
+                />
             </Head>
 
             <main>
@@ -56,8 +72,6 @@ export default function Home(props) {
                     }
                 />
 
-                {/* <SearchBox setAvailabeEmojis={setAvailabeEmojis} emojis={emojis}/> */}
-
                 <Grid>
                     {availableEmojis
                         .filter(