Skip to content

Commit 015eb28

Browse files
committed
Add opengraph meta elements to all pages
1 parent 2250ebc commit 015eb28

File tree

5 files changed

+122
-11
lines changed

5 files changed

+122
-11
lines changed

src/pages/404.js

Lines changed: 34 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,39 @@
11
import React from 'react';
22
import Layout from '../layouts';
3+
import { Helmet } from 'react-helmet';
34

4-
const NotFoundPage = () => (
5-
<Layout>
6-
<div>
7-
<h1>NOT FOUND</h1>
8-
<p>You just hit a route that doesn&#39;t exist... the sadness.</p>
9-
</div>
10-
</Layout>
11-
);
5+
const NotFoundPage = ({ data }) => {
6+
const { siteMetadata } = data.site;
7+
const title = `Page Not Found! - ${siteMetadata.title}`;
8+
9+
return (
10+
<Layout>
11+
<Helmet>
12+
<title>{title}</title>
13+
14+
<meta property="og:title" content={title} />
15+
<meta
16+
property="og:description"
17+
content="A brief introduction to my background"
18+
/>
19+
</Helmet>
20+
21+
<div>
22+
<h1>Page Not Found</h1>
23+
<p>Please check the url and try again.</p>
24+
</div>
25+
</Layout>
26+
);
27+
};
1228

1329
export default NotFoundPage;
30+
31+
export const pageQuery = graphql`
32+
query NotFoundPage {
33+
site {
34+
siteMetadata {
35+
title
36+
}
37+
}
38+
}
39+
`;

src/pages/about.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import me from '../images/me.jpg';
44
import banner from '../images/about-me-banner.jpg';
55
import { OutboundLink } from 'gatsby-plugin-google-analytics';
66
import styled from 'styled-components';
7+
import { Helmet } from 'react-helmet';
78

89
const AboutMeHeader = styled.div`
910
float: left;
@@ -71,9 +72,22 @@ const BannerImage = styled.img`
7172
}
7273
`;
7374

74-
export default function About() {
75+
export default function About({ data }) {
76+
const { siteMetadata } = data.site;
77+
const title = `About Me - ${siteMetadata.title}`;
78+
7579
return (
7680
<Layout>
81+
<Helmet>
82+
<title>{title}</title>
83+
84+
<meta property="og:title" content={title} />
85+
<meta
86+
property="og:description"
87+
content="A brief introduction to my background"
88+
/>
89+
</Helmet>
90+
7791
<BannerImage src={banner} alt="Me standing on stage giving a talk" />
7892

7993
<AboutMeHeader>
@@ -182,3 +196,13 @@ export default function About() {
182196
</Layout>
183197
);
184198
}
199+
200+
export const pageQuery = graphql`
201+
query AboutPage {
202+
site {
203+
siteMetadata {
204+
title
205+
}
206+
}
207+
}
208+
`;

src/pages/blog.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,21 @@ import React from 'react';
22
import { graphql } from 'gatsby';
33
import Link from 'gatsby-link';
44
import Layout from '../layouts';
5+
import { Helmet } from 'react-helmet';
56

67
export default function Index({ data }) {
8+
const { siteMetadata } = data.site;
9+
const title = `Blog - ${siteMetadata.title}`;
10+
711
const { edges: posts } = data.allMarkdownRemark;
812
return (
913
<Layout>
14+
<Helmet>
15+
<title>{title}</title>
16+
17+
<meta property="og:title" content={title} />
18+
</Helmet>
19+
1020
{posts
1121
.filter(post => post.node.frontmatter.title.length > 0)
1222
.map(({ node: post }) => {
@@ -39,5 +49,11 @@ export const pageQuery = graphql`
3949
}
4050
}
4151
}
52+
53+
site {
54+
siteMetadata {
55+
title
56+
}
57+
}
4258
}
4359
`;

src/pages/projects.js

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
11
import React from 'react';
22
import Layout from '../layouts';
33
import { OutboundLink } from 'gatsby-plugin-google-analytics';
4+
import { Helmet } from 'react-helmet';
5+
6+
export default function Projects({ data }) {
7+
const { siteMetadata } = data.site;
8+
const title = `Projects - ${siteMetadata.title}`;
49

5-
export default function Projects() {
610
return (
711
<Layout>
12+
<Helmet>
13+
<title>{title}</title>
14+
15+
<meta property="og:title" content={title} />
16+
<meta
17+
property="og:description"
18+
content="Projects I'm currently working on"
19+
/>
20+
</Helmet>
21+
822
<h2 style={{ fontSize: '2em' }}>Projects</h2>
923

1024
<section>
@@ -157,3 +171,13 @@ export default function Projects() {
157171
</Layout>
158172
);
159173
}
174+
175+
export const pageQuery = graphql`
176+
query ProjectsPage {
177+
site {
178+
siteMetadata {
179+
title
180+
}
181+
}
182+
}
183+
`;

src/pages/talks.js

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,21 @@
11
import React from 'react';
22
import Layout from '../layouts';
33
import { OutboundLink } from 'gatsby-plugin-google-analytics';
4+
import { Helmet } from 'react-helmet';
5+
6+
export default function Talks({ data }) {
7+
const { siteMetadata } = data.site;
8+
const title = `Talks - ${siteMetadata.title}`;
49

5-
export default function Talks() {
610
return (
711
<Layout>
12+
<Helmet>
13+
<title>{title}</title>
14+
15+
<meta property="og:title" content={title} />
16+
<meta property="og:description" content="A list of talks I've given" />
17+
</Helmet>
18+
819
<h2 style={{ fontSize: '2em' }}>Talks</h2>
920

1021
<ul>
@@ -82,3 +93,13 @@ export default function Talks() {
8293
</Layout>
8394
);
8495
}
96+
97+
export const pageQuery = graphql`
98+
query TalksPage {
99+
site {
100+
siteMetadata {
101+
title
102+
}
103+
}
104+
}
105+
`;

0 commit comments

Comments
 (0)