Small seo fixes

src/components/Nav.js

@@ -38,6 +38,7 @@ export const Nav = ({ Twitter: { text, url } }) => (
         }}
       >
         <img
+          alt='GraphQL Editor Logo'
           src={require('../assets/logo_small.png')}
           style={{
             margin: 0,

src/components/Twitter.js

@@ -11,6 +11,7 @@ export const Twitter = ({ text, url }) => (
     )}&url=${url}`}
   >
     <img
+      alt="Twitter Shield"
       src="https://img.shields.io/twitter/url/http/shields.io.svg?style=social"
       style={{ margin: 0, height: 30, boxShadow: 'none' }}
     />

src/pages/index.js

@@ -15,6 +15,7 @@ class BlogIndex extends React.Component {
       this,
       'props.data.site.siteMetadata.description'
     )
+    const canonicalUrl = get(this, 'props.location.href')
     const posts = get(this, 'props.data.allMarkdownRemark.edges')
 
     return (
@@ -29,6 +30,7 @@ class BlogIndex extends React.Component {
         <Layout location={this.props.location}>
           <Helmet
             htmlAttributes={{ lang: 'en' }}
+            link={[{rel: 'canonical', href: canonicalUrl}]}
             meta={[{ name: 'description', content: siteDescription }]}
             title={siteTitle}
           />

src/pages/levensthein-algorithm-for-better-faker-experience/index.md

@@ -105,7 +105,7 @@ Voila, we get the correct faker structure.
 ]
 ```
 
-![](https://media.giphy.com/media/a0h7sAqON67nO/giphy.gif)
+![Great Success](https://media.giphy.com/media/a0h7sAqON67nO/giphy.gif)
 
 I've just added this feature to my repo [ts-api-faker](https://github.com/slothking-online/ts-api-faker)
 

src/pages/typescript-backend-with-slothking/index.md

@@ -6,9 +6,9 @@ author: Artur
 
 Making backend with nodejs and typescript is trendy nowadays. In this article I will show you the way how to make it type safe and totaly connected with frontend within a short period of time.
 
-To make this kind of backend I have to use my open source experimental tool [slothking](slothking.online). First of all we will create a diagram for our backend. We will not use any extensions to make everything from scratch.
+To make this kind of backend I have to use my open source experimental tool [slothking](https://slothking.online). First of all we will create a diagram for our backend. We will not use any extensions to make everything from scratch.
 
-1. Go to [Slothking App](slothking.online)
+1. Go to [Slothking App](https://slothking.online)
 2. Register.
 3. Click out this diagram
 

src/templates/blog-post.js

@@ -15,6 +15,7 @@ class BlogPostTemplate extends React.Component {
     const post = this.props.data.markdownRemark
     const siteTitle = get(this.props, 'data.site.siteMetadata.title')
     const siteDescription = post.excerpt
+    const cannonicalUrl = get(this.props, 'location.href')
     const { previous, next } = this.props.pageContext
     return (
       <React.Fragment>
@@ -27,6 +28,7 @@ class BlogPostTemplate extends React.Component {
         <Layout location={this.props.location}>
           <Helmet
             htmlAttributes={{ lang: 'en' }}
+            link={[{rel: 'canonical', href: cannonicalUrl}]}
             meta={[{ name: 'description', content: siteDescription }]}
             title={`${post.frontmatter.title} | ${siteTitle}`}
           />