Skip to content

Commit ddf1cac

Browse files
committed
seo
1 parent b4c5105 commit ddf1cac

File tree

3 files changed

+99
-10
lines changed

3 files changed

+99
-10
lines changed

gatsby-config.ts

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,22 @@ module.exports = {
1414
name: `Lenny`,
1515
summary: `프론트엔드를 주로 하고 있는 개발자입니다.\n꾸준히 공부해야하는데 빈둥거리는걸 너무 좋아해서 탈이에요. \n 여러분 오늘도 화이팅. 방문해주셔서 감사해요.`,
1616
},
17-
description: `lenny.dev`,
17+
description: `프론트엔드 개발자 Lenny의 기술 블로그. React, TypeScript, JavaScript 등 웹 개발 관련 글과 일상을 공유합니다.`,
1818
siteUrl: `https://pjj186.github.io/`,
1919
social: {
2020
github: `pjj186`,
2121
},
22+
keywords: [
23+
`블로그`,
24+
`프론트엔드`,
25+
`React`,
26+
`TypeScript`,
27+
`JavaScript`,
28+
`웹개발`,
29+
`TIL`,
30+
],
31+
image: `/icons/icon-512x512.png`,
32+
twitterUsername: `@pjj186`,
2233
},
2334
plugins: [
2435
`gatsby-plugin-image`,

src/components/seo.tsx

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,22 +8,31 @@
88
import * as React from "react"
99
import { useStaticQuery, graphql } from "gatsby"
1010

11+
interface SeoProps {
12+
description?: string
13+
title: string
14+
children?: React.ReactNode
15+
image?: string
16+
pathname?: string
17+
article?: boolean
18+
}
19+
1120
const Seo = ({
1221
description,
1322
title,
1423
children,
15-
}: {
16-
description?: any
17-
title?: any
18-
children?: any
19-
}) => {
24+
image,
25+
pathname = "",
26+
article = false,
27+
}: SeoProps) => {
2028
const { site } = useStaticQuery(
2129
graphql`
2230
query {
2331
site {
2432
siteMetadata {
2533
title
2634
description
35+
siteUrl
2736
social {
2837
github
2938
}
@@ -35,21 +44,34 @@ const Seo = ({
3544

3645
const metaDescription = description || site.siteMetadata.description
3746
const defaultTitle = site.siteMetadata?.title
47+
const siteUrl = site.siteMetadata?.siteUrl
48+
const fullUrl = siteUrl + pathname
49+
const metaImage = image
50+
? siteUrl + image
51+
: `${siteUrl}/icons/icon-512x512.png`
3852

3953
return (
4054
<>
4155
<title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
4256
<meta name="description" content={metaDescription} />
57+
<meta property="og:url" content={fullUrl} />
4358
<meta property="og:title" content={title} />
4459
<meta property="og:description" content={metaDescription} />
45-
<meta property="og:type" content="website" />
46-
<meta name="twitter:card" content="summary" />
60+
<meta property="og:type" content={article ? "article" : "website"} />
61+
<meta property="og:image" content={metaImage} />
62+
<meta property="og:image:width" content="512" />
63+
<meta property="og:image:height" content="512" />
64+
<meta name="twitter:card" content="summary_large_image" />
4765
<meta
4866
name="twitter:creator"
49-
content={site.siteMetadata?.social?.github || ``}
67+
content={`@${site.siteMetadata?.social?.github || ``}`}
5068
/>
5169
<meta name="twitter:title" content={title} />
5270
<meta name="twitter:description" content={metaDescription} />
71+
<meta name="twitter:image" content={metaImage} />
72+
<meta name="robots" content="index, follow" />
73+
<meta name="googlebot" content="index, follow" />
74+
<link rel="canonical" href={fullUrl} />
5375
{children}
5476
</>
5577
)

src/templates/blog-post.tsx

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ interface BlogPostTemplateProps {
4242
description?: string
4343
category?: string
4444
tags?: string[]
45+
thumbnail?: {
46+
childImageSharp?: {
47+
gatsbyImageData?: any
48+
}
49+
}
4550
}
4651
fields: {
4752
slug: string
@@ -169,12 +174,53 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
169174

170175
export const Head: React.FC<BlogPostTemplateProps> = ({
171176
data: { markdownRemark: post },
177+
location,
172178
}) => {
179+
const thumbnail =
180+
post.frontmatter.thumbnail?.childImageSharp?.gatsbyImageData?.images
181+
?.fallback?.src
182+
const fullUrl = `https://pjj186.github.io${location.pathname}`
183+
184+
const jsonLd = {
185+
"@context": "https://schema.org",
186+
"@type": "BlogPosting",
187+
headline: post.frontmatter.title,
188+
description: post.frontmatter.description || post.excerpt,
189+
author: {
190+
"@type": "Person",
191+
name: "Lenny",
192+
url: "https://pjj186.github.io",
193+
},
194+
datePublished: post.frontmatter.date || post.fields?.autoDate,
195+
dateModified: post.frontmatter.date || post.fields?.autoDate,
196+
url: fullUrl,
197+
image: thumbnail
198+
? `https://pjj186.github.io${thumbnail}`
199+
: "https://pjj186.github.io/icons/icon-512x512.png",
200+
publisher: {
201+
"@type": "Organization",
202+
name: "Lenny.dev",
203+
logo: {
204+
"@type": "ImageObject",
205+
url: "https://pjj186.github.io/icons/icon-512x512.png",
206+
},
207+
},
208+
mainEntityOfPage: {
209+
"@type": "WebPage",
210+
"@id": fullUrl,
211+
},
212+
}
213+
173214
return (
174215
<Seo
175216
title={post.frontmatter.title}
176217
description={post.frontmatter.description || post.excerpt}
177-
/>
218+
pathname={location.pathname}
219+
image={thumbnail}
220+
article={true}
221+
>
222+
<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
223+
</Seo>
178224
)
179225
}
180226

@@ -201,6 +247,16 @@ export const pageQuery = graphql`
201247
description
202248
category
203249
tags
250+
thumbnail {
251+
childImageSharp {
252+
gatsbyImageData(
253+
width: 1200
254+
height: 630
255+
placeholder: BLURRED
256+
formats: [AUTO, WEBP, AVIF]
257+
)
258+
}
259+
}
204260
}
205261
fields {
206262
slug

0 commit comments

Comments
 (0)