Hi. I’m Charles from Cross Border Digital. Are you using JavaScript to build your website? Or maybe you're thinking about using one of the modern JavaScript frameworks like Ember，or Node, or React, or Angular. Great frameworks for building very app-like interfaces on the web.
大家好，我是来自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考虑用使用当前比较流行的JavaScript框架：Ember、Node、React 或者是Angular建站。这些都是非常优秀的框架，给网站访客提供类似App的操作体验。
But there are some specific challenges to using these JavaScript frameworks when it comes to SEO. Today, I want to share some insights and advice to help you use these frameworks in a way that will work with Google and ensure that you can rank your website.但是，当涉及到SEO时，使用这些JavaScript框架存在一些特定的挑战。今天，我想分享一些见解和建议，以帮助您以与Google兼容的方式使用这些框架，确保网站在搜索引擎可以获得排名。
So when it comes to understanding the implications of using JavaScript to build your website, there's really two key things that we need to talk about.因此，在理解使用JavaScript开发网站的意味着什么时，实际上需要讨论两个关键问题。
The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.首先是Google的实际工作方式，如何对待JavaScript，如何理解JavaScript。
And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.其次是了解网站上内容和HTML在客户端和服务器端渲染的区别。
These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.如果我们能理解这两点，那么就能了解Google如何读取JavaScript网站。
OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web.首先来讨论一下谷歌运作方式。谷歌爬取收录网站可以分为两部分：
The first part, the crawler known as Google bot is the part of the infrastructure that follows every link it can find on the web to uncover every URL on your website and on every other website on the web. The Google bot crawler can't render JavaScript. It's simply visits a page. It will do a very quick pass of any HTML that it finds on the page to see if there are any other links it can follow, but otherwise, it simply passes the URLs that it does find back to the indexer.第一部分，被称为Googlebot的爬虫，是搜索引擎基础结构的一部分，它通过页面上的链接，去发现更多的页面。Google bot爬虫无法渲染JavaScript。它只是访问页面。爬虫会快速查找HTML页面上的链接，继续抓取新的页面，没有新页面就会将爬取到的链接返回谷歌索引（indexer）。
The indexer is the part of Google's infrastructure that completely renders a page of all the content, all of the CSS, all of the layout to try in the content, to try and understand what that page is about. So that when someone does a query, it can return that page if it is relevant. Now the indexer can render JavaScript.索引是Google搜索引擎基础结构的一部分，它负责渲染页面的所有内容，CSS，布局以了解该页面的核心信息。当用户在搜索引擎搜索时，才能返回客户搜索相关的页面。Indexer可以渲染JavaScript。
So it is true to say that Google can render JavaScript-powered web pages.
因此，谷歌支持渲染基于JavaScript开发的网页。
But to completely understand the implications of using JavaScript, it is also important to understand the difference between client-side and server-side rendering of JavaScript, because that makes a big difference to the way that Google will interpret your website.但是要完全了解使用JavaScript对网站的影响，理解客户端和服务器端JavaScript渲染的区别也很重要，因为会导致Google读取网站的方式有很大的不同。
So generally speaking, these modern JavaScript frameworks like React, Node, and Ember, and Angular, they render in the client side. That means that when someone visits your web page that's built on one of these frameworks, the JavaScript application is delivered to the browser and then it renders everything in the browser. It calls the CSS, it calls the content, it calls the images, and any other resources required to lay out your web page into the browser and renders them on the client side.因此，一般而言，这些现代JavaScript框架（例如React，Node和Ember和Angular）在客户端渲染。这意味着，当用户访问基于这些框架之一开发的网页时，JavaScript应用程序将交付给浏览器，然后在浏览器渲染所有内容。将CSS，文本，图片以及其他与页面展示有关的资源推送到浏览器，在客户端渲染。
A server side rendering is when all of that work is done on the server and the HTML of the complete page and all of the content is delivered to the browser.服务器端渲染是指在服务器端完成所有渲染工作并将完整页面的HTML和所有内容都交付给浏览器。
Now this has big implications for Google because as we said, the Google bot can't render JavaScript. So that means that when Google bot visits your home page or your JavaScript-powered website, if you're rendering client side, it means that the Google bot will get that JavaScript application, but it can't render any content or any link. So it won't find any other links to crawl. It will have to send that single URL back to the indexer. The indexer will then render that page it will find any links and content on that page. It will send any links back to the crawler so that they can then continue to follow those you URLs to see if they can find any other links.这就对Google收录网站产生了重大影响，因为前面所说，Google bot无法渲染JavaScript。因此，这意味着当Googlebot访问您的主页或基于JavaScript的网站时，如果网站是客户端渲染，则意味着Googlebot将获取该JavaScript应用程序，但无法渲染任何内容或任何链接。因此Google bot无法找到页面上的链接。只会返回一个URL给谷歌indexer。谷歌Indexer将渲染页面并发现页面上的更多链接和内容。发现新的链接则会返回给Google bot去继续抓取进一步发现更多的链接。
And in this way, it really slows down the process of crawling your website in a very big way.And this is particularly relevant for large websites. So the other thing that I have to say about client-side rendering is that Google's indexer uses a version of Chrome for rendering JavaScript-powered websites that is about three years old.这就极大地减慢了网站被谷歌抓取的速度，这对于大型网站影响尤为重大。另外，关于客户端渲染，Google的indexer用来来渲染JavaScript网站所使用的Chrome版本已有大约三年的历史。
And that means that it can't support all the latest features of these modern JavaScript frameworks. So if you're building a JavaScript-powered website that renders on the client side, it is very important that you ensure that it is set up in such a way that it degrades nicely for older versions of browsers so that Google can render your content and your HTML completely.这意味着它不能支持那些现代JavaScript框架的所有最新功能。因此，如果您要构建一个以JavaScript为基础的网站，并在客户端进行渲染，那么确保Google可以完全渲染您的内容和HTML。
I've seen many cases where a client-side rendered JavaScript page, Google is able to crawl or index part of it but it doesn't see all of the continent because of some of the features that have been included in that page. So very important that your JavaScript-powered web page degrades nicely for all the versions of the browser.我看过很多客户端渲染的JavaScript页面，Google能够对其进行抓取和编制索引，但是页面中包含的某些功能谷歌无法完整抓取。因此要确保你基于JavaScript开发网页对于所有版本的浏览器都可以很好地渲染。
So we know that Google bot can't render JavaScript. And whilst the Google indexer can render JavaScript, we also know that it is limited to older versions of Chrome. So it doesn't support all the latest features of these modern JavaScript frameworks. So if we are doing client-side rendering, it is more difficult to get all of our content indexed and it really does slow down the entire process of crawling and indexing your website, which includes any changes you make. So if you make changes to your website, particularly if you have a large website, it can take weeks or months for those changes to be reflected in the Google index.我们知道Google bot无法渲染JavaScript。Google indexer可以呈现JavaScript，但我们也知道它仅限于旧版Chrome。因此，它不支持这些现代JavaScript框架的所有最新功能。因此，如果在进行客户端渲染，则很难对所有的内容建立索引，这确实会减慢对网站被抓取和索引的整个过程，其中包括您所做的任何更改。因此，如果您对网站进行更改，尤其大型网站，则这些更改可能需要数周或数月才能反映在Google索引中。
So what to do? Well, our strong recommendation is to use old-fashioned content management systems for public facing web sites, first and foremost. If you haven't yet started the build of your website, then we would strongly recommend you look at one of the content management systems like Ambraco, or Wordpress, or Drupal. Or if you're doing e-commerce, use one of the platforms like Shopify, or BigCommerce.那么该怎么办？我们强烈建议普通网站使用老式的内容管理系统。如果您还没有开始网站的搭建，那么我们强烈建议您考虑内容管理系统，例如Ambraco，Wordpress或Drupal。如果是电商网站，可以考虑用Shopify, BigCommerce电商建站系统。
These content management applications render everything on the server side and deliver the complete HTML to the browser and to Google, which makes it much easier and faster for Google to completely crawl and index your website.这些内容管理应用程序在服务器端呈现所有内容，并向浏览器和Google提供完整的HTML，这使Google能够更轻松，更快地完全抓取您的网站并为其建立索引。
If you have already built a JavaScript-powered website, or if you really want to for whatever reason, then our drawing recommendation is to configure that application to render everything on the server side and deliver the complete HTML and content to the browser and to Google in the same way that one of these older traditional content management systems does. If you can do that properly, then it will make it a lot easier and faster for Google to index your JavaScript-powered website.如果您已经建立了JavaScript网站，或者出于特殊原因确实想要这样做，那么我们的建议是配置该应用程序在服务器端渲染所有内容，并将完整的HTML和内容提供给浏览器和Google 就像这些较旧的传统内容管理系统之一一样。这对于谷歌快速抓取收录你的JavaScript网站会有很大帮助。
Perhaps, you've already launched a JavaScript-powered website that is rendering everything on the client side. You're not sure how to configure it to do that on the server side. There are third party services like Prerender.io, which might help. They might be worth looking at as well.又或许，您已经发布了一个在客户端渲染的基于JavaScript开发的网站，不知道如何改为在服务器端渲染。有一些第三方服务获取可以帮你解决这个问题，比如Prerender.io。可以了解一下。
So in a nutshell, a lot of SEO is about making it easy for Google and not putting hurdles in Google's way. And when it comes to using JavaScript on your website, there are quite a few pitfalls and traps that if you're not aware of them, it's easy to fall into.简而言之，很多SEO都是为了帮助Google而不是阻碍Google抓取网站。在您的网站上使用JavaScript时，会有很多陷阱，稍不小心就掉入。
