Merge pull request #251 from CivicActions/seo

Move remaining SEO components to Head.

src/components/seo.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useLocation } from '@reach/router';
 import { useStaticQuery, graphql } from 'gatsby';
 
-const SEO = ({ title, description, image, article, isExternalImage }) => {
+const SEO = ({ title, description, image, article }) => {
   const { pathname } = useLocation();
   const { site } = useStaticQuery(query);
   const {
@@ -14,21 +14,10 @@ const SEO = ({ title, description, image, article, isExternalImage }) => {
     twitterUsername,
   } = site.siteMetadata;
 
-  // If the OG image is in the static folder, remove the first slash, 
-  // if it is an external image, print the full image URL
-  // if none of the above, use the default OG Image.
-  let ogImage =
-    image && !(isExternalImage) ? image.slice(1)
-      : image && isExternalImage ? image
-        : defaultImage;
-
-  // If the OGImage is stored externally (eg. cover images in case studies), do not add the site url to the image path.
-  let ogImagePath = image && isExternalImage ? ogImage : `${siteUrl}${ogImage}`
-
   const seo = {
     title: (`${title || defaultTitle} | CivicActions`),
     description: description || defaultDescription,
-    image: ogImagePath,
+    image: image ? image : defaultImage,
     url: `${siteUrl}${pathname.slice(1)}`,
   };
 

src/pages/404.js

@@ -9,10 +9,6 @@ import SEO from "../components/seo";
 const NotFoundPage = () => {
   return (
     <GeneralLayout>
-      <SEO
-          title='Page not found'
-          description='Sorry it seems the page you were looking for was not found.'
-      />
       <section className="not-found">
         <div className='inner'>
         <h1>404</h1>
@@ -48,5 +44,8 @@ const NotFoundPage = () => {
 export default NotFoundPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+      title='Page not found'
+      description='Sorry it seems the page you were looking for was not found.'
+  />
 );

src/pages/careers.js

@@ -49,11 +49,6 @@ const CareersPage = ({ location }) => {
 
   return (
     <RedLayout>
-      <SEO
-        title='Careers'
-        description='Work for the public good. Join our diverse and talented team of civic-minded people.'
-        image={careersOgImage}
-      />
       <section className='careers--hero-section hero-component'>
         <div className='inner'>
           <h1>Work for the public good.</h1>
@@ -337,5 +332,9 @@ export const query = graphql`
 export default CareersPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Careers'
+    description='Work for the public good. Join our diverse and talented team of civic-minded people.'
+    image={careersOgImage}
+  />
 );

src/pages/case-studies.js

@@ -114,10 +114,6 @@ const CaseStudyPage = () => {
 
   return (
     <RedLayout>
-      <SEO
-        title='Case Studies'
-        description="From large-scale federal CMS modernization to automating security compliance, see how we've helped government deliver better services to the public."
-      />
       <Hero
         title='Work that makes a difference'
         description='Our work impacts the daily lives of millions of people. See how we’ve helped agencies build resilient services at scale.'
@@ -265,5 +261,8 @@ const CaseStudyPage = () => {
 export default CaseStudyPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Case Studies'
+    description="From large-scale federal CMS modernization to automating security compliance, see how we've helped government deliver better services to the public."
+  />
 );

src/pages/contracting.js

@@ -16,10 +16,6 @@ import workforceDevelopmentIcon from '../files/icons/workforce-dev-icon.svg';
 const ContractingPage = () => {
   return (
     <RedLayout className='contracting-page'>
-      <SEO
-        title='Contracting information'
-        description='We are a Small Business helping government agencies make digital services that build public trust. Learn about contracting with us.'
-      />
       <div className='hero-component'>
         <div className='inner'>
           <h1>Let’s build a world<br />that works for all.</h1>
@@ -169,5 +165,8 @@ const ContractingPage = () => {
 export default ContractingPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Contracting information'
+    description='We are a Small Business helping government agencies make digital services that build public trust. Learn about contracting with us.'
+  />
 );

src/pages/feedback.js

@@ -8,10 +8,6 @@ import SEO from '../components/seo';
 const FeedbackPage = () => {
   return (
     <RedLayout>
-      <SEO
-        title='Feedback or update requests'
-        description='Bugs? Comments? Updates? We welcome your feedback and contributions to the site.'
-      />
       <Hero
         title='Feedback'
         description='Bugs? Comments? Suggestions? We welcome your feedback and ideas for our site.'
@@ -57,5 +53,8 @@ const FeedbackPage = () => {
 export default FeedbackPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Feedback or update requests'
+    description='Bugs? Comments? Updates? We welcome your feedback and contributions to the site.'
+  />
 );

src/pages/licensing.js

@@ -8,10 +8,6 @@ import Hero from "../components/hero";
 const LicensingPage = () => {
   return (
     <RedLayout>
-      <SEO
-        title='Licensing policy'
-        description='Open source is just the beginning. Our open licensing policies allow our company to thrive while helping others to do the same.'
-      />
       <Hero
           title='Licensing policy'
           description='Our licensing policy reflects our commitment to open source
@@ -92,5 +88,8 @@ const LicensingPage = () => {
 export default LicensingPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Licensing policy'
+    description='Open source is just the beginning. Our open licensing policies allow our company to thrive while helping others to do the same.'
+  />
 );

src/pages/privacy.js

@@ -8,10 +8,6 @@ import SEO from '../components/seo';
 const PrivacyPage = () => {
   return (
     <RedLayout>
-      <SEO
-        title='Privacy policy'
-        desciption='Our privacy policy describes how we collect and use information about visitors to our website.'
-      />
       <Hero
         title='Our privacy policy'
         description='This is a plain-language statement explaining how we collect
@@ -203,5 +199,8 @@ const PrivacyPage = () => {
 export default PrivacyPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Privacy policy'
+    desciption='Our privacy policy describes how we collect and use information about visitors to our website.'
+  />
 );

src/pages/services.js

@@ -22,10 +22,6 @@ const ServicesPage = ({ data }) => {
   }, []);
   return (
     <RedLayout>
-      <SEO
-        title='Services'
-        description='We use Agile and DevOps, open source software, and human-centered design to elevate government digital services.'
-      />
       <Hero
         title='Government services that build public trust'
         description='At its core, digital transformation is about improving the customer experience of government. We use thoughtful design and open source technologies to help you deliver modern public services that put people first. '
@@ -388,5 +384,8 @@ const ServicesPage = ({ data }) => {
 export default ServicesPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Services'
+    description='We use Agile and DevOps, open source software, and human-centered design to elevate government digital services.'
+  />
 );

src/pages/services/ditap/register.js

@@ -7,10 +7,6 @@ import SEO from '../../../components/seo';
 const Register = () => {
   return (
     <RedLayout>
-      <SEO
-        title='Digital IT Acquisition Professional (DITAP) certification program'
-        description='Register for the Digital IT Acquisition Professional (DITAP) certification program.'
-      />
       <Hero
         title='Request DITAP training'
         description='CivicActions is a certified Small Business provider of the Digital IT Acquisition Professional (DITAP) training program.'
@@ -30,5 +26,8 @@ const Register = () => {
 export default Register;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Digital IT Acquisition Professional (DITAP) certification program'
+    description='Register for the Digital IT Acquisition Professional (DITAP) certification program.'
+  />
 );

src/pages/team.js

@@ -74,12 +74,6 @@ const TeamPage = () => {
 
   return (
     <RedLayout>
-      <SEO
-        title='Team'
-        description='Meet the humans of CivicActions.'
-        image={teamOgImage}
-      />
-
       <Hero
         title='Meet the humans of CivicActions'
         description='People who work with us say there’s “something magical” about our team. We are good listeners, strategic thinkers, honest communicators, and problem solvers. (We’re also cheerful and kind, which is a nice bonus.) Let’s get to know each other!'
@@ -158,5 +152,9 @@ const FilterButtons = ({ team, parentCallback, filterState }) => {
 export default TeamPage;
 
 export const Head = () => (
-  <SEO />
+  <SEO
+    title='Team'
+    description='Meet the humans of CivicActions.'
+    image={teamOgImage}
+  />
 );

src/templates/case-study.js

@@ -10,21 +10,10 @@ import { GatsbyImage, getImage, getSrc } from "gatsby-plugin-image";
 
 const CaseStudyTemplate = ({ data }) => {
   const caseStudy = data.allStrapiCaseStudy.edges[0].node;
-  const { Client_Name, Related_Case_Studies, Hero_Image, Cover_Image } = caseStudy;
-
-  // If an og image is uploaded in strapi use it, otherwise default to the cover image.
-  let ogImage = caseStudy.SEO.OGImage ? getSrc(caseStudy.SEO.OGImage) : Cover_Image.url;
+  const { Client_Name, Related_Case_Studies, Hero_Image } = caseStudy;
 
   return (
     <GeneralLayout>
-      <SEO
-        title={caseStudy.SEO.OGTitle}
-        description={caseStudy.SEO.OGDescription}
-        image={ogImage}
-        // Indicates that the cover_image url is an external link. If it is return true.
-        isExternalImage={ogImage === Cover_Image.url}
-      />
-
       <div className='case-studies'>
         <CaseStudyHero
           client={Client_Name}
@@ -339,3 +328,16 @@ query CaseStudyQuery($pagePath: String!) {
 
 export default CaseStudyTemplate;
 
+export const Head = ({ data }) => {
+  const caseStudy = data.allStrapiCaseStudy.edges[0].node;
+  // If an og image is uploaded in strapi use it, otherwise default to the cover image.
+  let ogImage = caseStudy.SEO.OGImage ? getSrc(caseStudy.SEO.OGImage.localFile) : getSrc(caseStudy.Cover_Image.localFile);
+
+  return (
+    <SEO
+      title={caseStudy.SEO.OGTitle}
+      description={caseStudy.SEO.OGDescription}
+      image={ogImage}
+    />
+  )
+};

src/templates/general.js

@@ -11,10 +11,6 @@ const GeneralTemplate = ({ data }) => {
 
   return (
     <RedLayout>
-        <SEO
-          title={generals.SEO.OGTitle}
-          description={generals.SEO.OGDescription}
-        />
       <Hero
           title={generals.Title}
           description={generals.Hero_text}
@@ -51,3 +47,14 @@ export const query = graphql`
 `;
 
 export default GeneralTemplate;
+
+export const Head = ({ data }) => {
+  const generals = data.allStrapiGeneral.nodes[0];
+
+  return (
+    <SEO
+      title={generals.SEO.OGTitle}
+      description={generals.SEO.OGDescription}
+    />
+  );
+};

src/templates/offering.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { graphql } from 'gatsby';
-import { GatsbyImage, getSrc } from 'gatsby-plugin-image';
+import { GatsbyImage, getImage, getSrc } from 'gatsby-plugin-image';
 import ReactMarkdown from "react-markdown";
 import Modal from 'react-modal';
 import {
@@ -76,16 +76,8 @@ const OfferingTemplate = ({ data }) => {
 
     )) : null;
 
-  // Get the OGImage
-  let ogImageUrl = getSrc(offering.SEO.OGImage);
-
   return (
     <RedLayout>
-      <SEO
-        title={offering.SEO.OGTitle}
-        description={offering.SEO.OGDescription}
-        image={ogImageUrl}
-      />
       <div className='offering--content-type'>
         <Hero
           title={offering.Title}
@@ -402,3 +394,14 @@ query offeringQuery {
 `;
 
 export default OfferingTemplate;
+
+export const Head = ({ data }) => {
+  const offering = data.allStrapiOffering.nodes[0];
+  return (
+    <SEO
+      title={offering.SEO.OGTitle}
+      description={offering.SEO.OGDescription}
+      image={getSrc(offering.SEO.OGImage.localFile)}
+    />
+  )
+};

src/templates/press-release.js

@@ -11,11 +11,6 @@ const PressTemplate = ({ data }) => {
   const { Title, Body } = press;
   return (
     <RedLayout>
-
-      <SEO
-        title={Title}
-        description='Press release from civicactions.com'
-      />
       <Hero title={Title}/>
       <div className='single--press-releases--main'>
 
@@ -63,3 +58,13 @@ query PressQuery($pagePath: String!) {
 
 export default PressTemplate;
 
+
+export const Head = ({ data }) => {
+  const press = data.allStrapiPressRelease.edges[0].node;
+  return (
+    <SEO
+      title={press.Title}
+      description='Press release from CivicActions'
+    />
+  )
+};