Bactoria 황준오

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

2019-07-10
bactoria

지난주 금요일에 짐 챙기러 부산에 내려왔는데, 다음날 부산대에 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 사용

image

각 컨텐츠를 짧게 설명하는 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>제목 1</h1>

나쁜 사례

<div class=”h1”>제목 1</div>

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

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

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

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

 

5. 반응형 웹 디자인

  • 모바일을 지원하는 페이지를 우선적으로 노출시킴
    • 모바일과 데스크탑 검색결과가 다름
    • 순위가 다른건 아닌데 UI가 많이 다름
  • 모바일과 데스크탑을 동시에 지원하면 당연히 더 상위로 노출됨
    • 반응형 웹디자인으로 만드는것이 굉장히 중요함
  • 모바일 / pc 따로 만든다면 모바일을 우선으로 검색됨

  • m.blog.naver blog.naver.com 은 노출이 안됨

  • 모바일 지원하는 것을 GoogleBot은 어떻게 알까?
    • 레이아웃을 봤을때 특정 viewport를 넘어가면 모바일을 지원하지 않는다고 판단
    • viewport 내에서 컨텐츠가 다 잘 있는지를 보고 판단함

 

structured Data

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

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

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

<div itemscope itemtype=”http://schema.org/Recipe”>

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

 

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

 

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

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

Google Search가 지원하는 범위

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

 

Lighthouse

이걸 언제 다 하냐?

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

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

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

  1. 퍼포먼스
  2. pwa
  3. best practice
  4. accessibility(?)
  5. SEO

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

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

 

그 외에도..

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

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

마지막으로..

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

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

다음글 Enum 정리

황준오 (Bactoria) 황준오 (Bactoria)

.

Comments

Content