도움말 - 글감 수집하기 (인용)

도움말 - 부분 리뷰 작성하기

SEO vs 리액트: 웹크롤러는 생각보다 똑똑하다. (SEO vs. React: Web Crawlers are Smarter Than You Think)

많은 사람들이 여전히 리액트(React), 앵귤러(Angular), 또는 엠버(Ember) 등을 사용하여 웹사이트를 개발하면, 검색 엔진 랭킹에 안좋을 것이라고 생각한다.

그러한 생각은 이와 같다: 검색 엔진의 웹 크롤러는 사용자의 브라우저에서 완전히 렌더링 되지 않는 한 페이지를 정상적으로 크롤링 할 수 없을 것이다. 대신에, 검색 엔진은 백엔드(서버)에서 전달된 HTML 코드만 볼 것이다.

만약에 HTML 코드가 본문의 내용없이, 메타 태그나 스크립트 태그 같은 것들 밖에 없다면, 검색 엔진은 페이지가 기본적으로 비어 있다고 추정하고 그 페이지의 순위(rank)를 낮게 측정 할 것이다.

나는 흔히 컨설턴트들이 검색 엔진의 웹 크롤러가 인덱싱을 할 수 있도록 백엔드에서 잘 정리된 HTML을 렌더링 하는 것을 검색엔진최적화(SEO)로 추천하는 것을 봐왔다.

나에겐 이러한 조언들이 지나치고 비현실적이라고 생각한다. 지금은 2016년이 아닌가. 사용자는 페이지가 역동적이어야 하며 빠른 사용자 경험을 제공할 것으로 기대한다. 사용자는 매번 무언가를 클릭할 때마다 새로운 HTML페이지가 로딩되기를 바리지 않는다.

"클라이언트사이드 렌더링은 페이지 순위에 안좋다"라는 말은 여전히 유효한가? 

조사 진행


먼저, 나는 결코 SEO 전문가가 아님을 밝힌다. 하지만, 이 주제에 관한 글을 조금 읽었고, 이제 얘기할 것이 내가 발견 한 것들 이다.

2015년 10월 구글의 웹마스터 블로그의 발표에 따르면:

오늘날, 여러분이 구글봇이 자바스크립트와 CSS 파일들을 크롤링하는 것을 막지 않는 한 우리는 일반적으로 모던 브라우저와 같이 당신의 웹페이지를 렌더링하고 이해 할 수 있습니다. 이러한 개선사항을 반영하기위해, 우리는 최근 테크니컬 웹마스터 가이드라인에 구글봇이 CSS와 JS 파일들을 크롤링하는 것을 막지 않도록 권고하는 것을 업데이트 했습니다. 

2015년 5월 Search Engine Land의 글에 따르면:

우리는 구글에서 아주 많은 자바스크립트를 실행 할 수 있고 인덱싱 할 수 있음을 일련의 테스트를 진행하여 증명했습니다. 우리는 또한 구글이 전체 페이지를 렌더링하고 DOM을 읽을 수 있음을, 그렇기 때문에 다이내믹하게 생성된 컨텐츠를 인덱싱 할 수 있음을 확인했습니다.
SEO에서는 DOM(페이지 제목, 메타 설명, 표준 태그, 메타 로봇 테그 등) 이 중요 합니다. DOM에서 다이내믹하게 삽입된 컨텐츠 또한 크롤링과 인덱싱이 가능 합니다. 게다가, 특정 케이스에서는 DOM 신호가 HTML 소스 보다 우선시 될 수 있습니다. 이 특정 케이스의 경우는 조금 더 연구를 진행 해봐야 하지만, 몇몇 케이스에서 발견된 사실 입니다. 

이러한 두개의 자료는 클라이언트 사이드에서 렌더링된 레이아웃을 사용하는 것이 안전하다는 것을 보여줍니다. 

Preactjs.com 테스트 

나는 최근에 내가 좋아하는 리액트의 사소한 것에 대해 문제시하는 SEO 컨설턴트들의 대해 트윗했다. 더 정확히 말하면, 나는 현재 페이스북 리액트의 light 버전인 Preact로 마이그레이션을 진행하고 있다. 나는 Preact의 개발자중 한명인 Json Miller로 부터 답장을 받았다:

내가 위에서 인용한 Search Engine Land의 블로그 기사를 제외하고, Jason은 아래와 같이 생긴 구글에서 검색 된 Preact 홈페이지 링크를 트윗했다.



이 전체 페이지는 아래의 소스가 증명 하듯이 Preact를 사용하여 클라이언트 사이드에서 렌더링 되었다:

<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>Preact: Fast 3kb React alternative with the same ES6 API. Components &amp; Virtual DOM.</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimal-ui">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#673AB8">
<link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" href="/assets/app-icon-192.png" sizes="192x192">
<script>(function(url){window['_boostrap_'+url]=fetch(url);})('/content'+location.pathname.replace(/^\/(repl)?\/?$/, '/index')+'.md');</script>
<link rel="shortcut icon" href="/favicon.ico">
<link href="/style.6bae35e4ff9d687cb418.css" rel="stylesheet">
</head><body>
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create', 'UA-6031694-20', 'auto');ga('send', 'pageview');</script>
<script type="text/javascript" src="/bundle.a0afd09fd48712ed0f26.js"></script>
</body></html>

만약에 구글봇이 Preact로 렌더링된 HTML 코드를 읽을 수 없다면, 메타 태그를 제외한 컨텐츠는 볼 수 없을 것이다. 

그럼에도 불구하고, 이것이 site:preactjs.com을 구글에서 검색한 결과 이다: 

2016년 3월 Andrew Farmer 또 다른 글에서는 구글을 제외한 다른 검색 엔진들의 자바스크립트 미지원에 대해서 경고 한다:

내가 조사한 바에는 나는 Yahoo, Bing, 또는 Baidu의 크롤러가 자바스크립트를 지원 한다는 것을 찾을 수 없었습니다. 만약에 검색엔진의 SEO가 당신에게 중요 하다면, 다음에 얘기하게 될 서버사이드 렌더링이 필요 할 것 입니다. 

그래서 나는 다른 검색엔진에 테스트 해보기로 결정했다:

Bing

Andrew의 Bing에 대한 경고는 실제로는 그렇지 않은 것으로 보인다. 여기 Bing에 site:preactjs.com을 검색 결과이다:

Yahoo

Yahoo에서 site:preactjs.com의 검색 결과:

Duck Duck Go

Duck Duck Go에서 site:preactjs.com의 검색 결과:

Baidu

중국 검색엔진인 Baidu preactjs.com의 크롤링에 문제가 확실히 있다. 여기 site:preactjs.com을 Baidu로 검색 했을때의 결과이다:


따라서 중국에서만 사용 되는 검색엔진이 최우선 사항이 아니라면, 자바스크립트를 사용한 클라이언트 사이드 웹페이지 렌더링은 기본적인 룰을 따르는 한(Andrew Farmer의 블로그 포스트에서 인용된) 아무 문제가 없다:

  • 비동기 작업을 하기전에 당신의 컴포넌트를 렌더링 해라
  • 각각의 페이지를 구글봇이 당신의 컨텐츠를 제대로 찾는지 테스트 해라 

읽어주셔서 감사합니다.

감사의 말

내가 인용한 Adam Audette (Search Engine Land)와 Andrew Farmer의 훌륭한 블로그 글, Jason Miller의 영감, 나의 동료인 eBay Classifieds Group의 지원, 그리고 Quincy Larson of Free Code Camp 덕분에 이 글을 게재 할 수 있었다.



이 글은 Patrick Hund의 SEO vs. React: Web Crawlers are Smarter Than You Think을 번역한 글 입니다. 전문 번역가가 아니라 오역이 있을 수 있으니 양해 부탁드립니다. 이 글의 원문은 아래에서 확인 할 수 있습니다. 


리뷰