JavaPark

GitHub 블로그 SEO 최적화 — 검색에 노출되는 블로그 만들기

@JavaPark · April 04, 2026 · 13 min read
seo
meta-tag
sitemap
open-graph

SERIES: GitHub 블로그 A to Z (6)

View More (+1)

안녕하세요, 자바파커입니다.

"블로그 글을 열심히 썼는데, 구글에 검색해도 안 나와요."

GitHub Pages로 블로그를 만들고 글까지 발행했는데, 정작 검색 엔진에서 내 글이 보이지 않는다면 정말 허무하겠죠. 결론부터 말씀드리면 — 블로그를 만드는 것과 검색에 노출되는 것은 완전히 다른 문제입니다. SEO(Search Engine Optimization) 설정 없이는 아무리 좋은 글을 써도 구글이 찾아오지 않습니다.

이번 포스팅에서는 Gatsby 기반 GitHub 블로그의 SEO를 처음부터 끝까지 최적화하는 방법을 다룹니다.

SEO가 블로그에 중요한 이유

SEO란 검색 엔진 최적화(Search Engine Optimization)의 약자로, 구글이나 네이버 같은 검색 엔진이 내 블로그를 잘 이해하고, 검색 결과에 잘 노출시킬 수 있도록 만드는 작업입니다.

블로그에 SEO가 중요한 이유는 간단합니다.

항목 SEO 미적용 SEO 적용
검색 노출 거의 없음 키워드별 상위 노출 가능
유입 경로 직접 공유만 가능 구글 검색 유입
공유 시 미리보기 제목만 표시 이미지 + 설명 표시
크롤링 구조 파악 어려움 사이트맵으로 효율적 크롤링

특히 GitHub Pages 블로그는 티스토리나 워드프레스와 달리 SEO 설정이 자동으로 되지 않기 때문에 직접 설정해줘야 합니다.

Gatsby SEO 컴포넌트 만들기 (React Helmet)

Gatsby에서 <head> 태그를 제어하려면 react-helmet 또는 Gatsby의 Head API를 사용합니다. gatsby-starter-hoodie 테마에는 이미 SEO 컴포넌트가 포함되어 있지만, 직접 만드는 방법도 알아두면 좋습니다.

react-helmet 설치

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

gatsby-config.js에 플러그인을 추가합니다.

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    // ... 기존 플러그인들
  ],
}

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, article }) => {
  const { site } = useStaticQuery(graphql`
    query {
      site {
        siteMetadata {
          defaultTitle: title
          defaultDescription: description
          siteUrl
          defaultImage: image
        }
      }
    }
  `)

  const {
    defaultTitle,
    defaultDescription,
    siteUrl,
    defaultImage,
  } = site.siteMetadata

  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${url || ""}`,
  }

  return (
    <Helmet title={seo.title}>
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />

      {/* Open Graph */}
      <meta property="og:title" content={seo.title} />
      <meta property="og:description" content={seo.description} />
      <meta property="og:image" content={seo.image} />
      <meta property="og:url" content={seo.url} />
      <meta property="og:type" content={article ? "article" : "website"} />

      {/* Twitter Card */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={seo.title} />
      <meta name="twitter:description" content={seo.description} />
      <meta name="twitter:image" content={seo.image} />
    </Helmet>
  )
}

export default SEO

이 컴포넌트를 각 페이지나 템플릿에서 불러와 사용하면 됩니다.

메타태그 최적화 — title, description, keywords

메타태그는 검색 엔진이 페이지의 내용을 파악하는 핵심 정보입니다.

title 태그 작성법

  • 60자 이내로 작성합니다
  • 핵심 키워드를 앞쪽에 배치합니다
  • 페이지 제목 | 사이트명 형식이 일반적입니다
<title>GitHub 블로그 SEO 최적화 가이드 | AI JAVAPARK</title>

description 메타태그

  • 150자 내외로 작성합니다
  • 페이지 내용을 요약하되, 클릭을 유도하는 문장으로 구성합니다
  • 검색 결과에서 제목 아래에 표시되는 텍스트입니다
<meta name="description" content="메타태그, sitemap, Open Graph 설정까지 — Gatsby 기반 GitHub 블로그의 검색 노출을 높이는 실전 SEO 가이드입니다." />

gatsby-config.js의 siteMetadata 활용

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `AI JAVAPARK`,
    description: `AI와 개발 이야기를 나누는 블로그`,
    siteUrl: `https://blog.javapark.kr`,
    image: `/og-default.png`,
    author: `자바파커`,
  },
  // ...
}

각 포스팅의 frontmatter에 작성한 title과 description이 메타태그로 자동 연결되도록 템플릿을 구성하는 것이 좋습니다.

Open Graph와 Twitter Card 설정

Open Graph(OG)는 페이스북, 카카오톡 등에서 링크 공유 시 미리보기를 결정하는 프로토콜입니다. Twitter Card는 트위터(현 X)에서의 미리보기입니다.

Open Graph 필수 태그

<meta property="og:title" content="GitHub 블로그 SEO 최적화" />
<meta property="og:description" content="검색 노출을 높이는 실전 가이드" />
<meta property="og:image" content="https://blog.javapark.kr/og-image.png" />
<meta property="og:url" content="https://blog.javapark.kr/github-blog/04-seo-optimization/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="AI JAVAPARK" />

Twitter Card 태그

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="GitHub 블로그 SEO 최적화" />
<meta name="twitter:description" content="검색 노출을 높이는 실전 가이드" />
<meta name="twitter:image" content="https://blog.javapark.kr/og-image.png" />

OG 이미지 권장 사양

항목 권장값
크기 1200 x 630px
포맷 PNG 또는 JPG
파일 크기 1MB 이하
위치 static 폴더에 저장

OG 이미지가 잘 적용됐는지 확인하려면 Facebook Sharing Debugger나 Twitter Card Validator를 활용하세요.

sitemap.xml 생성하기

사이트맵은 검색 엔진에게 "내 블로그에는 이런 페이지들이 있습니다"라고 알려주는 XML 파일입니다. 일종의 블로그 목차라고 생각하면 됩니다.

gatsby-plugin-sitemap 설치 및 설정

npm install gatsby-plugin-sitemap
// gatsby-config.js
module.exports = {
  siteMetadata: {
    siteUrl: `https://blog.javapark.kr`,
  },
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `
          {
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
        resolveSiteUrl: () => `https://blog.javapark.kr`,
        serialize: ({ path }) => ({
          url: path,
          changefreq: `weekly`,
          priority: path === `/` ? 1.0 : 0.7,
        }),
      },
    },
  ],
}

빌드 후 public/sitemap-index.xml에 사이트맵이 생성됩니다. https://blog.javapark.kr/sitemap-index.xml로 접근해서 확인할 수 있습니다.

robots.txt 설정하기

robots.txt는 검색 엔진 크롤러에게 "이 페이지는 크롤링해도 됩니다 / 하지 마세요"를 알려주는 파일입니다.

gatsby-plugin-robots-txt 설치 및 설정

npm install gatsby-plugin-robots-txt
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-robots-txt`,
      options: {
        host: `https://blog.javapark.kr`,
        sitemap: `https://blog.javapark.kr/sitemap-index.xml`,
        policy: [
          {
            userAgent: `*`,
            allow: `/`,
          },
        ],
      },
    },
  ],
}

빌드 후 생성되는 robots.txt 내용은 다음과 같습니다.

User-agent: *
Allow: /

Sitemap: https://blog.javapark.kr/sitemap-index.xml
Host: https://blog.javapark.kr

Google Search Console 등록

사이트맵과 robots.txt를 만들었으면, 이제 구글에 "내 블로그가 여기 있습니다"라고 직접 알려줘야 합니다.

등록 절차

  1. Google Search Console에 접속합니다
  2. 속성 추가 버튼을 클릭합니다
  3. URL 접두어 방식으로 https://blog.javapark.kr을 입력합니다
  4. 소유권 확인 방법 중 HTML 태그 방식을 선택합니다
  5. 제공되는 메타태그를 SEO 컴포넌트에 추가합니다
// SEO 컴포넌트에 추가
<Helmet>
  <meta
    name="google-site-verification"
    content="여기에_구글이_제공한_인증코드"
  />
</Helmet>
  1. 빌드 후 배포하고, Search Console에서 확인 버튼을 누릅니다
  2. 소유권 확인이 완료되면 Sitemaps 메뉴에서 사이트맵 URL을 제출합니다
https://blog.javapark.kr/sitemap-index.xml

네이버 서치어드바이저 등록

네이버 검색 노출도 원한다면 네이버 서치어드바이저에도 동일하게 등록합니다.

<meta name="naver-site-verification" content="네이버_인증코드" />

구조화 데이터 (JSON-LD) 추가하기

구조화 데이터(Structured Data)는 검색 엔진에게 페이지의 의미를 더 정확하게 알려주는 방법입니다. 구글 검색 결과에서 별점, 작성일, 작성자 같은 리치 스니펫(Rich Snippet)이 표시되는 게 바로 구조화 데이터 덕분입니다.

블로그 포스팅용 JSON-LD

// src/components/SEO.js 에 추가
const structuredData = {
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  headline: seo.title,
  description: seo.description,
  image: seo.image,
  url: seo.url,
  datePublished: date,
  dateModified: update || date,
  author: {
    "@type": "Person",
    name: "자바파커",
    url: "https://blog.javapark.kr",
  },
  publisher: {
    "@type": "Organization",
    name: "AI JAVAPARK",
    logo: {
      "@type": "ImageObject",
      url: "https://blog.javapark.kr/logo.png",
    },
  },
  mainEntityOfPage: {
    "@type": "WebPage",
    "@id": seo.url,
  },
}

Helmet을 통해 <script> 태그로 삽입합니다.

<Helmet>
  <script type="application/ld+json">
    {JSON.stringify(structuredData)}
  </script>
</Helmet>

구조화 데이터 테스트

구글의 리치 결과 테스트 도구에서 URL을 입력하면 구조화 데이터가 제대로 적용됐는지 확인할 수 있습니다.

GitHub 블로그 SEO 검색 노출 체크리스트

모든 설정을 마쳤다면, 아래 체크리스트로 빠진 항목이 없는지 확인해보세요.

  • gatsby-config.js의 siteMetadata에 title, description, siteUrl, image 설정
  • SEO 컴포넌트에 title, description 메타태그 포함
  • Open Graph 태그 (og:title, og:description, og:image, og:url) 설정
  • Twitter Card 태그 설정
  • gatsby-plugin-sitemap으로 sitemap.xml 생성
  • gatsby-plugin-robots-txt로 robots.txt 생성
  • Google Search Console에 사이트 등록 및 사이트맵 제출
  • 네이버 서치어드바이저 등록 (선택)
  • 구조화 데이터 (JSON-LD) 추가
  • OG 이미지 (1200x630px) 준비
  • 각 포스팅의 frontmatter에 title, description 작성

자주 묻는 질문 (FAQ)

Q. SEO 설정 후 검색에 바로 노출되나요?

아닙니다. 구글이 크롤링하고 인덱싱하는 데에는 며칠에서 몇 주까지 걸릴 수 있습니다. Search Console에서 직접 URL 색인 요청을 하면 속도를 앞당길 수 있습니다. Search Console의 URL 검사 메뉴에서 URL을 입력한 뒤 색인 생성 요청 버튼을 누르면 됩니다.

Q. gatsby-starter-hoodie 테마에 이미 SEO가 적용되어 있나요?

네, 기본적인 메타태그와 OG 태그가 포함되어 있습니다. 다만 sitemap, robots.txt, 구조화 데이터, Search Console 등록은 직접 해야 합니다. 테마에 포함된 SEO 컴포넌트를 열어서 현재 어디까지 설정되어 있는지 확인해보시는 걸 추천합니다.

Q. OG 이미지를 포스팅마다 다르게 설정할 수 있나요?

네, frontmatter에 image 필드를 추가하고, SEO 컴포넌트에서 해당 값을 읽어오도록 구성하면 됩니다. 포스팅별로 고유한 OG 이미지를 설정하면 SNS 공유 시 클릭률이 높아집니다.

여러분은 블로그 SEO 어디까지 설정하고 계신가요? 댓글로 알려주세요.

다음 포스팅에서는 GitHub Actions로 블로그를 자동 배포하는 방법을 다룹니다. push만 하면 빌드부터 배포까지 알아서 되는 환경을 만들어보겠습니다.

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

Previous Post
마크다운 글쓰기와 카테고리 관리 — 체계적인 블로그 운영법
Next Post
GitHub Actions로 블로그 자동 배포하기 — push만 하면 끝
@JavaPark
AI 시대의 개발자 도구, 실전 경험을 공유합니다