diff --git a/src/components/atoms/SEO.tsx b/src/components/atoms/SEO.tsx
deleted file mode 100644
index ab988baf..00000000
--- a/src/components/atoms/SEO.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React from 'react'
-import { graphql, useStaticQuery } from 'gatsby'
-import { Helmet } from 'react-helmet'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
-import { Post } from '../../@types/Post'
-
-const query = graphql`
- query {
- logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
- edges {
- node {
- relativePath
- }
- }
- }
- }
-`
-
-const createSchemaOrg = (
- blogURL: string,
- title: string,
- postSEO: boolean,
- postURL: string,
- image: string,
- description: string,
- author?: string
-) => {
- const schemaOrgJSONLD: any = [
- {
- '@context': 'http://schema.org',
- '@type': 'WebSite',
- url: blogURL,
- name: title
- }
- ]
-
- if (postSEO) {
- schemaOrgJSONLD.push({
- '@context': 'http://schema.org',
- '@type': 'BlogPosting',
- author,
- publisher: author,
- url: postURL,
- name: title,
- headline: title,
- image: {
- '@type': 'ImageObject',
- url: image
- },
- description
- })
- }
- return schemaOrgJSONLD
-}
-
-const MetaTags = ({
- description,
- image,
- url,
- schema,
- postSEO,
- title
-}: {
- description: string
- image: string
- url: string
- schema: string
- postSEO: boolean
- title: string
-}) => {
- const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
-
- return (
-
-
-
- {/* General tags */}
-
-
-
-
- {/* Schema.org tags */}
-
-
- {/* OpenGraph tags */}
-
- {postSEO && }
-
-
-
-
- {/* Twitter Card tags */}
-
-
-
-
-
-
-
-
- )
-}
-
-export default function SEO({
- post,
- slug,
- postSEO
-}: {
- post?: Post
- slug?: string
- postSEO?: boolean
-}) {
- const data = useStaticQuery(query)
- const logo = data.logo.edges[0].node.relativePath
- const { siteTitle, siteUrl, siteDescription, author } = useSiteMetadata()
-
- let title
- let description
- let image
- let postURL
-
- if (postSEO) {
- const postMeta = post.frontmatter
- title = `${postMeta.title} ¦ ${siteTitle}`
- description = postMeta.description ? postMeta.description : post.excerpt
- image = postMeta.image
- ? postMeta.image.childImageSharp.fluid.src
- : `/${logo}`
- postURL = `${siteUrl}${slug}`
- } else {
- title = `${siteTitle} ¦ ${siteDescription}`
- description = siteDescription
- image = `/${logo}`
- }
-
- image = `${siteUrl}${image}`
- const blogURL = siteUrl
- const url = postSEO ? postURL : blogURL
-
- const schema = createSchemaOrg(
- blogURL,
- title,
- postSEO,
- postURL,
- image,
- description,
- author.name
- )
-
- return (
-
- )
-}
diff --git a/src/components/atoms/SEO/MetaTags.tsx b/src/components/atoms/SEO/MetaTags.tsx
new file mode 100644
index 00000000..d2f139e7
--- /dev/null
+++ b/src/components/atoms/SEO/MetaTags.tsx
@@ -0,0 +1,61 @@
+import React from 'react'
+import { Helmet } from 'react-helmet'
+import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import schemaOrg from './schemaOrg'
+
+function feedLinks(siteUrl: string) {
+ return (
+
+ )
+}
+
+export default function MetaTags({
+ description,
+ image,
+ url,
+ postSEO,
+ title
+}: {
+ description: string
+ image: string
+ url: string
+ postSEO: boolean
+ title: string
+}) {
+ const { siteTitle, siteDescription, siteUrl, author } = useSiteMetadata()
+
+ return (
+
+
+
+
+
+
+
+ {schemaOrg(siteUrl, title, postSEO, url, image, description, author.name)}
+
+
+
+
+
+
+ {postSEO && }
+
+
+
+
+ {feedLinks(siteUrl)}
+
+ )
+}
diff --git a/src/components/atoms/SEO/index.tsx b/src/components/atoms/SEO/index.tsx
new file mode 100644
index 00000000..6204be78
--- /dev/null
+++ b/src/components/atoms/SEO/index.tsx
@@ -0,0 +1,65 @@
+import React from 'react'
+import { graphql, useStaticQuery } from 'gatsby'
+
+import { useSiteMetadata } from '../../../hooks/use-site-metadata'
+import { Post } from '../../../@types/Post'
+import MetaTags from './MetaTags'
+
+const query = graphql`
+ query {
+ logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
+ edges {
+ node {
+ relativePath
+ }
+ }
+ }
+ }
+`
+
+export default function SEO({
+ post,
+ slug,
+ postSEO
+}: {
+ post?: Post
+ slug?: string
+ postSEO?: boolean
+}) {
+ const data = useStaticQuery(query)
+ const logo = data.logo.edges[0].node.relativePath
+ const { siteTitle, siteUrl, siteDescription } = useSiteMetadata()
+
+ let title
+ let description
+ let image
+ let postURL
+
+ if (postSEO) {
+ const postMeta = post.frontmatter
+ title = `${postMeta.title} ¦ ${siteTitle}`
+ description = postMeta.description ? postMeta.description : post.excerpt
+ image = postMeta.image
+ ? postMeta.image.childImageSharp.fluid.src
+ : `/${logo}`
+ postURL = `${siteUrl}${slug}`
+ } else {
+ title = `${siteTitle} ¦ ${siteDescription}`
+ description = siteDescription
+ image = `/${logo}`
+ }
+
+ image = `${siteUrl}${image}`
+ const blogURL = siteUrl
+ const url = postSEO ? postURL : blogURL
+
+ return (
+
+ )
+}
diff --git a/src/components/atoms/SEO/schemaOrg.tsx b/src/components/atoms/SEO/schemaOrg.tsx
new file mode 100644
index 00000000..feb28787
--- /dev/null
+++ b/src/components/atoms/SEO/schemaOrg.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+
+export default function schemaOrg(
+ blogURL: string,
+ title: string,
+ postSEO: boolean,
+ postURL: string,
+ image: string,
+ description: string,
+ author?: string
+) {
+ const schemaOrgJSONLD: any = [
+ {
+ '@context': 'http://schema.org',
+ '@type': 'WebSite',
+ url: blogURL,
+ name: title
+ }
+ ]
+
+ if (postSEO) {
+ schemaOrgJSONLD.push({
+ '@context': 'http://schema.org',
+ '@type': 'BlogPosting',
+ author,
+ publisher: author,
+ url: postURL,
+ name: title,
+ headline: title,
+ image: {
+ '@type': 'ImageObject',
+ url: image
+ },
+ description
+ })
+ }
+
+ return (
+
+ )
+}