SEO improvements

src/components/Layout.tsx

@@ -5,12 +5,18 @@ import {Helmet} from 'react-helmet';
 const Layout: React.FC<{}> = (props) =>  {
     return (
 	<div className="bg-gray-900 text-gray-200 min-h-screen min-w-screen font-main">
-	    <Helmet>
+	  <Helmet
-		<title>Rik Berkelder</title>
+      defaultTitle="Rik Berkelder"
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      titleTemplate="%s | Rik Berkelder"
-	    </Helmet>
+    >
-	    <div className="mx-auto max-w-screen-lg container pt-1.5 p-0 sm:p-2">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<NavHeader/>
+      <meta name="robots" content="index, follow" />
+      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+      <meta name="language" content="English" />
+      <meta name="google-site-verification" content="x17arJy33V33DYnmMYybZciXngFd8R8xn1UZRdp7qxo" />
+    </Helmet>
+    <div className="mx-auto max-w-screen-lg container pt-1.5 p-0 sm:p-2">
+    <NavHeader/>
 		<main>
 		{props.children}
 		</main>

src/pages/blog.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import {graphql, PageProps, Link} from "gatsby";
-import {Query } from '../../gatsby-graphql';
+import {Query } from '../../graphql-types';
 import Layout from '../components/Layout';
+import Helmet from 'react-helmet';
 
 const Blog: React.FC<PageProps<Query>> = (props) => {
   const remark = props.data?.allMarkdownRemark?.edges;
@@ -24,6 +25,7 @@ const Blog: React.FC<PageProps<Query>> = (props) => {
 
     return (
       <Layout>
+        <Helmet><title>Blog</title></Helmet>
         <h1 className="mb-4">Blog</h1>
         <ul>
           {links}

src/pages/contact.tsx

@@ -1,24 +1,30 @@
 import React from "react"
 import Layout from '../components/Layout';
+import Helmet from 'react-helmet';
 
 const Contact: React.FC<{}> = () => {
   return (
     <Layout>
-      <h1 className="mb-4">Contact Info</h1>
+      <Helmet>
-          <h2>E-Mail</h2>
+        <title>Contact</title>
-          <div className="my-2">mail@riksolo.com</div>
+      </Helmet>
+
+      <h1 className="mb-4">Contact Info</h1>
+      <h2>E-Mail</h2>
+      <div className="my-2">mail@riksolo.com</div>
+
+      <h2 className="mt-4">Social Media</h2>
+      <ul className="my-2">
+        {[
+          {url: "https://twitter.com/rikksolo", title: "Twitter"},
+          {url: "https://instagram.com/rikberkelder", title: "Instagram"},
+          {url: "https://github.com/rikberkelder", title: "Github"},
+          {url: "https://gitlab.riksolo.com/riksolo", title: "Gitlab"}
+        ].map(item => {
+          return <li><a href={item.url}>{item.title}</a></li>
+        })}
+      </ul>
 
-          <h2 className="mt-4">Social Media</h2>
-          <ul className="my-2">
-            {[
-              {url: "https://twitter.com/rikksolo", title: "Twitter"},
-              {url: "https://instagram.com/rikberkelder", title: "Instagram"},
-              {url: "https://github.com/rikberkelder", title: "Github"},
-              {url: "https://gitlab.riksolo.com/riksolo", title: "Gitlab"}
-            ].map(item => {
-              return <li><a href={item.url}>{item.title}</a></li>
-            })}
-          </ul>
     </Layout>
   );
 };

src/templates/mdPageTemplate.tsx

@@ -1,24 +1,54 @@
 import React from 'react';
 import {graphql, PageProps, Link} from 'gatsby';
 import Layout from '../components/Layout';
-import {Query} from '../../gatsby-graphql';
+import {Query} from '../../graphql-types';
+import Helmet from 'react-helmet';
 
 const MdPageTemplate: React.FC<PageProps<Query>> = ({data}) => {
+
   const post = data.markdownRemark;
-    return (
+  const richData = {
-      <Layout>
+  }
-        <div className="max-w-screen-sm mx-auto">
+
+
+  return (
+    <Layout>
+      <div className="max-w-screen-sm mx-auto">
         <Link to="/blog" className="block mb-2">
-        &lt;&lt; Back to post list
+    &lt;&lt; Back to post list
         </Link>
         <h1>{post.frontmatter?.title}</h1>
         <span className="text-sm">{post.frontmatter?.date}</span>
         <hr className="my-4"/>
         <div dangerouslySetInnerHTML={{__html: post.html}}>
         </div>
-        </div>
+      </div>
-      </Layout>
+      <Helmet>
-    );
+        <title>{post.frontmatter?.title}</title>
+
+        <meta name="title" content={post.frontmatter?.title} />
+        {post.frontmatter.description ? (
+          <meta name="description" content="this is the post's description" />
+        ): null}
+        <meta name="author" content="Rik Berkelder" />
+
+        <script type="application/ld+json">
+          {`{
+    "@context": "http://schema.org/",
+    "@type": "BlogPosting",
+    "author": {
+      "@type": "Person",
+      "name": "Rik Berkelder"
+    },
+    "headline": "${post.frontmatter?.title}",
+${post.frontmatter?.description ? '"description": "' + post.frontmatter?.description + '",' : ''}
+    "datePublished": "2021-05-06"
+
+          }`}
+        </script>
+      </Helmet>
+    </Layout>
+  );
 }
 
 export default MdPageTemplate;