SPA（Single-Page Applications）搜索引擎优化的关键和要点

一直以来，网页开发人员使用 HTML 来制作内容，使用 CSS 来设计样式，而使用 JavaScript (JS) 来制作交互元素。JS 可以在网页上添加弹出式对话框和可扩展内容等功能。如今，98% 以上的网站都使用 JavaScript，因为它能根据用户操作修改网页内容。

将 JS 纳入网站的一个相对较新的趋势是采用单页面应用程序。传统网站每次需要时都会向服务器请求加载所有资源（HTML、CSS、JS），而 SPA 则不同，它只需要初始加载，不会继续给服务器造成负担。相反，浏览器会处理所有的处理过程。

这将加快网站速度，因为研究表明，网上购物者希望网站在三秒内加载完毕。加载时间越长，留在网站上的客户就越少。采用 SPA 方法可以很好地解决这一问题，但如果操作不当，也会给搜索引擎优化带来灾难。

在本篇文章中，我们将讨论如何制作 SPA，研究它们给优化带来的挑战，并就如何正确进行 SPA SEO 提供指导。做好 SPA SEO，搜索引擎就能理解您的 SPA 并对其进行良好排名。 

SPA 概述

单页面应用程序（Single-page application，简称 SPA）是一种基于 JavaScript 的特定网站开发技术，在首次加载页面视图后无需继续加载页面。React、Angular 和 Vue 是构建 SPA 最常用的 JavaScript 框架。它们主要在支持的库和 API 方面存在差异，但都能提供快速的客户端渲染。

SPA 消除了服务器和浏览器之间的请求，从而大大提高了网站速度。但搜索引擎对这种 JavaScript 技巧并不感冒。问题在于搜索引擎不会像用户那样与网站进行交互，从而导致缺乏可访问的内容。搜索引擎并不了解内容是动态添加的，因此会留下一个有待填充的空白页面。

终端用户可以从 SPA 技术中获益，因为他们可以轻松浏览网页，而无需处理额外的页面加载和布局转换。由于单页应用程序会将所有资源缓存在本地存储器中（在初始请求加载后），因此即使连接不稳定，用户也能继续浏览。尽管在搜索引擎优化方面需要付出额外的努力，但该技术的优势确保了它的持久存在。

SPA 实例

许多知名网站都采用单页面应用程序架构。流行的例子包括

• 谷歌地图

谷歌地图允许用户查看地图和查找路线。当用户首次访问该网站时，只加载一个页面，进一步的交互则通过 JavaScrip 动态处理。用户可以平移和缩放地图，应用程序将更新地图视图，而无需重新加载页面。

• Airbnb

Airbnb 是一个流行的旅行预订网站，它采用单页面设计，用户搜索住宿时，页面会动态更新。用户可以过滤搜索结果，浏览各种房产详情，而无需浏览新页面。

• Facebook

当用户登录 Facebook 时，他们会看到一个单一的页面，可以与帖子、照片和评论进行互动，无需刷新页面。

• Trello

Trello 是一款基于 SPA 的网络项目管理工具。您可以在一个页面上创建、管理和协作项目、卡片和列表。

• Spotify

Spotify 是一种流行的音乐流媒体服务。它能让你在一个页面上浏览、搜索和聆听音乐。无需重新加载或切换页面。

单页面应用程序是否有利于SEO？

SPA 提供无缝、直观的用户体验。在不同部分之间导航时，浏览器无需重新加载整个页面。用户可以享受快速的浏览体验。用户也不太可能因为页面重新加载或浏览体验中断而分心或感到沮丧。因此，他们的参与度会更高。

SPA 方法也很受网络开发人员的欢迎，因为它能提供高速运行和快速开发。开发人员可以应用这种技术，根据现成的代码创建不同的平台版本。这加快了桌面和移动应用程序的开发过程，使其更加高效。

虽然 SPA 可以为用户和开发人员带来诸多好处，但它们也给搜索引擎优化带来了一些挑战。由于搜索引擎传统上依赖 HTML 内容来抓取和索引网站，因此它们在访问和索引严重依赖 JavaScript 的 SPA 内容时可能会面临挑战。这可能会导致抓取和索引问题。

这种方法往往对用户和搜索引擎优化都有好处，但您必须采取正确的步骤，确保您的网页易于抓取和索引。通过适当的单页应用程序优化，您的 SPA 网站可以像任何传统网站一样便于搜索引擎优化。

为何难以优化 SPA

在 JS 在网络开发中占据主导地位之前，搜索引擎只能抓取和索引 HTML 中基于文本的内容。随着 JS 越来越流行，Google 意识到有必要解释 JS 资源并理解依赖于它们的页面。多年来，Google 的搜索爬虫已经取得了重大改进，但在如何感知和访问单页应用程序内容方面，仍然存在很多问题。

虽然关于其他搜索引擎如何看待单页面应用程序的信息很少，但可以肯定的是，所有搜索引擎都不喜欢依赖 Javascript 的网站。如果你的目标是谷歌以外的搜索平台，那么你就会陷入困境。2017 年 Moz 的一项实验显示，只有 Google 和令人惊讶的 Ask 能够抓取 JavaScript 内容，而其他所有搜索引擎仍然对 JS 视而不见。

目前，除谷歌外，还没有任何搜索引擎就如何更好地理解 JS 和单页面应用程序网站发布任何值得注意的公告。但确实存在一些官方建议。例如，必应提出了与谷歌相同的建议，推广服务器端预渲染技术--该技术允许 bingbot（和其他爬虫）将静态 HTML 作为最完整、最易理解的网站版本进行访问。

爬行问题

HTML 很容易被搜索引擎抓取，但它并不包含太多关于 SPA 的信息。它只包含一个外部 JavaScript 文件和有用的 <script> src 属性。浏览器会运行该文件中的脚本，然后动态加载内容，除非爬虫无法执行相同的操作。当出现这种情况时，浏览器会看到一个空页面。

早在 2014 年，谷歌就宣布他们正在改进其功能，以更好地理解 JS 页面，但他们也承认，有大量的阻塞程序阻止他们索引富含 JS 的网站。在 18 年的谷歌 I/O 系列会议上，谷歌分析师讨论了对基于 JavaScript 的网站进行两波索引的概念。这意味着，当 Googlebot 拥有必要的资源时，它会重新渲染内容。由于 JavaScript 所需的处理能力和内存增加，抓取、渲染和索引的周期并不是瞬时完成的。

幸运的是，谷歌在 2019 年表示，他们的目标是将基于 JS 的网页从爬虫到呈现器的中位时间控制在 5 秒内。正当网站管理员逐渐习惯于两波索引方法时，谷歌的马丁-斯普利特（Martin Splitt）在 2020 年表示，情况 "更加复杂"，以前的概念不再适用。

谷歌继续利用最新网络技术升级其 Googlebot，提高其抓取和索引网站的能力。作为这些努力的一部分，谷歌引入了 "常青 Googlebot "的概念，它在最新的 Chromium 渲染引擎（目前的版本为 114）上运行。

凭借 Googlebot 的常青地位，它可以使用现代浏览器提供的大量新功能。这使得 Googlebot 能够更准确地呈现和理解现代网站（包括单页应用程序）的内容和结构。这样，网站内容就能得到更好的抓取和索引。

这里需要了解的主要问题是，谷歌在处理网页上的 JavaScript 时会出现延迟，所有加载到客户端的 JS 内容都可能不完整，更不用说正确索引了。搜索引擎可能会发现该网页，但无法确定该网页上的文案是否高质量或是否符合搜索意图。

错误 404 的问题

有了 SPA，您也就失去了 404 错误页面和许多其他非 200 服务器状态代码背后的传统逻辑。由于 SPA 的性质，所有内容都由浏览器呈现，网络服务器倾向于对每个请求返回 200 HTTP 状态代码。因此，搜索引擎很难分辨出无效的索引页面。

URL 和路由选择

虽然 SPA 可提供优化的用户体验，但由于其 URL 结构和路由令人困惑，因此很难围绕 SPA 创建良好的搜索引擎优化策略。传统网站的每个页面都有不同的 URL，而 SPA 不同，整个应用程序通常只有一个 URL，并依赖 JavaScript 动态更新页面内容。

开发人员必须仔细管理 URL，使其直观并具有描述性，确保 URL 准确反映页面上显示的内容。

要解决这些难题，可以使用服务器端渲染和预渲染。这会创建 SPA 的静态版本。另一种方法是使用历史 API 或 pushState() 方法。该方法允许开发人员异步获取资源并更新 URL，而无需使用片段标识符。通过与 History API 结合使用，您可以创建准确反映页面显示内容的 URL。

跟踪问题

SPA SEO 的另一个问题与 Google Analytics 跟踪有关。对于传统网站，分析代码会在用户每次加载或重新加载页面时运行，从而准确计算每次浏览。但当用户在单页面应用程序上浏览不同页面时，代码只运行一次，无法触发单个页面的浏览。

由于动态内容加载的特性，GA 无法为每次页面浏览获取服务器响应。这就是为什么 GA4 的标准报告在这种情况下无法提供必要的分析。不过，您可以利用 GA4 的 "增强测量 "并相应配置 Google 标签管理器来克服这一限制。

分页也会给 SPA SEO 带来挑战，因为搜索引擎可能难以抓取和索引动态加载的分页内容。幸运的是，您可以使用一些方法来跟踪单页面应用程序网站上的用户活动。

我们稍后会介绍这些方法。现在，请注意这些方法需要额外的努力。

如何进行 SPA SEO

为确保您的 SPA 针对搜索引擎和用户进行优化，您需要采取战略性的页面优化方法。以下是完整的页面搜索引擎优化指南，全面涵盖了最具吸引力的现场优化策略。

此外，还可以考虑使用能帮助您完成这一过程的工具，如 SE Ranking 的页面搜索引擎优化检查工具。使用该工具，您可以针对目标关键词、页面标题和描述以及其他元素优化页面内容。

服务器端渲染

服务器端呈现（SSR）是指在服务器上进行网站呈现，然后将其发送到浏览器。这种技术允许搜索机器人基于 JavaScript 元素抓取所有网站内容。虽然在抓取和索引方面这是一个救星，但它可能会减慢加载速度。值得注意的是，SSR 与 SPA 所采用的自然方法不同。SPA 主要依赖客户端呈现，这有助于其快速和交互的特性，提供无缝的用户体验。它还简化了部署过程。

Isomorphic JS

单页面应用程序的一种可能的呈现解决方案是同构或 "通用 "JavaScript。同构 JavaScript 在服务器端生成页面方面发挥着重要作用，可减轻搜索爬虫执行和呈现 JS 文件的需要。

同构 JavaScript 应用程序的 "神奇 "之处在于它能同时在服务器端和客户端运行。它的工作原理是让用户与网站进行交互，就好像网站内容是由浏览器渲染的一样，而实际上用户使用的是服务器端生成的 HTML 文件。每种流行的 SPA 框架都有促进同构应用程序开发的框架。前者为每个请求生成 HTML，而后者则生成静态网站并将 HTML 存储在云中。同样，Vue 的 Nuxt.js 在服务器上将 JS 渲染成 HTML，然后将数据发送到浏览器。

预渲染

单页面应用程序的另一个常用解决方案是预渲染。这包括加载所有 HTML 元素并将其存储在服务器缓存中，然后提供给搜索爬虫。一些服务，如 Prerender 和 BromBone，会拦截向网站发出的请求，并向搜索机器人和真实用户显示不同的页面版本。缓存的 HTML 显示给搜索机器人，而 "正常的 "JS 内容则显示给真实用户。页面少于 250 页的网站可以免费使用 Prerender，而大型网站则需要支付 200 美元起的月费。这是一个简单明了的解决方案：上传网站地图文件，剩下的就交给它了。BromBone 甚至不需要手动上传网站地图，月费为 129 美元。

向爬虫提供静态 HTML 还有其他更耗时的方法。其中一个例子是使用无头 Chrome 浏览器和 Puppeteer 库，它能将网页路径转换为 HTML 文件的层次树。但要注意的是，你需要移除引导代码并编辑服务器配置文件，以便找到供搜索机器人使用的静态 HTML。

利用特征检测进行渐进增强

使用特征检测方法是谷歌对 SPA 最强烈的建议之一。该技术包括利用不同的代码资源逐步增强体验。它以爬虫和用户都能访问的简单 HTML 页面为基础。在此页面的基础上，添加 CSS 和 JS 等附加功能，并根据浏览器的支持情况启用或禁用这些功能。

要实现功能检测，您需要编写单独的代码块来检查每个所需的功能 API 是否与每个浏览器兼容。幸运的是，Modernizr 等特定库可以帮助您节省时间并简化这一过程。

将 "视图 "作为 URL，使其可被抓取

当用户滚动浏览 SPA 时，他们会经过不同的网站部分。从技术上讲，一个 SPA 只包含一个页面（单个 index.html 文件），但访问者感觉像是在浏览多个页面。当用户在单页面应用程序网站的不同部分之间移动时，URL 仅在其哈希值部分发生变化（例如，http://website.com/#/about、http://website.com/#/contact）。JS 文件根据片段标识符（哈希值变化）指示浏览器加载某些内容。

为了帮助搜索引擎将网站的不同部分视为不同的页面，您需要借助历史 API 使用不同的 URL。这是 HTML5 中操作浏览器历史记录的标准化方法。Google Codelabs 建议使用此 API 而不是基于哈希值的路由，以帮助搜索引擎识别哈希值变化引发的不同内容片段，并将其视为单独的页面。历史 API 可以更改导航链接，并使用路径而不是哈希值。

谷歌分析师马丁-斯普利特（Martin Splitt）给出了同样的建议--使用历史 API 将视图视为 URL。他还建议使用 href 属性添加链接标记，并为每个视图创建独特的标题和描述标记（"使用一点额外的 JavaScript"）。

请注意，标记对网站上的任何链接都有效。因此，要使搜索引擎能抓取网站上的链接，应使用带有 href 属性的 <a> 标签，而不是依赖 onclick 操作。这是因为 JavaScript onclick 无法被抓取，而且 Google 几乎看不到。

因此，首要原则是使链接具有可抓取性。确保您的链接符合谷歌的 SPA SEO 标准，并以如下方式显示：

<a href="https://yoursite.com"> <a href="/services/category/SEO">

谷歌可能会尝试解析不同格式的链接，但不能保证一定会成功。因此，请避免链接以以下方式出现：

<a routerLink="services/category"> <span href="https://yoursite.com"> <a onclick="goto('https://yoursite.com')">

首先要使用 <a> HTML 元素添加链接，Google 将其理解为一种经典的链接格式。其次，确保所包含的 URL 是一个有效且能正常运行的网址，并且遵循统一资源标识符 (URI) 标准的规则。否则，爬虫将无法正确索引和理解网站内容。

错误页面的视图

在单页面网站中，服务器与错误处理无关，总是返回 200 状态代码，表示（在本例中是错误的）一切正常。但用户有时可能会使用错误的 URL 访问 SPA，因此应该有一些方法来处理错误响应。Google 建议为每个错误代码（404、500 等）创建单独的视图，并调整 JS 文件，以便将浏览器导向相应的视图。

标题和视图描述

标题和元描述是页面搜索引擎优化的基本要素。精心制作的元标题和元描述既能提高网站在 SERP 中的可见度，又能增加点击率。

就 SPA SEO 而言，由于整个网站只有一个 HTML 文件和 URL，因此管理这些元标签具有挑战性。同时，重复的标题和描述也是最常见的搜索引擎优化问题之一。

如何解决这个问题？

重点关注视图，视图是 SPA 中的 HTML 片段，用户将其视为屏幕或 "页面"。为单页网站的每个部分创建独特的视图至关重要。动态更新标题和描述以反映每个视图中显示的内容也很重要。

要在 SPA 中设置或更改元描述和 <title> 元素，开发人员可以使用 JavaScript。

使用 robots 元标记

Robots 元标签为搜索引擎提供如何抓取和索引网站页面的指令。如果使用得当，它们可以确保搜索引擎抓取和索引网站最重要的部分，同时避免重复内容或错误的页面索引。

例如，使用 "nofollow "指令可以阻止搜索引擎跟踪某个视图中的链接，而在 robots 元标签中使用 "noindex "指令则可以阻止索引 SPA 的某些视图或部分。

<meta name="robots" content="noindex, nofollow">

您也可以使用 JavaScript 添加 robots meta 标签，但如果页面的 robots meta 标签中包含 noindex 标签，谷歌就不会在该页面上呈现或执行 JavaScript。在这种情况下，您使用 JavaScript 更改或删除 noindex 标签的尝试将不会有效，因为 Google 根本不会看到这些代码。

要检查 SPA 上的 robots 元标记问题，请使用 SE Ranking 运行单页应用程序审计。该审计工具将分析您的网站，并检测阻碍您的网站进入 SERP 顶部的任何技术问题。

避免软 404 错误

当网站为不存在的页面返回状态代码 200（确定）而不是相应的 404（未找到）时，就会发生软 404 错误。服务器错误地告诉搜索引擎该页面存在。

由于 SPA 网站的构建方式和使用的技术，软 404 错误对 SPA 网站来说尤其棘手。由于 SPA 严重依赖 JavaScript 来动态加载内容，因此服务器不一定能准确识别请求的页面是否存在。由于客户端路由通常用于客户端渲染的 SPA，因此通常无法使用有意义的 HTTP 状态代码。

您可以采用以下技术之一来避免软 404 错误：

• 使用 JavaScript 重定向到一个会触发服务器 404 HTTP 状态代码的 URL。

• 通过 JavaScript 向错误页面添加 noindex 标签。

延迟加载的内容

延迟加载是指只在需要时加载图片或视频等内容，通常是在用户向下滚动页面时加载。这种技术可以提高页面速度和体验，尤其适用于一次性加载大量内容的 SPA。但如果应用不当，就会无意中向 Google 隐藏内容。

为确保 Google 索引并看到页面上的所有内容，必须采取预防措施。确保每次在视口中显示时都加载所有相关内容。您可以通过以下方式做到这一点：

• 使用 "loading "属性对图片和 iframe 进行本地懒加载。

• 使用 IntersectionObserver API（允许开发人员查看元素何时进入或退出视口）和 polyfill（确保浏览器兼容性）。

• 借助 JavaScript 库提供的一系列工具和函数，只在内容进入视口时才加载。

无论选择哪种方法，都要确保其正常运行。使用 Puppeteer 脚本运行本地测试，并使用 Google Search Console 中的 URL 检查工具查看是否加载了所有图片。

社交分享和结构化数据

社交分享优化常常被网站忽视。无论看起来多么微不足道，使用 Twitter Cards 和 Facebook 的 Open Graph 都可以在流行的社交媒体渠道中实现丰富的共享，这对网站的搜索可见性大有裨益。如果不使用这些协议，分享链接将触发一个随机的、有时甚至是不相关的可视对象的预览显示。

使用结构化数据也非常有用，可以让爬虫读取不同类型的网站内容。Schema.org 提供了标记视频、食谱、产品等数据类型的选项。

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

您可以在 Google 上进行富结果测试，以发现任何当前分配的数据类型，并为您的网页启用富搜索结果。

测试 SPA 的 SEO

有几种方法可以测试 SPA 网站的搜索引擎优化。您可以使用谷歌搜索控制台或移动友好测试等工具。您还可以检查谷歌缓存或检查搜索结果中的内容。我们将在下文概述如何使用这些工具。

Google Search Console 中的 URL 检查

您可以在 Google Search Console 的 URL Inspection 部分访问基本的抓取和索引信息。它并不能全面预览谷歌是如何看到你的网页的，但可以为你提供基本信息，包括：

• 搜索引擎能否抓取和索引您的网站

• 呈现的 HTML

• 搜索引擎无法加载和处理的页面资源

打开报告，你就能找到与页面索引、移动可用性、HTTPS 和徽标相关的详细信息。

谷歌移动友好测试

谷歌移动友好测试显示的信息与 GSC 几乎相同。它还有助于检查呈现的页面在手机屏幕上是否可读。

此外，Headless Chrome 浏览器还是测试 SPA 和观察 JS 执行情况的绝佳工具。与传统浏览器不同，无头浏览器没有完整的用户界面，但提供了与真实用户体验相同的环境。

最后，使用 BrowserStack 等工具在不同浏览器上测试 SPA。

检查您的 Google 缓存

测试 SPA 网站搜索引擎优化的另一项基本技术是检查网站页面的 Google 缓存。谷歌缓存是谷歌爬虫在特定时间点抓取的网页快照。

打开缓存：

• 在 Google 上搜索该页面。

• 点击搜索结果旁边有三个点的图标。

• 选择缓存选项。

或者，您也可以使用搜索运算符 "cache:"，并在冒号（不含空格）后粘贴您的 URL，或者使用谷歌缓存检查器，这是我们检查缓存版本的免费而简单的工具。

注意！页面的缓存版本并不总是最新的。Google 会定期更新缓存，但页面更新与新版本出现在缓存之间可能会有延迟。如果 Google 缓存的页面版本已经过时，它可能无法准确反映页面当前的内容和结构。这就是为什么仅依靠谷歌缓存进行单页面应用搜索引擎优化测试，甚至用于调试目的都不是一个好主意。

检查 SERP 中的内容

有几种方法可以检查您的 SPA 在 SERP 中的显示情况：

• 您可以检查 SERP 中对您内容的直接引用，查看包含该文本的页面是否被索引。

• 您可以使用 site: 命令查看您在 SERP 中的 URL。

最后，你可以将两者结合起来。像下面的截图一样，输入 site:domain name "内容引用"，如果内容被抓取和索引，你就会在搜索结果中看到它。

基本的搜索引擎优化无处不在

除了单页应用程序的特殊性外，大多数通用优化建议也适用于此类网站。一些基本的搜索引擎优化策略包括针对以下方面进行优化：

• 安全。如果还没有，请使用 HTTPS 保护您的网站。否则，如果您的网站使用了任何技术，搜索引擎可能会将您的网站弃之不顾，并破坏其用户数据。切勿将网站安全从您的待办事项清单中删除，因为它需要定期监控。定期检查您的 SSL/TLS 证书是否存在关键错误，确保您的网站可以安全访问：

• 内容优化。我们已经讨论过在 SPA 中优化内容的具体措施，例如为每个视图编写唯一的标题标签和描述元标签，就像为多页面网站的每个页面编写标题标签和描述元标签一样。但在采取上述措施之前，您需要先优化内容。您的内容应针对正确的用户意图，条理清晰，具有视觉吸引力，并包含丰富的有用信息。如果您还没有为网站收集关键字列表，那么提供访客所需的内容将是一个挑战。

• 链接建设。反向链接在向谷歌表明其他资源对您网站的信任程度方面发挥着重要作用。因此，建立反向链接档案是网站搜索引擎优化的重要组成部分。没有两个反向链接是相同的，指向您网站的每个链接都具有不同的价值。有些反向链接可以显著提高排名，而垃圾链接则会损害您的搜索效果。

• 竞争对手监测。在网站开发的早期阶段，您很可能已经对竞争对手进行了研究。不过，与任何搜索引擎优化和营销任务一样，持续监控利基市场也很重要。借助数据丰富的工具，您可以轻松监控竞争对手在有机搜索和付费搜索方面的策略。这样，您就可以评估市场格局，发现主要竞争对手的波动，并从类似网站的成功关键词或营销活动中汲取灵感。

跟踪单页应用程序

使用 GA4 跟踪 SPA

跟踪 SPA 网站上的用户行为可能具有挑战性，但 GA4 拥有处理该问题的工具。通过使用 GA4 进行搜索引擎优化，您将能更好地了解用户是如何使用您的网站的，找出需要改进的地方，并做出以数据为导向的决策，从而改善用户体验，最终推动业务成功。

如果您还没有安装 Google Analytics，请阅读 GA4 安装指南，了解如何快速正确地安装。

准备就绪后，请按照以下步骤操作：

• 进入您的 GA4 账户，然后在 "管理 "部分点击 "数据流"。点击您的网络数据流。

• 确保已启用 "增强测量 "切换。单击齿轮图标。

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

• 打开 Google 标签管理器，启用预览和调试模式。

• 浏览 SPA 网站的不同页面。

• 在预览模式下，GTM 容器将开始显示历史更改事件。

• 如果您在预览模式中点击 GTM 容器旁边的 GA4 测量 ID，就会看到多个页面视图事件被发送到 GA4。

如果这些步骤奏效，GA4 将能够跟踪您的 SPA 网站。如果不行，您可能需要采取以下额外步骤：

• 在 GTM 中实施历史更改触发器。

• 要求开发人员激活 dataLayer.push 代码

使用 SE Ranking 的排名跟踪器跟踪 SPA

另一个全面的跟踪工具是 SE Ranking 的 Rank Tracker。通过该工具，您可以检查单个页面应用中您希望其排名的关键字，甚至可以在多个地理位置、设备和语言中进行检查。该工具支持对谷歌、谷歌移动、雅虎和必应等常用搜索引擎进行跟踪。

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

项目设置完成后，请转到 "排名 "选项卡，其中包含几份报告：

• 摘要

• 详细

• 总体情况

• 历史数据

我们将重点关注默认的 "详细 "选项卡。这可能是添加项目后看到的第一个报告。在这部分的顶部，你会看到你的 SPA：

• 平均位置

• 流量预测

• 搜索能见度

• SERP 功能

• 在前 10 名中所占百分比

• 关键字列表

这些图表下方显示的关键字表提供了有关您网站排名的每个关键字的信息。其中包括目标 URL、搜索量、SERP 特征、排名动态等详细信息。您可以使用 "列 "部分提供的其他参数自定义表格。

该工具可让您根据自己喜欢的参数过滤关键词。您还可以设置目标 URL 和标签，查看不同日期的排名数据，甚至还可以比较结果。

关键词排名跟踪器还为您提供另外两份报告：

您的网站排名数据： 这包括您添加到项目中的所有搜索引擎，可以在标为 "总体 "的单个选项卡中找到。

历史信息： 其中包括自基准日期以来网站排名变化的相关数据。导航至 "历史数据 "选项卡可找到此信息。

正确使用单页应用网站

现在您已经了解了 SPA 网站搜索引擎优化的所有来龙去脉，下一步就是将理论付诸行动。让爬虫轻松访问您的内容，让您的网站在搜索引擎眼中大放异彩。在为访问者提供动态内容加载、极快的速度和无缝导航的同时，也要记住为搜索引擎提供静态版本。您还需要确保有正确的网站地图，使用不同的 URL 而不是片段标识符，并用结构化数据标记不同的内容类型。

由 JavaScript 支持的单页面体验的兴起迎合了现代用户渴望与网页内容进行即时交互的需求。为了保持 SPA 以用户体验为中心的优势，同时获得较高的搜索排名，开发人员正在转向 Airbnb 工程师 Spike Brehm 所称的 "艰难方式"--巧妙地平衡网络开发的客户端和服务器方面。