新媒网 · 跨境数据社区

好的，请看修改后的文章内容：

在数字化营销的浪潮中，拥有一个流畅、快速且用户体验极佳的网站至关重要。这往往离不开JavaScript技术的加持。它能驱动动画、实现页面无刷新加载内容，并创造各种互动元素，让网站更具活力和吸引力。

然而，对于中国的跨境电商从业者来说，仅仅拥有炫酷的网站体验是不够的。新媒网跨境认为，技术SEO的基本功仍然至关重要：清晰的内容、可被爬取的链接、结构化数据，以及搜索引擎能够有效识别的HTML代码。而这正是许多人面临的挑战。

由于JavaScript在网站中扮演着核心角色，搜索引擎可能无法完整地抓取和理解网站的全部内容。接下来，我们将深入探讨JavaScript SEO的概念、重要性以及实战应用。你将了解到搜索引擎如何处理JavaScript网站，哪种渲染策略最适合网站的不同部分，以及结构化数据、性能优化和长期SEO健康的最佳实践。

通过本文，你将学会如何确保网站内容始终可见、易于发现，并为获得良好的搜索排名做好准备，而无需成为专业的开发人员。如果你对JavaScript如何影响SEO感到困惑，那么这篇文章将为你拨开云雾。

什么是JavaScript？

JavaScript (JS) 是一种赋予网站生命力的编程语言。它使网站具有互动性和动态性。没有它，网站可能只是静态地展示内容，缺乏与用户的互动。

一个简单的网站，仅使用HTML和CSS构建，可以向你展示内容，但无法真正与你互动。一切都是固定的。而JavaScript代码则改变了这一点。

JS允许网站对用户的点击、移动和操作做出反应，从而提供更流畅和生动的体验。它将网络从一个静态的展示平台转变为一个可以互动的空间。

如果你曾经点击过网站上的某个元素（例如，打开表单的按钮、下拉菜单或无需重新加载页面即可更新的框），那么很可能就是JavaScript在幕后默默地工作。

例如，JS驱动了：

• 实时搜索栏，在你键入时提供建议词
• 实时聊天和通知
• 即时更新的产品筛选器
• 仪表板、表单和动画

将网站想象成一栋房子。超文本标记语言 (HTML) 是结构：墙壁、地板和屋顶。它是告诉浏览器页面上有什么的基本代码：标题、段落、图像和链接。它将所有内容固定到位。

JavaScript 是电力和管道：它让你使用房子、打开灯、打开水龙头以及打开和关闭车库。它为你的网站添加了移动、互动和行为。

层叠样式表 (CSS) 是设计：颜色、纹理、窗帘和瓷砖。它使空间感觉美丽而独特。CSS 告诉浏览器如何显示以 HTML 编写的所有元素。

大多数现代网站都使用 JavaScript，尤其是那些使用 React、Vue 或 Svelte 等工具构建的网站。这些是 JavaScript 框架——简单来说，它们是帮助开发人员更快、更高效地构建网站的工具。将它们视为入门工具包或构建块，用于在网络上制作交互式、类似应用程序的体验。

什么是JavaScript SEO，为什么它很重要？

JavaScript在提升用户体验方面表现出色，但过度依赖JavaScript的页面可能会使谷歌等搜索引擎难以解读和索引你的网站。这就是JavaScript SEO发挥作用的地方。

它的目标是确保你使用JavaScript构建或展示的内容不仅美观和互动，而且在谷歌上可见、可爬取且随时可以排名。

它可以帮助确保像Googlebot这样的爬虫实际上可以看到你的内容，解析并理解它，并正确地存储它，以便它出现在搜索结果中。JavaScript会降低加载速度，从而使搜索引擎难以处理页面，然后它可能根本不存在于SEO方面。

JavaScript SEO 的主要挑战

JavaScript为你提供了极大的灵活性和控制力——你可以构建美观、响应迅速的页面，动态加载内容，个性化布局以及创建无缝的用户体验。但是它也为SEO带来了三大挑战：

1. 渲染延迟

   搜索引擎并不总是立即处理JavaScript。JavaScript内容可以被推送到渲染队列，需要几分钟、几小时甚至更长的时间，从而延迟了索引编制。

   对于产品发布、新闻更新或限时活动等时效性页面，此渲染过程尤其危险。

2. 抓取预算限制

   每个网站都有一个“抓取配额”——Googlebot在特定时间内将探索的页面数量的大致限制。当你的网站严重依赖JavaScript时，渲染每个页面对谷歌来说变得更加耗费资源。

   这意味着你可能会很快耗尽你的抓取预算，特别是如果你的网站很大。有些页面可能根本不会被抓取，而另一些页面可能只会部分渲染。无论哪种方式，你都有可能将关键内容排除在搜索结果之外。

3. 索引编制差距

   如果内容仅在JavaScript运行后可用，并且爬虫没有等待足够长的时间（或未能渲染它），则最终会出现索引编制差距，即某些内容永远不会进入谷歌的索引。

   这可能是一个产品描述、一个职位列表或一篇博文，并且一切对人眼来说可能看起来不错，但是在幕后，它们对于搜索引擎可能是不可见的。

   索引编制差距是一个安静的问题，但是如果不进行检查，它们可能会严重阻碍你网站的SEO性能。

为什么JavaScript SEO对于SPA，动态内容和无头CMS构建至关重要

现代网站正在摆脱使用HTML构建的传统静态页面。取而代之的是，它们使用React、Vue或Angular等框架构建，这些框架动态提取内容或可能存在于无头内容管理系统 (CMS) 中。

网站可能对用户来说感觉是无缝的，但是搜索引擎需要一些帮助来处理它们——如果它们无法正确渲染它们，可见性可能会下降，有时甚至在您不知情的情况下。

JavaScript SEO可以帮助确保你网站的关键部分（例如，内容丰富的页面，SPA和动态模板）仍然可以被搜索引擎访问。

• 内容丰富的页面包含大量信息，例如长篇博文、食谱页面或产品列表。如果此内容是使用JavaScript加载的（而不是直接显示在页面的HTML中），则搜索引擎可能难以看到它。
• 单页应用程序 (SPA) 是将所有内容加载到一个页面中并动态更新而无需重新加载的网站。它们感觉流畅且类似于应用程序——想想Notion或Gmail——但是由于它们严重依赖JavaScript，因此搜索引擎需要额外的帮助才能正确抓取它们。
• 动态模板是灵活的页面布局，它们根据用户的操作提取不同的内容。例如，产品详细信息页面可能使用一个模板，但是更改每个项目的内容。如果JavaScript用于加载此内容，那么可见性问题可能会再次潜入。
• 无头CMS构建使你可以在一个地方管理你的内容，并将其发送到任何需要的地方——你的网站、应用程序甚至智能手表。但是由于内容是单独存储并使用JavaScript提取的，因此除非正确渲染所有内容，否则搜索引擎可能“看不到”它。

搜索引擎如何处理JavaScript内容

谷歌的渲染流水线：抓取、排队、渲染、索引

在页面出现在搜索结果中之前，谷歌会在幕后进行大量操作。当涉及到JavaScript (JS) 时，该过程会稍长一些，并且理解它是了解为什么SEO对于JS繁重的网站来说更复杂。以下是谷歌遵循的一般渲染流程：

1. **抓取：**Googlebot访问网站的URL并收集原始HTML代码。
2. **排队：**如果页面依赖于JavaScript，则会将其添加到渲染的等待列表中。渲染意味着谷歌必须运行你的JavaScript，加载任何额外数据（例如博文内容或产品信息），并构建页面的最终版本——就像浏览器在有人访问你的网站时所做的那样。此最终版本是谷歌最终会抓取和索引的版本。在此之前，谷歌只能看到裸HTML。
3. **渲染：**谷歌处理JavaScript——它运行代码，等待API调用或CMS内容加载，然后组装页面布局。这是谷歌看到实际用户将看到的内容的时候。如果JavaScript速度慢或中断，谷歌可能会错过关键内容。
4. **索引：**一旦完整内容可见，它就会存储在谷歌的搜索索引中。

重要的结论：具有常规HTML的网站会立即被索引，但是对于具有JavaScript的网站，可能会出现延迟，有时会很长。这种滞后可能会导致索引编制中出现空白，特别是如果渲染失败或超时。

Googlebot的常青渲染引擎（基于Chromium）

值得庆幸的是，谷歌的爬虫Googlebot使用了所谓的常青渲染引擎。它基于Chromium（与Chrome背后的相同的开源引擎），并且会不断更新以匹配最新的浏览器标准。

Googlebot可以像真实用户一样看到和理解JavaScript内容——它可以运行脚本、加载动态元素以及处理客户端交互。但是这里有一个问题：即使谷歌可以渲染JavaScript，它也并不总是能很好或很快地做到这一点。如果你的JavaScript很重、速度慢或容易出错，则可能根本无法渲染。

因此，尽管引擎是现代的，但最重要的是你的页面性能，尤其是你的JavaScript运行的速度和清晰度。

其他机器人的局限性（Bing，LinkedIn，社交媒体爬虫）

虽然谷歌已经投资于处理JavaScript，但是大多数其他机器人都还没有赶上。Bing已经做了一些改进，但是它仍然没有达到相同的水平。像LinkedIn、Facebook和X（以前称为Twitter）等平台上的爬虫通常根本不执行JavaScript。

这意味着如果关键内容（例如标题、元标记或Open Graph数据）仅在JavaScript运行后显示，则这些平台将看不到它。这对于内容预览变得尤为重要——当你在社交媒体上分享链接并希望它正确显示时。如果正确的标记不在原始HTML中，则该链接在某些平台上可能看起来已损坏或空白。

超时、执行延迟和内容可见性风险

JavaScript需要时间来运行，并且搜索引擎的耐心有限。这就是一些关键挑战出现的地方。

1. 超时

   像Googlebot这样的搜索引擎只会等待有限的时间才能加载和渲染页面。如果你的JavaScript花费的时间太长——可能是由于大文件、过多的脚本或慢速服务器——则机器人可能会在看到你的内容之前放弃。

2. 执行延迟

   即使Googlebot确实等待了，你的JavaScript仍然需要顺利运行。如果你的脚本已损坏、被阻止或依赖于外部内容（例如慢速API），则它们可能无法及时完成执行。
   这可能会导致你页面的一些重要部分（例如标题、文本或产品列表）永远不会出现在Google看到的渲染版本中。

3. 内容可见性风险

   如果JavaScript控制着关键内容的显示（例如隐藏或显示部分），并且该内容没有得到正确的渲染，则谷歌将不会对其进行索引。
   这会在你的网站上创建不可见的空白——它对用户来说可能看起来不错，但是搜索引擎可能会错过对SEO最重要的地方。

JavaScript渲染方法及其SEO含义

并非所有JavaScript都以相同的方式交付。你的内容如何渲染——它是在初始HTML中显示还是需要在页面加载后在浏览器中构建——这对搜索引擎如何看待你的网站有很大的影响。

有几种渲染方法，每种方法都有其优缺点。有些方法对SEO更好，而另一些方法则优先考虑性能或用户体验。关键是要了解它们的工作原理、它们的优点以及它们可能在可发现性方面引起的问题。让我们来看看每种方法。

客户端渲染 (CSR)

使用客户端渲染，页面首先加载非常少的HTML。然后，一旦JavaScript在用户的浏览器中运行，它就会提取并显示实际内容。这是大多数现代JavaScript框架（如React、Vue和Angular）的默认设置。它流畅且灵活，但是从SEO的角度来看，它是需要最谨慎处理的方法。

CSR 的优点

CSR使开发人员可以更好地控制用户体验。你可以构建快速、动态的界面，这些界面可以快速响应用户操作。它在重复访问时也表现良好，因为浏览器可以缓存资产并在第二次更有效地加载内容。这对于经常访问你网站或在单个会话中在多个页面之间导航的用户来说非常有用。

CSR 的缺点

CSR的主要缺点是内容不会立即在HTML中可用。这意味着当搜索引擎或社交爬虫访问该页面时，它所看到的只是一个外壳——只是一个空白或最小的布局。它必须等待JavaScript运行才能访问实际内容。并非所有机器人都等待。

CSR还取决于JavaScript的执行。如果你的代码中存在错误，或者脚本加载时间太长，则不会显示任何内容——对用户而言，对爬虫而言。

SEO风险和可见性问题

CSR为SEO带来了许多挑战：它可能会引入延迟、渲染依赖性和索引编制差距。如果搜索引擎无法运行JavaScript或在加载完成之前超时，则你的内容可能根本不会被索引。这意味着重要的页面（例如产品列表、博文或服务页面）可能会悄悄地从搜索结果中消失。

要使CSR为SEO发挥良好的作用，你需要：

• 确保快速、干净的JavaScript执行
• 在初始HTML中使用正确的元标记
• 使用URL检查或基于Puppeteer的渲染等工具来监视机器人如何渲染和索引你的页面

但是即使那样，从搜索可见性的角度来看，CSR也将始终是最脆弱的选择，因为它在谷歌可以查看内容之前，在很大程度上取决于JavaScript在浏览器中完美运行。

服务器端渲染 (SSR)

使用服务器端渲染，内容在到达浏览器之前在服务器上准备好。因此，当搜索引擎或用户加载页面时，他们会立即获得完整的HTML——文本、图像和链接。这种方法比CSR更适合SEO，因为无需等待JavaScript在后台构建页面。一切都从一开始就准备好了。

优点

在提供页面之前预渲染内容意味着搜索引擎可以立即抓取和索引你的内容——无需额外的渲染步骤，也无需延迟。这使得SSR成为搜索可见性真正重要页面的一个不错的选择——想想主页、服务着陆页或类别中心。

缺点

SSR的缺点是它可能会给你的服务器带来更大的压力，特别是如果你要动态渲染大量页面。每次有人访问页面时，服务器都必须从头开始构建它。在小型网站上，这是可以管理的。但是在拥有数百个页面的大型网站上，负载可能会Swift增加，特别是如果流量突然激增。

SSR还增加了一些复杂性。你需要更仔细地管理缓存、服务器性能和错误。它不像CSR那么简单，特别是如果你的开发团队不熟悉这种设置。

何时使用它

SSR非常适合关键着陆页或重要模板，这些地方的内容需要可抓取且快速。
你不必在网站上的所有内容都使用SSR。实际上，混合方法通常效果最好（稍后我们将介绍）。但是对于那些SEO最重要的高价值页面，SSR可以提供速度和可见性的正确平衡。

静态站点生成 (SSG)

使用SSG，谷歌可以立即读取你的页面，而无需等待或弄清楚任何事情。可以将其想象为向谷歌提供一本已完成的书，其中每个章节都按正确的顺序排列，而不是给它一堆需要整理的松散笔记。

你的页面是提前完全构建的——在构建过程中——并另存为可以随时提供的HTML。这意味着在任何人访问之前，会生成整个网站或特定页面。没有什么是实时构建的。

这与服务器端渲染不同，在服务器端渲染中，只有在有人请求时才构建每个页面。因此，使用SSR，服务器会收到请求、提取数据、构建HTML，然后发送它。这对于需要显示实时数据或更改每个用户的页面也很有用。SSG通常更快，因为一切都已准备就绪。SSR更灵活，但速度稍慢，因为页面是为每个访问者全新构建的。

最适合性能和SEO

由于页面已经构建好，因此加载速度很快。无需在浏览器中进行额外的处理，也无需动态地将内容拼接在一起。搜索引擎喜欢这一点。
Astro、Hugo或Next.js等工具的SSG模式使使用此方法变得非常容易。例如，如果你使用Astro来构建博客，则每个帖子都会变成其自己的静态页面。这意味着当谷歌到达时，它所需的一切——标题、正文、内部链接——都已经嵌入到HTML中。没有隐藏，没有延迟。

这非常适合内容不需要每分钟更改的网站，例如：

• 个人博客
• 营销页面
• 文档
• 作品集网站

缺点

需要记住的一件事是，由于静态页面是预先构建的，因此它们不会自行更新。因此，如果发生更改——例如新产品发布或价格变动——你需要重建网站才能反映该更新。

这有点像打印小册子——即使你进行微小的更改，你也需要重印整个小册子。因此，如果你运行一个不断更新的网站——例如库存水平不断变化的电子商务商店——你可能需要将SSG与其他渲染方法结合使用，以使其保持快速和最新。

混合框架（Next.js，Nuxt.js，SvelteKit等）

有些网站需要一些东西。网站的某些部分需要快速加载以进行SEO，而另一些部分可能需要实时更新。也许只有几个页面对登录用户可见，并且根本不需要被索引。

混合框架允许你选择对每个页面有意义的内容，而不是在整个网站上使用一种方法。像Next.js（对于React）、Nuxt.js（对于Vue）和SvelteKit（对于Svelte）这样的框架都是为这种灵活性而构建的。

每页渲染策略

混合框架允许你混合和匹配不同的策略。这有点像经营厨房：有些菜肴你是提前准备的，有些菜肴你是新鲜制作的，有些菜肴只有在接到订单时才会烹饪。

混合框架将包括多种方法。以下是在实践中可能的样子：

• 静态站点生成 (SSG) 可以用于主页和关键着陆页，以便它们加载速度快且易于搜索引擎抓取。
• 服务器端渲染 (SSR) 可以用于产品详细信息页面，以便它们始终以最新价格或可用性保持最新状态。
• 客户端渲染 (CSR) 可以用于登录后的用户仪表板，因为它是个人的，不需要排名。

启用CSR回退、ISR（增量静态再生）等等

混合框架包括其他功能：

• **CSR 回退：**如果页面尚未预渲染，它可以加载基本外壳并在后台提取完整内容。
• **增量静态再生 (ISR)：**这使你可以更新特定的静态页面，而无需重建整个网站。

例如，假设你运行一个食谱网站。你希望你的食谱页面加载速度快且排名良好，因此你使用SSG生成它们。但是当你调整成分或添加新食谱时，ISR可以在后台悄悄更新该页面——无需完全重建。然后，谷歌可以看到最新版本，你的读者将获得最新信息。

这种灵活性使混合框架成为不断增长的网站的绝佳选择，特别是如果你使用的是无头CMS，其中内容与代码分开更新。

当你的网站包含静态内容、如登录仪表板、搜索过滤器或个性化视图的混合时，混合框架也是理想选择。
你可以获得两全其美：性能和控制，并且你的SEO在每一步都保持完整。

动态渲染（已弃用）

有一段时间，动态渲染似乎是JavaScript繁重网站的完美解决方案。你可以向机器人显示网站的一个版本（简单、基于HTML），并向用户显示另一个版本（充满JavaScript和互动）。这是一个巧妙的解决方法，但是它并没有很好地适应时间。

曾经是一种流行的解决方法，现在不鼓励谷歌这样做

它是这样工作的：当Googlebot访问你的网站时，你的服务器会识别它并提供该页面的预渲染的、SEO友好的版本。另一方面，人类会获得完整的JavaScript版本。

在一段时间内，这很有意义，特别是对于使用Vue或React等框架构建的复杂网站，在这些框架中修复JavaScript SEO问题很困难。Rendertron和Prerender.io等工具可以帮助在后台管理这一点。

但是问题开始出现。机器人和人们看到的是网站的不同版本，导致一致性问题。向谷歌显示的内容可能与用户实际看到的内容不符——这可能会导致信任问题、不正确的索引编制或SEO处罚。

维护每个页面的两个版本（一个用于机器人，一个用于用户）增加了技术复杂性。每次你进行内容更改时，你都必须确保正确更新两个版本，否则会有出现错误、不匹配或过时内容的风险。

最终，谷歌决定动态渲染不是前进的方向，现在建议更好、更现代的方法。

动态渲染替代方案和现代等效方案

与其向机器人提供网站的一个版本，而向人们提供另一个版本，不如让每个人都看到相同的内容。如上所述，今天这意味着使用客户端渲染 (CSR)、服务器端渲染 (SSR)、静态站点生成 (SSG) 或混合框架。这些是更可靠的方法。它们内置于现代工具中，并且它们使搜索引擎和用户的生活更加轻松。

如何优化JavaScript SEO的性能

当我们谈论网站的SEO性能时，我们指的是速度以及网站对用户和搜索引擎的感觉有多流畅。如果你的页面加载时间太长，或者如果你的内容没有立即显示出来，因为JavaScript仍在后台运行，这会使体验感觉笨拙，并且也会损害你的排名。

特别是，谷歌会关注真实用户如何体验你的网站。他们通过Core Web Vitals来衡量这一点，Core Web Vitals是一组跟踪以下内容的信号：

• 你的内容出现的速度——基本上，你页面的主要部分在屏幕上显示的速度有多快
• 你的页面响应的速度——你的网站在有人单击或键入时反应的速度有多快
• 网站在加载时感觉有多稳定——包括页面在加载时跳跃或移动的程度

如果你不小心，JavaScript有时会妨碍你。但是好消息是，有一些非常简单的方法可以使你的网站运行更流畅。让我们来看看它们。

速度影响Core Web Vitals

JavaScript倾向于影响两个主要的Core Web Vitals：

• 最大内容绘画 (LCP)——你的页面上最大的可视元素（例如横幅图像或标题）显示需要多长时间
• 与下次绘画的交互 (INP)——当用户单击按钮或在表单中键入时，你的网站响应的速度有多快

想象一下：有人访问你的主页，并且其中充满了精美的内容：图像、产品卡、动画和弹出窗口。但是如果所有这些都是由JavaScript运行的，并且它们仍在后台处理中，则页面一开始可能看起来是空的，或者按钮可能看起来没有响应。此时，LCP和INP得分可能会开始下降。让我们来看看如何解决这个问题。

JavaScript捆绑和水合可能会延迟LCP和INP

大多数现代JavaScript框架不仅显示页面，还在浏览器中逐个位地构建它。这称为水合——使用JavaScript将基本HTML转换为完全交互的元素。

你的代码越多，水合需要的时间就越长，这意味着你的主要内容可能会被延迟，无论是对于用户还是试图衡量性能的搜索引擎。要解决此问题，请尝试通过将JavaScript包分解为更小的块来保持其轻量。这称为代码拆分，并且大多数框架（例如Next.js或Nuxt.js）都会自动执行此操作。代码越小，页面水合的速度就越快，并且你的网站感觉越快。

使用loading="lazy"和优先级提示

图像和视频很漂亮，但是它们也很重。如果所有内容都同时加载，特别是页面下方的内容，则可能会降低整体体验速度。即使这不是JavaScript特定的，它也是一个快速的HTML级别的修复，它可以对JavaScript繁重的网站产生真正的影响。

在位于页面下方（页面首次加载时不可见的任何内容）的图像上使用loading="lazy"。这会告诉浏览器：“无需立即加载此内容——请等到有人滚动到附近时再加载。”这可以在首次加载时保持页面的精简。

优先级提示会促使浏览器提前加载关键内容——例如你的横幅图像或第一段。要做到这一点，请在页面的部分中添加一个特殊的标记。这是一个小的调整，但是它可以使你的页面运行得更快更流畅。

优先级提示的一个示例是：
<link rel="preload" href="/hero-image.jpg" as="image" />

这会告诉浏览器：“尽早提取此图像，它很重要。”但要谨慎选择，因为浏览器一次只能确定几件事的优先级。

限制未使用的JavaScript并推迟非关键脚本

你加载的每一点JavaScript都会付出代价。因此，如果你的页面上加载了未使用的脚本，或者像第三方小部件这样不紧急的元素，它们会悄悄地降低你的SEO性能。

假设你在博文中加载了一个日历脚本。如果没有人从该页面预订任何内容，为什么还要加载它呢？要解决此问题，请审核你的网站并删除不需要的JavaScript。另外，请在不重要的元素（如聊天小部件、弹出窗口或跟踪工具）上使用defer或async。

它们是这样工作的：

• Defer会等待HTML加载完成后再运行脚本。这可以保持流畅，因为它不会阻止页面显示。
• Async会在下载脚本后立即运行脚本，甚至在页面的其余部分加载完成之前。

在大多数情况下，对于依赖于页面结构（如导航或布局工具）的脚本来说，defer更安全。
对于完全独立的内容（如分析），请使用async。例如：
<script src="analytics.js" defer></script>

减少JavaScript膨胀以提高SEO效率

有时你的网站速度慢，是因为发生的事情太多了，而不是因为你做错了什么。过多的JavaScript会使页面难以快速加载、使机器人难以正确渲染内容以及使SEO难以发挥最佳性能。以下是一些小的、实用的技巧来整理所有内容。

1. 树摇和代码拆分

   这个术语听起来可能有点强烈，但树摇只是意味着删除任何实际上未使用的JavaScript。
   想象一下，导入整个库只是为了使用一个微小的函数，而其余的只是坐在那里，未被使用，从而降低了你网站的速度。树摇会切掉你不需要的所有部分。

   大多数现代构建工具（如Webpack和Vite）或框架（如Next.js）已经支持树摇，但它只有在你的代码以允许它的方式编写时才有效。
   另一个技巧是代码拆分，如上所述。代码拆分不是将所有内容捆绑到一个大文件中，而是将你的JavaScript分解为仅在需要时才加载的较小块。加载的项目越少=网站速度越快=谷歌更快乐。

2. 尽可能使用静态内容

   JavaScript很棒，但并非你网站上的所有内容都需要是动态的。静态页面速度快、可抓取且可靠。如果你有一些很少更改的内容（如关于页面、博文或定价表），通常最好将其作为静态HTML而不是使用JavaScript提供。

   示例：使用Astro、Hugo或Next.js在SSG模式下，在构建过程中生成博文的完整HTML，而不是在页面加载后使用JavaScript提取它。这样，当Googlebot到达时，内容已经存在。无需等待，也无需渲染。

3. 优化第三方脚本

   第三方脚本可以悄悄地成为你网站最沉重的行李。聊天小部件、分析工具、A/B测试软件和视频播放器等元素都会添加额外的JavaScript。

   管理第三方脚本的一些技巧：

   • 审核你实际使用的内容——如果有些东西不是必需的，请删除它
   • 仅在需要时加载脚本——如果聊天小部件仅在联系页面上重要，请勿在每个页面上加载它
   • 使用defer或async——确保第三方脚本不会阻止你的主要内容加载
   • 尽可能自行托管——尝试从你自己的服务器下载和提供代码，而不是从外部服务提取代码，这将使你获得更多控制权，并且通常会加载得更快

   如果你依赖于内容分发网络 (CDN) 或外部服务来提供脚本，这意味着该代码托管在其他地方，并在有人访问你的网站时提取。在许多情况下，这没问题，但是请检查他们的脚本加载速度以及它们是否会影响你的Core Web Vitals。

4. JavaScript预算

   最后，请注意你的JavaScript预算——这指的是你的页面在用户或谷歌开始注意到延迟之前可以加载的JavaScript总数。

   繁重的脚本会降低你的最大内容绘制 (LCP) 并损害你的排名。

   示例：如果你的主页有一个YouTube嵌入，请考虑使用“点击播放”预览，而不是立即加载整个播放器。它可以保持你的页面轻巧和快速的LCP。

如何在JavaScript框架中添加结构化数据和模式

结构化数据（也称为模式）就像你直接对搜索引擎说的一种秘密语言，以帮助他们准确地了解你的内容是什么。

例如，如果你有一个食谱页面，模式可以告诉谷歌：“这不仅仅是成分列表——这是一个食谱。这是烹饪时间、评分、图像、作者。”

它为高性能的富结果提供支持，例如星级评分、常见问题解答、产品价格等等。但是这里有一个棘手的地方：当你在JavaScript框架中工作时，很容易将模式放置在错误的位置，这意味着搜索引擎可能永远看不到它。

让我们分解一下在哪里添加模式，以便它实际起作用，以及基于HTML的模式与仅使用JavaScript加载的模式之间的关键区别。

在何处注入模式以提高SEO可见性：HTML与客户端

有两种主要方法可以将结构化数据添加到你的网站：

• 直接添加到HTML中，以便在页面加载时立即可用
• 使用JavaScript动态添加（也称为客户端注入），其中仅在页面呈现后才添加模式

从SEO的角度来看，基于HTML的模式要可靠得多。如果模式已嵌入到HTML中，则搜索引擎可以立即看到它——无需等待、无需渲染、无需惊喜。

例如，假设你要发布一篇博文。
你可以添加JSON-LD（JavaScript对象表示法，用于链接数据）来告诉谷歌，“这是一篇文章。”这是添加结构化数据最常见和最推荐的方法。

这种简单的代码格式告诉搜索引擎页面上有什么类型的内容，无论是文章、活动产品还是评论。
将JSON-LD放在`\n\n**减少JavaScript膨胀以提高SEO效率**\n\n有时你的网站速度慢，是因为发生的事情太多了，而不是因为你做错了什么。过多的JavaScript会使页面难以快速加载、使机器人难以正确渲染内容以及使SEO难以发挥最佳性能。以下是一些小的、实用的技巧来整理所有内容。\n\n1. **树摇和代码拆分**\n\n 这个术语听起来可能有点强烈，但树摇只是意味着删除任何实际上未使用的JavaScript。\n 想象一下，导入整个库只是为了使用一个微小的函数，而其余的只是坐在那里，未被使用，从而降低了你网站的速度。树摇会切掉你不需要的所有部分。\n\n 大多数现代构建工具（如Webpack和Vite）或框架（如Next.js）已经支持树摇，但它只有在你的代码以允许它的方式编写时才有效。\n 另一个技巧是代码拆分，如上所述。代码拆分不是将所有内容捆绑到一个大文件中，而是将你的JavaScript分解为仅在需要时才加载的较小块。加载的项目越少=网站速度越快=谷歌更快乐。\n2. **尽可能使用静态内容**\n\n JavaScript很棒，但并非你网站上的所有内容都需要是动态的。静态页面速度快、可抓取且可靠。如果你有一些很少更改的内容（如关于页面、博文或定价表），通常最好将其作为静态HTML而不是使用JavaScript提供。\n\n 示例：使用Astro、Hugo或Next.js在SSG模式下，在构建过程中生成博文的完整HTML，而不是在页面加载后使用JavaScript提取它。这样，当Googlebot到达时，内容已经存在。无需等待，也无需渲染。\n3. **优化第三方脚本**\n\n 第三方脚本可以悄悄地成为你网站最沉重的行李。聊天小部件、分析工具、A/B测试软件和视频播放器等元素都会添加额外的JavaScript。\n\n 管理第三方脚本的一些技巧：\n\n * 审核你实际使用的内容——如果有些东西不是必需的，请删除它\n * 仅在需要时加载脚本——如果聊天小部件仅在联系页面上重要，请勿在每个页面上加载它\n * 使用defer或async——确保第三方脚本不会阻止你的主要内容加载\n * 尽可能自行托管——尝试从你自己的服务器下载和提供代码，而不是从外部服务提取代码，这将使你获得更多控制权，并且通常会加载得更快\n\n 如果你依赖于内容分发网络 (CDN) 或外部服务来提供脚本，这意味着该代码托管在其他地方，并在有人访问你的网站时提取。在许多情况下，这没问题，但是请检查他们的脚本加载速度以及它们是否会影响你的Core Web Vitals。\n4. **JavaScript预算**\n\n 最后，请注意你的JavaScript预算——这指的是你的页面在用户或谷歌开始注意到延迟之前可以加载的JavaScript总数。\n\n 繁重的脚本会降低你的最大内容绘制 (LCP) 并损害你的排名。\n\n 示例：如果你的主页有一个YouTube嵌入，请考虑使用“点击播放”预览，而不是立即加载整个播放器。它可以保持你的页面轻巧和快速的LCP。\n\n**如何在JavaScript框架中添加结构化数据和模式**\n\n结构化数据（也称为模式）就像你直接对搜索引擎说的一种秘密语言，以帮助他们准确地了解你的内容是什么。\n\n例如，如果你有一个食谱页面，模式可以告诉谷歌：“这不仅仅是成分列表——这是一个食谱。这是烹饪时间、评分、图像、作者。”\n\n它为高性能的富结果提供支持，例如星级评分、常见问题解答、产品价格等等。但是这里有一个棘手的地方：当你在JavaScript框架中工作时，很容易将模式放置在错误的位置，这意味着搜索引擎可能永远看不到它。\n\n让我们分解一下在哪里添加模式，以便它实际起作用，以及基于HTML的模式与仅使用JavaScript加载的模式之间的关键区别。\n\n**在何处注入模式以提高SEO可见性：HTML与客户端**\n\n有两种主要方法可以将结构化数据添加到你的网站：\n\n* 直接添加到HTML中，以便在页面加载时立即可用\n* 使用JavaScript动态添加（也称为客户端注入），其中仅在页面呈现后才添加模式\n\n从SEO的角度来看，基于HTML的模式要可靠得多。如果模式已嵌入到HTML中，则搜索引擎可以立即看到它——无需等待、无需渲染、无需惊喜。\n\n例如，假设你要发布一篇博文。\n你可以添加JSON-LD（JavaScript对象表示法，用于链接数据）来告诉谷歌，“这是一篇文章。”这是添加结构化数据最常见和最推荐的方法。\n\n这种简单的代码格式告诉搜索引擎页面上有什么类型的内容，无论是文章、活动产品还是评论。\n将JSON-LD放在