原文地址：How does Javascript affect SEO? 作者：Akash Joshi
介绍
当为应用程序选择技术栈时，就需要慎重考虑几个方面：选择的编程语言和框架对开发周期的影响、应用程序的性能以及在网络中是否容易被人发现——在线可发现性。
通过搜索引擎进行自然搜索是在线可发现性的最重要方式之一，搜索引擎通过一些关键因素来决定展示的内容结果。这些通常由开发人员所控制，通过对这方面的优化就可以提高应用程序的可搜索性。这就是SEO——搜索引擎优化，在构建和营销产品最重要的方面之一。
基本的SEO标签
tag
标题
标题是页面SEO最重要的部分之一，其被搜索引擎用来在结果列表中展示对应页面的标题，也被用来在社交媒体中作为分享页的标题。我们可以通过以下方式来设置页面标题：
<head>
<title>Page Title</title>
</head>
描述
页面的描述信息就是搜索引擎在结果列表对应页面标题下方的内容，其同样被用于分享中。只需如下方式就可以给页面加上描述：
<head>
<meta name="description" content="This is the description of the page" />
</head>
打开图像图像
这个标签对搜索引擎的结果影响不大，但是对于社交媒体方面来说至关重要。其允许我们在社交媒体网站中——例如推特、脸书、领英，自行选择分享页所需要显示的图片。通过以下标签来设置一个有吸引力的图片，就能让我们的分享链接受到更多的关注。
<head>
<meta property="og:image" content="https:/yourdomain.com/image.png"/>
</head>
因此，基本的SEO标签设置如下：
<head>
<title>Page Title</title>
<meta name="description" content="This is the description of the page" />
<meta property="og:image" content="https:/yourdomain.com/image.png"/>
</head>
框架的类型以及影响
无框架——纯HTML
如果没有使用任何基于JavaScript的框架来构建应用程序，则每个页面的SEO标签都可以通过HTML文件来设置。因此，无需依赖特殊的库。
搜索引擎也比较喜欢这样的设置方式，因为这样能轻松的抓取页面。
使用框架——前端或服务端渲染的应用
当我们讨论通过框架渲染的应用SEO时，将会把主要关注点放在React框架以及优化Google搜索引擎。但是，以下部分同样适用于所有框架和搜索引擎。
在通过React构建的应用中，最常见的方式就是客户端渲染。React的客户端渲染本质上就是一个HTML根文件通过加载React相关脚本，在运行阶段将页面内容展示出来。所有路由都由该HTML文件生成，且都发生在客户端已经加载特定路由以及接收到数据之后，这就是为什么被称为客户端渲染的原因。在这种情况下，开发人员无法控制SEO标签，因为只有一个HTML根文件。由此，就出现了一些用来动态设置SEO标签的库。
但是，客户端渲染还会带来另外一个问题，搜索引擎爬虫将无法正确爬取这些页面，因为这些页面内容是在运行时生成的。针对这个问题，网络爬虫的开发人员已经做了一些额外的优化。例如，当检测到页面是通过JS渲染内容的，Google的网络爬虫就会将对应页面加入到队列中进行等待渲染。
不过这样的话，搜索引擎编制该页面的索引将会滞后，直到脚本渲染好页面内容并且能被爬虫机器所识别。爬虫机器必须对站点中的每个页面执行该操作，这需要花很长的时间，而且在任何步骤中发生的错误都会阻止搜索引擎为该页面编制索引。
solve
为了解决这些问题，Google提出了以下几点建议：
预渲染
预渲染是一种在渲染过程中将客户端渲染的应用程序转换为静态HTML文件的技术。预渲染工具通过访问每个路径并生成对应的HTML文件来达到渲染应用程序。但是，这个过程对较大的应用程序将十分缓慢；另外，在预渲染的React应用程序中无法实现动态链接，因为每个页面在编译阶段就需要存在了。因此，预渲染仅限于静态页面或通过查询参数获取动态内容的应用。
同构渲染（客户端+服务端）
同构渲染也被称为混合渲染。当用户代理（例如Google Bot）通过url访问这类应用程序时，会返回服务端渲染的页面内容，而将客户端渲染的页面内容返回给其它途径访问的用户。这可以确保搜索引擎正确的为页面编制索引，并且客户端渲染仍旧可以正常工作。然而，这种类型的渲染使用起来非常复杂，且相比完全由服务端渲染的React应用程序来说也没太大优势。因此，同构渲染并没有被广泛使用，对于大多数框架来说也没有比较好用的依赖包或库。
服务端渲染
在服务端渲染中，页面内容完全由服务端渲染完成并发送到客户端显示。因此，客户端将获取到完整的HTML内容。这也有利于SEO——搜索引擎爬虫能够直接获取到完整的页面内容，这也使得爬虫的工作量更加轻松了。换句话说，就是提高了搜索引擎编制页面索引的速度。
特定框架的SEO
1. React
客户端渲染
当在客户端渲染React时，可以通过使用react-helmet来渲染每个页面的meta标签。
预渲染
当通过create-react-app创建React应用时，可以使用react-snap或react-snapshot来达到预渲染的功能。另外，GatsbyJS就是一个较好的将React应用渲染为静态HTML文件的框架。
服务端渲染
通过NextJS这类框架可以实现React应用的服务端渲染，这更易于搜索引擎为应用程序编制索引。
2. NodeJS/ExpressJS
预渲染
prerender-node可以搭配任何Node-rendered框架，将所有路由内容渲染为静态页面。
服务端渲染
NodeJS是一门服务端语言，而Express是一个在这基础上的路由框架。因此，对于Node来说服务端渲染简直就是开箱即用。唯一需要注意的就是通过ejs动态的设置SEO标签。
3. AngularJS
客户端渲染
当在客户端渲染Angular时，可以通过使用ngx-seo-page在渲染阶段动态的设置每个页面的SEO标签。
预渲染
通过angular-prerender这类模块可预渲染Angular应用，其同时访问服务端和客户端路由，并将响应内容合并为一个静态页。
服务端渲染
Angular Universal为Angular应用提供了源生的服务端渲染支持，还可以结合ngx-seo-page去动态的设置SEO标签。
4. VueJS
客户端渲染
对于Vue应用的客户端渲染，没有太多框架可以动态设置SEO标签。vue-seo是其中之一，但是已经很久没有更新维护了，因此最好通过预渲染或服务端渲染来达到更好的SEO。
预渲染
通过使用vue-cli-plugin-prerender-spa可对Vue单页应用进行预渲染，这是一个可靠的、零配置的解决方案。
服务端渲染
通过Nuxt.JS这类框架可以轻松实现服务端渲染的Vue应用程序。其允许我们在服务端能够轻松实现应用的渲染、运行客户端侧的应用，或生成预渲染的静态文件。
5. Django/Python
服务端渲染
使用Django的默认方式就是通过服务端渲染。服务端会根据传递进来的数据渲染对应HTML模板，因此默认情况下就能获得动态SEO标签带来的好处。
如何进一步提高页面的SEO？
想提高页面的SEO，除了遵循上述介绍的SEO指南来建立基本的SEO。当在站点中使用标题标签（<h1>、<h2>等）时，请确保使用了所有相关的关键词，且在需要显示的内容中重复使用。如果做了这些操作，就会提高搜索引擎的排名。
总结
综述，我们了解了客户端展示的应用程序在被搜索引擎正确索引时会遇到的问题，以及开发人员在设置SEO标签时会遇到的问题。但这些挑战都可以通过已有的框架和渲染技术等各种解决方案来克服。
