Add some metadata

lesesalen · Nov 15, 2021 · ebd6f79 · ebd6f79
1 parent 4ba8314
commit ebd6f79
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 28 deletions.
diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -15,7 +15,22 @@ class MyDocument extends Document {
   render() {
     return (
       <Html lang="no" className="h-full w-screen overflow-x-hidden">
-        <Head />
+        <Head>
+          <meta
+            name="viewport"
+            content="initial-scale=1.0, width=device-width"
+          />
+
+          <link rel="canonical" href="https://ordbok.lesesalen.com" />
+          <meta
+            name="description"
+            content="Informatics is confusing, use this"
+          />
+          <meta
+            property="og:description"
+            content="Informatics is confusing, use this"
+          />
+        </Head>
         <body className="h-full">
           <Main />
           <NextScript />

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,7 @@
 import type { NextPage } from "next";
 import { useState } from "react";
 import { Entry, filterEntry } from "../lib";
+import Head from "next/head";
 
 interface EntryProps {
   name: string;
@@ -41,38 +42,45 @@ const Home: NextPage = () => {
   const [search, setSearch] = useState(filterEntry(""));
 
   return (
-    <div className="bg-white max-h-screen min-h-full px-4 py-4 md:grid md:place-items-center">
-      <div className="w-full">
-        <div className="max-w-xl mx-auto">
-          <main className="sm:flex">
-            <p className="text-4xl font-extrabold text-indigo-600 sm:text-5xl">
-              ordbok
-            </p>
-            <div className="sm:ml-6">
-              <div className="sm:border-l sm:border-gray-200 sm:pl-6">
-                <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
-                  Need a word?
-                </h1>
-                <p className="mt-1 text-base text-gray-500">
-                  Informatics is confusing, use this
-                </p>
+    <>
+      <Head>
+        <title>Ordbok :: Lesesalen</title>
+        <meta property="og:title" content="Ordbok :: Lesesalen" key="title" />
+      </Head>
+
+      <div className="bg-white max-h-screen min-h-full px-4 py-4 md:grid md:place-items-center">
+        <div className="w-full">
+          <div className="max-w-xl mx-auto">
+            <main className="sm:flex">
+              <p className="text-4xl font-extrabold text-indigo-600 sm:text-5xl">
+                ordbok
+              </p>
+              <div className="sm:ml-6">
+                <div className="sm:border-l sm:border-gray-200 sm:pl-6">
+                  <h1 className="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl">
+                    Need a word?
+                  </h1>
+                  <p className="mt-1 text-base text-gray-500">
+                    Informatics is confusing, use this
+                  </p>
+                </div>
+                <div className="flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"></div>
               </div>
-              <div className="flex space-x-3 sm:border-l sm:border-transparent sm:pl-6"></div>
+            </main>
+            <div className="mt-4 relative flex items-center">
+              <input
+                type="text"
+                name="search"
+                id="search"
+                className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
+                onChange={(e) => setSearch(filterEntry(e.target.value))}
+              />
             </div>
-          </main>
-          <div className="mt-4 relative flex items-center">
-            <input
-              type="text"
-              name="search"
-              id="search"
-              className="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full pr-12 sm:text-sm border-gray-300 rounded-md"
-              onChange={(e) => setSearch(filterEntry(e.target.value))}
-            />
+            <Results entries={search} />
           </div>
-          <Results entries={search} />
         </div>
       </div>
-    </div>
+    </>
   );
 };