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。
- 任何其他重要标签。