Google 검색은 어떻게 동작하는가?
Google I/O Extended 2019 Seoul에서 발표할 내용의 일부입니다. 그 날 발표에서 대부분의 내용을 다루겠지만 발표 시간 사정상 일부를 다루지 못할 수 있기 때문에 미리 블로그 글을 작성해두고자 합니다.
발표자료:
Update:
2019년 7월 1일자로 robots.txt의 표준화와 함께 일부분이 살짝 바뀌었습니다. 자세한 내용은 다음 글을 참고하세요.
tl;dr;
- 자바스크립트로 이루어진 사이트 (with SPA)도 검색이 잘 된다
- HTML과 RWD는 여전히 중요하다.
- Structured Data를 적절히 활용해보자.
검색
검색은 쉽게 생각하면 아주 단순하게 동작합니다.
- 검색 서비스는 주기적으로 웹 콘텐츠를 수집합니다. (=크롤링)
- 유저는 검색어를 입력합니다.
- 검색 서비스는 수집한 웹사이트 중 유저가 입력한 검색어가 의도한 바와 가장 일치한 웹사이트에 순위를 매깁니다.
- 적절한 방법으로 결과를 화면에 노출시킵니다.
하지만 이 단계 하나하나가 단순하게 생각할 수 없을 정도로 복잡한 알고리즘과 다양한 구성요소로 이루어져있기 때문에 단순하게만 생각할 수는 없습니다.
검색 결과에서 상위 노출되도록 웹 콘텐츠를 최적화하는 작업을 검색 엔진 최적화 (SEO, Search Engine Optimization) 라고 부르는 데 이 과정이 꽤 힘든 과정이고 여러 조건을 다방면으로살펴보기 때문에 간단하게 진행할 수 있는 문제도 아닙니다.
웹 콘텐츠 수집
구글의 웹 크롤러인 Googlebot은 주기적으로 웹사이트들을 탐색하면서 검색 가능한 콘텐츠를 추가합니다. 기본적으로 도메인을 가지고 있으면서 Robots.txt를 따로 선언하지 않은 웹사이트들은 검색봇이 수집할 수 있습니다.
만약 검색되고싶지 않은 특정 PATH가 있는 경우 Robots.txt를 사용해 검색을 못하도록 막을 수 있습니다. 주로 Admin 페이지나 사내용 페이지를 Robots.txt를 이용해 막습니다.
User-agent: *
Disallow: /admin/
Disallow: /internal/이런 식의 코드를 이용하면 /admin/ 과 /internal/ 을 제외한 모든 사이트는 검색이 가능합니다. 하지만 애초에 Googlebot은 로그인 인증이 필요한 부분에 대해서는 검색결과에 노출시키지 않기 때문에 저런 케이스는 로그인 인증을 붙여두면 별 문제 없이 검색 결과에 노출되지 않을 것입니다.
Robots.txt에 위 PATH를 추가해두면 Admin 페이지나 사내용 페이지의 경로를 외부인이 알 수 있기 때문에 되도록이면 로그인 인증 등을 통해 막는 것을 권장합니다. 또는 도메인을 아예 분리하는 방법도 방법 중 하나입니다.
Googlebot이 여러분의 웹페이지를 만났을 때
Googlebot이 여러분의 웹페이지를 만나면, 웹 브라우저가 하는 것과 동일한 액션을 진행합니다.
- HTML을 다운로드 받습니다.
- 다운로드 받은 HTML을 해석하여 렌더합니다.
- CSS나 JS가 있다면 모두 포함하여 렌더합니다.
- 최종 결과값을 기준으로 수집합니다.
많은 사람들이 Googlebot이 JavaScript에 대해서는 무시한다고 생각하는데 전혀 그렇지 않으며, JavaScript까지 동작한 결과값을 기준으로 검색결과를 노출시키게 됩니다. 따라서 아래와 같은 코드여도 Googlebot은 정상적으로 콘텐츠를 로딩하고 수집합니다.
<div id="app"></div>
<script src="bundle.js"></script>Googlebot은 얼마전까지는 Chrome 41 버전으로 동작하였지만 Google I/O를 기점으로는 최신 버전의 Chrome으로 동작합니다. 그 전에도 버전은 계속 올렸지만 버전 정보만 41버전이었다는 설도 있습니다.
만약 여러분들의 웹사이트를 Googlebot이 어떻게 보고있는 지 살펴보고 싶다면 Googlebot이 사용하는 Headless Chrome인 Puppeteer를 사용해보는 것도 추천합니다.
다만 Google 검색에서는 검색 결과 순위에 페이지의 렌더링 속도도 조건으로 포함시켜두었기 때문에, 클라이언트측 렌더링보다 서버측 렌더링이 검색 엔진 최적화에는 더 도움이 될 수 있습니다.
의미있는 HTML을 사용하세요.
요즘 프론트엔드 개발자들의 HTML 코드를 보다보면 이런 코드들이 많습니다.
<div class="list">
<div class="item">1</div>
<div class="item">2</div>
</div>Google은 웹사이트의 순위를 매길 때 다양한 조건을 매기며 의미있는 HTML 요소를 사용하는 것도 그 중 하나에 속합니다. 의미 있는 마크업을 적절하게 활용하면 SEO 뿐만 아니라 접근성에도 도움이 되고, 웹의 견고함에도 크게 도움이 되기 때문에 적절한 HTML 코드를 작성하시길 바랍니다.
적절한 title 태그 사용하기
title 태그는 콘텐츠의 제목을 나타낼 때 사용할 수 있습니다. 여러분들의 페이지가 변화함에도 불구하고 항상 똑같은 title 값을 나타내면 검색엔진 최적화에도 나쁠뿐만 아니라 유저가 페이지 콘텐츠를 인식하기 어려운 문제가 생깁니다.
<title>조은의 Medium</title><title>웹사이트 최적화하기 - Medium</title>
적절한 description 메타 사용하기
웹 콘텐츠의 설명을 나타낼 때 메타 태그의 description 을 사용할 수 있습니다. description 이 명시적으로 선언되어있지 않다면 페이지의 콘텐츠를 긁어다가 사용하는 데, 본인이 원하는대로 노출되지 않을 수 있습니다.
<meta name="description" content="콘텐츠의 설명">
그리고 구조화된 데이터 (Structured Data)를 사용하면 웹사이트의 콘텐츠를 더 정확하게 표현하는 것이 가능합니다. 이를 바탕으로 검색엔진이 더 적절한 방법으로 웹 콘텐츠를 표현하는 것이 가능합니다.
아래 스크린샷은 구글 검색 (모바일)에서 chicken recipe를 검색했을 때 나오는 결과 값입니다.
이 때 해당 콘텐츠들은 구조화된 데이터를 사용하고 있으며, Google은 해당 데이터를 통해서 검색결과를 다르게 노출시켜주고 있는 것입니다. 구조화된 데이터를 페이지에 추가하는 방법은 아래 Codelabs를 살펴보시길 바랍니다.
그 외에도
아래 링크에서 검색엔진 최적화(SEO) 초보자 가이드를 제공하고 있습니다. 검색엔진 최적화를 위한 다양한 방법은 아래 링크를 참고해주시면 더 나은 검색결과를 만들 수 있으리라 생각합니다.
Best Practice
콘텐츠의 실제 신뢰도와 상관 없이 검색 엔진에서 권장하는 대부분의 요구사항을 맞추고, 유저들이 접속하는 비중이 높은 경우 검색결과에서 상위 노출될 수 있습니다.
그런 사이트의 대표적인 예제는 나무위키입니다.
나무위키는 꽤 여러 부분에서 검색 순위가 높아질 수 있는데,
- 적절한 title 태그를 사용합니다.
- 유효한 HTML 요소를 적절히 사용합니다.
- 반응형 웹 디자인으로 모바일과 데스크탑을 적절히 지원합니다.
- 페이지간 링크 연결이 적절하게 잘 엮여 있고, 사이트 전체의 콘텐츠양이 많습니다.
- 유저들의 방문 비율이 높습니다.
끝
한국에서는 네이버 검색이 여전히 중요한 시장이지만, Google 검색도 꽤 중요한 위치를 차지하고 있습니다. 여러가지 오해가 여전히 남아있지만 JavaScript의 문제는 아니고 대부분이 콘텐츠 문제일 것입니다.
SEO에 대한 기초적인 지식을 잘 살펴보고, 더 나은 검색결과를 통해 더 많은 유저들이 여러분들의 페이지에 접근할 수 있도록 하면 좋겠습니다.
