meta-tag 이미지 상대경로 -> 절대 경로로 변경

README.md

@@ -47,10 +47,22 @@
 
 ## 🐛 트러블 슈팅
 
+다크모드
+
 - [다크모드 구현 - css variable](https://github.com/kimyouknow/kimyouknow.github.io/pull/12)
 - [다크모드 에러 (dark mode flash error) 수정](https://github.com/kimyouknow/kimyouknow.github.io/pull/20)
+
+반응형 웹
+
 - [반응형 웹 - css variable](https://github.com/kimyouknow/kimyouknow.github.io/pull/18)
+
+SEO, 웹접근성
+
 - [SEO, 웹 접근성](https://github.com/kimyouknow/kimyouknow.github.io/pull/15)
+- [Slack에 메타 태그가 적용되지 않는 버그 수정](https://github.com/kimyouknow/kimyouknow.github.io/pull/27)
+
+기타
+
 - [github action을 활용한 gh-pages 배포 자동화](https://github.com/kimyouknow/kimyouknow.github.io/pull/9)
 - [이미지 처리](https://github.com/kimyouknow/kimyouknow.github.io/pull/9)
 

blog-config.js

@@ -3,13 +3,13 @@ require('dotenv').config({
 })
 
 module.exports = {
-  title: `Yunho.blog`,
+  siteName: `Yunho.blog`,
   author: 'Yunho(kimyouknow)',
   description: `안녕하세요. 프론트엔드 개발자 김윤호입니다. 고민과 문제 해결 과정을 공유하고 있습니다.`,
   siteUrl: 'https://kimyouknow.github.io/',
-  image: `./static/profile-image.png`,
+  image: `static/profile-image.png`,
   keywords: ['개발블로그', '문제해결', 'gatsby'],
-  favicon: './static/pencil.png',
+  favicon: 'static/pencil.png',
   social: {
     email: '[email protected]',
     github: `https://github.com/kimyouknow`,

src/components/GlobalNavigation/BlogTitle.tsx

@@ -3,10 +3,10 @@ import useBlogConfig from '@/hooks/useBlogConfig'
 import * as S from './GlobalNavigation.style'
 
 const BlogTitle = () => {
-  const { title } = useBlogConfig()
+  const { siteName } = useBlogConfig()
   return (
     <S.BlogTitle>
-      <a href="/">{title}</a>
+      <a href="/">{siteName}</a>
     </S.BlogTitle>
   )
 }

src/components/PostDetail/index.tsx

@@ -1,5 +1,6 @@
 import PostFooter from '@/components/PostDetail/PostFooter'
 import SEO from '@/components/SEO'
+import useBlogConfig from '@/hooks/useBlogConfig'
 import Layout from '@/Layout'
 import { PostPageItemType } from '@/types/PostItem.types'
 
@@ -9,15 +10,10 @@ import PostHeader from './PostHeader'
 interface PostPageInfoProps {
   postPageInfo: PostPageItemType
   href: string
-  author: string
-  favicon: string
-  seo: {
-    google: string
-    naver: string
-  }
 }
 
-const PostDetail = ({ postPageInfo, href, author, favicon, seo }: PostPageInfoProps) => {
+const PostDetail = ({ postPageInfo, href }: PostPageInfoProps) => {
+  const { author, favicon, seo, siteName } = useBlogConfig()
   const {
     node: {
       tableOfContents,
@@ -40,12 +36,14 @@ const PostDetail = ({ postPageInfo, href, author, favicon, seo }: PostPageInfoPr
       <SEO
         author={author}
         siteUrl={href}
+        siteName={siteName}
         title={title}
         description={summary}
         image={publicURL}
         keywords={categories}
         favicon={favicon}
         seo={seo}
+        readingTime={readingTime.text}
       />
       <PostHeader
         title={title}

src/components/SEO/index.tsx

@@ -2,27 +2,47 @@ import { Helmet } from 'react-helmet'
 
 import { SEOConfigType } from '@/types/gatsby.type'
 
-const SEO = ({ lang = 'ko', author, title, description, siteUrl, image, keywords, favicon, seo }: SEOConfigType) => {
+const SEO = ({
+  lang = 'ko',
+  author,
+  siteName,
+  siteUrl,
+  title = siteName,
+  description,
+  image,
+  keywords,
+  favicon,
+  seo,
+  readingTime,
+}: SEOConfigType) => {
   return (
     <Helmet htmlAttributes={{ lang }}>
       <title>{title}</title>
       <meta name="description" content={description} />
       <meta name="author" content={author} />
       <meta name="keywords" content={keywords.join(', ')} />
-      <link rel="icon" href={favicon} />
       <link rel="icon" type="image/png" href={favicon} sizes="16x16" />
       <meta name="google-site-verification" content={seo.google} />
       <meta name="naver-site-verification" content={seo.naver} />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       {/* property: og */}
       <meta property="og:type" content="website" />
+      <meta property="og:site_name" content={siteName} />
       <meta property="og:title" content={title} />
       <meta property="og:description" content={description} />
-      <meta property="og:image" content={image} />
+      <meta property="og:image" content={`${siteUrl}${image}`} />
       <meta property="og:url" content={siteUrl} />
-      <meta property="og:site_name" content={title} />
       <meta property="og:locale" content="ko_KR" />
       <meta property="og:locale:alternate" content="es_ES" />
+      {/* twitter cards tags additive with th og: tags  */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:domain" content={siteUrl} />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={`${siteUrl}${image}`} />
+      <meta name="twitter:image:alt" content={description} />
+      <meta name="twitter:label1" content="Time to read" />
+      <meta name="twitter:data1" content={readingTime} />
     </Helmet>
   )
 }

src/hooks/useBlogConfig.ts

@@ -15,7 +15,7 @@ const useBlogConfig = () => {
         site {
           siteMetadata {
             author
-            title
+            siteName
             description
             siteUrl
             image

src/pages/index.tsx

@@ -27,7 +27,7 @@ const IndexPage = ({
     allMarkdownRemark: { edges },
   },
 }: IndexPageProps) => {
-  const { author, title, siteUrl, description, image, keywords, favicon, seo } = useBlogConfig()
+  const { author, siteName, siteUrl, description, image, keywords, favicon, seo } = useBlogConfig()
   const parsed: ParsedQuery<string> = queryString.parse(hash)
   const selectedCategory = typeof parsed.category !== 'string' || !parsed.category ? 'All' : parsed.category
   // category 프로퍼티 값이 문자열 형태가 아니거나 존재하지 않는 경우에는 기본적으로 카테고리 값을 All로 지정하고, 그러지 않은 경우에는 파싱한 값을 지정
@@ -60,7 +60,7 @@ const IndexPage = ({
       <SEO
         author={author}
         siteUrl={siteUrl}
-        title={title}
+        siteName={siteName}
         description={description}
         image={image}
         keywords={keywords}

src/templates/post.template.tsx

@@ -2,7 +2,6 @@ import { graphql } from 'gatsby'
 import React from 'react'
 
 import PostDetail from '@/components/PostDetail'
-import useBlogConfig from '@/hooks/useBlogConfig'
 import { PostPageItemType } from '@/types/PostItem.types'
 
 interface PostTemplateProps {
@@ -22,8 +21,7 @@ const PostTemplate = ({
   },
   location: { href },
 }: PostTemplateProps) => {
-  const { author, favicon, seo } = useBlogConfig()
-  return <PostDetail postPageInfo={edges[0]} href={href} author={author} favicon={favicon} seo={seo} />
+  return <PostDetail postPageInfo={edges[0]} href={href} />
 }
 
 export default PostTemplate

src/types/gatsby.type.ts

@@ -11,8 +11,9 @@ export interface GatsbyImgProps {
 export interface SEOConfigType {
   lang?: string
   author: string
-  title: string
+  siteName: string
   siteUrl: string
+  title?: string
   description: string
   image: string
   keywords: string[]
@@ -21,6 +22,7 @@ export interface SEOConfigType {
     google: string
     naver: string
   }
+  readingTime?: string
 }
 
 export interface ConfigType extends SEOConfigType {