Ported SEO component and implemented metas in _document

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

Hide file tree

Showing 3 changed files with 50 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,27 @@
+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" />
+      <title>{pageTitle}</title>
+    </Head>
+  );
+};
+
+export default SEO;
diff --git a/src/frontend/next/src/config.ts b/src/frontend/next/src/config.ts
@@ -5,4 +5,5 @@ export default {
   // This comes via the top level .env and its API_URL value,
   // and gets set in next.config.js at build time.
   telescopeUrl: process.env.NEXT_PUBLIC_API_URL,
+  keywords: 'blogfeeds, canada, opensourced',
 };
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,30 @@ class MyDocument extends Document {
   }
 
   render() {
+    const { title, description, author, telescopeUrl, keywords } = 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={keywords} />
+          <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 name="twitter:title" content={title} />
+          <meta name="twitter:description" content={description} />
+          <meta name="twitter:image" content={logoUrl} />
+          <meta name="twitter:card" content="summary_large_image" />
+          <meta name="twitter:image:alt" content={title} />
+          <meta name="twitter:url" content={telescopeUrl} />
         </Head>
         <body>
           <Main />