feat: add simple SEO component

thomkrupa · thomkrupa · commit 65b975343e8f · 2021-12-09T22:11:36.000+01:00
diff --git a/components/SEO.js b/components/SEO.js
@@ -0,0 +1,11 @@
+import Head from "next/head";
+
+export default function SEO({ title, description }) {
+  return (
+    <Head>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+      <meta property="og:title" content={title} />
+    </Head>
+  );
+}
diff --git a/pages/index.js b/pages/index.js
@@ -6,10 +6,12 @@ import Header from "../components/Header";
 import Layout, { GradientBackground } from "../components/Layout";
 import ArrowIcon from "../components/ArrowIcon";
 import { getGlobalData } from "../utils/globalData";
+import SEO from "../components/SEO";
 
 export default function Index({ posts, globalData }) {
   return (
     <Layout>
+      <SEO title={globalData.name} description={globalData.blogTitle} />
       <Header name={globalData.name} />
       <main className="w-full">
         <h1 className="text-3xl lg:text-5xl text-center mb-12">
diff --git a/pages/posts/[slug].js b/pages/posts/[slug].js
@@ -14,6 +14,7 @@ import CustomLink from "../../components/CustomLink";
 import Footer from "../../components/Footer";
 import Header from "../../components/Header";
 import Layout, { GradientBackground } from "../../components/Layout";
+import SEO from "../../components/SEO";
 
 // Custom components/renderers to pass to MDX.
 // Since the MDX files aren't loaded by webpack, they have no knowledge of how
@@ -36,6 +37,10 @@ export default function PostPage({
 }) {
   return (
     <Layout>
+      <SEO
+        title={`${frontMatter.title} - ${globalData.name}`}
+        description={frontMatter.description}
+      />
       <Header name={globalData.name} />
       <article className="px-6 md:px-0">
         <header>
