Ported SEO component and implemented metas in _document

Seneca-CDOT · Jan 29, 2021 · 1996d01 · 1996d01
1 parent 67ed296
commit 1996d01
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/src/frontend/next/src/components/SEO.tsx b/src/frontend/next/src/components/SEO.tsx
@@ -0,0 +1,26 @@
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import config from '../config';
+
+type SEOProps = {
+  pageTitle: string;
+};
+
+const SEO = ({ pageTitle }: SEOProps) => {
+  const { telescopeUrl } = config;
+  const { pathname } = useRouter();
+  const currentUrl = `${telescopeUrl}${pathname}`;
+
+  return (
+    <Head>
+      <meta
+        name="viewport"
+        content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover"
+      />
+      <meta property="og:url" content={currentUrl} key="ogurl" />
+      <meta property="og:title" content={pageTitle} key="ogtitle" />
+    </Head>
+  );
+};
+
+export default SEO;
diff --git a/src/frontend/next/src/pages/_document.tsx b/src/frontend/next/src/pages/_document.tsx
@@ -3,6 +3,8 @@ import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/do
 import { ServerStyleSheets } from '@material-ui/core/styles';
 
 import { logoUrl } from '../components/Logo';
+import config from '../config';
+import lightTheme from '../theme/lightTheme';
 
 // Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
 class MyDocument extends Document {
@@ -12,10 +14,24 @@ class MyDocument extends Document {
   }
 
   render() {
+    const { title, description, author, telescopeUrl } = config;
     return (
       <Html lang="en">
         <Head>
           <link rel="icon" href={logoUrl} type="image/svg+xml" />
+          <meta charSet="utf-8" />
+          <meta name="theme-color" content={lightTheme.palette.primary.main} />
+
+          <meta name="description" content={description} />
+          <meta name="author" content={author} />
+          <meta name="keywords" content="blogfeeds, canada, opensourced" />
+          <meta name="application-name" content={title} />
+
+          <meta property="og:type" content="website" />
+          <meta property="og:title" content={title} />
+          <meta property="og:site_name" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="og:url" content={telescopeUrl} />
         </Head>
         <body>
           <Main />