improve seo

tuan231195 · Aug 12, 2020 · e9d1cbe · e9d1cbe
1 parent db0d169
commit e9d1cbe
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 20 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -2,9 +2,13 @@ const { createProxyMiddleware } = require('http-proxy-middleware');
 
 module.exports = {
 	siteMetadata: {
-		title: `Tuan Nguyen's personal website`,
+		title: `Tuan Nguyen`,
 		author: `Tuan Nguyen`,
-		description: 'A simple website created using Gatsby',
+		description: `Tuan Nguyen's personal website`,
+		siteUrl: `https://vdtn359.com.au/`,
+		social: {
+			twitter: `vdtn359`,
+		},
 	},
 	developMiddleware: (app) => {
 		app.use(

diff --git a/src/components/common/SEO.tsx b/src/components/common/SEO.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useStaticQuery, graphql } from 'gatsby';
+
+export const SEO = ({
+	description,
+	lang,
+	meta = [],
+	title,
+}: {
+	description?: string;
+	lang?: string;
+	meta?: any[];
+	title?: string;
+}) => {
+	const { site } = useStaticQuery(
+		graphql`
+			query {
+				site {
+					siteMetadata {
+						title
+						description
+						social {
+							twitter
+						}
+					}
+				}
+			}
+		`
+	);
+
+	const metaDescription = description || site.siteMetadata.description;
+
+	return (
+		<Helmet
+			htmlAttributes={{
+				lang,
+			}}
+			defer={false}
+			title={title}
+			titleTemplate={`%s | ${site.siteMetadata.title}`}
+			meta={[
+				{
+					name: `description`,
+					content: metaDescription,
+				},
+				{
+					property: `og:title`,
+					content: title,
+				},
+				{
+					property: `og:description`,
+					content: metaDescription,
+				},
+				{
+					property: `og:type`,
+					content: `website`,
+				},
+				{
+					name: `twitter:card`,
+					content: `summary`,
+				},
+				{
+					name: `twitter:creator`,
+					content: site.siteMetadata.social.twitter,
+				},
+				{
+					name: `twitter:title`,
+					content: title,
+				},
+				{
+					name: `twitter:description`,
+					content: metaDescription,
+				},
+			].concat(meta)}
+		/>
+	);
+};
diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import 'twin.macro';
 import { ContactMain } from '~/components/contact/ContactMain';
-import { Helmet } from 'react-helmet';
 import { GreyBackground } from '~/components/ui/containers/Container';
+import { SEO } from '~/components/common/SEO';
 
 const ContactPage = () => (
 	<GreyBackground>
-		<Helmet title='Contact me' defer={false} />
+		<SEO title='Contact me' />
 		<ContactMain />
 	</GreyBackground>
 );

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,12 +3,12 @@ import Headline from '~/components/home/Headline';
 import HomeMain from '~/components/home/HomeMain';
 import 'twin.macro';
 import profile from '~/profile';
-import { Helmet } from 'react-helmet';
 import { GreyBackground } from '~/components/ui/containers/Container';
+import { SEO } from '~/components/common/SEO';
 
 const IndexPage = () => (
 	<>
-		<Helmet title='Home' defer={false} />
+		<SEO title='Home' />
 		<Headline profile={profile.basic} />
 		<GreyBackground id={'content'}>
 			<HomeMain profile={profile} />

diff --git a/src/pages/projects.tsx b/src/pages/projects.tsx
@@ -2,12 +2,12 @@ import React from 'react';
 import 'twin.macro';
 import { ProjectMain } from '~/components/projects/ProjectMain';
 import profile from '~/profile';
-import { Helmet } from 'react-helmet';
 import { GreyBackground } from '~/components/ui/containers/Container';
+import { SEO } from '~/components/common/SEO';
 
 const ProjectPage = () => (
 	<GreyBackground>
-		<Helmet title='Projects' defer={false} />
+		<SEO title='Projects' />
 		<ProjectMain projects={profile.projects} />
 	</GreyBackground>
 );

diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx
@@ -12,7 +12,7 @@ import { MDXRenderer } from 'gatsby-plugin-mdx';
 import { wrapRootElement } from '~/components/markdown/mdx';
 import { ColorBadge } from '~/components/ui/misc/ColorBadge';
 import { Groups } from '~/components/ui/groups/Groups';
-import { Helmet } from 'react-helmet';
+import { SEO } from '~/components/common/SEO';
 
 export const query = graphql`
 	query($slug: String!) {
@@ -41,7 +41,7 @@ const BlogTemplate = ({
 }) =>
 	wrapRootElement(
 		<GreyBackground>
-			<Helmet defer={false} title={frontmatter.title} />
+			<SEO title={frontmatter.title} />
 			<Container tw={'sm:py-6 flex items-center'}>
 				<Card className={'sm:max-w-4xl w-full'}>
 					{frontmatter.image && (

diff --git a/src/templates/Blogs.tsx b/src/templates/Blogs.tsx
@@ -1,20 +1,19 @@
-import { graphql } from 'gatsby';
+import { graphql, navigate } from 'gatsby';
 import { BlogRoll } from '~/components/blogs/BlogRoll';
-import { Helmet } from 'react-helmet';
 import React from 'react';
 import 'twin.macro';
 import {
 	Container,
 	GreyBackground,
 } from '~/components/ui/containers/Container';
 import { Pagination } from '~/components/ui/containers/Pagination';
-import { navigate } from 'gatsby';
+import { SEO } from '~/components/common/SEO';
 
 export default function Blogs({ data, pageContext }) {
 	const { currentPage, numPages } = pageContext;
 	return (
 		<GreyBackground>
-			<Helmet title='Blog posts' defer={false} />
+			<SEO title='Blog posts' />
 			<Container className={'items-center px-5 py-6'}>
 				<h4 tw={'type-h4 text-center mb-4'}>Blogs</h4>
 				<BlogRoll blogs={data.allMdx.nodes} />

diff --git a/src/templates/PageTemplate.tsx b/src/templates/PageTemplate.tsx
@@ -7,13 +7,13 @@ import {
 import { Card } from '~/components/ui/containers/Card';
 import { wrapRootElement } from '~/components/markdown/mdx';
 import { useSiteMetadata } from '~/utils/hooks/site-metadata';
-import { Helmet } from 'react-helmet';
+import { SEO } from '~/components/common/SEO';
 
 const PageTemplate = ({ children }) => {
 	const { title } = useSiteMetadata();
 	return wrapRootElement(
 		<GreyBackground>
-			<Helmet defer={false} title={title} />
+			<SEO title={title} />
 			<Container tw={'sm:py-6'}>
 				<Card>{children}</Card>
 			</Container>

diff --git a/src/templates/TaggedBlogs.tsx b/src/templates/TaggedBlogs.tsx
@@ -1,20 +1,19 @@
-import { graphql } from 'gatsby';
+import { graphql, navigate } from 'gatsby';
 import { BlogRoll } from '~/components/blogs/BlogRoll';
-import { Helmet } from 'react-helmet';
 import React from 'react';
 import 'twin.macro';
 import {
 	Container,
 	GreyBackground,
 } from '~/components/ui/containers/Container';
 import { Pagination } from '~/components/ui/containers/Pagination';
-import { navigate } from 'gatsby';
+import { SEO } from '~/components/common/SEO';
 
 export default function TaggedBlogs({ data, pageContext }) {
 	const { tag, currentPage, numPages } = pageContext;
 	return (
 		<GreyBackground>
-			<Helmet title={`Tags: ${tag}`} defer={false} />
+			<SEO title={`Tags: ${tag}`} />
 			<Container className={'items-center px-5 py-6'}>
 				<h4 tw={'type-h4 text-center mb-4'}>Tags: {tag}</h4>
 				<BlogRoll blogs={data.allMdx.nodes} />