upd seo

gatsby-config.js

@@ -7,6 +7,7 @@
 module.exports = {
   siteMetadata: {
     title: 'devthread.ru',
+    keywords: 'веб разработка, javascript, seo, программирование, reactjs, graphql',
     siteName: 'Cборник статей и руководств - devthread.ru',
     titleTemplate: '%s · статьи и руководства по веб-разработке',
     description: 'Cборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',

src/components/Article/Article.js

@@ -12,12 +12,11 @@ import VkIcon from '../../images/vk-icon.svg'
 import TwitterIcon from '../../images/twitter-icon__large.svg'
 import FacebookIcon from '../../images/facebook-icon__large.svg'
 
-const Article = ({ data: { slug, title, image, description, category, tags, time, date }, html }) => {
+const Article = ({ data: { slug, keywords, title, image, description, category, tags, time, date }, html }) => {
   const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
-
   return (
     <>
-      <SEO title={title} description={description} image={`${siteUrl}${image.childImageSharp.fluid.src}`} type='article' />
+      <SEO title={title} keywords={keywords.join(', ')} description={description} image={`${siteUrl}${image.childImageSharp.fluid.src}`} type='article' />
       <div className="article">
         <article>
           <div className="article-info">

src/components/SEO/SEO.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 
-const SEO = ({ title, description, image, type }) => {
+const SEO = ({ title, keywords, description, image, type, canonical }) => {
   const { pathname } = useLocation()
   const { siteMetadata } = useSiteMetadataQuery()
 
@@ -14,12 +14,17 @@ const SEO = ({ title, description, image, type }) => {
     type: type || 'website',
     image: image || 'custom image url...',
     description: description || siteMetadata.description,
-    url: `${siteMetadata.siteUrl}${pathname}`
+    keywords: keywords || siteMetadata.keywords,
+    url: `${siteMetadata.siteUrl}${pathname}`,
+    canonical: canonical || `${siteMetadata.siteUrl}${pathname}`
   }
 
   return (
     <Helmet title={seo.title} titleTemplate={siteMetadata.titleTemplate}>
       <meta name="description" content={seo.description} />
+      {seo.keywords && (
+        <meta name='keywords' content={seo.keywords} />
+      )}
       <meta property='og:locale' content='ru_RU' />
       <meta property="og:url" content={seo.url} />
       <meta property='og:title' content={seo.title}
@@ -35,6 +40,7 @@ const SEO = ({ title, description, image, type }) => {
       {seo.description && (
         <meta property="og:description" content={seo.description} />
       )}
+      <link rel="canonical" href={seo.canonical} />
       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />

src/hooks/useSiteMetadataQuery.js

@@ -6,6 +6,7 @@ const useSiteMetadata = () => {
       site {
         siteMetadata {
           title
+          keywords
           titleTemplate
           siteName
           description

src/pages/books.js

@@ -55,7 +55,7 @@ export const query = graphql`
             title
             image {
               childImageSharp {
-                fluid {
+                fluid(maxWidth: 1400) {
                   ...GatsbyImageSharpFluid
                 }
               }

src/templates/articleTemplate.js

@@ -35,6 +35,7 @@ export const pageQuery = graphql`
       html
       frontmatter {
         slug
+        keywords
         title
         image {
           childImageSharp {

src/templates/categoryTemplate.js

@@ -2,6 +2,7 @@ import React from "react"
 import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -14,9 +15,11 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 const CategoryPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
+  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+ 
   return (
     <Layout>
-      <SEO title={title} />
+      <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
           <Row>
@@ -60,7 +63,7 @@ export const pageQuery = graphql`
             title
             image {
               childImageSharp {
-                fluid {
+                fluid(maxWidth: 1400) {
                   ...GatsbyImageSharpFluid
                 }
               }

src/templates/tagTemplate.js

@@ -2,6 +2,7 @@ import React from "react"
 import { Main } from '../ui/ui'
 import { Grid, Row, Col } from 'react-flexbox-grid'
 import { graphql } from 'gatsby'
+import useSiteMetadataQuery from '../hooks/useSiteMetadataQuery'
 import useCategoriesQuery from '../hooks/useCategoriesQuery'
 import SEO from '../components/SEO/SEO'
 import Layout from '../components/Layout/Layout'
@@ -14,9 +15,11 @@ import Newsletter from '../components/Newsletter/Newsletter'
 
 const TagPage = ({ data: { allMarkdownRemark: edges }, pageContext: { title } }) => {
   const { categories } = useCategoriesQuery()
+  const { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+  
   return (
     <Layout>
-      <SEO title={title} />
+      <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
           <Row>
@@ -60,7 +63,7 @@ export const pageQuery = graphql`
             title
             image {
               childImageSharp {
-                fluid {
+                fluid(maxWidth: 1400) {
                   ...GatsbyImageSharpFluid
                 }
               }

static/admin/config.yml

@@ -12,6 +12,7 @@ collections:
     fields:
       - {label: "Template Key", name: "templateKey", wisdget: "hidden", default: "article"}
       - {label: "Slug", name: "slug", widget: "string"}
+      - {label: "Keywords", name: "keywords", widget: "list"}
       - {label: "Время чтения", name: "time", widget: "string"}
       - {label: "Заголовок", name: "title", widget: "string"}
       - {label: "Популярная статья", name: "popular", widget: "boolean", default: false}