SEO的JavaScript最佳做法

JavaScript是使网站页面更具交互性和更无聊的绝佳选择。但是,如果实施不正确,这也是杀死网站SEO的好方法。这是一个简单的道理:即使是世界上最好的事物也需要找到一种方法。

不管您的网站多么出色,如果Google由于JavaScript问题而无法将其编入索引,那么您将失去很多访问机会。

这里介绍关于JavaScript SEO最佳做法以及调试JavaScript问题可使用的工具的所有知识。

为什么JavaScript对SEO有害

经常有人这么说:“自从在React中重新设计我们的网站以来,我们的访问量急剧下降。发生了什么?”

您可以使用任何其他JS框架替换React;没关系 如果不考虑SEO的影响而实施,它们中的任何一个都会对网站造成伤害。

为什么错了:

  • 这使Google很难发现内部页面。
  • 网站内的权限未正确分发。
  • 没有明确指示网站内页面之间的关系。

因此,具有Googlebot无法跟踪的链接的网站将无法利用内部链接的力量。

您需要了解的有关Google-JavaScript关系的几件事

关于Google如何对待您的内容,您应该了解一些主要知识。

  • Google不会与您的内容进行互动
  • Googlebot无法单击页面上的按钮,展开/折叠内容等。

Googlebot只能看到呈现的HTML中可用的内容,而无需进行任何其他交互。

例如,如果您有一个可扩展的文本部分,并且其文本在源代码或呈现的HTML中可用,则Google会将其编入索引。

相反,如果您有一个部分,其内容最初在页面源代码或DOM中不可用,并且仅在用户与之交互(例如,单击按钮)之后才加载,则Google不会看到此内容。

Google不滚动
Googlebot的行为与网站上的普通用户不同;它不会在页面中滚动。因此,如果您的内容被“隐藏”在无穷无尽的滚动条后面,则Google不会看到它。

Google看不到仅在浏览器和服务器上呈现的内容。这就是为什么如果您希望Google对网站建立索引并对其进行排名(如果需要访问量和销售量的话),则客户端渲染是一个坏主意的原因。

JavaScript SEO最佳做法

根据网络标准添加链接

尽管“ Web标准”听起来令人生畏,但实际上,这仅意味着您应使用HREF属性链接到内部页面:

您的相关锚文本

这样,Google可以轻松找到并跟踪链接(除非您向它们添加nofollow属性,但这是另一回事)。不要使用以下技术在您的网站上添加内部链接:

如果您想将人们带到该页面的特定部分,则最后一个选项仍可以在页面上成功使用。但是Google不会为添加了“#”的URL的所有单个变体编制索引。

根据网络标准添加图像

与内部链接一样,图像的使用也应遵循网络标准,以便Googlebot可以轻松发现和索引图像。

许多基于JavaScript的延迟加载库都使用’data-src’属性来存储实际图像URL,并且它们会用占位符图像或gif来替换’src’标签,从而快速加载。

存储有关图像的其他信息。

它有助于优化页面速度,并且如果正确实施,则效果很好。

如果您希望Google拿起您的真实图像而不是占位符,请将占位符图像交换到目标图像,以使显示目标图像的路径。

在最近的Google Search Central Live活动中,我进行了现场案例研究,研究如何调试使用JavaScript库延迟加载的图像的问题。

另外,您可以通过使用本机延迟加载消除JavaScript 。现在许多浏览器都支持该功能。

使用服务器端渲染
如果您希望Google阅读内容并对其进行排名,则应确保该内容在服务器上可用,而不仅仅是在用户的浏览器中可用。

另外,您可以使用动态渲染,这意味着在用户在浏览器中获得HTML + JavaScript内容的同时,检测搜索引擎并为它们提供静态HTML页面。

确保渲染的HTML具有您希望Google阅读的所有主要信息

您需要确保渲染的HTML显示正确的信息,例如:

  • 在页面上复制。
  • 图片。
  • 规范标签。
  • 标题和元描述。
  • 元机器人标记。
  • 结构化数据。
  • hreflang。
  • 任何其他重要标签。