在浏览器中查看时，这看起来像一个典型的网页。我们可以看到文本、图像和链接。然而，让我们更深入地研究一下代码：
现在我们可以看到这个 HTML 。页面正文中只有 app-root 和一些脚本标签。这是因为这个单页应用程序的主要内容是通过 JavaScript 动态注入到 DOM 中的。换句话说，这个应用程序依赖JS来加载页面的关键内容！
潜在的 SEO 问题：任何呈现给用户但不呈现 电报数据 给搜索引擎机器人的核心内容都可能存在严重问题！如果搜索引擎无法完全抓取您的所有内容，那么您的网站可能会被竞争对手忽视。我们稍后会更详细地讨论这个问题。
用于内部链接的
除了动态地将内容注入 DOM 之外，JavaScript 还会影响链接的可抓取性。 Google 通过抓取在页面上找到的链接来发现新页面。
作为最佳实践，Google 特别建议使用带有 href 属性的 HTML 锚标记链接页面，并为超链接包含描述性锚文本：
不过，Google 还建议开发人员不要依赖 最终改变他们的机会 其他 HTML 元素（例如 div 或 span）或 JS 事件处理程序来获取链接。这些被称为“伪”链接，根据谷歌官方指南，它们通常不会被抓取：
尽管有这些准则
项独立的第三方研究表明 Googlebot 可能能够抓取 JavaScript 链接。尽管如此，根据我的经验，我发现将链接保留为静态 HTML 元素是最佳实践。
潜在的搜索引擎优化问题：如果搜索引擎无法抓取并跟踪指向您关键页面的链接，那么您的页面可能会错过指向它们的有价值的内部链接。内部链接可帮助搜索引擎更有效地抓取您的网站并突出显示最重要的页面。最坏的情况是，如果您的内部链接实施不正确，那么 Google 可能很难发现您的新页面（在 XML 站点地图之外）。
用于延迟加载图像的 JavaScript SEO
JavaScript 还会影响延迟加载图像的可抓取性。这是一个基本示例。此代码片段用于通过 JavaScript 在 DOM 中延迟加载图像：
Googlebot 支持延迟加载
但它不会像人类用户在访问您的网页时那样“滚动”。相反，Googlebot 在抓取网页内容时只是将其虚拟视口的大小调整得更长。因此，“scroll”事件监听器永远不会被触发，爬虫也永远不会渲染内容。
下面是一个对 SEO 更友好的代码示例：
此代码显示，当任何观察到的元素变得 购买电子邮件列表 可见时，IntersectionObserver API 会触发回调。它比滚动事件侦听器更灵活、更强大，并且受到现代 Googlebot 的支持。此代码之所以有效，是因为 Googlebot 如何调整其视口大小以“查看”您的内容（见下文）。
您还可以在浏览器中使用本
机延迟加载。 Google Chrome 支持此功能，但请注意，它仍然是一个实验性功能。最坏的情况是，它会被 Googlebot 忽略，并且所有图像都会加载：
Google Chrome 中的本机延迟加载。
潜在的 SEO 问题：与未加载核心内容类 文档几乎 似，确保 Google 能够“看到”页面上的所有内容（包括图像）非常重要。例如，在具有多行产品列表的电子商务网站上，延迟加载图像可以为用户和机器人提供更快的用户体验！