[深圳SEO]SPA搜索引擎优化:谷歌第一页的单页应用指南

小帅帅 9540 0

部分

隐藏身体的最佳位置

你听说过那个令人敬畏的SPA项目吗?单页应用程序通过了所有单元,集成和端到端测试。它过去挺美; 深受设计师和开发人员的喜爱。听说过吗?没有?我也不。知道为什么?因为它排在谷歌的第二页,从未吸引任何商业结果。😱

换句话说,它的开发人员对SPA SEO(搜索引擎优化)知之甚少。幸运的是,你很棒的SPA项目,我对单页应用程序搜索引擎优化有足够的了解,以确保你的项目在谷歌上排名。看看,最简单的形式,SPA不适合搜索引擎优化:他们的客户端呈现的内容不是最容易抓取的。如果你的前卫开发者朋友告诉你Googlebot像冠军一样执行JavaScript,我不在乎。我读过研究人员,开发人员和业内人士撰写的数十篇文章。他们都有一个共同点:您至少应该使用预呈现或服务器端呈现来使SPA内容更易于发现,理解和索引搜索引擎。这是它的要点。但是,还有其他一些考虑因素,本指南将涵盖其中大部分内容:基本的seo排名因素(基础知识)

单页面应用seo的问题

2019年SPA SEO的最佳实践

React,Vue和Angular SEO的可操作提示和工具

SEO 很重要。对于许多在线企业而言,Google不仅仅是一个搜索引擎; 它是一个增长引擎。但是优化Google可能很难 - 特别是当涉及到大量的JS时。但硬并不意味着不可能!在Snipcart,我们已经为流行的SPA框架开发了数十个教程。处理正确的方式,他们都可以是SEO友好的JavaScript框架。所以让我们跳进去让整个事情变得更容易一些。免责声明:本指南主要关注Google SEO,因为它拥有超过92%的市场份额。如果你想优化Bing,我邀请你google“ bing seo。”我在开玩笑 - 这个建议的大部分也适用于其他搜索引擎。部分

基本SEO排名因素

那么SEO中最重要的是什么?什么使网站排名?我不会在这里解释谷歌索引算法的细节。我不能这样做 - 坦率地说,没有人能做到。它是封闭源,高度复杂,不断更新,并解释> 200个排名因素。好消息?一些久经考验的简单实践将大大有助于增加有机流量。在使用SPA统治SERP(搜索引擎结果页面)之前,您需要掌握这些SEO基础知识:1.可发现的,高质量的内容🏅在创建最简单的单页应用程序之前,请记住一件事:内容质量在SEO中排名第一。内容质量需要专业知识和研究 - 如果您的客户的行业对您来说很陌生,那么您无法在这里提供帮助。但您绝对可以帮助实现内容可发现性,即现场和页面优化。这是如何做:元标记以下元标记可帮助搜索引擎更好地了解您的内容:元内容类型 - 声明页面的字符集。

Viewport增强了移动用户体验。

标题标签

包含1个主要关键字

保持<70个字符

将其与SERP上的竞争标题区分开来

始终添加您的品牌([...] - 您的品牌)

元描述

包括1-2个主要关键字

保持<140个字符

添加号召性用语以点击该页面

证明您了解搜索者的意图(即登陆SERP的人)

社交标签 - 提高内容的社交可共享性。

至少定义Open Graph标签(facebook)和Twitter卡

Protips目标关键字应出现在标题标签,网址,H1和审核页面内容中。

图像标题和ALT标签应以描述性命名。

应始终定义站点地图 - XML站点地图有助于搜索机器人了解您的站点并将其编入索引。

进一步阅读SEO元标签

社交元标记

XML站点地图

关键字研究

2.安全性(HTTPS)🔒你知道URL之前的小锁吗?你需要它。一个有效的ssl证书 - 从而一个HTTPs连接 - 将向用户和Googlebot显示你关心的邪恶黑客。除了选举干涉俄罗斯网络恐怖分子之外,这是在您的网站上启用SSL的另一个好理由:

此屏幕截图在Chrome中显示,除了此非SSL网站外,还显示了一个明确的“不安全”标签。现在我不了解你,但访问佛罗里达肯定不安全。不要像佛罗里达州。不要吓跑用户。要安全。另外,让我们加密和Cloudflare让你免费做到这一点。进一步阅读用于SEO的HTTP与HTTPS

3.移动优化📱在“2019年要记住的SEO事物”的顶部高位是:Google使用移动优先索引。旧式桌面Googlebot不会是第一次敲你的新SPA门。智能手机Googlebot会!如果您有现有的SPA,则可以转到Google Search Console设置,以查看索引抓取工具何时切换到移动设备。它将评估可用性(字体大小,按钮间距,响应度)和性能。单页应用程序以其“较少下载的内容”优势而臭名昭着。但请注意,您的里程可能因移动连接而异。另一部分将介绍SPA的移动性能。进一步阅读移动SEO

4.表现和用户参与🏎作为排名第一的SEO排名因素,反向链接的辉煌岁月已经一去不复返了。今天的Google搜索算法更具动态性。它比以往任何时候都更重视以用户为中心的因素。网站速度和用户参与度信号是这里的两个重要信号。性能我们的集体注意力日益缩短。在线搜索者很快就会放弃网站和购物车。Google希望取悦其用户,并且缓慢加载的页面根本不令人满意。他们甚至可能会使您的网站受到惩罚,或者被拒之门外。考虑到Googlebot的不耐烦:爬虫通常不会等待超过5秒的时间来执行脚本。错过了超时,您将面临内容呈现和索引问题的风险。不过不怕!高性能,适合搜索引擎优化的SPA的现代开发实践比比皆是 - 并且它们都在另外的部分中描述。用户参与谷歌现在适应用户级信号。它通常通过倾听来重新组织SERP排名:页面上的时间,页面/会话

结果和SERP之间来回(频率+速度)

SERP上的点击率

社交信号

新鲜度+人气因素

推文/转发,分享,评论,帖子

谷歌已经非常擅长跟踪用户参与度,以确保其用户第一次获得他们正在寻找的结果。进一步阅读现场搜索引擎优化:页面速度

JavaScript SEO最佳实践

用户体验信号

5.权力(反向链接和信任得分)🔗在90年代,谷歌以“一个链接=一票”的方式衡量反向链接。一个非常民主和可游戏排名的过程。这就是为什么,如今,你会发现人为的,垃圾链接建立策略会导致严厉的惩罚。当网站依赖于从不值得信任的链接获取权限时,网站会从Google搜索中消失,同时还会消失其自然流量。尽管如此,以正确的方式建立您的网站权限仍然是SEO的关键策略。您可以通过从主题相关且受信任的网站获取自然,相关的主题反向链接来实现此目的。最流行的方式呢?创建其他网站将在其网页上用作资源(和链接)的有价值内容。一些权威因素会影响您的Google排名:质量+链接域/页面的数量

信任流(或信任分数)

简单地说:您与高权威网站的联系是什么?

媒体,政府,学术界,官方目录

进一步阅读SEO的链接建设

单页面应用SEO的

部分

问题

什么是SPA?单页面应用程序(SPA)是一种依赖JavaScript的Web应用程序,可以动态地向用户访问的页面添加内容。SPA通常在一个页面加载中下载所有站点所需的代码,从而提高最终用户的感知性能。在UX方面,它类似于浏览器内的桌面应用程序:导航期间不会连续,冗长的页面加载。SPA越来越多地出现在Web开发中。它们快速,有趣,易于构建和灵活。此外,它们也很容易转换为渐进式Web应用程序(PWA)!为什么SPA SEO很难?单页应用程序有一些缺点。毕竟,它们充满了JavaScript,AKA是Web开发的臭名昭着的双刃剑。而且一些开发人员...... 写JS 很难。有些用户甚至在浏览器中禁用JS。可访问性也很棘手。然而,在这里,我将专注于SEO的缺点。我假设您的网页确实需要在Google上排名。换句话说,SPA的某些重要部分并未安全地隐藏在登录后面。客户端呈现的内容客户端渲染SEO很棘手。默认情况下,请参阅SPA为浏览器提供空容器。我们来看一个基本的例子:这个Emoji Search单页面应用程序,来自官方的React文档示例。→ https://ahfarmer.github.io/emoji-search/如果您在Chrome中查看页面来源,您将获得以下内容:

title="Fork me on GitHub">Fork me on GitHub

就是这样。没有实际内容 - 只是容器。在SPA中,它是为此浏览器容器添加内容的JavaScript。通常,AJAX调用将从服务器请求页面内容:

如果在同一个React应用程序上使用inspect元素,您将看到DOM的当前状态:

看到?由于我们的SPA,内容就在那里。但是,正如您可能已经开始怀疑的那样,Googlebot会看到我们两个示例的第一个版本。空容器,没有内容。这里有一个简化的启发式:→同步内容=已爬网→异步内容=未被抓取该爬虫虽然需要为用户提供相同的URL,但却不是常规的浏览器访问用户。您需要确保它可以访问您要在SERP上定位的页面上的内容。等等,我以为Google开始抓取JavaScript?我们自2014年以来就听说过这个。尽管如此,关于JavaScript SEO的所有排名最高的文章(看我在那里做了什么)建议不要依赖Googlebot进行JS抓取。事实已经证明,抓取预算 --Googlebot在特定时期内的抓取/索引页面数量 - 与HTML不同,与富含JS的网站不同。后者更耗费资源并且需要执行条带,往往具有较低的爬行预算。这可能导致SERP上的可发现性问题。因此,不要认为Googlebot会抓取您的异步内容,或者它会做得很好。是的,即使他们更新它以支持Chrome 74。无论如何,优化机器人可抓取性(下一节将向您展示如何)。考虑这就像购买保险。对于SEO。好的。类比结束。网址和路由直观,描述性的URL和内容架构有助于SEO。开箱即用的简单单页应用程序取消了浏览器<>服务器导航。这意味着开发人员必须谨慎管理URL。那是你。值得庆幸的是,许多链接到即将到来的部分的库和工具将帮助您实现这一目标。移动网络性能具有最少“下载内容”的轻量级单页应用程序仍在现实世界中运行。在现实世界中,大多数蜂窝连接都是高延迟。延迟可能是一个痛苦的屁股,但下一节教你如何尽可能保护你的SPA。剧透:Ç - d - N的。部分

SPA SEO的最佳实践

既然您已了解单页应用程序的潜在缺点,那么您应该问:“SPA SEO的最佳实践是什么?”正如Alexis Sanders解释的那样,您希望优化SPA:爬行我可以找到您的所有网址并在整个网站的架构中顺畅导航吗?

Googlebot的Obtainability我可以在不执行慢速JavaScript和用户特定交互的情况下访问您的内容吗?

Googlebot的感知网站延迟我可以快速向用户显示首屏内容吗?

Googlebot的以下部分将解决这些问题:1 - 服务器端呈现2 - 预先渲染3 - 性能/移动优化4 - SEO友好的URL5 - 测试SPA SEO您的第一个目标是获得您之前看到的内容丰富的DOM状态,但直接在页面加载上。这就是你如何确保Googlebot看到的东西与用户看到的一样。然后,它成为何时提供内容的问题。渲染Google友好版本SPA的两种最有效的方法是服务器端渲染和预渲染。1.服务器端呈现

服务器端呈现(SSR)是一种将呈现逻辑卸载到实时后端的方法。您的SPA执行对Node.js Web服务器的请求; 后者将完全呈现的HTML视图返回给客户端。嘘!如果你不知道Node.js是什么,不用担心:读这个。通过使用SSR,您无需使用Googlebot来运行前端JavaScript代码。它可以缩短应用的构建时间。但SRR并非都是阳光和玫瑰:它相对复杂,需要更多的开发时间(比预渲染)。

它会给您的服务器带来更多压力 - 可能会导致更慢的响应。

它强制您的代码进入通用(同构)JavaScript应用程序,因为它必须与您的JS框架和Node.js无缝协作。

React,Vue和Angular部分进一步介绍了使用JavaScript框架处理SSR的所有功能和教程。2.预渲染

预渲染是一种处理渲染逻辑预部署的方法。它区分真实用户和搜索爬虫。您的SPA使用无头浏览器运行,并为您的应用生成“Googlebot-ready”,完全呈现的HTML版本。该版本存储在您的Web服务器上。当请求命中时,服务器会检查它是来自真实用户(A)还是Googlebot(B):A - 直接向您提供SPA B - 提供预呈现的静态文件Prerender.io是一个流行的工具,可以用任何JS框架做到这一点。同样的事情会在预渲染-温泉插件。要注意的小差异:对于前者,预渲染在运行时发生,后者; 在构建期间。如果你想自己处理那个预渲染逻辑,你可以!查看Puppeteer和Prerender的开源版本。请注意,具有不断变化的数据的高动态应用可能无法与预渲染相匹配。React,Vue和Angular部分进一步介绍了使用JavaScript框架处理预呈现的所有功能工具和教程。3.性能/移动优化如前所述,感知性能是SPA最大的优势之一。但是,感知到的延迟并非如此。它发生在Googlebot遇到渲染阻止JS文件并且可能损害您的SPA SEO时。特别是如果它发生在移动记忆,移动优先索引!无论您是构建单页应用程序还是任何其他类型的网站,缓慢,不完整的移动体验都会损害您的SEO。但对于SPA来说,一个很棒的JS文件通常嵌套在HTML的顶部。这会给页面呈现带来潜在的瓶颈。你的目标?通过关键渲染路径尽可能快地加载代码:

不要害怕,因为有很多实用的技巧可以让我们尽快显示折叠内容(以及所有剩余的内容):使用内容分发网络(CDN)

地理位置分散的服务器网络将允许更快的文件传递,无论请求来自何处。

捆绑并缩小代码

无论是否加载异步,较小的资产大小总是很好。

允许持久连接

熟悉keep-alive HTTP方法

为不需要的资源 启用延迟加载

问问自己:所有资源是否需要加载初始页面加载?

绕过同源策略时,请仔细 处理JSONP + CORS请求

他们通常会启动可能会增加延迟的预检检查。

尽量减少回流

布局捣毁往往损害了网络perf- 提防。设计前端过渡时请记住这一点,即使您的页面HTML已预呈现。

处理实时更新时,请实现WebSockets。

SSR和预呈现不会解决此问题。

这些都是最佳实践。当然,在SPA方面,他们处于事先的方面。指定SSR或预先渲染应首先列在您的优先列表中。如果您更喜欢采用更精简的SPA优化方法,请考虑进行真实的用户监控,以确定实际的性能瓶颈。Maksym Churylov撰写了一篇关于这一主题的精彩文章,该文章还在技术上扩展了上述的大部分建议。有用的web perf资源Web Fundamentals Performance - Google

开发人员电子商务网站指南速度优化 - Snipcart

图像如何减慢页面加载时间(以及如何修复它) - Snipcart

4. SEO友好的URL在SPA的黎明时,导航完成了hashbangs和转义片段。这对于开发人员和搜索爬虫来说都是一团糟。路由游戏已经改变。今天,处理SPA URL的一般的SEO友好方法是利用History API和pushState()浏览器中的方法。它允许您获取异步资源并更新没有片段标识符的“干净”URL。→MDN Web Docs 在该主题上有一个坚实的条目。React,Vue和Angular的流行开源路由库都使用pushState()了引擎盖下的方法。干净的URL还将促进链接建设工作和反向链接的有机获取。最后但同样重要的是:干净的URL架构可以更好地分析Google Analytics中的数据。👀5.测试你的SPA SEOGooglebot正在努力完美呈现JavaScript。但它还没有。所以,正如Bitcoiners所建议的那样:不要相信,验证。换一种说法?如有疑问,请测试SPA!使用Google网址检查工具(fka“抓取为Google”)他们是a-changin'的时代。现在,您可以在谷歌搜索控制台(以前的“谷歌网站管理员工具”)中找到谷歌URL检查工具,以前称为“获取并呈现为谷歌” 。

这个漂亮的工具是测试SPA的一个很好的起点。选择“实时测试”并从您的已验证属性中输入URL。报告应该告诉你:您的网址是否可转换,可抓取?

您的内容是否适合移动设备?

Googlebot看到了哪些HTML /内容?

什么资源无法加载?

您还应该访问Google Search Console中的移动设备可用性报告。检查SERP上的内容引用 site:传统的SEO建议建议使用浏览器的缓存来查看Google如何为您的内容编制索引。无论如何,做到这一点,但不要限制自己这种技术。更安全的方法是site:在Google搜索中使用该命令,以及应在直接引用中编入索引的内容摘录。像这样:

如果您的内容已被正确抓取并编入索引,则该内容应显示在搜索结果中。检查DOM!超越“查看页面源”并确保您的SPA内容显示在DOM中。跟踪脚本性能确保脚本运行<5秒。定期或更好地进行自动化一次性绩效审计:Lighthouse / PageSpeed见解

WebPageTest

Pingdom的

部分

JavaScript框架SEO技巧:React,Vue,Angular

以下是您迄今为止学到的一些摘要。要提高可抓取性,可获取性和性能,您的单页应用必须是:使用服务器端呈现或预呈现为搜索爬网程序提供完全呈现的HTML内容。

尽可能优化性能,尤其是在移动设备上,以减少感知延迟。

为SEO友好的URL组织清晰,干净的结构。

定期使用SEO和性能监控工具进行测试。

那么上面如何转换为三大JS框架:React,Vue和Angular?这里有一些工具和指南,可以让你优化你的[ 插入最喜欢的框架 ]单页面的SEO应用程序。反应SEO

SSR与Next.js [工具]

此React框架允许您简化SPA的服务器端呈现。使用React进行服务器端渲染 [tutorial]

本指南向您展示如何在不使用Next.js之类的框架的情况下在React上处理SSR。用React预渲染 [教程]

本指南介绍如何使用Create React App和react-snapshot处理预渲染。使用React进行捆绑和代码分割 [docs]

本文档介绍如何使用Webpack捆绑React SPA。SEO友好的React工具,如Gatsby,Next.js和Create React App都带有开箱即用的捆绑功能。使用React进行路由和URL管理 [工具]

此导航组件集合可帮助您管理路由和URL。→有关React SEO的更实际的看法,请查看这个Next.js教程,其中包括步骤,开源回购和现场演示。

标签: 深圳SEO 深圳SEO优化 深圳SEO推广 深圳SEO教程 深圳SEO技术 深圳SEO博客

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~