study/프론트엔드

GatsbyJS에서 Open Graph 및 Twitter Card 설정하기 (SNS 미리보기 최적화)

octo54 2025. 3. 21. 11:15
반응형

GatsbyJS에서 Open Graph 및 Twitter Card 설정하기 (SNS 미리보기 최적화)

웹사이트를 공유할 때 미리보기 이미지, 제목, 설명이 제대로 표시되지 않는다면 클릭률(CTR)이 감소할 수 있습니다.
이번 글에서는 Gatsby에서 Open Graph(OG) 및 Twitter Card를 설정하여 SNS에서 공유할 때 최적화하는 방법을 설명하겠습니다. 🚀

1. Open Graph & Twitter Card란?

✅ Open Graph(OG)와 Twitter Card의 역할 비교

메타 태그 설명 사용 플랫폼

Open Graph (OG) Facebook, LinkedIn 등에서 미리보기 콘텐츠를 표시 Facebook, LinkedIn, Discord, Slack
Twitter Card 트위터에서 공유할 때 미리보기 생성 Twitter
meta 태그 검색 엔진 최적화를 위한 기본 메타 데이터 Google, Bing

🚀 이제 Open Graph와 Twitter Card를 Gatsby에서 적용하는 방법을 살펴보겠습니다.

2. gatsby-plugin-react-helmet 설치 및 설정

✅ React Helmet 플러그인 설치

npm install gatsby-plugin-react-helmet react-helmet

✅ gatsby-config.js에서 플러그인 활성화

module.exports = {
  plugins: [`gatsby-plugin-react-helmet`],
};

🚀 이제 Gatsby에서 react-helmet을 활용하여 메타 태그를 추가할 수 있습니다!

3. SEO 컴포넌트 생성 및 Open Graph 추가

SNS에서 공유될 때 자동으로 메타 태그를 추가하려면 SEO 컴포넌트를 생성하여 동적으로 Open Graph 및 Twitter Card 정보를 설정해야 합니다.

✅ SEO 컴포넌트 생성 (src/components/SEO.js)

import React from "react";
import { Helmet } from "react-helmet";
import { useStaticQuery, graphql } from "gatsby";

const SEO = ({ title, description, image, url }) => {
  const { site } = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          siteUrl
          title
          description
        }
      }
    }
  `);

  const metaTitle = title || site.siteMetadata.title;
  const metaDescription = description || site.siteMetadata.description;
  const metaImage = image ? `${site.siteMetadata.siteUrl}${image}` : `${site.siteMetadata.siteUrl}/default-og-image.jpg`;
  const metaUrl = url || site.siteMetadata.siteUrl;

  return (
    <Helmet>
      {/* 기본 메타 태그 */}
      <title>{metaTitle}</title>
      <meta name="description" content={metaDescription} />

      {/* Open Graph 태그 */}
      <meta property="og:title" content={metaTitle} />
      <meta property="og:description" content={metaDescription} />
      <meta property="og:image" content={metaImage} />
      <meta property="og:url" content={metaUrl} />
      <meta property="og:type" content="website" />

      {/* Twitter Card 태그 */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={metaTitle} />
      <meta name="twitter:description" content={metaDescription} />
      <meta name="twitter:image" content={metaImage} />
    </Helmet>
  );
};

export default SEO;

✅ 설명

  • useStaticQuery()를 사용하여 siteMetadata에서 기본값을 가져옴
  • title, description, image, url이 없으면 기본값을 사용하도록 설정
  • og:image, twitter:image를 사용하여 미리보기 이미지 설정

🚀 이제 SEO 컴포넌트를 블로그 페이지에 추가하여 적용할 수 있습니다!

4. 블로그 페이지에 SEO 컴포넌트 적용하기

이제 블로그 글 페이지에서 SEO 컴포넌트를 추가하여 Open Graph 및 Twitter Card를 설정하겠습니다.

📌 src/templates/blog-template.js 수정

import React from "react";
import { graphql } from "gatsby";
import SEO from "../components/SEO";

const BlogTemplate = ({ data }) => {
  const post = data.markdownRemark;
  const postUrl = `/blog/${post.frontmatter.slug}`;
  const postImage = post.frontmatter.image || "/default-og-image.jpg";

  return (
    <main>
      <SEO
        title={post.frontmatter.title}
        description={post.excerpt}
        image={postImage}
        url={postUrl}
      />
      <h1>{post.frontmatter.title}</h1>
      <p>{post.frontmatter.date}</p>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </main>
  );
};

export const query = graphql`
  query ($slug: String!) {
    markdownRemark(frontmatter: { slug: { eq: $slug } }) {
      frontmatter {
        title
        date
        slug
        image
      }
      excerpt
      html
    }
  }
`;

export default BlogTemplate;

🚀 이제 블로그 글이 SNS에서 공유될 때 자동으로 Open Graph 미리보기가 생성됩니다!

5. 메타 태그가 정상적으로 적용되었는지 테스트하기

반응형

✅ Open Graph 테스트 (Facebook, LinkedIn, Discord 등)

  1. Facebook Sharing Debugger 접속
  2. 블로그 글 URL 입력 후 "디버그" 버튼 클릭
  3. Open Graph 태그가 정상적으로 적용되었는지 확인

✅ Twitter Card 테스트

  1. Twitter Card Validator 접속
  2. 블로그 글 URL 입력 후 "Preview Card" 클릭
  3. Twitter에서 미리보기 카드가 정상적으로 표시되는지 확인

🚀 이제 SNS에서 공유할 때 미리보기 이미지와 제목이 올바르게 표시됩니다!

6. Open Graph 및 Twitter Card 최적화 (고급 설정)

SNS 미리보기를 더 최적화하려면 OG 이미지 크기 및 메타 태그 최적화를 고려해야 합니다.

✅ 추천 Open Graph 이미지 크기

  • Facebook & LinkedIn: 1200 x 630px
  • Twitter (summary_large_image): 1200 x 675px
  • Discord & Slack: 1024 x 512px

📌 OG 이미지 최적화 팁

  • 이미지 용량 최적화 → PNG 대신 WebP 사용
  • 브랜드 로고 포함 → 공유 시 브랜드 인지도 향상
  • 텍스트 포함 → 블로그 제목을 강조하는 디자인

7. 결론

이번 글에서는 GatsbyJS에서 Open Graph 및 Twitter Card를 설정하여 SNS 미리보기를 최적화하는 방법을 배웠습니다.
✔ gatsby-plugin-react-helmet을 활용하여 SEO 메타 태그 추가
✔ Open Graph 태그 설정하여 Facebook, LinkedIn, Discord에서 최적화
✔ Twitter Card 태그 설정하여 트위터 공유 최적화
✔ SNS에서 미리보기 이미지가 제대로 표시되는지 테스트하는 방법 소개

🚀 다음 글에서는 GatsbyJS에서 웹사이트 성능을 최적화하는 방법을 다루겠습니다!

 

💡 Did you know?
SNS에서 웹사이트를 공유할 때 Open Graph와 Twitter Card가 없으면 기본 텍스트만 표시됩니다. SEO뿐만 아니라 SNS 최적화도 중요합니다! 🚀