• 17630273926
SEO Angular指南:您需要知道的一切
作者:郑州云优化 / 2019-11-12 16:56 / 浏览次数:
SEOAngular指南:您需要知道的一切
嗨,您好。技术SEO在这里。我从2015年开始使用Angular进行电子商务网站的重新设计。我已经坏了很多,但修复了更多。
如果您不熟悉JavaScript的SEO,或者需要有关此处引用的概念的其他信息,RachelCostello的“了解JavaScript基础知识:备忘单”是一个不错的资源。
最重要的是:不要惊慌。您无需成为所提到的每一项技术的专家。
您有能力获得利益相关者的支持并与开发人员进行交流将是您最大的优势。我们将提供其他资源来帮助您。
让我们从基础开始
网站由代码组成。代码是用语言编写的。三种语言构成了大多数网站。
SEOAngular指南:您需要知道的一切
HTML创建内容。CSS可以进行布局,设计和视觉效果。
这两种语言可以制作出美观,功能丰富的扁平页面-但大多数情况下它们很无聊。
输入JavaScript(JS),这是网络版的编程代码。
借助JavaScript,网站可以个性化交互式用户体验。人们去吸引人的站点。JS制作吸引人的网站。
Angular是JavaScript的演进
Angular是一种扩展JS来构建网站的方法。使用Angular,从您的服务器发送的十几行纯HTML展开并执行个性化的交互式用户体验。
SEOAngular指南:您需要知道的一切
用它建立了将近一百万个站点。采用率正在迅速增长。
如果您尚未使用Angular或其他JavaScript框架,那么您可能很快就会开始。
为了使搜索引擎了解Angular网站,他们必须呈现JavaScript
为了使搜索引擎体验Angular内容,它们需要执行JavaScript。许多搜索引擎无法呈现JavaScript。
不要惊慌
如果您的市场主要由百度,Yandex,Naver或其他非渲染搜索引擎主导,请跳至渲染部分。
SEOAngular指南:您需要知道的一切
Googlebot<3sJavaScript
不完全是。他们喜欢它,因为人类喜欢丰富的互动体验!
…并且因为95%的网站都在使用它。
当您的模型依赖于最受信任的Web内容索引时,为JS生成的内容建立索引是一件好事。
这并不意味着这是历史上完美的关系。SEO专业人员对Googlebot的功能和抓取JS的承诺感到沮丧。
缺乏清晰度导致警告Angular可能会杀死您的SEO。
在I/O2018上,网站管理员团队公开谈论了Google在索引Angular和其他JS内容时遇到的问题。有些SEO专家发疯了,有些则生气了,有些则……不合理地兴奋了吗?
SEOAngular指南:您需要知道的一切
我站在那激动中。搜索代表。(前一年,我在开发者大会上遇到了一些关于SEO人士的困惑。向技术SEO致敬的箭头。)
开发人员感到兴奋。
然后,约翰·穆勒(JohnMueller)和汤姆·格林纳威(TomGreenaway)上台解决了搜索社区的一个主要误解:搜索的工作原理。
抓取,索引,排名–轻松获得一,三,四!
在Google召开的2018年开发者大会之前,SEO专业人员一直以Googlebot的流程按三个步骤工作的基本前提进行工作:爬网,索引和排名。
即使到2019年4月,Google自己的资源也反映了一个简单的三步过程。
SEOAngular指南:您需要知道的一切
在这个简化的过程中潜伏着各种隐藏的假设:
Googlebot在抓取时呈现JS。
索引基于呈现的内容。
这些动作以单个顺序同时发生。
Googlebot神奇,可以立即完成所有操作!
这是问题所在。我们忽略了渲染。
渲染是获取和执行初始HTML解析中调用的脚本的过程。
我们将初始HTML解析和JavaScript的输出称为DOM(文档对象模型)。
SEOAngular指南:您需要知道的一切
如果站点使用JavaScript,则HTML将不同于DOM。
初始HTML(JavaScript执行之前)
SEOAngular指南:您需要知道的一切
DOM(执行JavaScript后)
SEOAngular指南:您需要知道的一切
单个页面的两个视图可能非常不同。最初的HTML仅16行。执行JavaScript后,DOM充满了丰富的内容。
您可以通过查看页面源代码来查看初始HTML解析。要查看DOM,请在浏览器中打开“开发人员工具”,然后单击“检查”。或者,使用键盘快捷键Cmd+shift+I。
两次索引编制
由于三步流程假设及其对自然绩效的影响,Google网站管理员团队明确了索引分为两个阶段。
第一波仅基于初始HTML(也就是查看页面源代码)为页面编制索引。
第二个索引基于DOM。
SEOAngular指南:您需要知道的一切
Googlebot希望喜欢JavaScript,但有时他们需要您的帮助来理解它
JavaScript是您网站上最昂贵的资源。
1MB脚本在3G连接上可能需要5秒钟。1.5MB页面的加载成本为$0.19USD。(不,真的。以“我的网站成本是多少”测试您的页面?)
对于Googlebot而言,这是CPU执行脚本的费用。网路上有如此多的JavaScript,Googlebot的呈现引擎便形成了文字队列。
这意味着只有资源可用后,Googlebot才会发现JavaScript生成的内容。
SEOAngular指南:您需要知道的一切
Googlebot的技术债务使SEO陷入困境
数字生活的一部分是与您拥有的一起工作。通常,我们会采用现在可以采取行动的简单解决方案,而不是需要花费较长时间的更好方法。
这些捷径的顶点是科技债务。通常,必须先清理技术债务,然后才能实施大的更改。
Google理解Web丰富内容的主要障碍之一是Web渲染服务(WRS)。网络搜寻器的核心组件之一是使用2015年发布的Chrome版本。(如果您认为这没什么大不了的,请找到旧手机(六个月前升级的旧手机)并使用下一个小时。)
对于SEO专业人士和开发人员来说,这意味着要使用充满polyfill的代码库来将ES6功能改进为ES5。如果您不熟悉这些,恭喜!您已选择黄金时代开始优化Angular网站!
Googlebot的新版渲染引擎
SearchConsole开发人员倡导者MartinSplitt于本月初在GoogleI/O上与渲染工程师ZoeClifford进行了交流,宣布Googlebot是常绿的。
Web搜寻器使用V8作为其呈现和WebAssembly引擎。截至2019年5月,它正在运行Chrome74,并将在一周左右的新版本发布后继续更新。
现在,对我们广受欢迎的网络爬虫的大规模升级可以提供1,000多种新功能。您可以使用我可以使用来测试功能的兼容性。
预计将延迟对渲染内容进行索引
Google员工暗示Googlebot的未来将结合抓取和渲染。我们还没到那儿。爬行和渲染仍然是独立的过程。
仍然有延迟……但是现在支持超过1000个新功能!
-马丁·斯普利特??????(@g33konaut)2019年5月7日
现在,Googlebot可以更好地处理Angular了,让我们谈谈如何征服它。
优化Angular的爬网
知道你的版本
您正在使用的Angular版本将对您的优化能力(或至少设定期望)产生重大影响。
版本1称为AngularJS。
对于v2,该框架被完全重写。这就是为什么v1之后的所有内容都用笼统术语Angular引用的原因(即JS被剪切)。
版本很重要(因为Angular程序不向后兼容),所以请问您的团队正在使用哪个版本。
给每个资产有一个唯一的URL
Angular通常用作单页应用程序(SPA)的一部分。
单页应用程序允许更新页面上的内容,而无需向服务器发出页面请求。
使用异步JavaScript和XML(AJAX)调用填充对新内容的请求。没有新的页面加载可以表示浏览器中可见的URL不代表屏幕上的内容。
这是一个SEO问题,因为搜索引擎希望索引在已知地址始终存在的内容。如果您的内容仅倾向于存在于URI,那么它也倾向于不排名。
一小段名为pushState()的代码会在请求新内容时更新URL。
SEOAngular指南:您需要知道的一切
Google提供了一个Codelab,用于优化搜索中的单页应用程序(SPA)。
使用虚拟综合浏览量跟踪单页应用程序的分析
如果您的网站动态加载页面内容并更新文档的URL,您将需要发送其他浏览量来跟踪这些“虚拟浏览量”。
当您的应用程序动态加载内容并更新地址栏中的URL时,跟踪器上存储的数据也应更新。
GoogleAnalytics(分析)小组拥有关于SPA的虚拟综合浏览量的详尽文档,其中涉及添加手动标签,以便在加载新内容时将信息发送到跟踪服务器。
通过服务器端渲染Hero元素在FirstWave索引中发现您的内容
搜索引擎希望将页面与意图进行匹配。
此页面在回答事务,信息或本地意图方面是否有用?
如果我的查询具有事务意图,那么诸如产品名称,价格和可用性之类的元素对于回答我的意图至关重要。
此内容被称为您的英雄元素。
SEOAngular指南:您需要知道的一切
通过服务器端呈现这些内容,您可以告诉Google在第一波索引编制中页面匹配的意图–无需等待JavaScript呈现。
除了这些关于英雄元素的内容之外,还可以将SSR用于:
结构化数据(SamVloeberghs创建了有用的教程)
页面标题
元描述
<link>HTML标记,包括:
典范
Hreflang
日期注释
在HTML和DOM之间不要矛盾
SEO的基础知识教给我们简单性。
页面获得一个标题。一个元描述。一组机器人指令。
使用Angular,您可以在HTML中发送与DOM不同的元数据和指令。
我们的bot朋友以固定的顺序运行代码处事。如果您在HTML中放置一个noindex指令,则Googlebot将不会执行该脚本以在DOM中找到index标记,因为您告诉它不要呈现DOM。
不要在HTML和DOM之间拆分结构化数据标记
使用Angular,您可以使用HTML(首选)或DOM呈现Schema.org标记。
两种方法都可以使用,但是将整个标记放在一个位置(HTML或DOM)非常重要。
如果通过在HTML中呈现标记的一部分并填充属性DOM来拆分两者,则单独的组件将被视为不同的标记集。
他们都不是完整的。结构化数据标记有效或无效。没有“局部”的工作。
缓慢或阻塞的资源会使内容无法发现
缓慢或阻塞的资源将不会被视为内容的发现方式。缓慢的资源将显示为暂时不可用。
对脚本的请求需要在大约4秒钟内完成。阻塞的资源将在工具输出中如此表示。
支持分页加载无限滚动
手机上的分页可能令人沮丧。
您无需在易用性和Googlebot抓取之间进行选择。相反,请使用HistoryAPI检查点–允许用户(或漫游器)返回到同一位置的URL。
根据Google的说法:
如果要实现无限滚动体验,请确保支持分页加载。分页加载对用户来说很重要,因为分页加载使他们可以与您的内容共享和重新互动。它还允许Google显示指向内容中特定点的链接,而不是无限滚动页面顶部的链接。
要支持分页加载,请提供指向每个部分的唯一链接,用户可以直接共享和加载。我们建议您在动态加载内容时使用HistoryAPI更新URL。
通过Google的最新懒惰加载开发人员文档了解更多信息。
不要等待权限,事件或交互来显示内容
交互观察器>滚动事件
使用onscroll事件来延迟加载?
Googlebot看不到它。而是使用对Googlebot友好的IntersectionObserver来了解组件何时在视口中。
使用CSS切换可见性以点按即可加载
如果您的站点在手风琴,制表符或其他点击加载交互之后具有有价值的上下文,请不要等待该区域暴露出来对其进行加载。
将内容加载到HTML或DOM中,并使用CSS功能公开它。
您永远都不会获得该许可
如果您的网站要求许可,则Googlebot将会拒绝。这些包括地理位置,通知,推送以及W3C的权限注册表中列出的许多其他内容。
SEOAngular指南:您需要知道的一切
可抓取的链接具有带有Href属性的锚标记
<ahref=”/好时光”>
Web搜寻器的概念基于通过跟踪链接发现内容。您的Angular内容需要带有ahref属性的链接才能被发现。
<ahref="/goodlink">Willbecrawled</a>
<spanonclick="changePage('bad-link')">Notcrawled</span>
<aonclick="changePage('bad-link')">Notcrawled</a>
<aonclick="changePage('bad-link')">Notcrawled</a>
Google不会选择嵌入CSS样式的图像。
高级图像嵌入选项包括使用和用于响应图像。<picture>srcset
Google的建议是:
…使用以下格式的图片标签时,请始终提供带有src属性的img元素作为后备:
<picture>
<sourcetype="image/svg+xml"srcset="pyramid.svg">
<sourcetype="image/webp"srcset="pyramid.webp">
<imgsrc="pyramid.png"alt="largePNGimage...">
</picture>
对折叠内容使用内联样式
折叠内容的脚本依赖性使您的可发现性受到威胁。如果不等待脚本资源加载就无法呈现您的内容,则搜索引擎和用户可能会遇到延迟。
通过将关键CSS内联到<head>中来优化关键渲染路径,从而允许在浏览器中渲染首屏内容,而无需等待其余CSS加载。
在Web基础知识上了解更多有关如何最小化渲染阻止CSS的信息。
渲染优化
Googlebot喜欢的不是网站是否使用JavaScript。关于如何呈现JavaScript。
渲染选项和技术既令人困惑,又富饶。
这是Angular渲染选项的高级概述。喝杯咖啡,与开发人员坐下来,查看有关渲染选项的详细文档。与往常一样,魔鬼在实现中,您的经验可能会有所不同。
客户端渲染(CSR)
CSR在用户的浏览器中构建页面。最初的HTML是贫血的外壳。只有在获取并呈现了主要的JavaScript捆绑包之后,用户才能看到并进行交互。
可发现性等级:??
表现评估:??
服务器端渲染(SSR)
HTML太好了,您将证明Bing!
SSR也称为Universal,它在服务器上构建页面并附带HTML。该方法需要占用大量服务器资源,并且需要花费很多时间才能达到第一个字节,因此您需要主动监控服务器的运行状况。
可发现性等级:??????
表现评估:????
成就斐然:??非渲染搜索引擎的理想之选
动态渲染
对于搜索引擎爬网程序而言,一种非常令人困惑的隐藏(但不是隐藏)短期解决方案变通办法。此技术要求同时具有CSR和SSR渲染,并根据用户代理决定要提供的渲染。
像开源预渲染工具Rendertron这样的技术对于您的业务仍然非常有用。
爬网等级:??????
表现评估:??
可持续发展等级:??
如果尚未实现动态渲染,则此选项可能已超过其最佳日期。
预渲染
爬网等级:????????
表现评估:??????
在构建时创建HTML并存储以根据请求提供服务。改进的FCP,没有SSR开销。
仅适用于静态内容,不适用于要更改的内容(请考虑个性化和A/B测试)。
记住孩子们,您的付费预渲染服务拥有您。
今天的面孔:如果您使用的是React,请不要使用第三方进行服务器端渲染。如果它们掉线或您的信用卡失败(下面的示例),则您的站点将位于SERP中。
自托管https://t.co/7xAiWkW7XW,可减少头痛。pic.twitter.com/jkN3eMAvs0
-??ˋ杰西·汉利(@jessethanley)2018年8月21日
混合渲染(??带水化功能的服务器端渲染)
我们需要SSR的速度,但需要CSR的交互性。解决方案:SSR+水化。
渐进式水合渲染似乎是未来的方式。它允许组件级代码拆分。
网站可以推迟渲染组件,直到它们对用户可见或需要交互为止。AngularUniversal具有内置的水合解决方案:ngExpressEngine。
爬网等级:????????
表现评估:????????
SEOAngular指南:您需要知道的一切
索引覆盖率优化
使用第一方工具进行测试
SEO的一场技术性噩梦使代码发布正式发布,并意识到它无法渲染。升级到Googlebot可以缓解polyfill和其他麻烦的问题。
找出答案的最佳方法是使用Google的工具进行测试。SearchConsoleURL检查器提供了完整的呈现以及屏幕截图滚动。
“移动设备友好测试”和“丰富结果”也会返回DOM,但不会显示屏幕截图。您甚至可以测试防火墙和本地托管的构建。
即将推出:Googlebot用户代理更新
Googlebot的用户代理现在将保持不变。
我们可以期望SearchConsole工具能够迁移到v8渲染。
迁移完成后,我们有望看到Googlebot用户代理发生变化。
这将使我们更好地了解正在使用哪个版本的ChromeGooglebot。
有效地缓存脚本
脚本调用将计入您的抓取预算。
如果您在多个页面上使用相同的脚本,则可以通过设置缓存过期时间来让Googlebot一次请求该脚本并在相关页面上使用它。缓存过期后,Google会再次请求脚本。
通过使用版本控制,充分利用脚本。使用版本控制,您可以在脚本上设置较长的到期日期。嗨,Google,您明年可以使用/myscript.js?v=1!
当代码发布中包含对该脚本包的更改时,我的网站将更新它引用的JavaScript包。嘿Google,请使用/myscript.js?v=2呈现此页面!
捆绑版本控制可以缓解发布后的渲染问题
如果网络搜寻器尝试呈现您的页面,但使用的是过期脚本,则该页面可能无法正确呈现。
如果您的页面引用了要使用的编号版本,则搜索引擎将检查缓存中是否为当前版本。如果版本不匹配,搜索引擎将请求正确的捆绑软件。
SEOAngular指南:您需要知道的一切
如果异步呼叫具有唯一的Uris,请使用X-RobotsNoindex指令
我有一个网页可以异步加载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个URL。资源效率不是很高。
这在个性化或组件必须进行逻辑检查,然后再决定要返回的内容之前通常会看到。
结果可以非常有效。https://example.com/ajax/random-cat-picture-generator?cat=tank&&pose=bellyrubs对于用户来说,显然是梦幻般的个性化体验的一部分。
SEOAngular指南:您需要知道的一切
每个参数组合都是唯一的URL。Googlebot将唯一的URL视为唯一的页面(除非另有说明)。
一个未经检查的AJAX调用可能会导致成千上万个令人困惑的低价值页面供搜索引擎进行排序。坦克(Tank)是世界上最英俊的猫,它的确为用户带来了体验,但这与环境有关。
AJAX通话和索引通胀
这些URI本身可以破坏您的索引。AJAXURI上的一对简单参数将像兔子一样繁殖。每个都可以是唯一且可索引的。
您的索引状态看起来像是过山车-页面数急剧上升-随后由于Googlebot从索引中清除页面而引起肠胃不适。
SEOAngular指南:您需要知道的一切
为避免这种情况,请将X-Robotsnoindex指令添加到URI,以将内容异步加载到页面。这将产生更清晰的技术信号,并使Googlebot资源更有效地用于理解我的网站。
结识新的开发者
开发人员是SEO可以拥有的最好的盟友。Google网站站长意识到了这一点,并创建了一个新的网络系列,重点介绍了使网站可发现所需的代码更改。
寻找开始的地方?看看让你的角的网络应用程序发现和搜索引擎优化的代码实验室开发人员。
Tuck&Roll,我的朋友们
总而言之,AngularSEO的关键是:
了解HTML和DOM之间的区别。
在正确的时间和地点交付内容。
一致,唯一且可爬网的URL。
了解脚本资源的可索引性,大小,响应时间和缓存策略。
这是我们共同努力,使每个人的网站都能正常运行的部分。
最好的学习Angular的方法是动手操作,因此,如果您正在阅读本文,请保持镇静并记住古老的数字谚语:
除非您将其破解,否则它不是您的。
【郑州云优化】郑州SEO、网站建设、网站设计、服务器空间租售、网站维护、网站托管、网站优化、百度推广、自媒体营销、微信公众号
如有意向---联系我们
热门栏目
热门资讯
热门标签

网站建设 网站托管 成功案例 新闻动态 关于我们 联系我们 服务器空间 加盟合作 网站优化

备案号:ICP备*********号 网站地图/sitemap 

公司地址:河南省郑州市郑州云优化 咨询QQ:1774525808 手机:17630273926 电话:17630273926