原文:How to View HTML Source in Chrome and Why

您网站的源代码是您网站的“能源”。它决定了您网页的感觉、外观和性能，帮忙您实现杰出的用户体验和其余品牌指标，例如转化和潜在客户。

您页面的源代码会影响您的 SEO。这是因为它是搜索引擎“浏览”的内容，以确定您的网站排名。这基本上意味着页面源中未检测到的谬误可能会导致您的网站无奈按预期排名，更蹩脚的是，会导致 SEO 数据不精确甚至蹩脚的用户体验。

Why do you need to view your site’s source code?

如前所述，您的页面源会影响 SEO。事实上，您应该将查看源代码作为 SEO 审计的一部分，但如果须要更深刻地应用 SEO 工具作为组合。可能查看页面源代码的一件很酷的事件是，这是查看竞争对手正在做什么的一种形式，并想出对其进行“逆向工程”以实现您本人的业务指标的办法。

以下是您应该查看源代码的更多起因：

It helps with checking for title tags

如果您的网站没有题目标签，它就不会呈现在搜索引擎上。您将在 HTML 文档的 head 局部找到题目标签。题目标签是显示在搜索引擎上的，它们通常是可点击的。

例如，如果您在 Google 搜寻中输出“SEOptimer”，则第一个后果是“SEOptimer: Analyze Websites With Our Free SEO Audit & Reporting Tool”

咱们可能在该网站的 head 区域的 title 标签里，看到搜索引擎显示的搜寻后果：

题目标签应该是对网页内容的扼要形容。查看题目标签时，您须要确保它位于页面的 head 局部。

Countercheck meta descriptions

也能够在 HTML 的 head 局部找到，元形容 (meta description) 是您须要留神的另一个重要因素。元形容是一个简短的摘要，随同着搜索引擎后果上的题目标签。它通常是用户用来确定您的网站是否会给他们提供他们寻求的价值的“决定因素”。

最重要的是，请留神：

题目标签和元形容都应该位于 HTML 的 head 局部。此外，无论您是应用内容管理系统 (CMS) 还是编写本人的网站，您都须要留神任何反复的题目标签和元形容。如果您应用的是 WordPress，您可能装置了两个不同的插件，并可能导致题目或元标记反复。

Countercheck your Heading tags

在这里您须要留神的是，网页上只有一组题目标签。这是因为应用 h1 标签是重要的页面 SEO 策略之一。应用多个 h1 标签可能会被搜索引擎解释为“适度优化”，这相对不利于您的“带有搜索引擎的书籍”。现实状况下，h1 标签用于网站上最大的题目，它传播了页面的次要目标。

您装置的某些 CMS 或主题，例如 WordPress 站点可能有多个 h1，尤其是在 /blog 或 post 局部，其中每篇文章的题目可能是 h1 与 h2。

这不是一个好的做法。

应该应用 H2 和 H3 标签来合成内容，以便读者更容易浏览。他们应该应用主要关键字来反对次要关键字。查看它们的格局是否正确。

Countercheck scripts

尽管脚本非常适合为您的网站增加性能，但如果数量过多，它们可能会导致加载工夫显着减少。请记住，至多有一半的互联网用户心愿网站在短短 2 秒内加载结束。

当波及到脚本时，您应该留神什么？它们通常须要位于页面底部，就在您敞开 HTML 中的 body 标记之前。更好的做法是将脚本放在一个 Javascript 文件（由文件扩展名 .js 示意）中，该文件链接到页面底部的 HTML。

您还须要验证您装置的跟踪代码（例如 Facebook 跟踪代码的 Google Analytics）是否已正确装置。脚本中有一个谬误或短少代码，您将无奈正确收集任何数据。

无论您是应用 CMS 平台还是想晓得您的网站是否已被黑客入侵，您都能够查看任何脚本以验证您是否对其进行了受权。如果不查看页面源代码，就无奈 100% 理解已装置的内容。

Countercheck Security

单击开发工具上的安全性。对于页面，总结如下：

• 该页面是平安的
• 应用无效的 HTTPS
• 证书无效且受信赖
• 连贯已加密并通过身份验证
• 所有资源都失去平安服务

Check for the rendering of the main elements

重要的是要确认您网站的元素的确看起来像您冀望的那样。引入了 DOM 概念，从用户的角度来看，它基本上是页面源代码外观的细分。

Chrome DevTools Elements 面板中的 DOM 树视图显示了以后网页的 DOM 构造。

要查看 DOM（文档对象模型），请在依照拜访页面源的过程之后抉择“元素”。请留神，head 元素在 DOM 中不可见。您将看到源代码的细分。当您指向特定局部时，它会突出显示。

如果您留神到某个特定局部在 DOM 中没有正确出现，您能够修复它。

Javascript based website (Single Page Application) and SEO

渲染 DOM 是 Google 最终将用于索引您网站内容的内容。然而，咱们晓得 Javascript 会妨碍抓取，例如单页应用程序 (SPA)。单页应用程序基于 Javascript，它依据申请从客户端和服务器端下载数据，简略来说，javascript 不是用来创立网站的。HTML/CSS 很容易抓取，搜索引擎抓取工具只能看到原始 HTML 的页面，Javascript 会减少加载工夫和提早，Google 也会屡次抓取您的页面，应用第一种在残缺出现页面之前抓取 HTML 的办法：

如果你查看像你这样的 SPA 网站的“查看页面源代码”，你只会失去 javascript 填充的代码，这对于爬虫来说“更难”索引。
Javascript 站点示例：

Example of view source code from a normal HTML site:

渲染和加载工夫将影响爬虫是否或何时通过 Javascript 更好地理解您的内容。有人说不到 5 秒就能够索引，但咱们不能 100% 精确地晓得爬虫何时决定。

因为 URL 须要一段时间的任何重定向，任何点击或暗藏内容（用户事件）可能基本不会被索引，基本上你为 SEO 优化所做的任何事件，它都须要对用户和爬虫来说都很快。谷歌的确首先出现所有页面，但如果失败，它们会进入原始 HTML，这时谷歌会认为你没有任何内容、反复项等。

您能够查看此比拟原始 HTML 与出现的 HTML 指南，或者将您的视图页面课程与 Google Search Console 爬网页面 / 实时测试进行比拟，以查看是否有任何差别。

• Crawled Pages：爬虫如何看到页面
• 实时测试：Google 的索引器最终将如何出现页面

Check for viewport rendering

到目前为止，咱们曾经应用“元素”、“起源”和“网络”查看了元素。所有这些都能够在 DevTools 中找到，这是蕴含所有这些工具的窗口。咱们能够应用的另一个工具是设施工具栏，就在“元素”之前。这将容许您查看各种资源如何在各种视口上出现，例如，在挪动设施上。

如果您想查看它在特定设施上的出现形式，请在开发工具右上角的自定义和管制开发工具（三个按钮）上抉择“设置”，而后抉择“设施”。

View source vs. Inspect element

有两种办法能够查看代码“查看源代码”和“查看元素”。它们是两个浏览器性能，可让您查看页面的 HTML。次要区别在于“查看源代码”显示从 Web 服务器传送到浏览器的 HTML。Inspect Elements 是一种开发人员工具，用于在浏览器利用其纠错以及任何 Javascript 操作 DOM 之后查看 DOM 树的状态。

这是细分：

• 由浏览器修改 HTML 谬误
• 浏览器的 HTML 规范化
• 应用 Javascript 进行 DOM 操作

正如我之前提到的，在单页应用程序中应用“查看源代码”，您将看到 Javascript 与 HTML。任何 HTML 谬误也可能在“查看元素”工具中失去纠正。

这是您应用“查看源代码”可能会看到的假如谬误：

<h1>The title</h2>

<p>The first sentence.<strong>The second sentence.</p></strong>

而“查看元素”会将 “</h2>” 更正为 “</h1>”

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: