From 36f18bd5628783635475ffd1495bc4026d4b544b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 25 Nov 2019 22:32:24 +0100 Subject: [PATCH] SEO componennt reorg --- src/components/atoms/SEO.tsx | 171 ------------------------- src/components/atoms/SEO/MetaTags.tsx | 61 +++++++++ src/components/atoms/SEO/index.tsx | 65 ++++++++++ src/components/atoms/SEO/schemaOrg.tsx | 43 +++++++ 4 files changed, 169 insertions(+), 171 deletions(-) delete mode 100644 src/components/atoms/SEO.tsx create mode 100644 src/components/atoms/SEO/MetaTags.tsx create mode 100644 src/components/atoms/SEO/index.tsx create mode 100644 src/components/atoms/SEO/schemaOrg.tsx 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 ( + + ) +}