테마 전환

기술 블로그 SEO의 세 기둥: 내부 링크, 구조화 데이터, Core Web Vitals 실전

Easton editorial illustration: technical article supported on a three-leg optimization rig: internal links, schema, and Core Web Vitals

기술 블로그에 글을 50편이나 썼는데 월 자연 유입이 1000 PV도 안 되나요? 저도 겪어본 일입니다. 2023년의 제 블로그가 딱 그랬습니다. 콘텐츠가 형편없는 것도 아니고 기술 깊이도 있었지만, 검색 엔진은 좀처럼 반응하지 않았습니다.

나중에야 문제의 원인이 기술 SEO의 기본 설정에 있다는 걸 알았습니다. SEMrush의 한 연구에 따르면 웹사이트의 약 80%가 기술 SEO 문제를 가지고 있고, 그중 상당수는 기본 설정 오류입니다. 무슨 뜻일까요? 글을 아무리 잘 써도 검색 엔진이 찾지 못하고, 이해하지 못하고, 페이지가 느리게 뜬다면 결국 소용이 없다는 뜻입니다.

이번 글에서는 기술 블로그 SEO의 세 가지 기둥인 내부 링크, 구조화 데이터, Core Web Vitals를 다룹니다. 용어가 어렵게 들릴 수 있지만, 각 항목을 실전 사례로 나눠 설명하겠습니다. Astro 프레임워크를 쓰고 있다면 마지막에 바로 가져다 쓸 수 있는 설정 템플릿도 있습니다.

1. 내부 링크: 콘텐츠 권위가 흐르는 혈관 시스템 만들기

내부 링크는 많은 사람이 있어도 되고 없어도 되는 요소처럼 생각합니다. 하지만 SEO에서 가장 과소평가되는 숨은 레버 중 하나입니다.

블로그를 하나의 도서관이라고 생각해 봅시다. 글 한 편은 책 한 권이고, 내부 링크는 서가 사이를 이어주는 통로입니다. 통로가 잘 설계되어 있으면 독자는 ‘React Hooks 입문’에서 ‘상태 관리 실전’으로, 다시 ‘성능 최적화 가이드’로 자연스럽게 이동할 수 있습니다. 반대로 통로가 엉망이면 독자는 입구에서 길을 잃습니다. 검색 엔진 크롤러도 마찬가지입니다.

필러-클러스터 구조: 기술 블로그의 황금 구조

먼저 개념 하나를 짚고 가겠습니다. 필러 콘텐츠(Pillar Content)와 클러스터 콘텐츠(Cluster Content)입니다. 필러 콘텐츠는 특정 주제의 ‘총론’ 역할을 하는 글입니다. 예를 들면 ‘React 완전 가이드’입니다. 클러스터 콘텐츠는 그 아래의 ‘세부 가지’입니다. 예를 들면 ‘useState 상세 설명’, ‘useEffect 모범 사례’ 같은 글입니다.

이 둘 사이에는 양방향 링크가 있어야 합니다. 필러 글은 관련 클러스터 글 전체로 링크하고, 클러스터 글도 다시 필러 글로 링크합니다. 이렇게 하면 페이지 권위(Page Authority)가 콘텐츠 네트워크 전체를 따라 흐를 수 있습니다. 고립 페이지 안에 갇혀 맴돌지 않습니다.

고립 페이지는 순위를 얻기 어렵습니다
Upward Engine 연구

고립 페이지, 즉 어떤 내부 링크도 가리키지 않는 페이지는 사실상 순위를 얻기 어렵습니다. 이유는 단순합니다. 크롤러가 발견하지 못하고, 사용자도 발견하지 못하기 때문입니다. 그래서 누군가 글을 다 써 놓고 그냥 던져두듯 발행한 뒤 내부 링크를 하나도 만들지 않는 모습을 보면 괜히 제가 다 조급해집니다.

앵커 텍스트: 이제 ‘여기를 클릭’은 그만 쓰기

앵커 텍스트는 링크 위에 표시되는 클릭 가능한 단어입니다. 사소해 보여서 대충 쓰는 사람이 많지만 영향은 꽤 큽니다.

‘전체 튜토리얼을 보려면 여기를 클릭하세요.’ 이런 문장은 SEO에는 거의 도움이 되지 않습니다. 검색 엔진은 앵커 텍스트를 통해 대상 페이지의 내용을 이해합니다. 앵커 텍스트가 ‘React 상태 관리 튜토리얼’이라면 크롤러는 이 링크가 상태 관리에 관한 글을 가리킨다는 것을 압니다. 하지만 ‘여기를 클릭’이라고 쓰면 아무것도 배우지 못합니다.

SearchScaleAI의 연구에 따르면 설명형 앵커 텍스트는 SEO 효과와 사용자 경험을 동시에 높입니다. 사용자는 링크가 어디로 이어지는지 바로 이해하고, 클릭할 의향도 조금 더 커집니다.

계층 관리: 3클릭 원칙

오래된 규칙 중에 ‘3클릭 원칙’이 있습니다. 중요한 페이지라면 사용자가 3번 이내의 클릭으로 도달할 수 있어야 한다는 뜻입니다. 이 원칙은 지금도 유효합니다.

어떻게 만들까요? 첫째, 내비게이션 메뉴에 너무 많은 항목을 넣지 않습니다. 인지심리학에는 ‘7±2 규칙’이라는 말이 있습니다. 사람이 한 번에 처리할 수 있는 정보 단위는 대략 5-9개라는 뜻입니다. 그래서 메인 내비게이션 메뉴는 5-7개 정도로 제한하는 편이 좋습니다. 둘째, 카테고리 페이지, 태그 페이지, 시리즈 글 페이지 같은 중간 계층을 통해 콘텐츠를 조직합니다.

기술 블로그의 특수 사례: 튜토리얼 시리즈와 API 문서의 링크 전략

기술 블로그에는 특수한 경우가 있습니다. 바로 시리즈 글입니다. 예를 들어 제가 쓴 ‘Next.js 완전 가이드’ 시리즈에서는 각 글이 시리즈 인덱스 페이지로 링크되고, 인접한 글 사이에는 ‘이전 글/다음 글’ 내비게이션도 있습니다. 이런 구조는 크롤러와 사용자 모두에게 친절합니다.

API 문서는 또 다릅니다. API 문서는 보통 트리 구조입니다. 루트 개념에서 아래 계층으로 하나씩 내려갑니다. 이럴 때 브레드크럼(Breadcrumb) 내비게이션이 특히 중요합니다. 사용자와 크롤러가 현재 어느 계층에 있는지 언제든 알 수 있게 해주기 때문입니다.

반대 사례도 본 적이 있습니다. 어떤 프레임워크의 공식 문서는 페이지마다 ‘관련 링크’를 많이 넣었지만, 링크 조직이 너무 어수선했습니다. 사용자는 들어가면 빠져나오기 어려웠고, 크롤러도 안에서 빙빙 돌았습니다. 이후 명확한 사이드바 내비게이션을 추가했더니 두 달 안에 사이트 순위가 올라왔습니다.

2. 구조화 데이터: 검색 엔진이 기술 콘텐츠를 이해하게 만들기

구조화 데이터라는 말은 거창하게 들리지만, 실제로는 검색 엔진을 위한 ‘라벨’입니다. 내 글에 ‘이 글은 튜토리얼입니다’, ‘작성자는 누구입니다’, ‘발행일은 2026년 4월입니다’ 같은 라벨을 붙이면 검색 엔진은 콘텐츠를 더 정확하게 표시할 수 있습니다.

Google은 공식적으로 JSON-LD 형식을 권장합니다. 이유는 간단합니다. JSON-LD는 HTML 콘텐츠와 분리된 스크립트 블록이라 페이지 구조를 오염시키지 않고, 유지보수도 쉽습니다. 글 위에 ‘기계가 읽을 수 있는’ 설명서를 한 겹 더 붙인다고 보면 됩니다.

구조화 데이터의 직접 효과: 클릭률 상승

데이터는 거짓말을 하지 않습니다.

35%
CTR 상승

구조화 데이터가 있는 페이지는 클릭률(CTR)이 약 35% 높아질 수 있습니다. 무엇이 이 상승을 만들까요? 검색 결과의 표시 방식이 달라지기 때문입니다.

일반 검색 결과에는 제목과 설명만 있습니다. 구조화 데이터를 추가하면 검색 결과에 작성자 이미지, 발행일, 글 평점, FAQ 접힘 블록 등이 표시될 수 있습니다. 이런 추가 요소는 검색 결과를 더 눈에 띄게 만들고, 클릭률은 자연스럽게 올라갑니다.

기술 블로그에 필요한 Schema 유형

기술 블로그에는 최소한 이 네 가지 Schema가 필요합니다.

1. Article Schema: 모든 기술 글에 표시해야 합니다. 핵심 필드는 제목, 작성자, 발행일, 수정일, 대표 이미지, 요약입니다.

2. BreadcrumbList Schema: 브레드크럼 내비게이션입니다. 검색 엔진이 사이트 계층 구조를 이해하도록 돕습니다.

3. Person Schema: 작성자 정보입니다. 전문 배경을 보여주고 E-E-A-T(경험, 전문성, 권위성, 신뢰성) 신호를 만듭니다.

4. Organization Schema: 웹사이트 또는 조직 정보입니다. 블로그에 브랜드명과 Logo가 있다면 검색 엔진이 브랜드 인식을 만드는 데 도움이 됩니다.

JSON-LD 코드 템플릿(바로 가져다 쓰기)

아래는 기술 블로그용 Article Schema 전체 템플릿입니다. 자신의 상황에 맞게 수정하면 됩니다.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "기술 블로그 SEO의 세 기둥: 내부 링크, 구조화 데이터, Core Web Vitals 실전",
  "description": "내부 링크 전략, 구조화 데이터 Schema 구현, Core Web Vitals 최적화를 익혀 최소한의 투입으로 SEO 효과를 크게 높이는 방법입니다.",
  "image": "https://yourdomain.com/images/tech-blog-seo-guide.jpg",
  "author": {
    "@type": "Person",
    "name": "작성자 이름",
    "url": "https://yourdomain.com/about"
  },
  "publisher": {
    "@type": "Organization",
    "name": "블로그 이름",
    "logo": {
      "@type": "ImageObject",
      "url": "https://yourdomain.com/logo.png"
    }
  },
  "datePublished": "2026-04-26",
  "dateModified": "2026-04-26",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://yourdomain.com/posts/tech-blog-seo-guide"
  }
}
</script>

이 코드는 글의 &lt;head&gt; 또는 &lt;body&gt; 안에 넣으면 됩니다. Astro 프레임워크라면 레이아웃 컴포넌트에 넣어 자동 생성할 수 있습니다.

검증 절차

Schema를 작성했다고 바로 배포하지 말고 먼저 검증해야 합니다. 반드시 챙길 도구는 두 가지입니다.

  1. Google Rich Results Test: 페이지 URL을 입력하거나 코드를 붙여 넣고 Google이 올바르게 파싱할 수 있는지 확인합니다.
  2. Google Search Console 구조화 데이터 보고서: 배포 후 지속적으로 모니터링하고, 오류가 보이면 바로 수정합니다.

기술 블로그의 특수 사례: HowTo와 코드 예제

튜토리얼형 글에는 HowTo Schema를 사용할 수 있습니다. 검색 결과에 단계 미리보기를 보여줄 수 있어 사용자 경험이 좋아집니다. 다만 Google의 HowTo 표시 정책은 바뀔 수 있고, 현재는 주로 정부 및 건강 관련 사이트에 풍부한 결과를 우선 표시합니다.

코드 예제는 어떻게 표시할까요? 아직 공식적인 ‘Code Snippet Schema’는 없습니다. 제가 쓰는 방식은 &lt;pre&gt;&lt;code&gt; 태그와 구문 강조를 함께 쓰고, Article Schema의 articleBody 필드에 글 안에 코드 예제가 포함되어 있음을 표시하는 것입니다. 이렇게 하면 검색 엔진은 최소한 이 글이 기술 콘텐츠라는 점을 이해합니다.

3. Core Web Vitals: 기술 블로그의 성능 기준선

Core Web Vitals는 Google이 웹페이지 사용자 경험을 측정하는 지표 묶음입니다. 2021년부터 이 지표는 공식적으로 검색 순위 요소가 되었습니다. 2024년 3월 Google은 기존 FID(First Input Delay)를 INP(Interaction to Next Paint)로 교체했습니다. 그래서 현재 세 가지 주요 지표는 LCP, INP, CLS입니다.

세 지표는 얼핏 암호처럼 보이지만, 실제로는 세 가지를 측정합니다. 빨리 로드되는지, 상호작용이 매끄러운지, 레이아웃이 안정적인지입니다.

LCP(Largest Contentful Paint): 최대 콘텐츠 렌더링 시간

LCP는 페이지의 주요 콘텐츠가 얼마나 빨리 로드되는지 측정합니다. 정확히는 사용자가 페이지 로드를 시작한 시점부터 뷰포트 안의 가장 큰 이미지나 텍스트 블록이 완전히 렌더링될 때까지의 시간입니다.

권장 기준: 2.5초 이내. 4초를 넘으면 ‘개선 필요’입니다.

기술 블로그의 LCP 병목은 보통 두 가지입니다.

이미지 로딩: 기술 글의 대표 이미지나 설명 이미지는 대체로 큽니다. 해결 방법은 다음과 같습니다.

  • JPEG 대신 WebP 형식을 사용합니다. 용량이 25%-30% 줄어듭니다
  • 첫 화면의 큰 이미지는 &lt;link rel="preload"&gt;로 미리 로드합니다
  • CDN 캐시를 설정합니다

코드 블록 렌더링: 코드 블록에 JavaScript 구문 강조를 쓰면 LCP가 느려질 수 있습니다. 저도 예전에 이 문제를 겪었습니다. highlight.js의 자동 로딩 모드를 썼더니 첫 화면 코드 블록 렌더링이 너무 느렸습니다. 이후 정적 사전 렌더링으로 바꾸니, Astro에서는 기본적으로 지원됩니다. LCP가 3.2초에서 1.8초로 바로 내려갔습니다.

INP(Interaction to Next Paint): 상호작용 응답 속도

INP는 사용자가 버튼을 클릭하거나 텍스트를 입력한 뒤, 페이지가 다음 프레임을 응답하고 렌더링하기까지 걸리는 시간을 측정합니다.

권장 기준: 200ms 이내. 500ms를 넘으면 ‘개선 필요’입니다.

기술 블로그의 상호작용 병목은 주로 다음 지점에서 생깁니다.

검색 기능: 사이트 내부 검색을 프론트엔드 필터링으로 구현하면 긴 작업이 발생할 수 있습니다. 해결 방법은 다음과 같습니다.

  • debounce로 트리거 빈도를 제한합니다
  • 복잡한 검색 로직은 Web Worker로 옮깁니다

코드 복사 버튼: 복사 기능 자체는 복잡하지 않습니다. 하지만 clipboard API를 쓰는 동시에 다른 DOM 작업까지 처리하면 메인 스레드가 막힙니다. 어떤 블로그에서는 복사 버튼을 누를 때 DOM 상태를 동기적으로 업데이트해서 INP가 급증했습니다. 비동기 업데이트로 바꾸니 문제가 해결되었습니다.

긴 작업 분할: 50ms를 넘는 JavaScript 작업은 모두 ‘긴 작업’입니다. requestIdleCallback으로 중요하지 않은 일을 브라우저 유휴 시간에 실행하거나, setTimeout(fn, 0)으로 작업을 나누면 됩니다.

CLS(Cumulative Layout Shift): 레이아웃 안정성

CLS는 페이지 로딩 중 요소가 갑자기 다른 위치로 ‘튀는지’를 측정합니다.

권장 기준: 0.1 미만. 0.25를 넘으면 ‘개선 필요’입니다.

기술 블로그에서 자주 보이는 CLS 문제는 다음과 같습니다.

이미지 공간 미리 확보: 이미지 크기를 미리 지정하지 않으면 로딩 중 이미지가 페이지를 밀어내고 아래 콘텐츠가 갑자기 내려갑니다. 해결 방법은 &lt;img&gt; 태그에 width와 height 속성을 넣거나 CSS의 aspect-ratio를 사용하는 것입니다.

폰트 로딩: 커스텀 폰트가 로드될 때 텍스트가 먼저 시스템 폰트로 표시된 뒤 갑자기 커스텀 폰트로 바뀌며 레이아웃이 흔들릴 수 있습니다. font-display: swap은 이를 완화하지만, 더 좋은 방법은 CSS의 size-adjust 속성으로 두 폰트의 크기를 맞추는 것입니다.

코드 블록 높이 확보: 기술 블로그에서 가장 흔한 문제입니다. 코드 블록이 렌더링되기 전에는 높이를 알 수 없고, 렌더링된 뒤 갑자기 커지면서 아래 콘텐츠가 모두 밀립니다. 제가 쓰는 방식은 코드 블록에 최소 높이 min-height를 지정하거나 Skeleton 플레이스홀더로 먼저 공간을 잡아두는 것입니다.

기술 블로그의 특수 사례: 정적 생성 vs 동적 렌더링

기술 블로그를 정적 생성(SSG)으로 만들지, 동적 렌더링(SSR)으로 만들지는 Core Web Vitals에 큰 영향을 줍니다.

제 권장은 명확합니다. 콘텐츠 중심 기술 블로그라면 SSG를 우선 선택하세요. Astro, Hugo, Next.js의 정적 내보내기 모드는 모두 좋은 선택입니다. 정적 페이지는 서버 응답이 빠르고 JavaScript 실행 비용이 적어 LCP와 INP에서 기본적으로 유리합니다.

반드시 SSR을 써야 한다면 캐시 전략을 제대로 설정해야 합니다. 매 방문마다 다시 계산하게 만들면 안 됩니다.

4. 세 기둥 통합: 기술 블로그 SEO 실전 체크리스트

이론을 충분히 다뤘으니 이제 바로 대조하며 실행할 수 있는 체크리스트를 드리겠습니다. 세 가지 기둥을 하나의 전체 체크리스트로 묶었고, 우선순위에 따라 정렬했습니다. 각 항목에는 구체적인 실행 방법도 붙였습니다.

내부 링크 체크리스트(10개 항목)

점검 항목도구/방법시간 비용
1. 고립 페이지 탐지Screaming Frog / Ahrefs Site Audit30분
2. 필러 페이지 식별주제 수동 정리1시간
3. 필러-클러스터 링크 완전성크롤러 도구로 양방향 링크 확인30분
4. 앵커 텍스트 설명성 점검수동 샘플링 + Search Console 내부 링크 보고서30분
5. 내비게이션 메뉴 수 점검5-7개 항목으로 제한10분
6. 중요 페이지 클릭 깊이핵심 콘텐츠가 ≤3번 클릭으로 도달 가능한지 확인30분
7. 브레드크럼 내비게이션 완전성모든 페이지에 브레드크럼이 있는지 확인20분
8. 시리즈 글 내비게이션 점검이전/다음 글 링크 완전성 확인30분
9. 카테고리/태그 페이지 링크콘텐츠로 올바르게 링크되는지 확인20분
10. 깨진 링크 탐지Google Search Console + 도구30분

고립 페이지 탐지가 가장 중요합니다. Screaming Frog에는 ‘Orphan Pages’ 기능이 있어 어떤 내부 링크도 가리키지 않는 페이지를 찾아낼 수 있습니다. Ahrefs Site Audit도 비슷합니다. 고립 페이지를 찾았다면, 오래된 콘텐츠라면 삭제하고, 가치 있는 콘텐츠라면 관련 필러 글에 연결해야 합니다.

구조화 데이터 체크리스트(8개 항목)

점검 항목도구/방법시간 비용
1. Article Schema 필수 필드Google Rich Results Test글당 5분
2. 작성자 정보 완전성Person Schema + 작성자 페이지30분
3. 발행/수정일 정확성글의 실제 날짜와 대조10분
4. 브레드크럼 SchemaBreadcrumbList 검증20분
5. Organization SchemaLogo + 이름 설정20분
6. 풍부한 결과 테스트Google Rich Results Test글당 5분
7. Search Console 구조화 데이터 보고서오류 수 모니터링매주 5분
8. Schema 코드 위치head 또는 body 하단에 배치10분

Article Schema 필수 필드에는 headline, author, datePublished, dateModified, image, publisher가 포함됩니다. 하나라도 빠지면 풍부한 결과 표시가 영향을 받을 수 있습니다. 배포 전에는 반드시 글별로 검증해야 합니다.

Core Web Vitals 체크리스트(12개 항목)

점검 항목도구/방법시간 비용
1. PageSpeed Insights 분석사이트 전체 LCP/INP/CLS10분
2. Search Console CWV 보고서URL 단위 데이터 확인10분
3. LCP 요소 식별Chrome DevTools Performance20분
4. 첫 화면 이미지 preloadpreload 태그 설정30분
5. 이미지 형식 최적화WebP + 압축글당 20분
6. CDN 캐시 설정Cloudflare/Vercel 설정30분
7. 코드 블록 렌더링 최적화정적 사전 렌더링1시간
8. 긴 작업 탐지Chrome DevTools30분
9. 이벤트 핸들러 최적화debounce/throttle1시간
10. 이미지 크기 미리 지정width/height 또는 aspect-ratio30분
11. 폰트 로딩 전략font-display + size-adjust1시간
12. 동적 콘텐츠 플레이스홀더Skeleton 또는 min-height1시간

PageSpeed Insights 분석이 출발점입니다. 사이트 주소를 입력하면 LCP, INP, CLS의 구체적인 수치와 개선 제안을 보여줍니다. 전체 지표가 기준을 통과하지 못한다면 항목별로 깊게 점검하면 됩니다.

ROI 추정: 어디서부터 시작할까?

세 가지 기둥의 투입 대비 효과는 다릅니다.

최적화 항목시간 투입기대 효과
구조화 데이터1-2주CTR 10-15% 상승
내부 링크2-4주트래픽 15-20% 상승
Core Web Vitals2-3주순위 5-10% 상승

제 권장은 구조화 데이터를 먼저 적용하고, 내부 링크를 보완한 뒤, Core Web Vitals를 지속적으로 모니터링하는 것입니다. 이유는 명확합니다. 구조화 데이터는 변경 범위가 작고 효과가 빠릅니다. 내부 링크는 콘텐츠 구조를 다시 정리해야 하므로 작업량이 더 큽니다. Core Web Vitals는 한 번에 끝나는 작업이 아니라 지속 최적화입니다.

5. Astro 블로그 실전 사례

블로그가 Astro 프레임워크로 되어 있다면 축하할 만합니다. 많은 SEO 최적화를 자동화할 수 있기 때문입니다. Astro의 설계 철학은 ‘성능 우선’입니다. Content Collections와 이미지 최적화 기능은 앞에서 말한 문제를 해결하는 데 잘 맞습니다.

Content Collections로 Schema 자동 생성

Astro의 Content Collections는 글 데이터를 관리하는 데 유용하고, Article Schema를 자동 생성하는 데도 쓸 수 있습니다. 기본 아이디어는 글의 frontmatter schema를 정의한 뒤, 레이아웃 컴포넌트에서 이 데이터를 읽어 JSON-LD로 렌더링하는 것입니다.

예를 들어 글의 frontmatter가 다음과 같다고 합시다.

---
title: "기술 블로그 SEO 세 기둥 실전"
description: "내부 링크, 구조화 데이터, Core Web Vitals 최적화 익히기"
pubDate: 2026-04-26
category: "media"
tags:
  - "SEO"
  - "콘텐츠 운영"
author: "default"
heroImage: "/images/media/tech-blog-seo.jpg"
---

Astro의 레이아웃 컴포넌트에서는 이 데이터로 JSON-LD를 생성할 수 있습니다.

---
// src/layouts/PostLayout.astro
const &#123; title, description, pubDate, heroImage &#125; = Astro.props;
const schema = &#123;
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": title,
  "description": description,
  "datePublished": pubDate.toISOString(),
  "image": heroImage,
  // ... 기타 필드
&#125;;
---

<script type="application/ld+json" set:html=&#123;JSON.stringify(schema)&#125; />

이렇게 하면 모든 글의 Schema가 자동으로 생성되고, 수동으로 관리할 필요가 없습니다. 새 글을 추가해도 Schema를 빼먹을 걱정이 줄어듭니다.

이미지 최적화: @astrojs/image의 힘

Astro의 @astrojs/image 통합은 이미지를 자동으로 최적화합니다.

  • WebP 형식으로 자동 변환
  • 여러 크기의 이미지 자동 생성(반응형 이미지)
  • lazy loading 기본 적용
  • 이미지 크기 자동 추론(CLS 문제 해결)

설정도 간단합니다.

// astro.config.mjs
import &#123; defineConfig &#125; from 'astro/config';
import image from '@astrojs/image';

export default defineConfig(&#123;
  integrations: [
    image(&#123;
      serviceEntryPoint: '@astrojs/image/sharp',
    &#125;),
  ],
&#125;);

이 통합을 사용하면 &lt;Image /&gt; 컴포넌트가 최적화된 이미지를 자동으로 출력하고, width와 height 속성도 붙입니다. CLS 문제는 거의 자동으로 해결됩니다.

내부 링크: 시리즈 글 자동 내비게이션

Astro에는 내부 링크 자동 발견 기능이 내장되어 있지 않습니다. 하지만 Content Collections를 이용하면 시리즈 글의 자동 내비게이션을 구현할 수 있습니다.

글이 속한 시리즈를 나타내는 series 필드와 순서를 나타내는 seriesOrder 필드가 있다고 가정해 봅시다.

series: "seo-analytics-guide"
seriesOrder: 4

다음과 같은 컴포넌트를 작성하면 ‘이전 글/다음 글’ 링크를 자동으로 렌더링할 수 있습니다.

---
// src/components/SeriesNav.astro
import &#123; getCollection &#125; from 'astro:content';

const &#123; series, currentOrder &#125; = Astro.props;
const allPosts = await getCollection('posts', (&#123; data &#125;) =&gt; data.series === series);
const sorted = allPosts.sort((a, b) =&gt; a.data.seriesOrder - b.data.seriesOrder);
const prevPost = sorted.find(p =&gt; p.data.seriesOrder === currentOrder - 1);
const nextPost = sorted.find(p =&gt; p.data.seriesOrder === currentOrder + 1);
---

&lt;nav class="series-nav"&gt;
  &#123;prevPost && &lt;a href=&#123;`/posts/$&#123;prevPost.slug&#125;`&#125;&gt;이전 글: &#123;prevPost.data.title&#125;&lt;/a&gt;&#125;
  &#123;nextPost && &lt;a href=&#123;`/posts/$&#123;nextPost.slug&#125;`&#125;&gt;다음 글: &#123;nextPost.data.title&#125;&lt;/a&gt;&#125;
&lt;/nav&gt;

이 컴포넌트를 글 레이아웃에 넣으면 시리즈 글 내비게이션이 자동으로 완성됩니다. 수동 유지보수가 필요 없고, 새 글을 추가할 때도 따로 수정할 일이 줄어듭니다.

SSG 성능 이점: Core Web Vitals의 기본 가산점

Astro의 기본 모드는 정적 생성(SSG)입니다. 정적 생성 페이지는 JavaScript 실행 비용이 없습니다. 명시적으로 추가하지 않는 한 그렇습니다. 서버 응답도 빠릅니다.

실측 기준으로 제 Astro 블로그의 평균 LCP는 1.5초, INP는 거의 0입니다. 상호작용 JavaScript가 없기 때문입니다. CLS도 0.05 이하로 안정적입니다. 예전에 쓰던 Next.js SSR 모드보다 훨씬 나았습니다.

블로그가 콘텐츠 중심이고 사용자 로그인이나 실시간 데이터가 필요 없다면 Astro의 SSG 모드를 강하게 추천합니다. 성능 이점은 기본으로 따라오며, 별도 최적화 부담도 줄어듭니다.

결론

기술 블로그 SEO는 한 번 하고 끝나는 작업이 아니라 지속적으로 최적화하는 과정입니다. 그래도 좋은 소식은 있습니다. 세 가지 기둥을 한 번 제대로 세워두면 이후 유지보수 비용은 낮습니다.

실행 순서를 정리하면 이렇습니다.

첫 번째: Google Rich Results Test로 블로그에 구조화 데이터가 있는지 확인합니다. 없다면 Article Schema부터 추가하세요. 반나절이면 끝낼 수 있고, 효과도 빠르게 확인됩니다.

두 번째: Screaming Frog 또는 Ahrefs로 고립 페이지를 확인합니다. 찾았다면 오래된 콘텐츠는 삭제하고, 가치 있는 콘텐츠는 관련 글에 연결합니다. 일주일 안에 끝낼 수 있고, 트래픽 변화가 눈에 띌 수 있습니다.

세 번째: PageSpeed Insights로 Core Web Vitals를 분석합니다. 기준에 미달한다면 4장의 체크리스트에 따라 하나씩 최적화하세요. 이 과정은 2-3주가 걸릴 수 있지만 충분히 할 만한 가치가 있습니다.

매주 30분씩 투자하면 3개월 뒤 블로그의 검색 가시성은 실질적으로 개선됩니다. 빈말이 아닙니다. 제 블로그도 그렇게 한 단계씩 올라왔습니다.

그리고 Astro 프레임워크를 쓰고 있다면 5장의 설정 템플릿은 바로 가져다 쓸 수 있습니다. 도메인과 작성자 정보만 바꾸면 됩니다.

기술 블로그 SEO 세 기둥 최적화 프로세스

내부 링크, 구조화 데이터, Core Web Vitals를 체계적으로 최적화하는 전체 절차

⏱️ Estimated time: 180 min

  1. 1

    Step 1: 구조화 데이터 Schema 추가

    가장 빠르게 효과를 볼 수 있는 최적화 항목이며, 1-2주 안에 완료할 수 있습니다:

    • Google Rich Results Test로 기존 페이지에 Schema가 있는지 확인합니다
    • 모든 글에 Article Schema를 추가합니다. 필수 필드는 headline, author, datePublished, dateModified, image, publisher입니다
    • BreadcrumbList Schema를 추가해 브레드크럼 내비게이션을 표시합니다
    • Person Schema를 추가해 작성자 정보를 보여줍니다
    • 모든 Schema가 올바르게 파싱되는지 검증합니다
    • 기대 효과: CTR 10-15% 상승
  2. 2

    Step 2: 내부 링크 구조 최적화

    콘텐츠 구조를 재정비하며, 2-4주 정도가 걸립니다:

    • Screaming Frog 또는 Ahrefs Site Audit으로 고립 페이지를 찾습니다
    • 필러 콘텐츠, 즉 각 주제의 ‘총론’ 역할을 하는 글을 식별합니다
    • 필러-클러스터 양방향 링크 구조를 만듭니다
    • ‘여기를 클릭’ 같은 문구 대신 설명형 앵커 텍스트를 사용합니다
    • 핵심 콘텐츠가 3번 이내의 클릭으로 도달 가능하도록 만듭니다
    • 깨진 링크를 확인하고 수정합니다
    • 기대 효과: 트래픽 15-20% 상승
  3. 3

    Step 3: Core Web Vitals 지표 최적화

    지속적으로 모니터링하고 개선하는 항목이며, 초기 개선에는 2-3주 정도가 걸립니다:

    • PageSpeed Insights로 LCP/INP/CLS 기준 데이터를 확보합니다
    • LCP 최적화: 이미지를 WebP로 변환하고, CDN을 설정하며, 첫 화면 이미지를 preload합니다
    • INP 최적화: debounce를 적용하고, 긴 작업을 나누며, DOM 업데이트를 비동기로 처리합니다
    • CLS 최적화: 이미지 크기를 미리 지정하고, 폰트 로딩 전략을 정하며, 코드 블록 높이를 미리 확보합니다
    • Astro 같은 SSG 프레임워크를 우선 사용해 기본 성능 이점을 얻습니다
    • 기대 효과: 순위 5-10% 상승
  4. 4

    Step 4: 지속 모니터링과 반복 개선

    장기 모니터링 체계를 만들고 매주 30분씩 점검합니다:

    • Google Search Console로 구조화 데이터 오류를 모니터링합니다
    • Search Console의 Core Web Vitals 보고서를 정기적으로 확인합니다
    • 매월 내부 링크 상태를 점검합니다. 고립 페이지와 깨진 링크를 확인합니다
    • 새 글을 발행할 때 Schema 템플릿을 자동 적용합니다
    • 데이터 피드백을 바탕으로 최적화 우선순위를 조정합니다

FAQ

기술 블로그 SEO 최적화는 어느 기둥부터 시작해야 하나요?
권장 순서는 구조화 데이터 → 내부 링크 → Core Web Vitals입니다. 구조화 데이터는 변경 범위가 작고 효과가 빠릅니다(1-2주, CTR 10-15% 상승). 내부 링크는 콘텐츠 구조를 정리해야 합니다(2-4주, 트래픽 15-20% 상승). Core Web Vitals는 지속 최적화 항목입니다(2-3주, 순위 5-10% 상승).
내부 링크의 필러-클러스터 구조는 무엇이며 어떻게 적용하나요?
필러-클러스터 구조는 콘텐츠를 조직하는 방식입니다:

• 필러 콘텐츠: 특정 주제의 ‘총론’ 글입니다. 예를 들면 ‘React 완전 가이드’입니다
• 클러스터 콘텐츠: 필러 아래의 세부 글입니다. 예를 들면 ‘useState 상세 설명’, ‘useEffect 모범 사례’입니다
• 양방향 링크: 필러 글은 모든 클러스터 글로 링크하고, 클러스터 글은 다시 필러 글로 링크합니다

적용 순서: 필러 주제를 식별합니다 → 각 필러마다 총론 글을 만듭니다 → 필러를 중심으로 클러스터 글을 작성합니다 → 양방향 링크 관계를 만듭니다
기술 블로그에는 어떤 구조화 데이터 Schema를 반드시 추가해야 하나요?
최소 네 가지 Schema가 필요합니다:

• Article Schema: 글 제목, 작성자, 날짜, 대표 이미지 같은 핵심 정보를 표시합니다
• BreadcrumbList Schema: 브레드크럼 내비게이션으로 검색 엔진이 사이트 계층을 이해하도록 돕습니다
• Person Schema: 작성자 정보를 표시해 E-E-A-T 신호를 만듭니다
• Organization Schema: 블로그 브랜드 정보가 있을 때 사용합니다

Google Rich Results Test로 Schema가 올바르게 파싱되는지 검증하고, 배포 후에는 Search Console에서 오류를 계속 모니터링합니다.
Core Web Vitals의 세 지표 기준은 얼마이며 어떻게 최적화하나요?
세 지표의 기준은 다음과 같습니다:

• LCP(최대 콘텐츠 렌더링): 좋음 &lt;2.5s, 개선 필요 &gt;4s
• INP(상호작용 응답): 좋음 &lt;200ms, 개선 필요 &gt;500ms
• CLS(레이아웃 안정성): 좋음 &lt;0.1, 개선 필요 &gt;0.25

기술 블로그에서 자주 쓰는 최적화는 이미지를 WebP로 변환하고 크기를 미리 지정하기, 코드 블록 정적 사전 렌더링, 폰트 로딩 전략 적용, Astro처럼 SSG 프레임워크를 사용하는 것입니다.
Astro 프레임워크는 SEO 측면에서 어떤 기본 장점이 있나요?
Astro의 SEO 장점은 주로 다음과 같습니다:

• Content Collections: Article Schema를 자동 생성할 수 있어 수동 유지보수가 줄어듭니다
• @astrojs/image: WebP 변환, lazy loading, 크기 추론을 자동화합니다. CLS 해결에 도움이 됩니다
• SSG 모드: JavaScript 비용이 거의 없어 LCP와 INP가 기본적으로 좋습니다
• 시리즈 글 내비게이션: 컴포넌트로 이전/다음 글 링크를 자동 생성할 수 있습니다

실측 기준으로 Astro 블로그의 평균 LCP는 1.5s, INP는 거의 0, CLS는 0.05 이하로 안정적입니다.
고립 페이지는 어떻게 찾고 고치나요?
고립 페이지를 찾고 수정하는 절차는 다음과 같습니다:

• 도구: Screaming Frog의 ‘Orphan Pages’ 기능 또는 Ahrefs Site Audit을 사용합니다
• 탐지: 사이트 URL을 입력하면 내부 링크가 들어오지 않는 페이지 목록이 표시됩니다
• 처리 방식:
- 오래된 콘텐츠: 삭제하거나 아카이브합니다
- 가치 있는 콘텐츠: 관련 필러 글에 연결합니다
- 중복 콘텐츠: 301 리디렉션 또는 canonical 태그를 설정합니다
• 예방: 새 글을 발행할 때 최소 하나의 내부 링크가 해당 글을 가리키도록 합니다
기술 블로그의 앵커 텍스트는 어떻게 써야 하나요?
앵커 텍스트 모범 사례는 다음과 같습니다:

• ‘여기를 클릭’, ‘자세히 보기’처럼 의미 없는 문구를 피합니다
• 사용자와 검색 엔진이 링크 내용을 이해할 수 있도록 설명형 문구를 사용합니다
• 예: ‘여기를 클릭’ 대신 ‘React 상태 관리 튜토리얼’을 사용합니다
• 문장 안에 자연스럽게 녹이고 키워드를 억지로 쌓지 않습니다
• 같은 페이지에서 같은 대상 URL을 여러 번 링크한다면 앵커 텍스트를 다양화할 수 있습니다

연구에 따르면 설명형 앵커 텍스트는 SEO 효과와 사용자의 클릭 의향을 함께 높입니다.

3분 읽기 · 게시일: 2026년 4월 26일 · 수정일: 2026년 10월 21일

댓글

GitHub로 로그인하여 댓글을 남기세요

Easton BlogEaston Blog