og & data

gatsby-config.js

@@ -7,9 +7,10 @@
 module.exports = {
   siteMetadata: {
     title: 'devthread.ru',
+    siteName: 'Cборник статей и руководств - devthread.ru',
     titleTemplate: '%s · статьи и руководства по веб-разработке',
-    description: 'сборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',
-    url: 'https://devthread.ru',
+    description: 'Cборник статей и руководств по тематике веб-разработки и IT для того чтобы помочь вам',
+    url: 'https://devthread.netlify.app',
     menuLinks: [
       {
         name: 'Статьи',

src/components/Article/Article.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types'
 import SEO from '../SEO/SEO'
 import Img from "gatsby-image"
+import useSiteMetadataQuery from '../../hooks/useSiteMetadataQuery'
 import slugify from '../../helpers/slugify'
 import { Link } from 'gatsby'
 import './Article.scss'
@@ -12,9 +13,11 @@ 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 { siteMetadata: { siteUrl } } = useSiteMetadataQuery()
+
   return (
     <>
-      <SEO title={title} description={description} />
+      <SEO title={title} description={description} image={`${siteUrl}${image.childImageSharp.fluid.src}`} type='article' />
       <div className="article">
         <article>
           <div className="article-info">
@@ -42,13 +45,13 @@ const Article = ({ data: { slug, title, image, description, category, tags, time
           <div className="article-share">
             <span>Поделиться:</span>
             <div className="article-share__social">
-              <a href={`/article/${slug}`}>
+              <a href={`https://vk.com/share.php?url=${siteUrl}/article/${slug}&title=${title}&image=${siteUrl}${image.childImageSharp.fluid.src}`} target='_blank' rel='noreferrer'>
                 <VkIcon />
               </a>
-              <a href={`/article/${slug}`}>
+              <a href={`https://twitter.com/intent/tweet?text=${title}&url=${siteUrl}/article/${slug}&image=${siteUrl}${image.childImageSharp.fluid.src}`} target='_blank' rel='noreferrer'>
                 <TwitterIcon />
               </a>
-              <a href={`/article/${slug}`}>
+              <a href={`https://www.facebook.com/sharer/sharer.php?u=${siteUrl}/article/${slug}&t=${title}`} target='_blank' rel='noreferrer'>
                 <FacebookIcon />
               </a>
             </div>

src/components/SEO/SEO.js

@@ -4,12 +4,15 @@ import PropTypes from 'prop-types'
 import { Helmet } from 'react-helmet'
 import { useLocation } from '@reach/router'
 
-const SEO = ({ title, description }) => {
+const SEO = ({ title, description, image, type }) => {
   const { pathname } = useLocation()
   const { siteMetadata } = useSiteMetadataQuery()
 
   const seo = {
     title: title || siteMetadata.title,
+    siteName: siteMetadata.siteName,
+    type: type || 'website',
+    image: image || 'custom image url...',
     description: description || siteMetadata.description,
     url: `${siteMetadata.siteUrl}${pathname}`
   }
@@ -17,7 +20,16 @@ const SEO = ({ title, description }) => {
   return (
     <Helmet title={seo.title} titleTemplate={siteMetadata.titleTemplate}>
       <meta name="description" content={seo.description} />
+      <meta property='og:locale' content='ru_RU' />
       <meta property="og:url" content={seo.url} />
+      <meta property='og:site_name' content={seo.siteName}
+      />
+      {seo.type && (
+        <meta property='og:type' content={seo.type} />
+      )}
+      {seo.image && (
+        <meta property="og:image" content={seo.image} />
+      )}
       {seo.description && (
         <meta property="og:description" content={seo.description} />
       )}

src/hooks/useSiteMetadataQuery.js

@@ -7,6 +7,7 @@ const useSiteMetadata = () => {
         siteMetadata {
           title
           titleTemplate
+          siteName
           description
           siteUrl: url
           menuLinks {