Add opengraph meta elements to all pages

Author: kyleect

src/pages/404.js

@@ -1,13 +1,39 @@
 import React from 'react';
 import Layout from '../layouts';
+import { Helmet } from 'react-helmet';
 
-const NotFoundPage = () => (
-  <Layout>
-    <div>
-      <h1>NOT FOUND</h1>
-      <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
-    </div>
-  </Layout>
-);
+const NotFoundPage = ({ data }) => {
+  const { siteMetadata } = data.site;
+  const title = `Page Not Found! - ${siteMetadata.title}`;
+
+  return (
+    <Layout>
+      <Helmet>
+        <title>{title}</title>
+
+        <meta property="og:title" content={title} />
+        <meta
+          property="og:description"
+          content="A brief introduction to my background"
+        />
+      </Helmet>
+
+      <div>
+        <h1>Page Not Found</h1>
+        <p>Please check the url and try again.</p>
+      </div>
+    </Layout>
+  );
+};
 
 export default NotFoundPage;
+
+export const pageQuery = graphql`
+  query NotFoundPage {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`;

src/pages/about.js

@@ -4,6 +4,7 @@ import me from '../images/me.jpg';
 import banner from '../images/about-me-banner.jpg';
 import { OutboundLink } from 'gatsby-plugin-google-analytics';
 import styled from 'styled-components';
+import { Helmet } from 'react-helmet';
 
 const AboutMeHeader = styled.div`
   float: left;
@@ -71,9 +72,22 @@ const BannerImage = styled.img`
   }
 `;
 
-export default function About() {
+export default function About({ data }) {
+  const { siteMetadata } = data.site;
+  const title = `About Me - ${siteMetadata.title}`;
+
   return (
     <Layout>
+      <Helmet>
+        <title>{title}</title>
+
+        <meta property="og:title" content={title} />
+        <meta
+          property="og:description"
+          content="A brief introduction to my background"
+        />
+      </Helmet>
+
       <BannerImage src={banner} alt="Me standing on stage giving a talk" />
 
       <AboutMeHeader>
@@ -182,3 +196,13 @@ export default function About() {
     </Layout>
   );
 }
+
+export const pageQuery = graphql`
+  query AboutPage {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`;

src/pages/blog.js

@@ -2,11 +2,21 @@ import React from 'react';
 import { graphql } from 'gatsby';
 import Link from 'gatsby-link';
 import Layout from '../layouts';
+import { Helmet } from 'react-helmet';
 
 export default function Index({ data }) {
+  const { siteMetadata } = data.site;
+  const title = `Blog - ${siteMetadata.title}`;
+
   const { edges: posts } = data.allMarkdownRemark;
   return (
     <Layout>
+      <Helmet>
+        <title>{title}</title>
+
+        <meta property="og:title" content={title} />
+      </Helmet>
+
       {posts
         .filter(post => post.node.frontmatter.title.length > 0)
         .map(({ node: post }) => {
@@ -39,5 +49,11 @@ export const pageQuery = graphql`
         }
       }
     }
+
+    site {
+      siteMetadata {
+        title
+      }
+    }
   }
 `;

src/pages/projects.js

@@ -1,10 +1,24 @@
 import React from 'react';
 import Layout from '../layouts';
 import { OutboundLink } from 'gatsby-plugin-google-analytics';
+import { Helmet } from 'react-helmet';
+
+export default function Projects({ data }) {
+  const { siteMetadata } = data.site;
+  const title = `Projects - ${siteMetadata.title}`;
 
-export default function Projects() {
   return (
     <Layout>
+      <Helmet>
+        <title>{title}</title>
+
+        <meta property="og:title" content={title} />
+        <meta
+          property="og:description"
+          content="Projects I'm currently working on"
+        />
+      </Helmet>
+
       <h2 style={{ fontSize: '2em' }}>Projects</h2>
 
       <section>
@@ -157,3 +171,13 @@ export default function Projects() {
     </Layout>
   );
 }
+
+export const pageQuery = graphql`
+  query ProjectsPage {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`;

src/pages/talks.js

@@ -1,10 +1,21 @@
 import React from 'react';
 import Layout from '../layouts';
 import { OutboundLink } from 'gatsby-plugin-google-analytics';
+import { Helmet } from 'react-helmet';
+
+export default function Talks({ data }) {
+  const { siteMetadata } = data.site;
+  const title = `Talks - ${siteMetadata.title}`;
 
-export default function Talks() {
   return (
     <Layout>
+      <Helmet>
+        <title>{title}</title>
+
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content="A list of talks I've given" />
+      </Helmet>
+
       <h2 style={{ fontSize: '2em' }}>Talks</h2>
 
       <ul>
@@ -82,3 +93,13 @@ export default function Talks() {
     </Layout>
   );
 }
+
+export const pageQuery = graphql`
+  query TalksPage {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`;