seo

Author: pjj186

gatsby-config.ts

@@ -14,11 +14,22 @@ module.exports = {
       name: `Lenny`,
       summary: `프론트엔드를 주로 하고 있는 개발자입니다.\n꾸준히 공부해야하는데 빈둥거리는걸 너무 좋아해서 탈이에요. \n 여러분 오늘도 화이팅. 방문해주셔서 감사해요.`,
     },
-    description: `lenny.dev`,
+    description: `프론트엔드 개발자 Lenny의 기술 블로그. React, TypeScript, JavaScript 등 웹 개발 관련 글과 일상을 공유합니다.`,
     siteUrl: `https://pjj186.github.io/`,
     social: {
       github: `pjj186`,
     },
+    keywords: [
+      `블로그`,
+      `프론트엔드`,
+      `React`,
+      `TypeScript`,
+      `JavaScript`,
+      `웹개발`,
+      `TIL`,
+    ],
+    image: `/icons/icon-512x512.png`,
+    twitterUsername: `@pjj186`,
   },
   plugins: [
     `gatsby-plugin-image`,

src/components/seo.tsx

@@ -8,22 +8,31 @@
 import * as React from "react"
 import { useStaticQuery, graphql } from "gatsby"
 
+interface SeoProps {
+  description?: string
+  title: string
+  children?: React.ReactNode
+  image?: string
+  pathname?: string
+  article?: boolean
+}
+
 const Seo = ({
   description,
   title,
   children,
-}: {
-  description?: any
-  title?: any
-  children?: any
-}) => {
+  image,
+  pathname = "",
+  article = false,
+}: SeoProps) => {
   const { site } = useStaticQuery(
     graphql`
       query {
         site {
           siteMetadata {
             title
             description
+            siteUrl
             social {
               github
             }
@@ -35,21 +44,34 @@ const Seo = ({
 
   const metaDescription = description || site.siteMetadata.description
   const defaultTitle = site.siteMetadata?.title
+  const siteUrl = site.siteMetadata?.siteUrl
+  const fullUrl = siteUrl + pathname
+  const metaImage = image
+    ? siteUrl + image
+    : `${siteUrl}/icons/icon-512x512.png`
 
   return (
     <>
       <title>{defaultTitle ? `${title} | ${defaultTitle}` : title}</title>
       <meta name="description" content={metaDescription} />
+      <meta property="og:url" content={fullUrl} />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={metaDescription} />
-      <meta property="og:type" content="website" />
-      <meta name="twitter:card" content="summary" />
+      <meta property="og:type" content={article ? "article" : "website"} />
+      <meta property="og:image" content={metaImage} />
+      <meta property="og:image:width" content="512" />
+      <meta property="og:image:height" content="512" />
+      <meta name="twitter:card" content="summary_large_image" />
       <meta
         name="twitter:creator"
-        content={site.siteMetadata?.social?.github || ``}
+        content={`@${site.siteMetadata?.social?.github || ``}`}
       />
       <meta name="twitter:title" content={title} />
       <meta name="twitter:description" content={metaDescription} />
+      <meta name="twitter:image" content={metaImage} />
+      <meta name="robots" content="index, follow" />
+      <meta name="googlebot" content="index, follow" />
+      <link rel="canonical" href={fullUrl} />
       {children}
     </>
   )

src/templates/blog-post.tsx

@@ -42,6 +42,11 @@ interface BlogPostTemplateProps {
         description?: string
         category?: string
         tags?: string[]
+        thumbnail?: {
+          childImageSharp?: {
+            gatsbyImageData?: any
+          }
+        }
       }
       fields: {
         slug: string
@@ -169,12 +174,53 @@ const BlogPostTemplate: React.FC<BlogPostTemplateProps> = ({
 
 export const Head: React.FC<BlogPostTemplateProps> = ({
   data: { markdownRemark: post },
+  location,
 }) => {
+  const thumbnail =
+    post.frontmatter.thumbnail?.childImageSharp?.gatsbyImageData?.images
+      ?.fallback?.src
+  const fullUrl = `https://pjj186.github.io${location.pathname}`
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "BlogPosting",
+    headline: post.frontmatter.title,
+    description: post.frontmatter.description || post.excerpt,
+    author: {
+      "@type": "Person",
+      name: "Lenny",
+      url: "https://pjj186.github.io",
+    },
+    datePublished: post.frontmatter.date || post.fields?.autoDate,
+    dateModified: post.frontmatter.date || post.fields?.autoDate,
+    url: fullUrl,
+    image: thumbnail
+      ? `https://pjj186.github.io${thumbnail}`
+      : "https://pjj186.github.io/icons/icon-512x512.png",
+    publisher: {
+      "@type": "Organization",
+      name: "Lenny.dev",
+      logo: {
+        "@type": "ImageObject",
+        url: "https://pjj186.github.io/icons/icon-512x512.png",
+      },
+    },
+    mainEntityOfPage: {
+      "@type": "WebPage",
+      "@id": fullUrl,
+    },
+  }
+
   return (
     <Seo
       title={post.frontmatter.title}
       description={post.frontmatter.description || post.excerpt}
-    />
+      pathname={location.pathname}
+      image={thumbnail}
+      article={true}
+    >
+      <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
+    </Seo>
   )
 }
 
@@ -201,6 +247,16 @@ export const pageQuery = graphql`
         description
         category
         tags
+        thumbnail {
+          childImageSharp {
+            gatsbyImageData(
+              width: 1200
+              height: 630
+              placeholder: BLURRED
+              formats: [AUTO, WEBP, AVIF]
+            )
+          }
+        }
       }
       fields {
         slug