지난주 금요일에 짐 챙기러 부산에 내려왔는데, 다음날 부산대에 Google I/O Extended 2019 Busan 행사가 있어 참석했다.

아래 내용은 조은님이 발표하신 자바스크립트는 구글에서 어떻게 검색이 되는가? 를 정리한 내용이다.조은님께서 블로그에 공유해도 된다고 흔쾌히 허락해주셔서 포스팅 하려고 한다.

조은님이 따로 포스팅한 글 Google 검색은 어떻게 동작하는가? - Medium도 있다.

구글 검색과 자바스크립트 사이트

검색어 입력
- 검색 서비스는 기존의 검색 결과를 찾게 되면 사용자가 원하는 방향으로 검색 결과를 보여줌
검색이란?
- 데이터를 긁어와서 필요한 데이터만 정제한 후 유용한 것만 다시 검색 결과에 노출시키는 것

GoogleBot은 어떻게 데이터를 모으는가?

GoogleBot
- 컨텐츠를 크롤링하는 크롤링봇임
- 공식이미지 귀여움ㅋㅋ
정통적인 웹사이트 (정적 페이지)
- 컨텐츠가 완성된 html이 정통적인 정적페이지 방식임
- 자바스크립트는 메뉴를 눌렀을때 다른걸로 이동시키는 용도였음
- 애초에 Body 내부에 <p> 로 컨텐츠가 있기 때문에 구글봇이 방문을 했을 때 인지를 바로 할 수 있음
현대의 웹사이트 (동적 페이지)
- 웹사이트는 AJAX를 호출해서 페이지를 만듬 (컨텐츠를 자바스크립트로 동적으로 생성함)
- GoogleBot 최초로 방문을 했을 때 Body 에는 이것밖에 없음
  - 사람들은 이걸로 컨텐츠가 뭐가 나오는지 알 수 없음ㅋㅋ
- 요즘은 자바스크립트를 실행하지 않고서는 어떤컨텐츠가 있는지를 알 수가 없음
- SPA는 검색이 되지않는다?
  - 왜냐하면 사람도 저 위에꺼 모르니까 봇도 모르지 않을까
  - 아니다!! 구글봇은 똑똑함
  - 해당 페이지를 렌더링하기 때문에 페이지 컨텐츠를 가져갈 수 있음

  
<body>
  <div id="app"></div>
  <script src="bundle.js">
</body>

구글 검색 상위랭크에 위치시키려면 GoogleBot을 알아야 함
- 구글봇은 Chrome을 사용해서 렌더링함
- 크롬은 3년전 41버전. 지난주는 75버전임 (요즘은 4주에 한번씩 릴리즈함)
- v8엔진 3년사이 성능 3~4배 향상됨 (크롬 버전이 높을수록 페이지를 크롤링해가는시간이 빨라짐)
Puppeteer
- 크롬을 더 잘 구동시키기 위한 Node API
- 크롬을 headless모드로 구동시킬 수 있음. 캔버스(결과)만 보여주는 모드
구글봇 + Puppeteer
- Puppeteer를 이용해 페이지를 렌더하고 렌더된 결과물을 수집함
SPA은 검색 결과 노출에 영향을 미치지 않는다!
- “SPA는 검색이 되지 않아요.” 라는 오해를 풀어주고 싶었음
  - festa.io 도 SPA인데 구글에서 검색 잘됨
- SPA 단점을 말해주자면 아무리 빨라도 SSR보다 느림 (일반적으로)
  - 클라이언트가 자바스크립트 렌더링이 아무리 빨라도 서버에서 만들어서 내려주는것 보다 느릴 수 밖에 없음
  - 그래서 SPA+SSR 적절히 섞는 방법을 권장
    - but, 겁나 어려움

SEO

Search Engine Optimizer

Google Engine은 어떻게 동작하는가?
- 2달전 Webmaster Conference Seoul 행사가 있었음
  - 거기서 구글 직원이 구글검색 어떻게 검색하는지 모른다고 했음
- Google io 발표
  - 연사자가 구글검색 어떻게 동작하는지 모른다고 했음
Google Engine 만드는 사람은 몇명?
- 약 3~400명이 구글검색의 코어(알고리즘)을 건드리고, 지원조직까지 건드리면 1000명이 넘을 것임
- 수많은 알고리즘이 구글검색에 쌓이고 쌓인것이 현대의 구글 검색임
- 정확히 “이렇게 동작하니까 이렇게 하세요” 라고 하는건 현실적으로 불가능함

Robots.txt

GoogleBot의 웹 컨텐츠 접근 권한을 제어하는 파일

구글 검색결과에 노출되기 싫은 사이트를 숨길 수 있음

Mnet의 Music API가 구글 검색에 노출된 경우가 있음.
- API가 노출되면 외부에서 긁을 수 있음
- 트래킹 가능
  - 별거 아닌것 같아도 보안상 취약점이 될 수 있음

Robots.txt로 막지 않아서 생긴 문제임

딱히 막을게 없다면 Robots.txt를 만들 필요 없음
- Robot.txt를 안넣으면 이전에 네이버 검색에서 크롤링 안하도록 한 적이 있음
  - User-agent: * Disallow: /
- 네이버 검색결과에 노출은 되지만 이페이지를 들어갔더니 가지고 올 수 있는게 / 밖에 없다?!
robots.txt 취약점
- 어느 페이지에 들어가시던 robots.txt를 들어가면 외부인이 볼 수 있음
  - 네이버에서 /robots.txt 를 들어가면 보임
    - https://www.naver.com/robots.txt
  - 페이스북에 들어가도 보임
    - https://www.facebook.com/robots.txt
- 뭐가 문제일까?
  - /admin이 있네? 들어가볼까? 이거 크래킹해볼까?
  - 위와 같은 robots.txt가 보안 취약점을 노출시킴

User-agent:*
Disallow: /admin/
Disallow: /internal/

그럼 어떻게 할까?
- 도메인 분리 (sub 도메인)
  - 해당 도메인 통째로 차단
    - ex) nid.naver.com
      - 네이버 회원가입 페이지. 구글에 검색이 안됨
- 인증
  - 검색이 되면 안되는 내부 페이지는 인증을 거쳐야만 볼 수 있도록
    - 구글봇이 아무리 똑똑해도 계정을 만들지는 않을거임ㅋㅋ
    - 계정 인증이 반드시 필요한 상황에는 검색결과가 노출이 되지 않음
    - 반대로 검색 노출이 필요하다면 public으로 설정해야 함
robots.txt 표준
- 2019/07/01에 robots.txt 표준을 만들기로 함.
깃허브의 robotstxt
- 지금까지의 구글검색은 이렇게 하겠지 였음
- 이제부터는 명시적으로 ‘이렇게 하는구나’ 를 알 수 있게 됨

(2019.09.29 추가)

Search Console 에서 Disallow: 가 정상적으로 동작하는지 쉽게 테스트 해볼 수 있다!!

웹페이지 상위랭크에는 무엇이 필요한가

1. 올바른 <title> 값 사용

나쁜 사례

Recipe
Recipe
Recipe

모든 컨텐츠의 제목을 동일하게 선언한 경우

애매한 사례

동일하지는 않지만 이 페이지가 어디인지 모르는 경우

치킨 Recipe
맥주 Recipe
곱창전골 Recipe

좋은 사례

적절하게 컨텐츠를 설명하는 내용을 사용하면서도, 사이트를 잘 설명하고 있는 경우

치킨 Recipe - 조은의 Recipe
맥주 Recipe - 조은의 Recipe
곱창전골 Recipe - 조은의 Recipe

2. 올바른 description 사용

각 컨텐츠를 짧게 설명하는 description을 잘 사용하여, Google 검색결과에 더 잘 노출되도록 하자

나쁜 사례

선언을 하지 않은 경우: 페이지에서 불러온 컨텐츠를 적당히 노출시킴

전화번호, 이메일 등으로 나올 수도 있음
- 사람들 방문 안함

3. 올바른 HTML 사용

상황에 맞는 적절한 HTML 태그를 사용

좋은 사례

  
<a href="page>페이지이동</a>

나쁜 사례

  
<button onClick="move('page')">페이지 이동</button>
<div onClick="move('page')">페이지 이동</div>

이게 왜 나쁘냐!!

구글봇은 렌더링 한 후에 뭘 하나?
- <a> 태그를 싹 다 찾음
  - 그 페이지의 모든 컨텐츠를 크롤링 하기 위함. 루트 페이지만 크롤링할 순 없으니까
  - <a> 태그를 트리처럼 쭉~ 찾음 (엄청 빠르게 동작함)
  - <a> 태그만 잘 선언해도 랭킹 좋아질거임
  - 나쁜 사례의 <button>, <div> 는 긁어오지 않음
    - <div onClick= ~ > 를 다 케어하기에는 GoogleBot의 리소스 비용이 크기 때문에 안가져감

4. 제목

좋은 사례

나쁜 사례

구글봇이 h1~h6까지 보면서 아웃라인을 돌아봄

얘가 제목이고 컨텐츠는 여기고 크롤링은 어떻게 가져갈지에 대한 아웃라인을 그리고 시작함

아웃라인 잘 해놓은 것이 상위노출에 유리함

그래서 헤딩요소를 잘 검색하는것 만으로도 구글검색에 도움이 됨

5. 반응형 웹 디자인

모바일을 지원하는 페이지를 우선적으로 노출시킴
- 모바일과 데스크탑 검색결과가 다름
- 순위가 다른건 아닌데 UI가 많이 다름
모바일과 데스크탑을 동시에 지원하면 당연히 더 상위로 노출됨
- 반응형 웹디자인으로 만드는것이 굉장히 중요함
모바일 / pc 따로 만든다면 모바일을 우선으로 검색됨
m.blog.naver blog.naver.com 은 노출이 안됨
모바일 지원하는 것을 GoogleBot은 어떻게 알까?
- 레이아웃을 봤을때 특정 viewport를 넘어가면 모바일을 지원하지 않는다고 판단
- viewport 내에서 컨텐츠가 다 잘 있는지를 보고 판단함

structured Data

GoogleBot이 봤을 때 방문한 페이지가 올바른 마크업인지는 알겠어.

그런데 데이터가 무엇을 의미하는지를 알 수 있을까?

어떤 정보를 나타내는지는 알 수 없음

=> 레시피구나! 라고 인식함

이게 왜 중요하냐? 레시피가 최상단에 뜨게 됨

본인의 검색결과가 2~3위까지는 쉽지만, 1위로 노출되는 것은 정말 어려움

구글에 치킨레시피 치면 만개의레시피 나옴
- 집에서 하니까 안나오네…

Google Search가 지원하는 범위

product 같은 경우: 쇼핑앱을 만들때 product를 설정하면 상위에 product라고 노출되는걸 확인할 수 있을 거임

Lighthouse

이걸 언제 다 하냐?

크롬에 기본적으로 설치되어있는 웹페이지 종합 검사 도구가 있음

(터미널에서도 사용할 수 있음. 깃허브에 pr날릴 때마다 적용도 가능)

어떤 항목을 결정할지 선택할 수 있음

퍼포먼스
pwa
best practice
accessibility(?)
SEO

트위터는 점수 높음. 네이버는 낮음

web.dev 에 들어가보면 각각의 항목들이 어떤 코드를 보고 여러분들의 사이트를 체크할 수 있는지 알 수 있음 영어임 (번역기 돌리세여)

그 외에도..

속도가 빨라야 함 (1초 이내로 렌더링) - 지표가 애매하긴 함

모바일을 지원해야 함- 모바일 지원하지 않으면 검색 결과에서 순위 계속 내려감. 아애 검색 안되는 경우도 있음 (페이지를 엄청 뒤로하면 뜰수도..)

마지막으로..

다른건 까먹어도 SPA가 구글 검색이 안된다는 오해를 풀어가셨으면 좋겠음

나무위키
- 검색 최적화 잘 되어있는 편임
  - <a> 태그 잘 걸려있음
  - <h1~6> 태그 잘 쓰고 있음
  - robots.txt도 잘 되어 있음
  - 컨텐츠 자체도 p태그 h1 잘 사용하고 있음
  - 컨텐츠와는 상관없이 검색도 잘 되고 베스트 프랙티스로 되어있음ㅋㅋ
뉴욕타임즈
- 베스트 프랙티스 만들 때 도움이 될 것임

'구글 검색과 자바스크립트 사이트' 정리

구글 검색과 자바스크립트 사이트

GoogleBot은 어떻게 데이터를 모으는가?

SEO

Robots.txt

웹페이지 상위랭크에는 무엇이 필요한가

1. 올바른 <title> 값 사용

2. 올바른 description 사용

3. 올바른 HTML 사용

4. 제목

5. 반응형 웹 디자인

structured Data

Lighthouse

마지막으로..

관련된 글

삼성전자 SW Vision Tour 후기 (CE, IM 부문)

우아한테크코스 프리코스 후기

파이콘2019 후기