SEO improvements

src/components/Layout.tsx

@@ -5,9 +5,15 @@ 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>
-		<title>Rik Berkelder</title>
+	  <Helmet
+      defaultTitle="Rik Berkelder"
+      titleTemplate="%s | Rik Berkelder"
+    >
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <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/>

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,9 +1,14 @@
 import React from "react"
 import Layout from '../components/Layout';
+import Helmet from 'react-helmet';
 
 const Contact: React.FC<{}> = () => {
   return (
     <Layout>
+      <Helmet>
+        <title>Contact</title>
+      </Helmet>
+
       <h1 className="mb-4">Contact Info</h1>
       <h2>E-Mail</h2>
       <div className="my-2">mail@riksolo.com</div>
@@ -19,6 +24,7 @@ const Contact: React.FC<{}> = () => {
           return <li><a href={item.url}>{item.title}</a></li>
         })}
       </ul>
+
     </Layout>
   );
 };

src/templates/mdPageTemplate.tsx

@@ -1,10 +1,16 @@
 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;
+  const richData = {
+  }
+
+
   return (
     <Layout>
       <div className="max-w-screen-sm mx-auto">
@@ -17,6 +23,30 @@ const MdPageTemplate: React.FC<PageProps<Query>> = ({data}) => {
         <div dangerouslySetInnerHTML={{__html: post.html}}>
         </div>
       </div>
+      <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>
   );
 }