角色的SEO指南：你需要知道的一切

嗨，您好。技术SEO在这里。我在2015年开始与Angular合作，重新设计电子商务网站。我已经打破了很多，但修复得更多。

如果您是初次使用SEO的SEO或需要有关此处引用的概念的其他信息，请参阅Rachel Costello的 了解JavaScript基础知识：您的备忘单 是一个很好的资源。

最重要的是：不要惊慌。您无需成为所提及的每项技术的专家。

您获得利益相关者支持并与开发人员沟通的能力可能是您最大的优势。我们将提供额外的资源来提供帮助。

让我们从基础知识开始

网站由代码组成。代码用语言编写。三种语言构成了大多数网站。

HTML创建内容。 CSS制作布局，设计和视觉效果。

这两种语言可以制作出美观，功能性强的平面页面 – 但大多数情况下它们都很无聊。

输入JavaScript（JS），一个编程代码的Web版本。

借助JavaScript，网站可以个性化交互式用户体验。人们去参与网站。 JS制作引人入胜的网站

Angular是JavaScript的演变

Angular是一种扩展JS来构建站点的方法。使用Angular，从您的服务器发送的十几行平面HTML展开并执行个性化的交互式用户体验。

用它建造了近100万个站点。收养率正在迅速增长。

如果您还没有使用过Angular或其他JavaScript框架，那么您可能会这样做 不久。

要让搜索引擎了解Angular站点，他们必须呈现JavaScript

要让搜索引擎体验Angular内容，他们需要执行JavaScript。许多搜索引擎无法呈现JavaScript。

不要惊慌。

如果您的市场主要由百度，Yandex，Naver或其他非渲染搜索引擎主导，请跳至渲染部分。

Googlebot <3s JavaScript

不完全是。他们喜欢它，因为人类喜欢丰富的互动体验！

……因为 95％ 网站使用它。

当您的模型依赖于最受信任的Web内容索引时，为JS生成的内容编制索引是一件好事。

这并不意味着它是一个历史上完美的关系。搜索引擎优化专业人士已经厌倦了Googlebot的能力和抓取JS的承诺。

缺乏明确性导致警告Angular可以杀死你的SEO。

在 I / O 2018，网站管理员团队公开谈论了Google在索引Angular和其他JS内容时遇到的问题。一些SEO专业人员疯了，其他人生气，有些人……不合理地兴奋？

我支持那种兴奋。代表搜索。 （去年，我在开发者大会上遇到了一些对搜索引擎优化人员存在的困惑回应。向技术搜索引擎优化的心脏箭头。）

开发人员很兴奋。

然后John Mueller和Tom Greenaway走上舞台，解决搜索社区中的一个重大误解：搜索是如何运作的。

抓取，索引，排名 – 轻松一，三，四！

在Google 2018年开发者大会之前，搜索引擎优化专业人员的工作基本前提是Googlebot的流程分三个步骤：爬行，索引和排名。

直到2019年4月，Google自己的资源反映了一个简单的三步流程。

潜伏在这个简化过程中的是各种各样的隐藏假设：

• Googlebot在抓取JS时呈现JS。
• 索引基于呈现的内容。
• 这些操作在单个序列中同时发生。
• Googlebot是神奇的，可以立即完成所有事情！

这是问题所在。我们忽略了渲染。

渲染是获取和执行初始HTML分析中调用的脚本的过程。

我们将初始HTML解析的输出和JavaScript称为DOM（文档对象模型）。

如果站点使用JavaScript，则HTML将与DOM不同。

初始HTML（在JavaScript执行之前）

DOM（JavaScript执行后）

单个页面的两个视图可能非常不同。最初的HTML只有16行。执行JavaScript后，DOM内容丰富。

您可以通过查看页面源来查看初始HTML分析。要查看DOM，请在浏览器中打开“开发人员工具”，然后单击“检查”。或者，使用键盘快捷键Cmd + shift + I.

两波索引

由于三步流程假设及其对有机绩效的影响，Google网站管理员团队澄清了索引的两个阶段。

第一个wave仅基于初始HTML（a.k.a.，查看页面源）索引页面。

第二个索引基于DOM。

Googlebot想要爱JavaScript，但他们有时需要你的帮助才能理解它

JavaScript是 最昂贵的资源 在您的网站上。

3G连接上1MB的脚本可能需要5秒。 1.5MB页面加载费用为0.19美元。 （不，真的。测试你的页面 我的网站费用是多少？）

对于Googlebot来说，这个成本来自执行脚本的CPU。由于网络上有如此多的JavaScript，因此为Googlebot的渲染引擎创建了一个文字队列。

这意味着只有在资源可用后，Googlebot才会发现JavaScript生成的内容。

Googlebot的技术债务为角度困难制造了SEO

数字生活的一部分正在与你所拥有的一起工作。我们通常会采取简单的解决方案，而不是采用需要更长时间的更好方法。

这些捷径的高潮是科技债务。通常，在实施大的变更之前，必须清理科技债务。

谷歌了解网络丰富内容的主要障碍之一是其网络渲染服务（WRS）。网络爬虫的核心组件之一是使用2015年发布的Chrome版本。（如果您认为这不是一件大事，请找到您的旧手机 – 从六个月前升级的手机 – 并使用它下一个小时。）

对于搜索引擎优化专业人士和开发人员来说，这意味着推动代码库充满了polyfill以进行改造 ES6 ES5的功能。如果您对这些不熟悉，恭喜！您已经选择了黄金时代来开始优化Angular网站！

Googlebot的Revving New Rendering Engine

搜索控制台开发者倡导者Martin Splitt本月早些时候在Google I / O上与渲染工程师Zoe Clifford一同宣布 Googlebot是常青树。

网络爬虫正在使用 V8 作为其渲染和WebAssembly引擎。截至2019年5月，它正在运行Chrome 74，并将在一周左右的新版本发布后继续更新。

对我们心爱的网络爬虫的大规模升级现在可以呈现超过1,000个新功能。您可以测试您的功能兼容性 我可以用吗。

预计呈现内容的延迟将被编入索引

Google员工暗示Googlebot的未来将结合抓取和渲染。我们还没有。抓取和渲染仍然是单独的进程。

仍然存在延迟……但现在支持超过1000种新功能！

– Martin Splitt @???（@ g33konaut） 2019年5月7日

现在Googlebot可以更好地处理Angular，让我们来谈谈如何征服它。

优化角度爬行

了解你的版本

您正在开发的Angular版本将对您的优化能力产生重大影响 – 或至少设定期望值。

版本1称为AngularJS。

对于v2，框架完全重写。这就是为什么v1之后的所有内容都被称为全局术语Angular（即JS被切断）。

版本很重要（因为Angular程序不向后兼容），所以请问团队您正在使用哪个版本。

为每个资产提供唯一的URL

Angular经常用作单页面应用程序（SPA）的一部分。

单页应用程序允许更新页面上的内容，而无需将页面请求返回给服务器。

使用异步JavaScript和XML（AJAX）调用填充新内容的请求。没有新的页面加载可能意味着浏览器中可见的URL不代表屏幕上的内容。

这是一个SEO问题，因为搜索引擎想要索引始终存在于已知地址的内容。如果您的内容只倾向于存在于URI中，那么它也往往不会排名。

一小段代码称为 pushState的（） 在请求新内容时更新URL。

谷歌提供Codelab 在搜索中优化单页应用程序（SPA）。

使用虚拟网页浏览跟踪单页应用程序的分析

如果您的网站动态加载页面内容并更新文档的URL，您将需要发送其他综合浏览量来跟踪这些“虚拟网页浏览量”。

当您的应用程序动态加载内容并更新地址栏中的URL时，也应更新存储在跟踪器上的数据。

Google Analytics工作人员提供了详尽的文档 SPA的虚拟综合浏览量，包括添加手动标签，以便在加载新内容时向跟踪服务器发送信息。

通过服务器端渲染您的Hero元素，在第一波索引中发现您的内容

搜索引擎希望将页面与意图进行匹配。

此页面是否有助于回答交易，信息或本地意图？

如果我的查询具有事务意图，那么产品名称，价格和可用性等元素对于回答我的意图至关重要。

此内容称为您的英雄元素。

通过服务器端呈现这些，您可以告诉Google在第一波索引中您的页面匹配的意图 – 无需等待JavaScript呈现。

除了英雄元素上的这些，使用SSR：

• 结构化数据（Sam Vloeberghs创建了一个 有用的教程）
• 页面标题
• 元描述
• HTML标记，包括：
  • 典范
  • 的hreflang
• 日期注释

不要在HTML和DOM之间自相矛盾

SEO的基础知识教会我们简单。

页面获得一个标题。一个元描述。一套机器人指令。

使用Angular，您可以在HTML中发送与DOM不同的元数据和指令。

我们的机器人朋友按照设定的顺序运行代码。如果在HTML中放置noindex指令，Googlebot将不会执行脚本来在DOM中查找索引标记，因为您告诉它不要呈现DOM。

不要在HTML和DOM之间拆分结构化数据标记

使用Angular，您可以在HTML（首选）或DOM中呈现Schema.org标记。

两者都可以工作，但完整标记位于单个位置非常重要 – 无论是HTML还是DOM。

如果通过在HTML中呈现标记的一部分并填充属性DOM来拆分两者，则将单独的组件视为不同的标记集。

它们都不完整。结构化数据标记有效或无效。没有“偏袒。”最大的努力。

缓慢或受阻的资源可能使内容无法发现

发现内容的方式不会考虑缓慢或被阻止的资源。缓慢的资源将显示为暂时不可用。

脚本请求需要在~4s内完成。被阻止的资源将在工具输出中表示为这样。

支持无限滚动的分页加载

手机上的分页可能令人沮丧。

您无需在易用性和Googlebot抓取之间做出选择。相反，请使用History API检查点 – 允许用户（或机器人）返回同一位置的URL。

根据谷歌：

如果要实现无限滚动体验，请确保支持分页加载。分页加载对用户很重要，因为它允许用户共享和重新与您的内容互动。它还允许Google显示指向内容中特定点的链接，而不是无限滚动页面的顶部。

要支持分页加载，请为用户可以直接共享和加载的每个部分提供唯一链接。我们建议使用History API在动态加载内容时更新URL。

了解更多Google全新的内容 Lazy Loading开发人员文档。

请勿等待权限，事件或交互以显示内容

交互观察者> Onscroll事件

使用onscroll事件延迟加载？

Googlebot不会看到它。相反，使用Googlebot友好 交叉观察员 了解组件何时位于视口中。

使用CSS切换可见性进行点击加载

如果您的网站在手风琴，标签或其他点击加载互动背后具有有价值的背景，请不要等待该区域被曝光以加载它。

在HTML或DOM中加载内容并使用CSS功能公开它。

你永远不会得到这个许可

如果您的网站要求权限，Googlebot将会拒绝。其中包括地理位置，通知，推送以及列出的许多其他内容 W3C的许可注册表。

可伸缩链接具有带Href属性的锚标签

Web爬网程序的概念基于通过以下链接发现内容。您的Angular内容需要与要发现的href属性的链接。

将被抓取
没有被抓取
没有被抓取
没有被抓取

Google不会选择嵌入了CSS样式的图片。

高级图像嵌入选项包括使用

和响应图像的srcset。

谷歌的 建议 是：

…当使用以下格式的图片标记时，您始终提供img元素作为具有src属性的后备：

在折叠内容之上使用内联样式

对于上层内容的脚本依赖性使您的可发现性处于危险之中。如果在不等待加载脚本资源的情况下无法呈现您的内容，搜索引擎和用户可能会遇到延迟。

通过内联中的关键CSS来优化关键渲染路径 ，允许在浏览器中呈现上层内容，而无需等待加载其余的CSS。

详细了解如何最小化渲染阻止CSS Web基础知识。

渲染优化

Googlebot爱不是关于网站是否使用JavaScript。这是关于如何呈现JavaScript的。

渲染选项和技术既丰富又令人困惑。

以下是Angular渲染选项的高级概述。拿一杯咖啡坐下来和你的开发人员一起回顾一下 有关渲染选项的详细文档。与往常一样，魔鬼正在实施中，您的体验可能会有所不同。

客户端渲染（CSR）

CSR在用户的浏览器中构建页面。最初的HTML是一个贫血的外壳。用户只能在获取和呈现主JavaScript包之后查看和交互。

可发现性评级：?

绩效评级：⭐️

服务器端渲染（SSR）

HTML非常好，你将获得Bing证明！

SSR也称为Universal，它在服务器上构建页面并发布HTML。该方法是服务器密集型的，并且具有较高的首次字节时间权衡，因此您需要主动监控服务器运行状况。

可发现性评级：???

绩效评级：⭐️⭐️

值得注意的成就：?非渲染搜索引擎的理想选择

动态渲染

搜索引擎抓取工具的一个非常令人困惑的隐藏（但不是隐藏真实内容）短期解决方案。此技术要求同时提供CSR和SSR渲染，并根据用户代理确定要提供的内容。

像开源预渲染工具这样的技术 Rendertron 对您的业务仍然非常有用。

可爬行性评级：???

绩效评级：⭐️

可持续性评级：⚰️

如果您尚未实现动态渲染，则此选项可能会超过其最佳日期。

预渲染

可爬行性评级：????

业绩评级：⭐️⭐️⭐️

在构建时创建HTML并将其存储为根据请求提供。改进了FCP，没有SSR开销。

仅适用于静态内容 – 不适用于要更改的内容（请考虑个性化和A / B测试）。

记住孩子，您的付费预渲染服务拥有您。

今天的脸庞：如果您使用的是React，请不要使用第三方进行服务器端渲染。如果他们失败或您的信用卡失败（例如下面的例子），那么您的网站将在SERP中tank。

自我主持人 https://t.co/7xAiWkW7XW 减少头痛。 pic.twitter.com/jkN3eMAvs0

– ˗ˏ'Jesse Hanleyˎ'（@jessethanley） 2018年8月21日

混合渲染（​​带水合的服务器端渲染）

我们想要SSR的速度，但CSR的互动性。解决方案：SSR +水合作用。

渐进式水合渲染看起来是未来的方式。它允许组件级代码拆分。

站点可以推迟渲染组件，直到它们对用户可见或需要交互。 Angular Universal具有内置补水解决方案： ngExpressEngine。

可爬行性评级：????

表现评级：⭐️⭐️⭐️⭐️

指数覆盖率优化

使用第一方工具进行测试

技术搜索引擎优化的噩梦是将代码发布到prod并意识到它不会呈现。升级到Googlebot应该可以缓解polyfill和其他繁琐的问题。

找出答案的最佳方法是使用Google的工具进行测试。 Search Console URL Inspector提供带有屏幕截图滚动的完整呈现。

移动友好测试和丰富的结果也会返回DOM，但不会有截屏滚动。你甚至可以 测试防火墙和本地托管的构建。

即将推出：Googlebot用户代理更新

Googlebot的用户代理将保持不变 – 目前。

我们可以期待Search Console工具迁移到v8渲染。

迁移完成后，我们可以预期Googlebot用户代理会发生变化。

这样，我们就可以更好地了解Google Google Chrome正在使用的版本。

高效缓存脚本

对脚本的调用会计入您的抓取预算。

如果您在多个页面上使用相同的脚本，则缓存过期设置允许Googlebot请求脚本一次并在相关页面上使用它。缓存过期后，Google会再次请求该脚本。

使用版本控制充分利用脚本。通过版本控制，您可以在脚本上设置较长的到期日期。嘿谷歌，你可以在明年使用/myscript.js?v=1！

当代码版本包含对该脚本包的更改时，我的网站将更新它引用的JavaScript包。嘿谷歌，使用/myscript.js?v=2来渲染这个页面！

捆绑版本可以缓解发布后的渲染问题

如果Web爬网程序尝试呈现您的页面但使用的是过时脚本，则可能会错误地呈现该页面。

如果您的页面引用要使用的编号版本，搜索引擎将检查这是否是缓存中的当前版本。如果版本不匹配，搜索引擎将请求正确的捆绑。

如果异步调用具有唯一的Uris，请使用X-Robots Noindex指令

我有一个网页，可以异步加载3个内容。这些AJAX调用中的每一个都有一个唯一的URI：

https://example.com/ajax/meet-my-cat-cta

https://example.com/ajax/random-cat-picture-generator

https://example.com/ajax/featured-bean-toes

每次Googlebot请求我的网页时，它都会返回4个网址。它资源效率不高。

这在个性化或组件中经常出现，在决定要回馈哪些内容之前必须进行逻辑检查。

结果可能非常有效。 https://example.com/ajax/random-cat-picture-generator?cat=tank&&pose=bellyrubs显然是为用户提供的个性化体验。

每个参数组合都是唯一的URL。 Googlebot将唯一网址视为唯一网页（除非另有说明）。

未经检查的一个AJAX调用可能会导致成千上万的令人困惑的低价值页面被搜索引擎排序。 Tank的图片，世界上最帅的猫，真的增加了用户体验，但它是关于环境的。

AJAX呼叫和指数通胀

这些URI本身可以破坏您的索引。 A simple pair of parameters on an AJAX URI will breed like bunnies. Each can be unique and indexable.

Your index status will looks like a roller coaster – a stark climbing rise in the number of pages – followed by a gut-churning drop as Googlebot purges pages from their index.

To avoid this, add X-Robots noindex directives to URIs that load content asynchronously to the page. This will create cleaner technical signals and make Googlebot resources spent on understanding my site more effective.

Make a New Developer Ally

Developers are some of the best allies an SEO can have. Google Webmasters recognize this and have created a new web series focused on the code changes needed to make a discoverable site.

Looking for a place to start?查看 Make your Angular web apps discoverable 和 SEO codelab for developers.

Tuck & Roll, My Friends

In summary, the keys to SEO for Angular are:

• Knowing the difference between HTML and DOM.
• Delivering content at the right time and place.
• Consistent, unique, and crawlable URLs.
• Being aware of your script resources’ indexability, size, response time, and caching policies.

This is the part where we work together to get everybody’s site out there alive and well.

The best way to learn Angular is hands-on so if you’re reading this, keep calm and remember the ancient digital proverb:

It’s not yours until you break it.

Image Credits

In-Post Image #1: Created by author, May 2019
In-Post Image #2: Screenshot taken by author, April 2019
In-Post Image #3: Bartosz Góralewicz via Moz
In-Post Image #4: Taken by Jennifer Holzman at i/o 2018
In-Post Image #5: Screenshot from Archive.org, 3 April 2019
In-Post Image #6: Created by author, May 2019
In-Post Image #7: Screenshot taken by author, March 2019
In-Post Image #8: Screenshot taken by author, March 2019
In-Post Image #9: Created by author, April 2019
In-Post Image #10: Screencap from Google Search and JavaScript Sites (Google I/O’19)
In-Post Image #11: Screenshot of MDN Web Docs
In-Post Image #12: User-centric Performance Metrics, Google Web Fundamentals
In-Post Image #13: Screencap from Google Search and JavaScript Sites (Google I/O’19)
In-Post Image #14: Screencap from Rendering on the Web: Performance Implications of Application Architecture (Google I/O ’19)
In-Post Image #15: Screenshot taken by author, March 2018
In-Post Image #16: Glamorshot of incredibly handsome cat by author
In-Post Image #17: Screenshot and chart creation by author, April 2018