검색엔진과 소셜미디어 파충류가 자바스크립트를 어떻게 보여주는지
SEO가 수집한 자바스크립트의 표현 주제에 대한 정보는 더욱 광범위하게 공유되어야 한다. 이러한 발견은 대량의 자바스크립트를 가진 모든 사이트에 영향을 미칠 것이기 때문에 그들은 새로운 사용자가 이 사이트를 볼 수 있기를 바란다.
이것이 바로 내가 이 지침을 함께 놓고 주의해야 할 관건적인 요소들을 설명하는 이유이다.
검색엔진이 JavaScript를 렌더링하는 방법
이 예시 코드를 보면 구글과 같은 검색엔진은 이 페이지가 무엇에 관한 것인지 전혀 모른다.
<body>
<app-root></app-root>
<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main.js"></script>
</body>
그러나 과장은 비싸고 자원 집약적인 과정으로 대부분의 검색엔진 로봇과 소셜미디어 로봇이 대응하기 어렵다.그래서 그들의 과장 능력을 이해하는 것이 중요하다. 그러면 그들이 당신의 사이트에서 무엇을 보기 어려운지 알 수 있다.
대부분의 검색엔진은 렌더링을 할 수 없고, 그 검색엔진들도 자신의 렌더링 제한이 있다는 것을 반드시 기억해 주십시오. 제가 본문 뒤에 설명하겠습니다.
만약 웹 사이트가 자바스크립트에 의존해서 내용과 내비게이션을 제공한다면, 검색엔진은 최종적으로 캡처하거나 인덱스할 만한 내용이 없는 공백 화면을 볼 수 있을 것이다.
나는 현재 주요 검색엔진이 렌더링의 최신 업데이트를 어떻게 설정하는지, 그리고 인터넷 접속과 색인 사이트를 구축하는 관건적인 고려 요소를 정리했다.
구글의 렌더링 능력
구글은 현재 자바스크립트를 보여주는 몇 안 되는 검색엔진 중 하나로 documentation and resources on JavaScript best practice for search을 대량으로 제공했다.
이것은 우리가 구글의 SERPS (검색엔진 결과 페이지) 색인에 무엇을 해야만 우리의 사이트를 만들 수 있는지 매우 뚜렷한 화면을 만들 수 있다는 것을 의미한다.
구글은 렌더링할 때 템플릿과 데이터베이스 또는 API에서 사용 가능한 데이터에 따라 태그를 생성합니다.이 과정의 관건은 구글의 인터넷 파충류 Googlebot이 읽을 수 있는 내용이기 때문에 완전히 생성된 태그를 얻는 것이다.
자료 출처:
이 과정을 실현하기 위해 구글 로봇은 웹렌더링 서비스(WRS)에 헤드 없는 브라우저를 사용했다.구글의 WRS는 크롬 41을 기반으로 한 바 있는데, 이는 2015년 출시된 유행이 지난 버전이다.
그러나 Google have now made their WRS ‘evergreen’은 latest version of Chrome을 지속적으로 실행하기 위해 정기적으로 업데이트된다는 것을 의미한다.
이 변화로 구글 로봇은 ES6, Intersection Observer, 웹 구성 요소 등 이전에 처리할 수 없었던 기능을 처리할 수 있게 되었다.
자바스크립트에 의존하지 않는 사이트에서는 기어오르기와 인덱스 과정이 보통 매우 빠르지만 인터넷의 규모와 필요한 처리 능력 때문에 구글은 한순간에 기어오르기, 렌더링, 인덱스를 완성할 수 없다.
“The internet is gigantic, that’s the problem. We see over 160 trillion documents on the web daily, so Googlebot is very busy. Computing resources, even in the cloud age, are pretty tricky to come by. This process takes a lot of time, especially if your pages are really large, we have to render a lot of images, or we have to process a lot of megabytes of JavaScript.”
-, 구글 사이트 관리자 트렌드 애널리스트
이것이 바로 구글에 2파 인덱스 과정이 있는 이유다.첫 번째 인덱스에서 HTML 페이지는 네트와 인덱스로 되어 있고 구글 로봇은 분류기를 사용하여 자바스크립트가 있는 페이지를 확인할 것이다.
이 페이지들은 대기열에 추가되며, 2차 인덱스에서 충분한 자원이 있으면, 다음 날짜에 나타납니다.페이지를 보여준 후에만 두 번째 파에 색인에 추가됩니다.
“Google determines if pages need to be rendered by comparing content found in the initial HTML and the rendered DOM.”
- 마틴 스프리트, Google Webmaster Hangout
자료 출처:
리소스를 사용할 수 있는 경우에는 먼저 표시할 페이지의 우선 순위를 지정하는 방법이 없으며 이는 Google Bot에서 페이지를 처음 검색한 후에는 실제 페이지를 표시할 시간을 보장하지 못함을 의미합니다.
그렇다면 1라운드와 2라운드 지수화 사이의 차이는 무엇일까?구글의 톰 그레나비와 마틴 스플리트가 Chrome Dev Summit 2018에 따르면 페이지가 인터넷에 올라간 후 구글은'몇 분, 한 시간, 하루 또는 최대 일주일'이 걸릴 수도 있다.
만약 당신의 사이트가 이 두 색인 물결 사이에 갇힌다면, 당신이 추가한 새로운 내용이나 사이트에 대한 변경 사항은 확실하지 않은 시간 안에 보거나 색인을 볼 수 없을 것이다.
이것은 전자상거래나 뉴스 사이트 같은 새로운 검색 결과에 의존하는 사이트에 가장 큰 영향을 미칠 것이다.
“Ecommerce websites should avoid serving product page content via JavaScript.”
- 존 뮐러, Google Webmaster Hangout
“News sites should avoid content that requires JavaScript to load.”
- 존 뮐러, Google Webmaster Hangout
Bing의 렌더링 기능
Bing의 파충류 프로그램은 자바스크립트를 보여줄 수 있지만 최신 브라우저 기능을 처리하고 비례적으로 보여주는 데 제한을 받는다고 한다.
Bing 팀은 Bingbot이 JavaScript를 지원하는 컨텐츠와 링크를 캡처하고 인덱스할 수 있도록 동적으로 렌더링하는 것을 권장합니다.
“In general, Bing does not have crawling and indexing issues with web sites using JavaScript, but occasionally Bingbot encounters websites heavily relying on JavaScript to render their content, especially in the past few years. Some of these sites require far more than one HTTP request per web page to render the whole page, meaning that it is difficult for Bingbot, like other search engines, to process at scale on every page of every large website.
Therefore, in order to increase the predictability of crawling and indexing of websites relying heavily on JavaScript by Bing, we recommend dynamic rendering as a great alternative. Dynamic rendering is about detecting the search engine’s bot by parsing the HTTP request user agent, prerendering the content on the server-side and outputting static HTML, helping to minimize the number of HTTP requests needed per web page and ensure we get the best and most complete version of your web pages every time Bingbot visits your site.
When it comes to rendering content specifically for search engine crawlers, we inevitably get asked whether this is considered cloaking... and there is nothing scarier for the SEO community than getting penalized for cloaking. The good news is that as long as you make a good faith effort to return the same content to all visitors, with the only difference being that the content is rendered on the server for bots and on the client for real users, this is acceptable and not considered cloaking.”
- Bing 수석 프로젝트 관리자
비록 빙은 일정한 용량으로 나타날 수 있지만, 자바스크립트에 포함된 URL을 추출하고 추적할 수 없습니다.
“Don’t bury links to content inside JavaScript.”
- Bing Webmaster Guidelines
야후의 렌더링 능력
야후는 현재 전혀 과장할 수 없다.검색엔진이 렌더링을 통해 스크립트에서 생성한 내용을 찾을 수 없으므로 내용을 JavaScript 뒤에 숨기지 않는 것이 좋습니다.HTML에서 제공한 내용만 추출됩니다.
이 문제를 해결하려면
<noscript> 요소를 사용하십시오.“Unhide content that’s behind JavaScript. Content that’s available only through JavaScript should be presented to non-JavaScript user agents and crawlers with noscript HTML elements.”
- Yahoo Webmaster Resources
Yandex의 렌더링 기능
Yandex의 문서에 따르면, 그들의 검색엔진은 자바스크립트를 보여주지 않고, 생성된 어떤 내용도 인덱스할 수 없다고 한다.Yandex에 웹 사이트를 표시하려면, 첫 번째 요청 페이지에서 HTML 형식으로 중요한 내용을 되돌려 주어야 합니다.
“Make sure that the pages return the full content to the robot. If they use JavaScript code, the robot will not be able to index the content generated by the script. The content you want to include in the search should be available in the HTML code immediately after requesting the page, without using JavaScript code. To do this, use HTML copies.”
- Yandex Support
기타 검색엔진의 렌더링 기능
DuckDuckGo, 바이두, AOL, Ask는 렌더링 능력에 대한 개방도가 훨씬 낮고 참고 지침으로 사용할 공식 문서가 부족하다.현재 유일하게 답을 찾을 수 있는 방법은 스스로 테스트를 하는 것이다.
2017년에 그들은 테스트 사이트를 이용하여 몇 가지 실험을 실시했다. 이 사이트는 서로 다른 자바스크립트 프레임워크를 이용하여 내용을 제공하고 어떤 검색엔진이 그들이 생성한 내용을 보여주고 인덱스할 수 있는지 분석했다.
우리는 영원히 테스트 사이트의 인덱스만으로 최종 결론을 내릴 수 없지만, 결과는 구글과 Ask만이 인덱스로 보여줄 수 있는 내용으로 나타났다.
자료 출처: Moz
“Bing, Yahoo, AOL, DuckDuckGo, and Yandex are completely JavaScript-blind and won’t see your content if it isn’t in the HTML.”
-onely 최고경영자(CEO) Bartosz Góralewicz
온전한 article covering the experiment and results을 보고 바토스에 대한 결론을 더 알아보세요.
소셜미디어 플랫폼에서 JavaScript 구현 방법
중요한 것은 소셜 미디어와 공유 플랫폼이 클라이언트에 자바스크립트를 보여줄 수 없다는 것을 알아야 한다.
“Facebook and Twitter’s crawlers can’t render JavaScript.”
- 마틴 스프리트, Google Webmaster Hangout
예를 들어 자바스크립트에 의존해서 내용을 제공하면, 이 내용들은 열린 그래픽 탭, 트위터 카드, 심지어 슬랙에서 글을 공유할 때 표시되는 원 설명에 입력되며, 이 내용들은 표시할 수 없습니다.
트위터 bot과Facebot 등 파충류 프로그램의 특색 있는 이미지, 제목, 설명을 정확하게 표시할 수 있도록 미리 렌더링, 서버 쪽 렌더링, 동적 렌더링 내용을 확보하십시오.
Reference
이 문제에 관하여(검색엔진과 소셜미디어 파충류가 자바스크립트를 어떻게 보여주는지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rachellcostello/how-search-engines-social-media-crawlers-render-javascript-438e텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
