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.
大家好，我是來(lái)自Cross Border Digital的Charles. 你是否在用JavaScript建站？或者你正在考慮用使用當(dāng)前比較流行的JavaScript框架：Ember、Node、React 或者是Angular建站。這些都是非常優(yōu)秀的框架，給網(wǎng)站訪客提供類似App的操作體驗(yàn)。
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.但是，當(dāng)涉及到SEO時(shí)，使用這些JavaScript框架存在一些特定的挑戰(zhàn)。今天，我想分享一些見(jiàn)解和建議，以幫助您以與Google兼容的方式使用這些框架，確保網(wǎng)站在搜索引擎可以獲得排名。
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開(kāi)發(fā)網(wǎng)站的意味著什么時(shí)，實(shí)際上需要討論兩個(gè)關(guān)鍵問(wèn)題。
The first is how Google actually works, how they treat JavaScript, how they understand JavaScript.首先是Google的實(shí)際工作方式，如何對(duì)待JavaScript，如何理解JavaScript。
And the second is understanding the difference between client-side and server-side rendering of the content and HTML on your website.其次是了解網(wǎng)站上內(nèi)容和HTML在客戶端和服務(wù)器端渲染的區(qū)別。
These two things together if we can understand these, then we can understand how Google is going to interpret our JavaScript-powered website.如果我們能理解這兩點(diǎn)，那么就能了解Google如何讀取JavaScript網(wǎng)站。
OK, so let's first talk about Google. There are in fact two parts to Google's crawling and indexing of the web. 首先來(lái)討論一下谷歌運(yùn)作方式。谷歌爬取收錄網(wǎng)站可以分為兩部分：
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的爬蟲(chóng)，是搜索引擎基礎(chǔ)結(jié)構(gòu)的一部分，它通過(guò)頁(yè)面上的鏈接，去發(fā)現(xiàn)更多的頁(yè)面。Google bot爬蟲(chóng)無(wú)法渲染JavaScript。它只是訪問(wèn)頁(yè)面。爬蟲(chóng)會(huì)快速查找HTML頁(yè)面上的鏈接，繼續(xù)抓取新的頁(yè)面，沒(méi)有新頁(yè)面就會(huì)將爬取到的鏈接返回谷歌索引（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搜索引擎基礎(chǔ)結(jié)構(gòu)的一部分，它負(fù)責(zé)渲染頁(yè)面的所有內(nèi)容，CSS，布局以了解該頁(yè)面的核心信息。當(dāng)用戶在搜索引擎搜索時(shí)，才能返回客戶搜索相關(guān)的頁(yè)面。Indexer可以渲染JavaScript。
So it is true to say that Google can render JavaScript-powered web pages.
因此，谷歌支持渲染基于JavaScript開(kāi)發(fā)的網(wǎng)頁(yè)。
?
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對(duì)網(wǎng)站的影響，理解客戶端和服務(wù)器端JavaScript渲染的區(qū)別也很重要，因?yàn)闀?huì)導(dǎo)致Google讀取網(wǎng)站的方式有很大的不同。
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.因此，一般而言，這些現(xiàn)代JavaScript框架（例如React，Node和Ember和Angular）在客戶端渲染。這意味著，當(dāng)用戶訪問(wèn)基于這些框架之一開(kāi)發(fā)的網(wǎng)頁(yè)時(shí)，JavaScript應(yīng)用程序?qū)⒔桓督o瀏覽器，然后在瀏覽器渲染所有內(nèi)容。將CSS，文本，圖片以及其他與頁(yè)面展示有關(guān)的資源推送到瀏覽器，在客戶端渲染。
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.服務(wù)器端渲染是指在服務(wù)器端完成所有渲染工作并將完整頁(yè)面的HTML和所有內(nèi)容都交付給瀏覽器。
?
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.這就對(duì)Google收錄網(wǎng)站產(chǎn)生了重大影響，因?yàn)榍懊嫠f(shuō)，Google bot無(wú)法渲染JavaScript。因此，這意味著當(dāng)Googlebot訪問(wèn)您的主頁(yè)或基于JavaScript的網(wǎng)站時(shí)，如果網(wǎng)站是客戶端渲染，則意味著Googlebot將獲取該JavaScript應(yīng)用程序，但無(wú)法渲染任何內(nèi)容或任何鏈接。因此Google bot無(wú)法找到頁(yè)面上的鏈接。只會(huì)返回一個(gè)URL給谷歌indexer。谷歌Indexer將渲染頁(yè)面并發(fā)現(xiàn)頁(yè)面上的更多鏈接和內(nèi)容。發(fā)現(xiàn)新的鏈接則會(huì)返回給Google bot去繼續(xù)抓取進(jìn)一步發(fā)現(xiàn)更多的鏈接。
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.這就極大地減慢了網(wǎng)站被谷歌抓取的速度，這對(duì)于大型網(wǎng)站影響尤為重大。另外，關(guān)于客戶端渲染，Google的indexer用來(lái)來(lái)渲染JavaScript網(wǎng)站所使用的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.這意味著它不能支持那些現(xiàn)代JavaScript框架的所有最新功能。因此，如果您要構(gòu)建一個(gè)以JavaScript為基礎(chǔ)的網(wǎng)站，并在客戶端進(jìn)行渲染，那么確保Google可以完全渲染您的內(nèi)容和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.我看過(guò)很多客戶端渲染的JavaScript頁(yè)面，Google能夠?qū)ζ溥M(jìn)行抓取和編制索引，但是頁(yè)面中包含的某些功能谷歌無(wú)法完整抓取。因此要確保你基于JavaScript開(kāi)發(fā)網(wǎng)頁(yè)對(duì)于所有版本的瀏覽器都可以很好地渲染。
?
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無(wú)法渲染JavaScript。Google indexer可以呈現(xiàn)JavaScript，但我們也知道它僅限于舊版Chrome。因此，它不支持這些現(xiàn)代JavaScript框架的所有最新功能。因此，如果在進(jìn)行客戶端渲染，則很難對(duì)所有的內(nèi)容建立索引，這確實(shí)會(huì)減慢對(duì)網(wǎng)站被抓取和索引的整個(gè)過(guò)程，其中包括您所做的任何更改。因此，如果您對(duì)網(wǎng)站進(jìn)行更改，尤其大型網(wǎng)站，則這些更改可能需要數(shù)周或數(shù)月才能反映在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.那么該怎么辦？我們強(qiáng)烈建議普通網(wǎng)站使用老式的內(nèi)容管理系統(tǒng)。如果您還沒(méi)有開(kāi)始網(wǎng)站的搭建，那么我們強(qiáng)烈建議您考慮內(nèi)容管理系統(tǒng)，例如Ambraco，Wordpress或Drupal。如果是電商網(wǎng)站，可以考慮用Shopify, BigCommerce電商建站系統(tǒng)。
?
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.這些內(nèi)容管理應(yīng)用程序在服務(wù)器端呈現(xiàn)所有內(nèi)容，并向?yàn)g覽器和Google提供完整的HTML，這使Google能夠更輕松，更快地完全抓取您的網(wǎng)站并為其建立索引。
?
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.如果您已經(jīng)建立了JavaScript網(wǎng)站，或者出于特殊原因確實(shí)想要這樣做，那么我們的建議是配置該應(yīng)用程序在服務(wù)器端渲染所有內(nèi)容，并將完整的HTML和內(nèi)容提供給瀏覽器和Google 就像這些較舊的傳統(tǒng)內(nèi)容管理系統(tǒng)之一一樣。這對(duì)于谷歌快速抓取收錄你的JavaScript網(wǎng)站會(huì)有很大幫助。
?
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.又或許，您已經(jīng)發(fā)布了一個(gè)在客戶端渲染的基于JavaScript開(kāi)發(fā)的網(wǎng)站，不知道如何改為在服務(wù)器端渲染。有一些第三方服務(wù)獲取可以幫你解決這個(gè)問(wèn)題，比如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.簡(jiǎn)而言之，很多SEO都是為了幫助Google而不是阻礙Google抓取網(wǎng)站。在您的網(wǎng)站上使用JavaScript時(shí)，會(huì)有很多陷阱，稍不小心就掉入。
?
So if you have any questions, we would love to help. So hit us up here on WeChat. We could have you to discuss your specific case and we look forward to talking to you. Thanks.如果您有任何疑問(wèn)，歡迎聯(lián)系我們微信小編。期待與您交流，謝謝大家。
