fix(opengraph): added mandatory opengraph tags to all pages. Also fixed some other minor bugs

src/components/Layout/Layout.tsx

@@ -11,6 +11,7 @@ interface Props {
   socialImage?: string;
   children: React.ReactNode;
   noIndex?: boolean;
+  slug?: string;
 }
 
 const Layout: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const Layout: React.FC<Props> = ({
   description,
   socialImage = "",
   noIndex = false,
+  slug,
 }: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;
@@ -33,6 +35,7 @@ const Layout: React.FC<Props> = ({
         <meta property="og:description" content={description} />
         <meta property="og:site_name" content={title} />
         <meta property="og:image" content={metaImageUrl} />
+        {slug && <meta property="og:url" content={`${url}${slug}`} />}
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />

src/components/Page/Page.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
-import * as styles from "./Page.module.scss";
 import type { Nullable } from "@/types";
-
+import { Helmet } from "react-helmet";
+import * as styles from "./Page.module.scss";
 
 interface Props {
   title?: string;
@@ -19,12 +19,17 @@ const Page: React.FC<Props> = ({ title, children }: Props) => {
   }, []);
 
   return (
-    <div ref={pageRef} className={styles.page}>
-      <div className={styles.inner}>
-        {title && <h1 className={styles.title}>{title}</h1>}
-        <div className={styles.body}>{children}</div>
+    <>
+      <Helmet>
+        <meta property="og:type" content="website" />
+      </Helmet>
+      <div ref={pageRef} className={styles.page}>
+        <div className={styles.inner}>
+          {title && <h1 className={styles.title}>{title}</h1>}
+          <div className={styles.body}>{children}</div>
+        </div>
       </div>
-    </div>
+    </>
   );
 };