原文地址 https://moz.com/blog/resolve-technical-issues-whiteboard-friday
揭秘三个正在悄悄破坏你网站的隐藏技术性搜索引擎优化问题！在本期重刊自 Moz 档案的“白板星期五”中，搜索引擎优化专家 Kristina Azarenko 揭示了不当的按钮、背景图片和延迟加载如何阻止 Google 抓取你的内容，并提供了可行的修复方案来提升你网站的可见性。
嗨，我叫 Kristina Azarenko。我是一名技术性搜索引擎优化顾问，现在成为了一名课程创建者。我将我 10 年的经验浓缩成了两门受欢迎的课程：《Technical SEO Pro》和《Azure Friendly Website Creations》。我职业生涯早期就认识到，在技术性搜索引擎优化中，细节决定成败。
因为你可能认为一切都运行正常，但是当你深入了解之后，你可能会发现一些微小的技术性搜索引擎优化问题，而这些问题实际上正在让你损失大量的流量。
今天，我将向你展示三个具体的例子，说明你或你的客户网站上可能存在的这些意想不到的技术性搜索引擎优化问题，以及如何解决这些问题。那么，让我们开始吧。
按钮与链接
第一个问题是按钮与链接。你对此了解多少？ 按钮会触发一个动作，比如添加到购物车或提交表单。而链接则从页面 A 指向页面 B，或者从第一页指向第二页，等等。它们作为内部链接或外部链接的一部分，对网站的导航非常有帮助。然后，按钮可以被设计成链接的样式，而链接也可以被设计成按钮的样式。这就是事情可能变得棘手的地方。 还有一点是，从网页前端设计的角度来看，如果按钮是表单的一部分，则使用 button 或 input 标签添加。而链接则使用带有 href 属性和 URL 的 a 标签添加。
然而，当按钮被用作链接时，问题就出现了。我在很多网站上都见过这种情况，人们想把一个链接设计成按钮的样式，然后又想在那里添加链接。他们通常会使用 window.location 加上 href URL，或者使用 onclick 事件来跳转到 URL。
从用户的角度来看，无论是直接使用链接还是像这样在按钮中添加链接，没有任何区别。但是从 Web 开发的角度，从搜索引擎的角度来看，这有巨大的差异。因为在第一种情况下，你依赖 Google 与你的内容进行交互，而 Google 并不会这样做。在第二种情况，当你使用 href 加上 URL 时，你实际上是在告诉 Google 一切都很好。你只是使用这个链接来作为我网站内部链接的一部分，这正是你想要做的，尤其是在网站的主要导航中。
如何正确地使用
总而言之，当涉及到按钮和链接时，使用链接从一个页面指向另一个页面。当你想要触发某些操作时使用按钮，比如添加到购物车或提交表单。不要混淆两者。就是这样。这些规则非常简单，并且在你需要决定使用哪个元素的不同情况下，它们肯定会对你有所帮助。
图片作为背景
好的，接下来是第二个问题：图片作为背景。图片很重要并不令人意外，因为它们会出现在 Google 搜索结果中并带来图片搜索流量，但这只有在 Google 能够实际索引这些图片的情况下才会发生。
然而，当图片通过 CSS 作为背景图片添加时，问题就出现了。我再次看到很多次这样的情况，人们使用背景图片，而实际上他们想要使用的是可以被索引和参与排名的普通图片。但是，如果你使用 CSS 添加图片，这是不可能实现的，因为它们会被视为背景图片。即使存在指向图片位置的 URL，你实际上是在明确地告诉 Google 在排名和索引方面忽略这张图片，因为它只是一张作为设计一部分的背景图片。这很合理。
如何正确地使用
因此，如果你希望图片可以被索引和参与排名，请使用 <img> 标签，然后使用 <source> 标签指向图片的位置。总而言之，对于需要索引的图片，请使用 <img> 标签。如果你想使用 CSS，可以，但只用于那些仅仅是设计的一部分，你并不关心它们是否能为你的网站带来流量的背景图片。
图片延迟加载
好的，最后一个问题是图片延迟加载。非常重要的一点是要理解我们看到网站的方式与 Google 看到网站的方式非常不同。
当你访问一个网站时，无论是桌面端还是移动端，你首先看到的是首屏内容，无论是图片还是文字，然后你需要滚动才能看到其余部分。但是对于 Google 机器人来说，非常重要的是要确保它们能够立即看到页面上的所有内容。
因此，无论是文字还是图片，你都需要确保所有内容都被看到，这样 Google 才能查看页面并评估其优化程度。否则，如果你只向 Google 展示部分首屏内容，那是不够的。
这里真正需要理解的关键是，Google 不会与内容交互，也不会滚动。因此，如果你依赖 Google 与你的内容交互或滚动，你将会失望，因为它不会那样做。一个非常好的例子是，占位符图片被索引而不是正常的图片。
占位符图片是一种你通常在首屏下方使用的虚拟图片，以确保它非常轻量级，不会影响页面加载或页面加载速度。然后，当你作为用户滚动时，这个占位符图片将被替换为正常的图片。但是你猜怎么着？Google 不会滚动，所以在这种情况下，你需要确保 Google 可以看到所有图片。
因此，即使你使用占位符图片，你也总是需要有一个默认的图片 URL，Google 可以访问该 URL，抓取图片，对其进行索引，以便它可以被抓取。所以在这里应该使用默认图片的 URL。首先是图片 src 属性，然后是默认图片的 URL 和位置。然后你也可以使用 <source> 标签来列出不同屏幕分辨率的图片文件。
如何正确地使用
总而言之，不要依赖 Google 滚动或与你的内容交互。其次，使用图片 src 属性，然后是 Google 将看到和索引的默认图片，而不是占位符，而是默认图片。
总结
正如我所说，技术性搜索引擎优化真的非常有趣。我非常喜欢它。并且我认为要在这个领域做好技术性搜索引擎优化，有三件事非常重要。
首先，你需要知道如何找到类似这样的问题。其次，你需要判断这个问题是否是一个真正的问题，还是来自某些你可以忽略的 SEO 工具的随机警报。第三，你需要知道如何在你正在处理的特定网站上解决这个问题，同时考虑到业务目标、技术栈和你拥有的资源。就是这样。谢谢。