SEO 기초: 크롤링부터 메타 태그까지

검색 엔진 최적화(SEO, Search Engine Optimization)는 검색 결과에서 페이지가 잘 발견되고 높은 순위에 오르도록 콘텐츠와 구조를 다듬는 일이다. 콘텐츠의 질이 가장 중요하지만, 검색 엔진이 페이지를 읽을 수 있게 만드는 것은 프론트엔드의 몫이다. 관련 용어의 짧은 정의는 용어집에 있다.

검색 엔진이 일하는 순서

flowchart LR
  a["크롤링(Crawl)<br/>봇이 링크를 따라 페이지를 내려받음"] --> b["렌더링<br/>JS 실행 후 최종 DOM 확보"]
  b --> c["색인(Index)<br/>내용을 저장하고 분류"]
  c --> d["순위(Rank)<br/>질의마다 관련도와 품질로 정렬"]
  d --> e["검색 결과 노출"]

색인 단계에서 일어나는 일

크롤러가 가져온 HTML은 그대로 저장되지 않고 전처리를 거친다.

1. HTML 태그와 a·an·the 같은 불용어(stop word), 면책 문구처럼 본문과 무관한 잡음을 걷어 낸다.
2. 남은 키워드로 문서 → 단어의 정방향 색인과 단어 → 문서의 역색인을 만든다(검색엔진의 원리: 역인덱스와 랭킹).
3. 페이지에서 나가는 링크와 들어오는 링크를 세어 링크 관계를 계산한다. 들어오는 링크는 순위 신호가 된다.

사용자가 검색하면 이 색인과 순위 알고리즘으로 결과를 정렬한다.

크롤러가 읽기 쉬운 사이트 구조

• 크롤러가 읽지 못하는 요소(프레임, 플러그인 콘텐츠, 끝없이 파라미터가 붙는 동적 URL)를 줄인다.
• 사이트 계층을 얕게 둔다. 중요한 페이지는 홈에서 몇 번의 클릭 안에 닿아야 한다.
• URL은 짧고 내용을 설명하게 쓰고 키워드를 넣는다. 단어 구분은 밑줄(_) 대신 하이픈(-) 을 쓴다. 검색 엔진은 하이픈을 단어 경계로 보지만 밑줄로 이은 단어는 한 단어로 읽을 수 있다. URL 경로의 단어는 검색 결과에 이동 경로(breadcrumb) 로도 보인다(구조화 데이터로 바꿀 수 있다). 무작위 ID만 있는 URL은 사용자에게 아무것도 알려 주지 않는다.
• URL이 수천 개를 넘는 사이트는 주제별 디렉터리로 묶는다. 구글이 디렉터리마다 갱신 주기를 따로 익힌다.
• 키워드는 사업과 관련 있고, 검색량은 많은데 경쟁 페이지는 적은 것을 고른다.

순위를 정하는 요소

검색 결과 페이지(SERP)는 보통 한 쪽에 결과 열 개를 보여 주고, 질의에 답할 가능성이 높은 순서로 줄을 세운다. 그 순서를 정하는 요소는 넷으로 묶을 수 있다.

• 내부 링크는 사이트 안에서 어떤 페이지가 중요한지 검색 엔진에 알려 준다.
• 링크의 앵커 텍스트는 링크된 페이지가 무엇에 관한지 알려 주는 신호다. 「여기를 클릭」 대신 내용을 설명하는 텍스트를 쓴다. 다른 사이트가 어떤 말로 링크하느냐가 페이지 자체의 글보다 중요하게 쓰이기도 한다.
• 검색 엔진은 shingling 같은 유사 문서 탐지로 중복을 찾는다. 블로그 목록 페이지에 글 전문을 싣지 말고 요약만 보여 주면 같은 글이 두 URL에 생기지 않는다.
• 이미지는 관련 있는 글 가까이에 두고 alt를 쓴다. 이미지 검색에서 처음 사이트를 찾는 사용자도 많다.
• 광고나 자사 CTA가 본문(main content)을 화면 아래로 밀어내지 않게 한다.
• 링크 신호를 넘기고 싶지 않은 링크에는 이유를 표시한다. 사용자 생성 콘텐츠에는 rel="ugc", 광고·제휴에는 rel="sponsored", 그 밖에는 rel="nofollow".
• 키워드 채우기(keyword stuffing) 처럼 순위를 노리고 키워드를 부자연스럽게 반복하는 블랙햇 기법은 스팸 정책 위반이라 효과가 없고 오히려 불이익을 받는다. 조작적 링크 구매 같은 기법으로 받은 불이익은 원인을 고친 뒤에도 알고리즘에 반영되기까지 오래 걸린다. Hobo가 인용한 Google 존 뮬러의 2018년 답변은 「6~12개월이면 안전한 쪽」이라 했고, 몇 년간 회복하지 못하는 사이트도 있다고 했다.
• 바꾼 것이 순위에 반영되기까지 몇 시간에서 몇 달이 걸린다. 몇 주는 기다린 뒤 효과를 판단한다.

robots.txt와 사이트맵

• robots.txt: 사이트 루트에 두고 봇이 들어가지 말아야 할 경로를 알린다. 색인을 막는 장치는 아니다. 막힌 페이지도 다른 곳에서 링크되면 주소만 색인될 수 있다. 색인을 막으려면 noindex 메타 태그를 쓴다.
• 사이트맵(Sitemap): 사이트의 페이지 목록이다. 사람용 HTML 사이트맵과 검색 엔진용 sitemap.xml이 있다. XML 사이트맵에는 URL과 마지막 수정일을 적고, robots.txt에 위치를 적거나 구글 서치 콘솔에 제출한다.

# robots.txt
User-agent: *
Disallow: /admin/
Sitemap: https://example.com/sitemap.xml

색인됐는지는 구글에서 site:example.com으로 검색해 확인한다. 페이지 하나가 구글에 어떻게 보이는지는 Search Console의 URL 검사 도구로 본다.

메타 태그

메타 태그(meta tag)는 <head> 안에서 페이지에 대한 정보를 주는 태그다. 화면에는 보이지 않는다.

<title>과 description은 글자 수 제한이 정해져 있지 않다. 검색 결과는 화면 폭에 맞춰 자르므로 핵심 키워드와 페이지만의 정보를 앞에 둔다. 「대표 키워드 - 브랜드」처럼 구분자로 이어 붙이는 형식이 흔하다.

리다이렉트

주소가 바뀌었을 때 옛 URL로 온 방문자와 봇을 새 URL로 보내는 것이다. 상태 코드에 따라 검색 엔진이 다르게 받아들인다.

리다이렉트를 여러 번 잇는 체인은 느리고 봇이 중간에 멈출 수 있다. 한 번에 최종 주소로 보낸다. 페이지를 옮기거나 합칠 때는 옛 URL마다 새 URL로 가는 301을 남긴다.

링크와 버튼을 구분한다

검색 엔진은 href가 있는 <a>만 링크로 따라간다. href 없는 <a>, <span onclick>, onclick으로 location을 바꾸는 버튼은 사용자에게는 이동처럼 보여도 크롤러에게는 링크가 없다. 그래서 그 뒤의 페이지가 발견되지 않거나 내부 링크 신호를 잃는다(Google 검색 센터: 크롤링 가능한 링크).

• 생김새와 역할을 혼동하지 않는다. 버튼처럼 보이는 링크는 문제없다. 마크업은 역할을 따른다.
• 반대로 "장바구니 담기"처럼 동작을 일으키는 버튼에 <a href>를 붙이지 않는다.
• SPA 라우터의 링크 컴포넌트(<Link> 등)는 실제 <a href>를 렌더링하므로 괜찮다. router.push만 부르는 버튼으로 페이지 이동을 만들지 않는다.

같은 구분은 접근성에도 그대로 적용된다. 스크린 리더는 링크와 버튼을 다르게 안내하고, 링크는 Enter, 버튼은 Enter·Space로 동작한다(키보드 접근성과 포커스 관리).

렌더링 방식과 SEO

자세한 차이는 SPA와 CSR·SSR에 있다.

모바일 우선 색인과 반응형 SEO

구글은 모든 사이트를 모바일 버전 기준으로 크롤링·색인한다(모바일 우선 색인). 모바일 대응 방식은 셋인데, 구글이 권하는 것은 반응형이다.

반응형으로 만들었다고 모바일 SEO가 끝나지는 않는다. 자주 놓치는 것:

사이트맵은 HTML 페이지용과 이미지·동영상용 확장을 구분해 정확히 쓴다. Search Console의 페이지 색인 보고서로 어떤 URL이 색인되고 빠졌는지 확인한다.

흔한 오해: 신경 쓰지 않아도 되는 것

Google 검색 센터의 SEO 기본 가이드는 순위에 거의 영향이 없는 것을 따로 짚는다.

체크리스트

• 페이지마다 고유한 <title>과 description이 있는가
• 의미에 맞는 제목 계층과 시맨틱 태그를 썼는가 (시맨틱 HTML)
• 이미지에 alt가 있는가. 검색 엔진은 이미지 내용을 alt로 이해한다
• 내부 이동이 <a href>인가
• 중복 URL에 canonical이, 옮긴 URL에 301이 있는가
• 모바일에서 읽을 수 있고 충분히 빠른가

관련 노트: 시맨틱 HTML과 문서 구조, SPA와 CSR·SSR, 웹 성능 지표와 Lighthouse, HTTP 프로토콜, 구조화된 콘텐츠와 기계가 읽는 웹, 검색엔진의 원리, 다국어 페이지: lang·hreflang과 국제화, 웹 검색엔진의 동작: 크롤링, 색인, 랭킹, 질의 처리, 문서 head와 메타데이터