Merge pull request #3 from shivjoshi1996/develop

FOUC Fix, SEO Component, OG Tags. Favicon

gatsby-config.js

@@ -6,7 +6,11 @@ require("dotenv").config({
 module.exports = {
   siteMetadata: {
     siteUrl: 'https://www.purelyot.com',
-    title: 'purelyot',
+    title: 'Purely OT',
+    titleTemplate: 'Purely OT | Private Occupational Therapy services in Vancouver',
+    description: 'Occupational Therapy services within the Greater Vancouver area, including home & work assessments, return to work, brain injury, PGAP, and chronic pain.',
+    keywords: 'Occupational Therapy, Vancouver OT, Health Services',
+    image: '/favicon.png',
   },
   plugins: [
     {
@@ -24,7 +28,7 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-manifest',
       options: {
-        icon: 'src/images/icon.png',
+        icon: 'src/images/favicon.png',
       },
     },
     'gatsby-plugin-sharp',

package.json

@@ -29,6 +29,7 @@
     "gatsby-source-filesystem": "^3.13.0",
     "gatsby-source-sanity": "^7.0.7",
     "gatsby-transformer-sharp": "^3.13.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

src/components/SEO.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+const SEO = ({ title, description, article }) => {
+  const { site } = useStaticQuery(query);
+
+  const { defaultTitle, titleTemplate, defaultDescription, siteUrl, image } =
+    site.siteMetadata;
+
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    siteUrl: `${siteUrl}`,
+    image,
+  };
+
+  return (
+    <Helmet title={seo.title} titleTemplate={titleTemplate}>
+      <meta name="description" content={seo.description} />
+
+      {seo.siteUrl && <meta property="og:url" content={seo.siteUrl} />}
+
+      {(article ? true : null) && <meta property="og:type" content="article" />}
+
+      {seo.title && <meta property="og:title" content={seo.title} />}
+
+      {seo.description && (
+        <meta property="og:description" content={seo.description} />
+      )}
+
+      {seo.image && <meta property="og:image" content={seo.image} />}
+    </Helmet>
+  );
+};
+
+export default SEO;
+
+SEO.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+  article: PropTypes.bool,
+};
+
+SEO.defaultProps = {
+  title: null,
+  description: null,
+  image: null,
+  article: false,
+};
+
+const query = graphql`
+  query SEO {
+    site {
+      siteMetadata {
+        defaultTitle: title
+        titleTemplate
+        defaultDescription: description
+        siteUrl
+        image
+      }
+    }
+  }
+`;

src/fonts/font.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "Recoleta";
+  font-display: fallback;
+  src: url("recoleta-regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}

src/pages/index.js

@@ -4,12 +4,14 @@ import HomeHeroBanner from '../components/HomeHeroBanner';
 import HomeServices from '../components/HomeServices';
 import HomeCompanyBanner from '../components/CompanyBanner';
 import ContactForm from '../components/ContactForm';
+import SEO from '../components/SEO';
 
 export default function IndexPage({ data }) {
   const { sanityHomepage } = data;
   const { allSanityHomepageServices } = data;
   return (
     <div>
+      <SEO />
       <HomeHeroBanner
         heroHeading={sanityHomepage.heroHeading}
         heroDescription={sanityHomepage.heroDescription}

src/styles/Typography.js

@@ -1,17 +1,12 @@
 import { createGlobalStyle } from 'styled-components';
 
-import font from '../fonts/recoleta-regular.woff2';
+import '../fonts/font.css';
 
 const Typography = createGlobalStyle`
   $primary-colour: #FEC5BB;
   $secondary-colour: #FFFFFF;
   $third-colour: #FAE1DD;
   $main-font-colour: #2F2E41;
-
-  @font-face {
-    font-family: Recoleta;
-    src: url(${font});
-  }
   
   html {
     font-family: 'Montserrat', san-serif;