Skip to content

Commit

Permalink
feat: SEO
Browse files Browse the repository at this point in the history
  • Loading branch information
@prvnbist
prvnbist committed Jan 11, 2020
1 parent b48de7c commit 15fdbb7
Show file tree
Hide file tree
Showing 9 changed files with 105 additions and 8 deletions.
3 changes: 2 additions & 1 deletion gatsby-config.js
View file
Expand Up @@ -27,6 +27,7 @@ module.exports = {
trackingId: process.env.TRACK_ID,
head: true
}
}
},
`gatsby-plugin-react-helmet`
]
}
2 changes: 2 additions & 0 deletions package.json
View file
Expand Up @@ -18,11 +18,13 @@
"gatsby-image": "^2.2.38",
"gatsby-plugin-google-analytics": "^2.1.32",
"gatsby-plugin-mdx": "^1.0.67",
"gatsby-plugin-react-helmet": "^3.1.21",
"gatsby-plugin-styled-components": "^3.1.17",
"gatsby-source-filesystem": "^2.1.46",
"prism-react-renderer": "^1.0.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-helmet": "^5.2.1",
"styled-components": "^4.4.1"
},
"devDependencies": {
Expand Down
10 changes: 9 additions & 1 deletion src/pages/blog/index.jsx
View file
Expand Up @@ -26,7 +26,15 @@ const BlogPage = () => {
}
`)
return (
<Layout>
<Layout
meta={{
title: 'Blog | Praveen Bisht | Software Engineer',
description:
"Hey👋🏼, I’m Praveen, a software engineer based in New Delhi who enjoys building apps from idea to implementation. I've experience with both design & development(front-end & back-end).",
keywords:
'front end, back end, design, html, pug, css, scss, javascript, nodejs, reactjs, graphql, expressjs, mongoose, mongodb, gatsby, figma, design, user interface, user experience',
url: '/blog'
}}>
<PageHeading>Articles</PageHeading>
<Articles>
{articles.map(({ node }, index) => {
Expand Down
10 changes: 9 additions & 1 deletion src/pages/code/index.jsx
View file
Expand Up @@ -42,7 +42,15 @@ export default () => {
}
])
return (
<Layout>
<Layout
meta={{
title: 'Code | Praveen Bisht | Software Engineer',
description:
"Hey👋🏼, I’m Praveen, a software engineer based in New Delhi who enjoys building apps from idea to implementation. I've experience with both design & development(front-end & back-end).",
keywords:
'front end, back end, design, html, pug, css, scss, javascript, nodejs, reactjs, graphql, expressjs, mongoose, mongodb, gatsby, figma, design, user interface, user experience',
url: '/code'
}}>
<PageHeading>Code</PageHeading>
<Projects>
{projects.map(project => (
Expand Down
10 changes: 9 additions & 1 deletion src/pages/design/index.jsx
View file
Expand Up @@ -24,7 +24,15 @@ export default () => {
}
])
return (
<Layout>
<Layout
meta={{
title: 'Design | Praveen Bisht | Software Engineer',
description:
"Hey👋🏼, I’m Praveen, a software engineer based in New Delhi who enjoys building apps from idea to implementation. I've experience with both design & development(front-end & back-end).",
keywords:
'accessibility, photoshop, typography, web, ux, ui, illustrator, after effects, aesthetics, animation, figma, design, user interface, user experience',
url: '/design'
}}>
<PageHeading>Designs</PageHeading>
<Projects>
{projects.map(project => (
Expand Down
9 changes: 8 additions & 1 deletion src/pages/index.jsx
View file
Expand Up @@ -24,7 +24,14 @@ const IndexPage = () => {
{ title: 'Codepen👨‍💻', url: 'https://www.codepen.com/prvnbist' }
])
return (
<Layout>
<Layout
meta={{
title: 'Praveen Bisht | Software Engineer',
description:
"Hey👋🏼, I’m Praveen, a software engineer based in New Delhi who enjoys building apps from idea to implementation. I've experience with both design & development(front-end & back-end).",
keywords:
'front end, back end, design, html, pug, css, scss, javascript, nodejs, reactjs, graphql, expressjs, mongoose, mongodb, gatsby, figma, design, user interface, user experience'
}}>
<StyledWrapper>
<div>
<StyledHeading>
Expand Down
26 changes: 25 additions & 1 deletion src/sections/Layout/index.jsx
View file
@@ -1,5 +1,6 @@
import React from 'react'
import { ThemeProvider } from 'styled-components'
import { Helmet } from 'react-helmet'

import Navbar from '../Navbar'

Expand Down Expand Up @@ -32,10 +33,33 @@ const theme = {
}
}

const Layout = ({ children }) => {
const Layout = ({ children, meta }) => {
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Helmet>
<title>{meta.title}</title>
<meta name="robots" content="index, follow" />
<meta name="description" content={meta.description} />
<meta name="keywords" content={meta.keywords} />
<meta name="author" content={meta.author} />
{/* Open Graph */}
<meta property="og:title" content={meta.title} />
<meta property="og:description" content={meta.description} />
<meta
property="og:url"
content={
meta.url
? `https://www.prvnbist.com${meta.url}`
: 'https://www.prvnbist.com'
}
/>
<meta property="og:image" content={meta.image || ''} />
{/* Twitter tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@prvnbist" />
<meta name="twitter:creator" content="@prvnbist" />
</Helmet>
<Navbar />
<StyledWrapper>
<div>{children}</div>
Expand Down
12 changes: 11 additions & 1 deletion src/templates/blog/index.jsx
View file
Expand Up @@ -19,14 +19,24 @@ export const query = graphql`
}
timeToRead
body
excerpt
fields {
slug
}
}
}
`

const Blog = props => {
const post = props.data.mdx
return (
<Layout>
<Layout
meta={{
title: post.frontmatter.title,
description: post.excerpt,
keywords: post.frontmatter.tags,
url: `/blog/${post.fields.slug}`
}}>
<Link to="/blog">
<TextButton
type="outline"
Expand Down
31 changes: 30 additions & 1 deletion yarn.lock
View file
Expand Up @@ -4724,6 +4724,13 @@ gatsby-plugin-page-creator@^2.1.38:
lodash "^4.17.15"
micromatch "^3.1.10"

gatsby-plugin-react-helmet@^3.1.21:
version "3.1.21"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.1.21.tgz#659f31020295f42d017e2eb03175d73516ab824d"
integrity sha512-6LZ2LEYTwqD+ZqyCH55mVpk2xEXbQoCTfijP1W4ZCQsKtpWGJP+vyd6b96FWVyEb2k5LsQ1u+jk4R8xXULSX+w==
dependencies:
"@babel/runtime" "^7.7.6"

gatsby-plugin-styled-components@^3.1.17:
version "3.1.17"
resolved "https://registry.yarnpkg.com/gatsby-plugin-styled-components/-/gatsby-plugin-styled-components-3.1.17.tgz#d17ee15608b42b33a82b25035f2824e80c77a64c"
Expand Down Expand Up @@ -8781,6 +8788,21 @@ react-error-overlay@^3.0.0:
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
integrity sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw==

react-fast-compare@^2.0.2:
version "2.0.4"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==

react-helmet@^5.2.1:
version "5.2.1"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"
integrity sha512-CnwD822LU8NDBnjCpZ4ySh8L6HYyngViTZLfBBb3NjtrpN8m49clH8hidHouq20I51Y6TpCTISCBbqiY5GamwA==
dependencies:
object-assign "^4.1.1"
prop-types "^15.5.4"
react-fast-compare "^2.0.2"
react-side-effect "^1.1.0"

react-hot-loader@^4.12.18:
version "4.12.18"
resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.18.tgz#a9029e34af2690d76208f9a35189d73c2dfea6a7"
Expand Down Expand Up @@ -8815,6 +8837,13 @@ react-reconciler@^0.24.0:
prop-types "^15.6.2"
scheduler "^0.18.0"

react-side-effect@^1.1.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-1.2.0.tgz#0e940c78faba0c73b9b0eba9cd3dda8dfb7e7dae"
integrity sha512-v1ht1aHg5k/thv56DRcjw+WtojuuDHFUgGfc+bFHOWsF4ZK6C2V57DO0Or0GPsg6+LSTE0M6Ry/gfzhzSwbc5w==
dependencies:
shallowequal "^1.0.1"

react@^16.12.0:
version "16.12.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.12.0.tgz#0c0a9c6a142429e3614834d5a778e18aa78a0b83"
Expand Down Expand Up @@ -9554,7 +9583,7 @@ shallow-compare@^1.2.2:
resolved "https://registry.yarnpkg.com/shallow-compare/-/shallow-compare-1.2.2.tgz#fa4794627bf455a47c4f56881d8a6132d581ffdb"
integrity sha512-LUMFi+RppPlrHzbqmFnINTrazo0lPNwhcgzuAXVVcfy/mqPDrQmHAyz5bvV0gDAuRFrk804V0HpQ6u9sZ0tBeg==

shallowequal@^1.1.0:
shallowequal@^1.0.1, shallowequal@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
Expand Down

0 comments on commit 15fdbb7

Please sign in to comment.