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時，會有很多陷阱，稍不小心就掉入。
?
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.如果您有任何疑問，歡迎聯系我們微信小編。期待與您交流，謝謝大家。
