feat: configuring SEO and added past assets

franciscojunior10 · Apr 17, 2020 · dcea613 · dcea613
1 parent 684654f
commit dcea613
Show file tree

Hide file tree

Showing 8 changed files with 13,930 additions and 16 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,11 +1,13 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
+    title: `Francisco Júnior`,
     description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    author: `@franciscojunior10`,
+    siteUrl: `https://franciscojunior10.github.io/`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-sitemap`,
     {
       resolve: `gatsby-source-filesystem`,
       options: {

diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "gatsby-plugin-offline": "^3.0.41",
     "gatsby-plugin-react-helmet": "^3.1.24",
     "gatsby-plugin-sharp": "^2.4.13",
+    "gatsby-plugin-sitemap": "^2.3.3",
     "gatsby-source-filesystem": "^2.1.56",
     "gatsby-transformer-sharp": "^2.3.19",
     "prop-types": "^15.7.2",

diff --git a/src/assets/images/perfil.jpg b/src/assets/images/perfil.jpg
diff --git a/src/components/seo.js → src/components/SEO/index.js b/src/components/seo.js → src/components/SEO/index.js
@@ -10,7 +10,9 @@ import PropTypes from "prop-types"
 import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
-function SEO({ description, lang, meta, title }) {
+import ogImage from "../../assets/images/perfil.jpg"
+
+function SEO({ description, lang, meta, title, keywords }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -19,6 +21,7 @@ function SEO({ description, lang, meta, title }) {
             title
             description
             author
+            siteUrl
           }
         }
       }
@@ -32,13 +35,33 @@ function SEO({ description, lang, meta, title }) {
       htmlAttributes={{
         lang,
       }}
-      title={title}
-      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      title={title || site.siteMetadata.title}
+      titleTemplate={title && `%s | ${site.siteMetadata.title}`}
       meta={[
         {
           name: `description`,
           content: metaDescription,
         },
+        {
+          name: `keywords`,
+          content: keywords,
+        },
+        {
+          name: `twitter:card`,
+          content: `summary`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author,
+        },
+        {
+          name: `twitter:title`,
+          content: title,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
         {
           property: `og:title`,
           content: title,
@@ -52,20 +75,28 @@ function SEO({ description, lang, meta, title }) {
           content: `website`,
         },
         {
-          name: `twitter:card`,
-          content: `summary`,
+          property: `og:url`,
+          content: site.siteMetadata.siteUrl,
         },
         {
-          name: `twitter:creator`,
-          content: site.siteMetadata.author,
+          property: `og:image`,
+          content: `${site.siteMetadata.siteUrl}${ogImage}`,
         },
         {
-          name: `twitter:title`,
-          content: title,
+          property: `og:image:alt`,
+          content: metaDescription,
         },
         {
-          name: `twitter:description`,
-          content: metaDescription,
+          property: `og:image:type`,
+          content: `image/jpg`,
+        },
+        {
+          property: `og:image:width`,
+          content: `1944`,
+        },
+        {
+          property: `og:image:height`,
+          content: `2592`,
         },
       ].concat(meta)}
     />
@@ -76,13 +107,15 @@ SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
+  keywords: ``,
 }
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
+  keywords: PropTypes.string,
 }
 
 export default SEO
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -1,7 +1,7 @@
 import React from "react"
 
 import Layout from "../components/layout"
-import SEO from "../components/seo"
+import SEO from "../components/SEO"
 
 const NotFoundPage = () => (
   <Layout>

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -3,11 +3,14 @@ import { Link } from "gatsby"
 
 import Layout from "../components/layout"
 import Image from "../components/image"
-import SEO from "../components/seo"
+import SEO from "../components/SEO"
 
 const IndexPage = () => (
   <Layout>
-    <SEO title="Home" />
+    <SEO
+      description="full-stack developer, developing apps"
+      keywords="ReactJS, React Native, Node, Gatsby, Front-end, Back-end, API"
+    />
     <h1>Francisco Júnior</h1>
     <h2>Full Stack Developer</h2>
     <section>

diff --git a/src/pages/projects.js b/src/pages/projects.js
@@ -2,8 +2,15 @@ import React from 'react';
 
 import Layout from '../components/layout';
 
+import SEO from '../components/SEO';
+
 const Projects = () => (
     <Layout>
+        <SEO 
+            title="Projects" 
+            description="full-stack developer, developing apps"
+            keywords="ReactJS, React Native, Node, Gatsby, Front-end, Back-end, API"
+        />
         projects
     </Layout>
 )