Sebastian Pietschner - Developer and Student

My personal site that I use to develop and share new skills and projects.


TwitterGithub

Working with Gatsby

Sebastian Pietschner / Oct 5th 2020
2 min read

Over the past year, I have been working with people in my robotics team to improve the team website in a myriad of ways. The old website was using Weebly and was horribly slow to load.

The obvious solution to this that I could see would be to build a brand new site from the ground up using GatsbyJS which is known to be one of the fastest platforms out there. Among the speed there were several other advantages:

  • Speed (Already Mentioned)
  • SEO (Able to automatically use templates to populate page metadata)
  • Ease-of-use (Anyone is able to write a markdown file and insert images)
  • Plugins (Endless library of plugins for a wide variety of situations)

Using these plugins I was able to make a convenient system where users only have to drag and drop files into the desired directory and the components will automatically populate using GraphQL queries. Another advantage of using markdown files is that the front matter can be easily read and then used to populate the SEO data without having to write an inordinate amount of meta tags.

My favourite feature by far is the SEO that I have implemented into every page on the site. Using JSON+LD I can provide Google with Rich Search Data to make the site more visible and more easily navigable straight from Google search.

import React from "react";
import PropTypes from "prop-types";
import { Helmet } from "react-helmet-async";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ description, lang, meta, title, ldpage }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            language
            keywords
          }
        }
      }
    `
  );

  const metaDescription = description || site.siteMetadata.description;
  const defaultldpage = {
    "@context": "https://schema.org",
    "@type": "Organization",
    "@id": "https://thethunderdownunder.org",
    name: "The Thunder Down Under Robotics",
    logo: "https://thethunderdownunder.org/icons/icon-512x512.png",
    sameAs: [
      "https://www.youtube.com/user/roboroos",
      "https://www.facebook.com/firstteam3132/",
      "https://www.instagram.com/team3132/",
      "https://twitter.com/Team3132",
      "https://github.com/Team3132",
    ],
    url: "https://thethunderdownunder.org",
    openingHoursSpecification: [
      {
        "@type": "OpeningHoursSpecification",
        dayOfWeek: "Friday",
        opens: "18:00",
        closes: "21:00",
      },
    ],
  };

  const ld = ldpage || defaultldpage;

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={`%s | ${site.siteMetadata.title}`}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
        {
          name: "keywords",
          content: site.siteMetadata.keywords.join(","),
        },
      ].concat(meta)}
    >
      <script type="application/ld+json">{JSON.stringify(ld, null, 1)}</script>
    </Helmet>
  );
};

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
};

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
};

export default SEO;