如何查找和使用每个网页的源代码

这不仅仅是极客的东西：源代码是用这种编程语言编写的网站的 HTML 代码的表示，机器（如浏览器）读取和编译图像和功能，我们用户可以以简单的方式查看。因此，它是我们网站页面的真正框架，其中包含传输给浏览器、用户甚至 Google 爬虫的所有信息，并从未处理的文本格式（有点像 Matrix）转换为图像、文本、链接和构成网站视觉和交互体验的所有其他内容。因此，这就是为什么了解源代码对SEO也很重要的原因，因为它决定了网页的正确执行，并提供了有关优化潜力的信息。

什么是源代码

当涉及到计算机编程或软件时，源代码是用于创建程序的代码。

同样，对于网站，源代码或 HTML 源代码是用于在浏览器上生成网页的 HTML 或其他代码，任何访问该网站的人都可以查看（除非它是服务器端代码）。

我们可以称它为我们访问的每个网页背后的隐藏语言，通过一系列用编程语言编写的指令来表达，浏览器可以解释这些指令以向用户呈现内容和设计。

因此，源代码是任何网页或软件背后的编程的文本表示;因此，它包含所有HTML编程，允许浏览器组织文档的文本，链接和图像，以及使所有这些元素出现在用户屏幕上的说明。

就网站而言，任何人都可以使用各种工具查看此代码，更简单地通过网络浏览器本身查看。

从视觉上看，通常网络源代码分布在多行中，在经验不足的人眼中，它可以吓到这组字符串和字符：事实上，它只是网络浏览器“阅读”以了解如何查看网页内容的代码，并且也被谷歌和其他搜索引擎阅读以找出我们网站的内容。

总而言之，搜索爬网工具会查看代码、阅读代码、确定如何对网站进行排名、网站在搜索结果中的列出位置以及网站上发布的内容。

因此，对于seo和数字营销专家来说，源代码可以是分析和优化网站的相关文档，从而直接了解搜索引擎如何查看和解释页面上的内容。

如何查看网页的源代码

我们称之为“隐藏文本”，事实上，网站的普通访问者不会直接查看源代码，而只会查看输入的指令和命令的最终结果。然而，我们都可以看到我们正在浏览的任何网页的源代码，而无需安装特殊工具或拥有高级计算机技能，通过使用大多数流行浏览器中的简单功能，我们可以通过几个简单的步骤查看源代码。

要使用 Google Chrome、Firefox 或 Edge 等浏览器显示网站的源代码，只需打开浏览器窗口，访问我们感兴趣的页面并使用以下方式之一（名称可能略有不同，但结果相同）：

右键单击页面的空白部分，然后从出现的弹出菜单中选择“查看页面源”（并非所有页面都存在该选项，例如阻止右键单击功能的页面）。

使用键盘快捷键，这可能因操作系统而异。例如，单击键盘上的 Ctrl+U 键（Windows 环境）或 ⌘-Option-U（Mac 环境中的 Cmd 键），这速度很快，适用于大多数浏览器，例如 Chrome、Firefox 和 Edge。

在浏览器地址栏中输入字符串“view-source：”，后跟页面的完整 URL（例如，view-source：https：//www.example.com/），这也适用于移动设备。

无论选择哪种方法，该操作都将打开一个新选项卡或窗口，显示页面的完整 HTML 代码，以及嵌入或链接的 CSS 和 javaScript。具体来说，将出现类似于图片顶部显示的内容，显示我们通常看到的网页背后的所有 HTML 代码（见下图）。

用于检查页面的高级工具

如果我们想更多地了解我们的分析并且不怕代码串，我们可以使用浏览器中集成的另一个功能，它允许我们查看页面本身的源代码和其他功能。

事实上，开发人员和高级用户可能更喜欢使用浏览器中内置的开发和分析工具，通常称为“DevTools”，它提供了更详细和交互式的代码视图，不仅允许查看，还可以临时操作源代码以实时测试更改 - 例如，网页设计专业人员使用它们来检查网站的外观或预览他们计划进行的更改的影响。

要打开“开发人员工具”，我们总是首先在浏览器中打开我们感兴趣的页面，然后右键单击以选择“检查”，或者在 Windows 上使用组合键 Ctrl+Shift+I 或在 macOS 上使用 Cmd+Option+I。确切地说：

右键单击并选择“检查”（在 Chrome 上）、“分析”（在 Firefox 上）或检查项目（Safari）。

从浏览器的高级设置菜单中搜索该项目。

只需单击键盘上的 F12 键即可。

它打开了一个内部窗口，使我们能够使用各种开发工具，从而扩展干预的可能性。一个有趣（且有用）的方面是，我们可以通过单击箭头或相反浏览源代码（选择部分的页面突出显示）来直接验证页面上我们感兴趣的项目（文本的一部分，链接或图像）：在实践中，通过这种方式，我们可以实时知道一行代码的哪一部分对应于网页的每个元素。

源代码和SEO：我们可以找到哪些信息

我们无法控制谷歌，但我们可以控制我们网站上发生的事情：这个最大值适用于SEO的每个领域，并帮助我们理解为什么知道如何查找和阅读我们页面的源代码很重要--以至于源代码优化被认为是技术SEO的一部分。

事实上，有时我们在网上看到的内容与看到的 Google 和 Googlebot 的内容不同，因此该页面可能不符合搜索引擎抓取工具要求的标准。因此，在某些 SEO 流程中，您必须必须能够阅读代码，以便您可以快速找到可以检测到关键且普通用户无法立即看到的元素。

在页面的源代码中，我们可以检测并纠正一些SEO错误，首先，但我们也可以在网站上找到其他信息（包括竞争对手的信息）：例如，分析源代码，我们可以找到隐藏的链接，或发现为外部链接设置的属性;此外，源代码包含有关所使用的CMS，标记或元数据的重要信息，如元描述或元标题，并且仍然指示规范标签，网站内容和用于营销目的的监控代码。

在SEO的源代码中要检查的内容

通过分析网站的源代码，我们可以手动检查与SEO相关的各个方面，特别是我们可以找出网站如何与搜索引擎进行通信，并确定需要改进的领域。

最常见的应用包括：

验证页面
的语义结构

我们可以检查的第一个方面是页面的语义结构：即检查标题标签的正确使用，例如主标题的 <h1>，副标题和副标题的 <h2>、<h3> 等，这有助于搜索引擎了解内容的层次结构和重要性。SEO 最佳实践建议每个页面只设置一个 H1 标签：要检查页面是否合规，只需查看 HTML 源代码并搜索 <h1> 即可首先确定标题是否已输入，以及是否只出现一个。

检查元描述是否存在

如果我们想确保我们已经插入了页面的元描述，或者如果我们想“研究”另一个网站（可能是直接竞争对手）的页面描述，只需源页面并查找字段 meta name=“description”。

验证出站链接
的属性

通过页面源代码，我们还可以了解出站链接是否标有特定属性——也就是说，它们是关注链接还是不关注链接，或者它们是否仍然使用其他 UGC 和赞助关系。同样，只需查看页面的 HTML 代码并检查元素 <a></a> 中是否出现单词“nofollow”（或 UGC 或 sponsored）。

验证标记机器人

说明元标记机器人用于指导搜索引擎爬虫如何扫描和索引页面：因此，通过源代码，我们可以找出页面索引是否被阻止 （noindex），预览片段是否有限制 （nosnippet），链接是否不被关注 （nofollow).通过检查页面源中是否存在这些命令，我们可以避免可能对页面和网站的性能产生负面影响的意外错误。

验证页面属性

通过源代码的可视化和页面中的简单搜索，我们可以验证与页面相关的其他属性。特别是，我们可以分析 rel canonical（它向 Google 传达相关页面是规范和优先级，而任何其他页面都是“副本”）和 hreflang 属性，如果网站提供多种语言版本，则很有用。

验证图像
的 Alt 标签

在源代码中存在的信息中，还有与图像相关的信息，特别是我们设置的替代文本;或者，在常见的情况下，我们可以发现图像没有相关的替代文本，这是一个可能影响页面可用性的错误。为了检查替代文本的存在，我们必须寻找“alt=”的出现。

检查架构标记的用 Schema.org

我们还可以分析模式标记的实现，这是一种帮助搜索引擎更详细地解释页面内容的代码，生成结构化数据，从而增加页面显示为增强的多媒体结果或丰富片段的可能性。

验证与 Google Analytics 的连接

另一个有用的检查是检查网站的每个页面是否都连接到 Google Analytics。要找出答案，我们需要在页面源中搜索“Google Analytics”、“ga.js”、“analytics.js”或“gtag.js”等术语，这些术语是 Google Analytics 使用的 JavaScript 库的名称。如果我们找到这些代码片段之一或类似内容，则该页面已安装 Google Analytics;如果不是，则可能是该网页没有使用 Google Analytics（分析），或者使用了其他实现方法，例如通过 Google 跟踪代码管理器（如 Google 跟踪代码管理器）实现。

监控页面加载速度

源代码还允许我们监控网站的速度，特别是查看外部脚本和资源的加载方式。一般来说，错误的源代码会导致页面功能减少（这反过来又会对排名产生负面影响），检查文本与代码的比率对于减少网站的加载时间很有用。此外，阻止呈现的 JavaScript 和 CSS 会减慢内容的显示速度，对用户体验和搜索引擎排名产生负面影响。一般来说，网站的源代码越简单，机器人抓取页面的速度就越快，可以更快地查找和索引内容。作为起点，我们可以查看页面的 HTML，并尝试识别可以在不影响功能的情况下删除的元素（包括 JS 和 CSS 文件），以减小页面的大小并加快下载速度;然后，借助其他工具（例如Google的PageSpeed Insights），我们可以继续进一步优化代码。

为什么要阅读源代码

总之，可视化页面的源代码是一个非常简单的操作，并且所有用户都可以访问，学习阅读它将帮助我们快速验证许多重要的 SEO 元素，例如是否存在优化的标题、我们页面上使用的链接或元标记属性或竞争对手在其页面上使用的属性。

您不需要具备开发人员技能来检测可能减慢或破坏我们优化工作的明显问题，因为您只需要一些控件即可发现和解决一些可能造成巨大损害的常见 SEO 错误。对于那些训练有素的眼睛的人来说，阅读源代码可以识别和修复可能对页面加载速度产生负面影响的编码错误，甚至可以更好地了解内容的实际结构和呈现方式。

此外，阅读源代码还可以让我们超越“经典”SEO，例如，评估网站的可用性和可访问性——例如，检查图像是否具有描述性替代属性，这对于使用屏幕阅读器的用户和试图解释图像内容的搜索引擎都很重要。

归根结底，对于任何认真从事 SEO 和数字营销工作的人来说，查看网站的源代码都是一项有用的技能，因为它提供了关于网站如何构建和运作的深入视图，从而能够做出明智的决策以提高 Google 的知名度和有效性。

The End