单页应用程序的博客/技术 SIO/ SIO: 坚果和螺栓

单页应用程序的SEO: 坚果和螺栓

SE Ranking的SEO和内容营销专家,专攻AI Overviews,链接建设,Looker Studio报告,以及其他SEO相关话题.

SE Ranking的SEO主管. Anastasia在网站技术和网页优化、链接建设和内容营销方面有着丰富的经验

总结此博客文章:

历史上,网络开发者一直使用HTML作为内容,CSS作为造型,JavaScript(JS)作为交互元素. 联合来文允许在网页上添加弹出对话框和可扩展内容等功能。 超过98%的网站使用JavaScript,

将联署材料纳入网站的一个较新的趋势是采用了单页应用程序。 与传统网站(HTML, CSS, JS)在每次需要时都会从服务器上请求各一个, 相反,浏览器处理所有的处理.

这导致网站更快,这很好,因为研究表明网上购物者期望网站在三秒内加载. 装载时间越长,留在网站的顾客就越少. 采用SPA办法可以成为解决这一问题的好办法,但如果这样做不正确,也会给SEO带来灾难。

并指导如何正确使用SEO。 让SPA SEO右转 搜索引擎将能够理解你的SPA 并给它们打分

得到你的新AI概览 研究由SE Ranking!

下载我们的免费电子书,

你们都准备好了!

点击我们在电子邮件中发送的链接确认您的电子邮件

并获得由SE Ranking撰写的AI概览研究

• 单页申请的好处

更快的浏览和无缝导航,最小的布局班次,以及由于缓存资源导致的离线浏览能力.

• 机会均等方面的挑战

搜索引擎可能难以使JavaScript重度内容或动态添加元素. SPA经常使用一个单一的URL,使得搜索引擎更难识别单个视图. 由于动态路由,分析工具可能无法捕捉所有页面视图.

• 优化解决方案

使用服务器侧渲染以确保可爬行性. 使用History API来避免基于散列的路由,用于反映实际内容的不同URL. 为独特的视图动态更新元标记,并为丰富的片段使用JSON-LD.

• 机会均等司的最佳做法

定期使用SE Ranking等工具审核您的SPA网站,以识别可爬行性和索引问题. 用 GA4 跟踪 SPA 网站上的用户行为 。

• 基本机会均等做法

实施HTTPS来保护用户数据,并保持搜索引擎优先排序. 开发关键词丰富的,以用户为主的内容,并使用优化的元标记和有组织的视觉. 通过注重质量大于数量,提高信任度和排名,强化后联线配置. 不断分析竞争者确定机会和趋势的战略。

简单来说是SPA

一个单一的页面应用程序,或称SPA,是一个基于JavaScript的特定技术,用于网站开发,在第一页浏览负载后不需要进一步的页面负载. React,Angular,和Vue是用于构建SPA的最受欢迎的JavaScript框架. 它们大多在支持的库和API中有所不同,但每个都服务于快速的客户端渲染.

SPA通过取消服务器和浏览器之间的请求,大大提高了站点速度. 但搜索引擎对这个JavaScript的诡计并不那么兴奋. 问题是搜索引擎不像用户那样与网站互动。 这导致缺乏无障碍内容。 如果单页应用程序管理不当,搜索引擎可能无法识别动态加载内容,只显示空白页.

终端用户受益于SPA技术,因为他们可以轻松地浏览网页,而无需承受额外的页面负荷和布局变化. 鉴于单页应用程序会缓存本地存储中的所有资源(在初始请求中被加载后),即使连接不稳定,用户也可以继续浏览. 尽管SEO要求很高,

SPA的例子

许多高知名度网站都是以单页应用架构建成的. 受欢迎的例子包括:

Google Maps允许用户查看地图并找到方向. 用户访问网站时,会加载一个单页,并通过JavaScript动态处理进一步的交互. 用户可以对地图进行平面和缩放,以促使应用程序在不重新加载页面的情况下更新地图视图.

Airbnb是一个受欢迎的旅行预订网站,使用单一的页面设计,在用户搜索住宿时动态更新. 用户可以过滤搜索结果并探索各种属性细节而无需浏览新页面.

当用户登录到Facebook时,他们不需要刷新页面. 相反,他们只看到一页,以便与帖子、照片和评论互动。

Trello是一个由SPA提供动力的网络项目管理工具. 它的单页设计允许您在不刷新的情况下创建,管理和协作项目,卡片和列表.

Spotify是一种流行的音乐流派服务. 它让你浏览,搜索, 并听音乐在一个单页。 无需在页面之间重新装入或切换 。

单页应用程序对SEO有用吗?

是的,如果你明智地执行它。

SPA方法因其高速运行和快速发展而在网络开发者中流行. 开发者可以应用这一技术,根据现成的代码创建不同的平台版本. 这加速了桌面和移动应用程序的开发过程,使其效率更高.

虽然SPA可以为用户和开发者提供许多好处,但它们也给SEO带来了一些挑战. 由于搜索引擎传统上依赖HTML内容来爬行和索引网站,因此在大量依赖JavaScript的SPA上可能难以访问和索引内容. 这可能导致可爬性和可索引性问题。

这对用户和单页应用程序SEO来说都是一种好的方法,但您必须采取适当的步骤来确保您的页面容易爬行和索引. 适当的单页应用优化可以确保您的SPA网站与任何传统网站一样方便的SSO.

如何优化以下各节的SPA。

为何很难优化SPA?

在JS在网络开发中占据主导地位之前,搜索引擎只从HTML中爬出并索引了基于文本的内容. 随着联署材料越来越受欢迎,Google认识到需要联署材料资源,并了解依赖这些资源的网页。 Google的搜索爬行者多年来在访问单页应用程序内容方面取得了重大进展。

其他搜索引擎也在努力爬行JavaScript网站. 例如,Bing提出与Google相同的建议,推广服务器侧前置——一种允许bingbot(和其他爬行者)访问静态HTML作为最完整的网站版本的技术. 自从鸭子 去吧,亚虎! 主要来源于Bing,它们也可以爬动SPA.

JavaScript对网站能见度及排名的影响, 然而,不当使用可能会损害你的排名潜力,因此始终遵循下一节概述的SPA的最佳做法.

• 爬行问题

Googlebot 必须分析、编译和执行 JavaScript 来查看隐藏的内容 。 通常看起来像是JS档案的单一链接. 只有完成这个阶段后,Googlebot才能在HTML标记中看到所有页面内容. Google在页面上处理JavaScript有很长一段时间,

但如今,Google搜索几乎和普通网页一样处理JavaScript. Vercel和MERJ的一项研究证实了这一点,该研究分析了超过10万个谷歌机器人在多个网站采集到的.

Google还继续通过整合最新的网络技术,提高Googlebot爬行和索引网站的能力. Google甚至引入了一个常绿Googlebot的概念,它运行在最新的Chrimium渲染引擎(目前为114版本)上. Googlebot的常青状态使得它能够访问现代浏览器可用的众多新功能. 这提高了Googlebot渲染和理解包括单页应用在内的现代网站内容和结构的能力. 网站内容现在可以更高效地浏览和索引。

但是,虽然Google可以有效地使JS重的页面,但这样做比静态的HTML更需要资源. 下载,解析,以及执行JavaScript的更高卷需要大量的计算能力.

QQ URL 和路径

虽然SPA提供了最优化的用户体验,但其混淆的URL结构和路由使得围绕它们创建良好的SIO策略变得困难. 与传统网站不同的是,传统网站对每个页面都有不同的URL,SPA通常对整个应用程序只有一个URL,依靠JavaScript来动态更新页面内容.

开发者必须仔细管理URL,使其直观和描述性,并准确地反映页面的视觉内容.

为了应对这些挑战,可以使用服务器侧渲染和前置. 这创造了SPA的静态版本. 另一个选项是使用历史 API 或 push State () 方法 。 这种方法允许开发者同步获取资源并更新URL而不使用片段标识符. 将其与历史 API 组合后的结果是 URL 准确反映页面显示的内容 。

跟踪问题

Google Analytics tracking为SEO的单页应用提出了另一个问题. 传统网站通过每次用户加载或重新加载页面时运行分析码来准确计算每个视图. 但是在单页应用程序上浏览不同页面的用户只会触发代码运行一次. 单个页面视图没有触发 。

动态内容加载的性质使得GA无法为每个页面视图获得服务器响应. 这就是为什么GA4中的标准报告不能提供必要的分析。 透过GA4的增强度量法,

Pagenation也可能对单页应用程序SEO构成挑战,因为搜索引擎可能难以爬行和索引动态加载的帕格化内容. 幸运的是,有些方法可以用来跟踪单页应用程序网站上的用户活动.

这些方法需要更多的努力。 我们稍后会掩护他们

如何做SPA SeO

在应用SEO执行我们关于单一页面的提示之前,你需要一个可靠的工具来进行完整的网站审计并找出所有的问题.

我们建议使用SE Ranking的网站审计。 这个工具使用110+参数来评估您的网站,包括用户体验,索引编制,安全问题,本地化,链接等等. 它的2.0版本具有JavaScript渲染功能,用于检查客户端-侧授网站和其他网站一样. 在设置中启用可使用它 。

现在,让我们来检讨SEO对于单页应用的最佳做法。

服务器侧渲染

服务器侧渲染(SSR)涉及在服务器上渲染一个网站并将其发送到浏览器. 这个技术允许搜索bots根据基于JavaScript的元素爬行所有网站内容. 虽然这是用于爬行和索引的救生器,但它可能会减缓负载. 安全部门改革的一个值得注意的方面是,它偏离了战略优先事项采取的自然方法。 SPA主要依赖客户端渲染,这促进了其快速互动性和无缝用户体验. 它还简化了部署进程。

联合来文

单页应用程序的一个可能的渲染解决方案是异构的,即“通用的”JavaScript。 Isomorphic JS在生成服务器一侧的页面方面发挥着重要作用,缓解了搜索爬行器执行和提供JS文件的需要.

同位素JavaScript应用程序的“魔法”在于它们在服务器和客户端运行的能力。 它的工作方式是让用户与网站互动,仿佛其内容是由浏览器提供,而事实上,用户实际上是在使用服务器一侧生成的HTML文件. 有一些框架可以促进每个受欢迎的SPA框架的异形应用开发。 让我们用Next.js和Gatsby作为例子。 前者为每个请求生成HTML,而后者生成一个静态网站并在云中存储HTML. 类似地,用于 Vue让JS在服务器上输入HTML,并将数据发送给浏览器.

移交前

另一个用于单页应用程序的去解是预发. 这是所有HTML元素被加载并存储在服务器缓存中,然后被服务到搜索爬行器时. 一些服务,如Prerender和BromBone,拦截到一个网站的请求,并显示不同版本的网页搜索bots和真实用户. 缓存的HTML被显示给搜索对象,而“正常”的JS富含内容被显示给真正的用户。

还有其他更耗时的方法,用于向爬行者提供静态HTML. 一个例子是使用Helpless Chrome和Puppeteer库,它们将路由转换成页面,成为HTML文件的层次树. 然而,您必须删除拖曳码并编辑您的服务器配置文件,以定位静态的 HTML 以搜索 bots 。

• 逐步加强特征检测

这一技术涉及逐步增强不同代码资源的经验。 它使用简单的HTML页面作为爬行者和用户的基础. 在本页之上,根据浏览器支持,增加了CSS和JS等附加功能并启用(或禁用).

为了执行特性检测,写出单独的块代码以检查每个需要的特性API是否与每个浏览器兼容. 幸运的是,像Modernizr这样的图书馆可以帮助你节省时间和简化这一过程.

视图为 URL 使其可爬行

当用户通过 SPA 滚动时,他们会通过单独的网站部分. 但访客感觉自己在浏览多页。 这被称为“视图”,指用户将SPAs中的HTML片段视为屏幕或页面.

当用户通过单页应用程序网站的不同部分移动时,URL只改变其散列部分(例如, ). (中文(简体) ). JS文件指示浏览器根据碎片识别符(hash change)加载某些内容.

为了帮助搜索引擎将不同的网站部分视为不同的页面,使用历史API执行不同的URL. 这是HTML5中用于操纵浏览器历史的一种标准化方法. Google Codelabs建议使用这个基于散列的API,而不是基于散列的路由,以帮助搜索引擎识别和处理散列变化引发的不同内容碎片作为单独的页面. 历史 API 允许您更改导航链接并使用路径而不是散列 。

假设您有单页应用程序( SPA) , 包括 Home 、 About 和 Contact 。 当用户点击链接时,此API会将URL更改为_yourwebsite.com/about_ ,__你的网页.com/home _,__yourwebsite.com/contact__不重装页面.

Google分析师马丁·斯普利特(Martin Splitt)也给出同样的建议, 他还强调,要通过搜索引擎使您网站上的链接可以爬行,您应当使用带有href属性的标记,而不是依赖点击动作. 因为点击的JavaScript无法爬行,

<span href=" (中文(简体) ).
点击=“ goto(')”

开始使用HTML元素添加链接,被Google理解为经典链接格式. 其次,包含的URL应该是有效且可运作的网页地址. 确保它遵循统一资源识别标准的规则。 否则,网站及其内容不能被爬行者适当索引或理解.

使用机器人元标记

机器人元标记指示搜索引擎如何爬行并索引网站的网页。 在正确实施时,它们确保搜索引擎能够爬行和索引一个网站最重要的部分,同时避免重复内容或错误的页面索引.

例如,使用“无后续”指令可以防止搜索引擎在某个视图中跟踪链接,而机器人元标记中的“无索引”指令可以排除SPA的某些视图或部分被索引。

<meta name="robots" 内容="noindex, no follow"=

您也可以使用 JavaScript 添加一个机器人元标记, 但如果一个页面在它的机器人元标记中有一个无索引标记, Google 将不会在该页面中渲染或执行 JavaScript 。 在此情况下, 您尝试使用 JavaScript 来更改或删除无索引标记将无效, 因为 Google 甚至永远不会看到这个代码 。

运行一个 SPA 审核来检查您的 SPA 上的机器人元标记问题 。

· 避免404个软错误

一个软的404错误发生在一个网站应该返回一个404(未发现)错误,而是返回一个200(OK)的状态代码.

软404错误对SPA网站来说可能存在问题,因为它们是如何构建的以及它们使用的技术. 从 SPA严重依赖JavaScript来动态加载内容,服务器可能并不总是准确识别请求的页面是否存在. 客户端的路由通常用于客户端制备的SPA,使得使用有意义的HTTP状态代码变得棘手.

通过应用以下技术之一,可以避免软性404误差: 1.

• 使用 JavaScript 重定向到从服务器触发404 HTTP 状态代码的URL.
  *通过JavaScript为错误页面添加无索引标记.

QQ 已装入内容

懒惰加载是指仅在需要时加载内容(例如,将图像或视频作为用户向下滚动的页面加载). 这一技术可以提高页面速度和经验,特别是对于大量内容可以同时加载的SPA来说. 不幸的是,如果你不正确应用懒惰的加载,你可以无意中向Google隐藏内容.

注意注意确保Google索引,并查看页面上的所有内容. 这是如何:

• 使用“装载”属性,对图像和帧进行本地懒载。
• 使用接口 API观察者. 这使得开发者可以查看元素何时进出视图端口和多填充以确保浏览器兼容性.
• 使用 JavaScript 库。 这提供了一套工具和功能,使得内容的加载变得容易,但只能当它进入了视图端口.

总是重复检查您选择正确函数的方法 。 使用一个 Puppeteer 脚本来运行本地测试,并在 Google 搜索控制台中使用 URL 检查工具来查看所有图像是否被加载.

社会份额和结构化数据

网站往往忽略社会共享优化. 执行XCards和Facebook的开放图有助于大众社交媒体的丰富分享, 如果您不使用这些协议, 共享链接将触发随机、 有时无关的视觉对象的预览显示 。

在使不同类型的网站内容更容易爬行者理解时,使用结构化数据也极为有用. Schema.org提供了视频,食谱,产品等数据类型的标签选项.

也可以使用JavaScript为您的SPA以JSON-LD的形式生成所需的结构化数据并注入页面. JSON-LD是一种轻量级的数据格式,易于生成和解析.

您可以进行丰富的结果 在 Google 上测试以发现任何目前指定的数据类型,并允许您网页的丰富搜索结果.

为 SEO 测试 SPA

校对:Soup 您可以使用Google搜索控制台或移动友好测试等工具. 您也可在搜索结果中查看您的内容。 我们概述了如何在下面使用每一个。

Google 搜索控制台的 URL 检查

您可以访问 Google 搜索控制台的 URL 检查部分中必要的爬行和索引信息 。 它并没有完整地预览Google如何看待你的页面,

• 搜索引擎是否能够爬行和索引您的网站
• 制成的 HTML
• 无法通过搜索引擎加载和处理的页面资源

您可以打开报告查找与页面索引、移动可用性、HTTPS和标志有关的细节。

• 方便移动的测试

2019年,Google改用移动首个索引,指搜索引擎现在使用移动版的网页进行排名. 如果在移动设备上无法获取内容,则在搜索结果中有可能被忽视。 你的网站应该总是好看,容易使用,在智能手机,平板电脑或电子阅读器等移动设备上运作良好.

你可以使用移动友好 测试工具评估您网站的移动方便度。 它评估关键技术(如页面速度)和可用性(视图端口设置、文本大小、触摸元素和屏幕内容)因素。

另一个测试你的SPA的优秀工具是无头Chrome. 也有利于观察JS如何执行。 与传统浏览器不同,无头浏览器没有完整的UI,而是提供真实用户会经历的相同环境.

最后,使用浏览器Stack等工具在不同浏览器上测试你的SPA.

阅读我们移动SEO的指南,以获得制作移动友好网站的专业提示.

检查您的页面缓存版本

由于Google已退休缓存链接和已禁用缓存功能,用户必须寻找其他方法检查存档页面.

您可以使用 Google 缓存检查器( Google Cache Checker), 我们的自由而简单的工具来检查您的页面缓存版本 。 工具将带您到 Web Archive 并显示最新保存的副本 。

请检查ERP中的内容

有几种方法可以检查你的SPA在SERPs中的出现:

• 您可以在 SERP 中检查您内容的直接引文, 以查看包含该文本的页面是否被索引 。
• 您可以使用_ site:_ 命令在 SERP 中检查您的 URL 。

最后,你可以结合两者。 输入 _ site: domain name "content exit"_,就像下面的截图一样,如果内容被爬行和索引,你将在搜索结果中看到。

根本的SEO没有办法

除了与单页应用相关的更独特的挑战外,通用优化技术依然适用. 您应该优化 SPA 的一些基本要素 :

• 警卫。 ** 您的网站应该使用 HTTPS 保护 。 没有它,搜索引擎可能会降低您网站的优先地位,它处理的任何用户数据都可能面临风险. 永远不要从您的待办事宜列表中交叉网站安全,因为它需要定期监控. 使用 SE Ranking 的网站审核工具检查您的 SSL/ TLS 证书中的重大错误, 以确保您的网站能够安全访问 :

• 不断优化。 ** 我们谈到了优化SPA内容的具体措施, 例如为每个视图写独特的标题标签和描述元标签, 但在采取上述措施之前,必须适当优化内容。 你的内容应该适应正确的用户意图,组织良好,具有视觉吸引力,并丰富有益的信息。 如果您没有为该网站收集关键词列表, 提供访问者所需的内容将面临挑战。 阅读我们的关键词研究指南 学习更多。

• 链接大楼。 ** Backlink是谷歌的关键信号 关于有多少其他资源相信你的网站。 建立回路档案是您网站SEO的重要组成部分。 没有两个回路是相似的,每个指向您网站的链接都有不同的价值. 虽然有些回路可以显著提升你的排名,但垃圾邮件可以破坏你的搜索存在. 考虑更多地了解回路质量,并遵循最佳做法,以加强你的链接概况。

• 竞争者监测。 ** 您很可能已经在网站开发初期对竞争对手进行了研究。 然而,与任何高级管理职位和营销任务一样,必须不断监测你的专长。 由于数据丰富的工具,您可以轻松地监控对手在有机和付费搜索中的策略. 这使得您可以评价市场状况,在主要竞争者中发现波动,并从已经为类似网站工作的成功关键词或活动中获得灵感。

  跟踪单页应用程序

带有 GA4 的轨道 SPA

跟踪SPA网站上的用户行为可能具有挑战性,但GA4拥有处理的工具. 使用 GA4 应用 SEO 帮助您更好地了解用户如何与您的网站互动,确定需要改进的领域,并做出数据驱动的决定来改善用户体验.

如果你还没有安装Google Analytics, 请阅读我们的GA4设置指南,

一旦你准备好继续前进,就采取以下步骤:

• 转到你的GA4账户,然后在行政区域的数据流。 点击您的网页数据流 。

• 确保启用强化计量切换。 点击齿轮图标。

• 打开页面视图部分的高级设置,并启用基于浏览器历史事件的页面更改设置。 记得保存更改。 禁用所有与页面视图无关的默认音轨, 因为它们可能影响准确性 。

• 打开Google标签管理器并启用预览和调试模式.
• 浏览您SPA网站上的不同页面。
• 在预览模式下,GTM容器将显示历史变迁事件.
• 如果您在预览模式下的 GTM 容器旁边点击了您的 GA4 测量ID, 您将会看到发送给 GA4 的多个页面视图事件 。

如果这些步骤有效,GA4可以跟踪您的SPA网站. 如果网站仍无法追踪,

• 采用GTM中的历史变化触发器。
• 要求开发人员激活数据Layer。 推码.

SE Ranking 排名追踪器

SE Ranking的Rank Tracker是另一个综合追踪工具。 这个工具允许您检查您想要它排列的关键词的单个页面应用程序,它甚至可以在多个地理位置,设备和语言中检查它们. 该工具支持在Google,Google Mobile,Yahoo!和Bing等流行搜索引擎上进行跟踪.

要开始跟踪,在SE Ranking平台上为您的网站创建一个项目,添加关键词,选择搜索引擎,并指定竞争对手.

一旦您的项目设置完毕, 请访问 Rankings 标签, 包含多个报告 :

页:1
* 详细内容
* 总体情况
* 历史数据

我们将专注于默认 _ 详细_标签。 这很可能是您在增加项目后看到的第一份报告。 本节的顶部显示您的SPA:

• 平均职位
• 交通预测
• 搜索可见度
• SERP特征
• 在前10名中所占百分比
• 关键词列表

这些图表下的关键词表提供了您网站排列的每个关键词的信息。 它包括目标URL,搜索量,SERP特性,排名动态等细节. 您可以在 Columns 区域中附加参数自定义表格。

该工具允许您通过首选参数过滤您的关键字 。 也可以设置目标URL和标记,查看不同日期的排名数据,甚至比较结果.

关键词"Rank Tracker"给你另外两个报告:

你的网站排名数据: 包括您计划中添加的所有搜索引擎 。 这些都可以在一个标签中找到,标签为_Detailed_.
历史资料: 其中包括自基准日期以来您网站排名的波动数据。 导航到 _ 历史数据_ 标签查找此信息 。

关于监测网站位置的更多信息,请参见我们关于不同搜索引擎中军衔追踪的指南。

单页应用网站完成对

现在你知道了SEO对于单页应用的所有内在和外在,下一步是将理论付诸行动. 让爬行者容易获取您的内容,并观看您的网站在搜索引擎眼中闪耀. 在为访客提供动态内容载荷、爆破速度和无缝导航的同时, 您还想要确保您有正确的站点图, 使用不同的 URL 而不是碎片标识符,

JavaScript带动的单页体验的兴起满足了渴望与网络内容进行即时互动的现代用户的需求. 为了保持SPA以UX为中心的利益,同时在搜索中取得高排名,开发者正在切换Airbnb的工程师Spike Brehm所说的“硬路”——熟练地平衡了网络开发的客户端和服务器方面。

Daria是SE Ranking的SEO和内容营销专家. 她的兴趣横跨着SEO和数字营销. 她喜欢用简单的语言描述复杂的事物. 在她的空闲时间里,达里亚享受了环游世界,学习摄影艺术,参观美术馆.