sayyoon.site
postsguestbook
🍩
Dev

SEO를 위한 과정(2) - 검색하면 내 블로그가 최상단에 나오면 좋겠어

2025.05.10

블로그는 만들었는데..
검색해도 안 나오는 내 블로그 심폐소생술하기!

 

검색 엔진

검색 엔진은 사용자가 입력한 키워드에 맞는 검색 결과를 제공하는 프로그램/웹사이트이다.
주요 검색 엔진으로는 우리가 잘 아는 Google, Naver, Daum, Bing, Yahoo 등이 있다.

 

동작 과정

검색엔진은 크롤링 → 인덱싱 → 랭킹 단계를 거쳐 검색 결과를 생성한다.

  1. 크롤링
  • 검색 엔진이 웹페이지 내용을 수집하는 과정
  • 검색 엔진 로봇(크롤러 또는 스파이더)이 링크를 따라 새 페이지를 발견하고 기존 페이지 변경 사항을 확인
  1. 인덱싱
  • 수집한 정보를 분석해 데이터베이스에 저장하고 분류하는 과정
  • 웹페이지의 텍스트, 이미지, 비디오 등을 주제별로 분류
  1. 랭킹
  • 검색어와 가장 관련성 높은 결과를 상위에 노출하는 과정
  • 알고리즘에 따라 수백가지 요소를 평가해 순위를 결정

 

SEO : 검색엔진최적화

즉, SEO는 웹사이트가 크롤링 → 인덱싱 → 랭킹 과정에서 더 잘 발견되고 높은 순위에 노출되도록 최적화하는 작업이다.
티스토리, 벨로그 등을 사용하지 않고 직접 블로그를 배포했기 때문에 개발 블로그를 구글에 노출하고 싶은 나에게 현재 꼭 필요한 작업이라는 소리다!

그렇다면 SEO를 위해 어떤 작업을 진행할 수 있을까?

 

SEO 방법들

  1. 크롤링 최적화

  • 사이트맵 설정

    • XML 형식으로 모든 페이지를 제공해 검색엔진이 사이트 구조를 쉽게 이해할 수 있게 도움
    • /sitemap.xml 파일에서 태그로 경로 지정
    • 검색엔진이 사이트맵을 더 빠르게 인식하게 하기 위해 구글 서치 콘솔 - 사이트맵 메뉴에 경로를 입력했다.

  • robots.txt 설정

    • 사이트 접근 정책 파일로, 크롤러에게 특정 페이지 크롤링 허용/제한 지시
    • 검색 엔진 크롤링 효율화
    • 기본적으로 사이트 최상단에 위치한 /robots.txt 경로에 두면 검색엔진이 먼저 읽고 그 규칙을 따른다.
    • 나 같은 경우는 gatsby를 활용해 블로그를 작성중이기에 static 폴더에 넣어 빌드시 최상위로 복사되기 했다.
    • robots.txt에 /sitemap.xml이나 /sitemap-index.xml를 넣을 수 있다.
      • /sitemap-index.xml : 여러 사이트맵으로 나눠져 있는 인덱스 파일. 대규모(블로그, 카테고리별로 나누는) 경우에 사용
      • /sitemap.xml : 단일 사이트맵으로, 소규모에 사용

  • 적절한 오류 페이지 제공

    • 깨진 링크를 방지하고 사용자와 검색 엔진에 품질 높은 오류 페이지 제공
  1. 인덱싱 최적화

  • 타이틀과 메타데이터 설정

    • <title> : 페이지 핵심 주제를 명확히 전달
    • <meta> : 페이지에 대한 추가 정보 제공

  • 시맨틱 태그 사용

    • 콘텐츠 구조를 명확히 정의해 검색 엔진이 정보의 중요도를 파악
    • 예: <article>, <section>, <header>
  1. 랭킹 최적화

  • HTTPS 사용

    • HTTPS 사이트는 구글에서 가산점을 받고, 안정성을 제공함
    • 저번에 DNS 작업하면서 HTTPS를 사용할 수 있게 이미 바꿔놨다.

  • 모바일 최적화

    • 모바일 우선 인덱싱 적용
    • 모바일에서 잘 작동하는 웹사이트가 검색 순위에서 유리하다고 한다..! (모바일 작업에 신경써야 할 것 같다)

  • 페이지 로딩 속도 최적화

    • 로딩 속도가 빠를수록 사용자 경험과 순위가 향상
    • 인턴할 때, SEO 작업을 위해 웹사이트 로딩과 사용자 경험이 중요하다는 것은 뼈저리게 느꼈었다,,

  • SSR 사용

    • SSR: 검색 엔진 크롤링과 SEO에 유리
    • CSR: 크롤링 효율이 낮음

  그렇다면 SEO를 어떻게 측정할 수 있을까?

먼저, 이전 포스트에서 다뤘던 Google Search Console을 활용할 수 있다.
구글이 내 페이지를 어떻게 인덱싱하는지 알 수 있고, 페이지별 인덱싱 유무, 노출 수, 문제점을 진단할 수 있다.

또한, 가장 대표적인 방법으로 구글에서 제공하는 웹사이트 성능, 접근성, SEO 등을 분석해주는 Lighthouse를 사용할 수 있다. Performance(성능), Accessibility(접근성), Best Practices(최적화), SEO(검색 엔진 최적화) 를 주요 점수 항목으로 사이트별 점수를 내준다!

나는 구글에서의 SEO를 원하기 때문에, 구글이 제공하는 공식 가이드라인을 참고하는 방법도 있다.

 

Gastby에서의 SEO

gatsby는 정적 사이트 생성기라서 기본적으로 SEO에 유리한 구조를 갖고 있지만, 잘못 구성하면 오히려 SEO에 약해질 수 있다. (여러 회사들이 기술 블로그를 gatsby로 만들기에 관심이 갔었는데, 다들 이유가 있었군 ㅎ)

장점

  • 빠른 로딩 속도

    • 정적 HTML로 빌드되어 로딩이 빠름 → SEO 점수 상승

  • 초기 렌더링 HTML 제공 (SSR과 유사)

    • SPA와 달리 검색엔진이 HTML 구조를 바로 읽을 수 있음

  • 메타태그 설정 가능

    • gatsby-plugin-react-helmet 을 사용해서 페이지별 타이틀, 설명, 오픈그래프 태그 설정 가능

한계

  • 클라이언트 사이트 라우팅 이후 콘텐츠 노출 한계

    • 링크 클릭 이후 동적으로 렌더링되는 콘텐츠는 크롤러가 잘 못 볼 수 있음

  • 복잡한 페이지 상태 관리 시 SEO 손해

    • React 상태 기반 콘텐츠가 많으면 초기 HTML에 내용이 없을 수 있음

  • 동적 콘텐츠 SEO 어려움

    • 유저 기반 동적 페이지(예: 로그인 후 볼 수 있는 콘텐츠)는 정적 빌드에서 제외됨

극복 전략

  1. gatsby-plugin-react-helmet을 활용해서 메타태그를 작성한다.
  2. Static Query나 GraphQL로 컨텐츠를 주입한다.
    • 모든 컨텐츠가 빌드 시점에 HTML로 출력되어야 SEO에 좋기 때문에 페이지마다 GraphQL 쿼리로 필요한 데이터를 미리 가져온다.
  3. SSR을 고려하는 전략도 있다.
    • Gatsby v4부터 SSR을 지원한다.
    • 또한 Netlify의 Netlify Functions로 SSR을 운영할 수 있다.
  4. 앞서 언급한 SEO 전략을 사용한다.

 

meta 태그 정리

meta 태그는 웹페이지 정보를 제공해 크롤러가 파악할 수 있게 해주기에, SEO에 중요한 역할을 한다.

  • Meta Title

    • 페이지 제목 정의

  • Meta Description

    • 웹 페이지 요약 정보 제공

  • Meta Keywords

    • 현재는 잘 사용되지 않음

  • Robots Meta 태그

    • 검색 엔진 크롤러의 동작을 제어

  • Open Graph Meta 태그

    • 소셜 미디어에서 링크 공유 시 제목, 이미지 설명 등을 설정

  • Viewport Meta 태그

    • 반응형 웹에서 화면 크기에 맞게 콘텐츠를 조정

 

Open Graph

소셜 미디어에 특화된 프로토콜로 SEO 점수에 직접 영향을 주지는 않지만, 웹사이트의 가시성과 사용자 클릭을 높이는 데 기여한다.

  • og:title: 페이지 제목
  • og:description: 페이지 요약 설명
  • og:url: 페이지 URL
  • og:image: 공유될 이미지 URL
  • og:image:alt: 이미지에 대한 설명
  • og:site_name: 웹사이트 이름
  • og:type: 콘텐츠 유형 (예: article, website 등)
  • article:author: 작성자 정보
  • article:section: 카테고리 정보
  • article:tag: 태그 정보

© Powered by danmin