Gatsby 블로그 Open Graph 개선하기

2024년 10월 1일 오전 5시 35분 KST

Gatsby 프레임워크는 React 기반임에도 불구하고 검색 엔진 최적화(Search Engine Optimization, SEO)에 특화되어 있습니다. gatsby-starter-blog에서도 Open Graph 관련 메타 태그 생성을 지원하여 게시글의 제목과 요약에 대한 정보를 Open Graph로 불러올 수 있습니다. 단, 이미지는 제외하고요.

어째선지 Open Graph 이미지 생성에 대한 코드는 포함되어 있지 않더라고요. 물론 Open Graph 이미지가 없어도 몇몇 서비스에서는(예: 카카오톡 대화방에서 링크 공유) 페이지 본문의 대표 이미지를 알아서 파싱해서 띄워 주긴 하지만, 그래도 저는 게시글에 대한 최대한 많은 정보를 메타 태그에 담는 것이 검색 엔진 최적화에 도움이 될 수 있을 것이라고 판단했습니다.

마침 게시글의 섬네일을 게시글 목록에 출력하는 법을 해봤으니, 이를 응용해서 Open Graph 이미지로 제공할 수 있도록 코드를 고쳐보겠습니다.

1. `seo.js`

/src/component/seo.js에는 메타 태그 생성을 담당하는 컴포넌트가 작성되어 있습니다. 이 컴포넌트에 thumb 파라미터를 추가하고, return문에 Open Graph 이미지를 표시하는 메타 태그를 포함시킵니다.

const Seo = ({ description, title, thumb, children }) => {
  // (중략...)
  return (
    <>
      // (중략...)
	  <meta property="og:image" content={thumb} />
      <meta name="twitter:image" content={thumb} />
      {children}
    </>
  )
}

2. `blog-post.js`

블로그 게시글 페이지를 담당하는 코드는 /src/templates/blog-post.js에 있습니다. 이 파일에서도 GraphQL 쿼리로 마크다운 문서의 프런트매터를 파싱하는데, 이 쿼리도 게시글 목록에 섬네일을 추가했을 때처럼 다음과 같이 수정합니다.

frontmatter {
  title
  date(formatString: "YYYY년 M월 D일 a h시 mm분 [KST]", locale: "ko")
  description
  thumb {
    childImageSharp {
      gatsbyImageData(width: 960, layout: CONSTRAINED)
    }
  }
}

그리고, blog-post.js의 상단에 import문을 작성하여 getImage 컴포넌트를 불러옵니다.

import { getImage } from "gatsby-plugin-image"

저는 이번에도 마찬가지로 따로 섬네일이 없을 시에 기본 이미지를 출력하기 위해, 기본 이미지를 다음과 같이 불러왔습니다.

import defaultThumb from "../images/og-default.png"

마지막으로, blog-post.js에서 메타 태그 생성을 담당하는 <Seo> 컴포넌트 부분을 다음과 같이 수정합니다.

export const Head = ({ data: { markdownRemark: post } }) => {
  const thumb = !!post.frontmatter.thumb
    ? getImage(post.frontmatter.thumb).images.fallback.src
    : defaultThumb
  return (
    <Seo
      title={post.frontmatter.title}
      description={post.frontmatter.description || post.excerpt}
      thumb={thumb}
    />
  )
}

thumb 변수를 삼항 연산자를 이용해서 "섬네일이 있을 경우 섬네일 이미지의 경로를 변수에 저장하고, 섬네일이 없을 경우 기본 이미지의 경로를 변수에 저장"했습니다.
<Seo> 컴포넌트의 파라미터에 thumb={thumb}을 작성하여 thumb 변수에 기록된 이미지의 경로를 전달했습니다.

결과 테스트하기

위와 같이 코드를 수정하고 배포한 후, Open Graph 이미지가 제대로 파싱되는지 테스트를 해 봅시다. 개발자 도구에서 <head> 태그에 위에서 추가한 오픈 그래프 메타 태그들이 들어 있는지 확인해도 되지만, 더욱 확실히 하기 위해 저는 카카오에서 제공하는 '공유 디버거'를 이용했습니다. 사용 방법은 간단합니다. 공유할 링크의 URL을 입력하고 디버그를 누르면 파싱된 Open Graph 데이터들을 보여 줍니다. 저는 제 블로그의 아무 게시글의 링크를 붙여 넣어 디버그를 눌러봤습니다.

og:image 값이 정상적으로 파싱된 것을 볼 수 있습니다!

혹시라도 블로그의 HTML 문서에는 메타 태그가 정상적으로 삽입되었고 이미지 경로도 정상적으로 접근이 되는데 카카오 공유 디버거에는 og:image 값이 표시되지 않는다면, 디버그 버튼 옆의 캐시 초기화 버튼을 한번 눌러 보세요. 오픈 그래프 삽입 전의 파싱 데이터가 카카오 서버에 캐시되어서 그런 걸 수도 있습니다.

지금까지 섬네일 이미지를 활용해서 블로그에 드러나는 부분도 고쳐 봤고, 블로그에 표시되지 않는 숨겨진 부분도 고쳐 봤습니다. 나만의 공간을 점점 가꾸는 것은 아주 재미있는 일이네요. 아직 손봐야 할 것들이 남아있지만요.

1. seo.js

2. blog-post.js

결과 테스트하기

1. `seo.js`

2. `blog-post.js`