Jekyll 사이트와 SEO

Jekyll은 GitHub Pages에서 기본 지원하는 정적 사이트 생성기입니다. 정적 사이트는 서버 사이드 렌더링 없이 HTML 파일을 직접 제공하므로 페이지 로딩 속도가 빠르고 검색 엔진이 크롤링하기 쉽습니다.

하지만 기본 설정만으로는 구글 검색에 효과적으로 노출되지 않습니다. 체계적인 SEO 설정이 필요합니다.

1. 기본 메타 태그 설정

_config.yml 필수 설정

title: My Blog
description: 블로그 설명 (150자 이내 권장)
url: https://username.github.io
baseurl: ""
lang: ko_KR
author: Your Name

plugins:
  - jekyll-sitemap
  - jekyll-seo-tag
  - jekyll-feed

head.html 메타 태그

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>
    {% if page.title %}{{ page.title }} - {{ site.title }}
    {% else %}{{ site.title }}{% endif %}
  </title>
  <meta name="description"
    content="{% if page.description %}{{ page.description }}
    {% else %}{{ site.description }}{% endif %}">
  <link rel="canonical"
    href="{{ page.url | absolute_url }}">
</head>

각 페이지/포스트 Front Matter

---
layout: post
title: "검색에 잘 걸리는 제목 (60자 이내)"
description: "페이지 내용을 요약하는 설명 (150자 이내)"
image: /images/thumbnail.jpg
---

2. Open Graph & Twitter Card

소셜 미디어에서 링크 공유 시 미리보기를 표시합니다.

<!-- Open Graph -->
<meta property="og:title"
  content="{{ page.title }}" />
<meta property="og:description"
  content="{{ page.description }}" />
<meta property="og:type"
  content="{% if page.layout == 'post' %}article{% else %}website{% endif %}" />
<meta property="og:url"
  content="{{ page.url | absolute_url }}" />
<meta property="og:image"
  content="{% if page.image %}{{ page.image | absolute_url }}{% endif %}" />
<meta property="og:locale" content="ko_KR" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title"
  content="{{ page.title }}" />
<meta name="twitter:description"
  content="{{ page.description }}" />
<meta name="twitter:image"
  content="{% if page.image %}{{ page.image | absolute_url }}{% endif %}" />

3. 사이트맵 자동 생성

jekyll-sitemap 플러그인

# Gemfile
gem "jekyll-sitemap"

플러그인을 추가하면 빌드 시 자동으로 /sitemap.xml이 생성됩니다. 수동으로 sitemap.xml을 만들 필요가 없습니다.

robots.txt 설정

User-agent: *
Allow: /

Sitemap: https://username.github.io/sitemap.xml

4. 구조화 데이터 (JSON-LD)

검색 결과에 리치 스니펫(별점, 작성일 등)을 표시하려면 구조화 데이터가 필요합니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  {% if page.layout == 'post' %}
  "@type": "BlogPosting",
  "headline": "{{ page.title }}",
  "description": "{{ page.description }}",
  "datePublished": "{{ page.date | date_to_xmlschema }}",
  "author": {
    "@type": "Person",
    "name": "{{ site.author }}"
  },
  "publisher": {
    "@type": "Organization",
    "name": "{{ site.title }}"
  }
  {% else %}
  "@type": "WebPage",
  "name": "{{ page.title | default: site.title }}",
  "url": "{{ page.url | absolute_url }}"
  {% endif %}
}
</script>

5. Google Search Console 등록

Step 1: 소유권 확인

<!-- head.html에 추가 -->
<meta name="google-site-verification" content="인증코드" />

또는 루트 디렉토리에 Google이 제공하는 HTML 파일을 배치합니다.

Step 2: 사이트맵 제출

  1. Google Search Console에 접속
  2. 사이트맵 메뉴 선택
  3. sitemap.xml 입력 후 제출
  4. 상태가 성공으로 변경될 때까지 대기

Step 3: URL 검사

개별 페이지가 색인되었는지 확인하고, 색인되지 않은 경우 색인 생성 요청을 할 수 있습니다.

6. 퍼포먼스 최적화

페이지 로딩 속도

구글은 Core Web Vitals를 검색 순위에 반영합니다.

<!-- 중요 리소스 프리로드 -->
<link rel="preload" as="image" href="/images/hero.jpg">
<link rel="preload" as="font" href="/fonts/main.ttf"
  type="font/ttf" crossorigin>

<!-- CSS 최적화 -->
<link rel="stylesheet" href="/css/main.css">

이미지 최적화

<!-- 적절한 크기의 이미지 사용 -->
<img src="/images/thumbnail.jpg"
     alt="설명적인 대체 텍스트"
     width="800" height="450"
     loading="lazy">

7. URL 구조 최적화

# _config.yml
permalink: /:categories/:title/

리다이렉트 설정

URL 구조를 변경했다면 이전 URL에서 새 URL로 리다이렉트합니다.

# Gemfile
gem "jekyll-redirect-from"

# 포스트 front matter
redirect_from:
  - /old-url.html
  - /another-old-url/

8. Google AdSense 승인 요건

승인을 위한 체크리스트

AdSense 코드 삽입

<!-- head.html에 추가 -->
<script async
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXX"
  crossorigin="anonymous">
</script>

ads.txt 파일

google.com, pub-XXXXXXXXXXXXXXXX, DIRECT, f08c47fec0942fa0

주의: _config.yml의 exclude 목록에 ads.txt가 포함되어 있으면 빌드 시 제외되어 404 오류가 발생합니다.

SEO 체크리스트

항목 확인
title 태그 (60자 이내) 각 페이지마다 고유한 제목
meta description (150자 이내) 각 페이지마다 고유한 설명
canonical URL 중복 페이지 방지
sitemap.xml jekyll-sitemap으로 자동 생성
robots.txt 크롤링 허용 + 사이트맵 경로
Open Graph 태그 소셜 미디어 미리보기
구조화 데이터 (JSON-LD) 리치 스니펫 표시
HTTPS GitHub Pages 기본 지원
모바일 반응형 viewport 메타 태그 + 반응형 CSS
이미지 alt 속성 모든 이미지에 대체 텍스트

결론

Jekyll 사이트의 SEO는 한 번 설정하면 이후 포스트를 작성할 때마다 자동으로 적용됩니다. jekyll-sitemap, jekyll-seo-tag, jekyll-feed 세 가지 플러그인과 적절한 메타 태그 설정만으로도 검색 엔진 최적화의 대부분을 커버할 수 있습니다.

실제로 이 가이드의 내용을 DreamURL 사이트에 적용하여 Google Search Console 등록과 AdSense 연동을 진행하고 있습니다.