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>
+    </>
   );
 };
 

src/templates/CategoriesTemplate/CategoriesTemplate.tsx

@@ -13,7 +13,7 @@ const CategoriesTemplate: React.FC = () => {
   const categories = useCategoriesList();
 
   return (
-    <Layout title={`Categories - ${title}`} description={subtitle}>
+    <Layout title={`Categories - ${title}`} description={subtitle} slug="/categories/">
       <Sidebar />
       <Page title="Categories">
         <ul>

src/templates/CategoryTemplate/CategoryTemplate.tsx

@@ -28,7 +28,7 @@ const CategoryTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
     currentPage > 0 ? `${group} - Page ${currentPage} - ${siteTitle}` : `${group} - ${siteTitle}`;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug={`/category/${group}/`}>
       <Sidebar />
       <Page title={group}>
         <Feed edges={edges} />

src/templates/IndexTemplate/IndexTemplate.tsx

@@ -26,7 +26,7 @@ const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
   const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug="">
       <Sidebar isIndex />
       <Page>
         <Feed edges={edges} />

src/templates/NotFoundTemplate/NotFoundTemplate.tsx

@@ -10,7 +10,7 @@ const NotFoundTemplate: React.FC = () => {
   const { title, subtitle } = useSiteMetadata();
 
   return (
-    <Layout title={`Not Found - ${title}`} description={subtitle}>
+    <Layout title={`Not Found - ${title}`} description={subtitle} slug="/404.html">
       <Sidebar />
       <Page title="Oh no! page be lost">
         <p>

src/templates/PageTemplate/PageTemplate.tsx

@@ -26,6 +26,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
       socialImage={socialImage?.publicURL}
+      slug={data.markdownRemark.fields.slug}
     >
       <Sidebar />
       <Page title={title}>
@@ -40,6 +41,9 @@ export const query = graphql`
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
+      fields {
+        slug
+      }
       frontmatter {
         title
         date

src/templates/PostTemplate/PostTemplate.tsx

@@ -24,6 +24,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
       socialImage={socialImage?.publicURL}
+      slug={data.markdownRemark.fields.slug}
     >
       <Post post={data.markdownRemark} />
     </Layout>

src/templates/TagTemplate/TagTemplate.tsx

@@ -28,7 +28,7 @@ const TagTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
     currentPage > 0 ? `${group} - Page ${currentPage} - ${siteTitle}` : `${group} - ${siteTitle}`;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug={`/tag/${group}/`}>
       <Sidebar />
       <Page title={group}>
         <Feed edges={edges} />

src/templates/TagsTemplate/TagsTemplate.tsx

@@ -13,7 +13,7 @@ const TagsTemplate: React.FC = () => {
   const tags = useTagsList();
 
   return (
-    <Layout title={`Tags - ${title}`} description={subtitle}>
+    <Layout title={`Tags - ${title}`} description={subtitle} slug="/tags/">
       <Sidebar />
       <Page title="Tags">
         <ul>