如何阅读网站源代码
今天你将学习或完善一项新技能——如何阅读源代码。这对于运营网站、博客并希望盈利的每一位出版商和在线企业家来说都很重要。
你可以用阅读网站代码的能力来做什么？
查看源代码后，您可以：
分析您网站的元标签，确定其源代码是否针对SEO推广进行了优化，并在必要时进行某些调整；
查看网站上缺少的必要元素：计数器、表格、脚本等；
优化网站上的各种元素：大小、颜色、字体；
检查页面上图像、表格、信息图表、表格和其他元素的路径；
检查您页面的出站链接；
检测干扰搜索引擎中的网站推广和货币化过程的代码问题：可选脚本，无效代码等。
内容
什么是网页源代码？
如何阅读网页源代码？
源代码中的 SEO 元素：基本设置
影响网站SEO推广的代码元素
网站技术优化的要素
网站的交互式源代码
阅读源代码如何帮助网站管理员
结论
什么是网页源代码？
当用户在地址栏中输入 URL、点击链接或填写并提交表单时，用户就会以这种方式向目标 Web 服务器发出请求。作为响应，Web 服务器会以一组 HTML 标记和文本的形式将请求的页面发送到用户的浏览器。
此套装包括：
HTML 标记；
样式表或 CSS 文件的链接；
用 JavaScript 编写的脚本。
HTML、CSS 和 JavaScript 的集合就是网站的源代码。
然后浏览器处理这些信息。最后，用户就可以享受一个拥有熟悉的文本块、图像、视频、按钮、订阅表单、导航等的网站。Google
和其他搜索引擎会分析源代码以及其他参数，然后确定网站在搜索结果中的位置。成功的 SEO 推广很大程度上取决于您网页的源代码。
如何阅读网页源代码？
让我们通过实践来学习新技能——查看并理解网站视觉显示背后的内容。
如何在 Windows 上查看网页源代码
对于 Windows，可以按CTRL + U查看站点的源代码。此方法适用于所有浏览器。
在 Windows 上查看源代码
Google Chrome：您可以通过右键单击页面并在弹出菜单中选择“查看页面源代码”选项，以另一种方式查看源代码。
Mozilla Firefox：您也可以右键单击页面并在打开的窗口中选择“查看页面源代码”选项。
Microsoft Edge/Internet Explorer：此选项将被称为“查看 HTML 代码”，而对于 Opera — “查看源文本”。
在 Mac 上阅读网站代码
在 Safari 浏览器中，使用键盘快捷键Option + Command + U。或者，与 Windows 类似，您可以右键单击页面并选择选项“显示页面源代码”。
在 Google Chrome 中，使用键盘快捷键Option + Command + U。或者“查看页面代码”选项。
在 Mozilla Firefox 中，您可以使用键盘快捷键Command + U，或者“页面源代码”选项。
使用 Chrome 在 Android 手机或平板电脑上查看 HTML 代码
打开网页。单击地址栏一次，将光标移到 URL 的开头。然后输入“view-source:”，最后按 Enter 或 Go。例如，要查看页面的代码，您必须输入“view-source:https://domen.com”
使用 iPhone 或 iPad 上的 Safari 获取源代码
要查看源代码，请创建书签。点击更多图标。在打开的菜单中，点击“添加书签”选项。
在 iOS 上添加书签
清除书签字段。接下来，输入“查看网页源代码”。保存书签名称。要访问您的书签，请点击屏幕底部的书签图标。
查找书签
然后点击书签，屏幕底部会打开一个菜单。点击“编辑”。
编辑书签
在“编辑书签”字段中，删除 URL，然后插入此代码：
javascript:(function(){var a=window.open(‘about:blank’).document;a.write(‘Source code of ‘+location.href);a.close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();
在 iOS 上编辑书签
点击“完成”。接下来，使用创建的书签来查看页面的源代码。
特殊工具和服务
有专门的服务可以让你快速查看你的页面代码。你只需要输入网址即可。例如，“https://codebeautify.org/source-code-viewer”
查看源代码的特殊工具
源代码中的 SEO 元素：基本设置
您的网站源代码是一个 HTML 文档。每个 HTML 文档都包含结构的基本元素。浏览器需要它们才能正确显示信息，搜索引擎也需要它们才能正确对您的网站进行排名。
HTML 文档的基本结构
HTML 文档的基本结构
HTML 文档的基本结构由 5 个元素组成：
<!文档类型>
<html> </html>
<head> </head>
<标题> </标题>
<主体> </主体>
DOCTYPE 元素
DOCTYPE 元素始终位于 HTML 文档的开头。它不会显示在页面上，并且与标签不同。DOCTYPE 告诉浏览器文档中使用了哪种 HTML 标准。
注意：标签就是标示，是可以用来在页面代码中快速找到所需信息的词语。
HTML 标签
标签是基本元素。借助它，浏览器可以了解需要作为 HTML 文档处理的内容从哪里开始，在哪里结束。html 标签的一个重要部分是 lang 属性的存在。它指示网页显示的语言。例如，对于英语 — en。
注意：HTML 文档标签具有属性。这些是附加值，允许您自定义 HTML 文档的元素以满足用户的标准。
HEAD 标签
当您寻找放置弹出式广告的地方时，它会对您很有用，因为您需要将代码放在结束标记之前。head
标记里面是标记，它显示在 Web 浏览器的标题栏中。
元标签
此外，HEAD 标签还包含元标签。
搜索引擎在编制索引时会检查网页中是否存在具有各种属性的元标签，读取元信息，并根据各种算法确定网站在搜索结果中的位置。标签书写正确的资源将获得优先权。
那么，我们为什么需要元标签呢？：
1. 它们将服务信息传递给搜索引擎。这有助于针对特定目标查询推广网站。此外，搜索引擎在评估页面质量时会考虑带有属性的元标签的存在。2
. 此外，它们有助于在不同的浏览器和不同的设备上正确显示内容。也就是说，标签的属性 ─ 指示如何向用户显示网站。
“<head></head>”标签的元素可分为两组：用于搜索引擎 SEO 推广和用于资源的技术优化。
影响网站SEO推广的代码元素
标题
Title 标签是网站的重要 HTML 组件。它影响网站在搜索引擎中的排名和 CTR（可点击性）。Title
标签负责网站页面标题，同时也是摘要标题链接。不要将其与网站上显示的 H1 标题混淆。
例如，我们将在 Google 上搜索“购买 iphone 11”。让我们转到搜索结果。
搜索结果中会出现一个摘要 ─ 搜索结果中网站页面的名片。Google 搜索引擎使用从网站源代码中读取的元信息形成它。Title ─ 是摘要标题。
如何找到标题标签
如果我们查看页面的源代码，我们会看到 title 标签。这就是标题进入代码片段的地方。
标题片段
标题也将显示在网络浏览器的标题栏中。
浏览器中的 title 标签
Title 标签功能
向搜索引擎发送与页面内容相关的搜索查询的信息；
参与片段的形成，并告诉用户通过点击链接将在页面上找到什么信息；
告诉用户浏览器中打开的页面的名称─当光标悬停在选项卡上时，会出现一个带有页面名称的窗口；
以书签或计算机中保存的 HTML 文档的名称出现。
为什么在网站代码中填写标题很重要
它阐明了页面的内容，因为它包含了主要关键点。
信息丰富且清晰的标题可以激励用户更积极地访问网站。这可以提高点击率。
如果代码中没有 Title 标签，搜索引擎将开始拉取 H2 H3 标题，这些标题与摘要中的标题的页面内容并不总是足够相关，这将对您网站的推广产生负面影响。
撰写标题时应考虑什么
填写网站所有页面的Title标签。
每个页面的标题必须是唯一的。
标题的前3-4个字应该包含直接链接中的主要关键词。
标题应该反映页面内容并且有意义。而不仅仅是一组单词。
标题的最佳长度为 55-60 个字符，最长为 70 个字符（12 个单词）。太长的短语根本无法容纳在摘要中。
Title标签和H1必须不同。
请勿抄袭竞争对手的标题。
标题应该吸引注意力并激励人们访问该网站。
描述
页面内容的简要描述，预览。meta标签的最佳长度为160个字符。描述中包含多个关键字。
哪里可以找到描述
该片段的描述文本由 Google 从该网页的源代码中提取。
描述片段
撰写描述时应考虑哪些事项
网站的每个页面都应该有单独的描述。网站的每个页面都必须有自己的关键字。描述中包含关键字会更好。
使每个页面的描述都独一无二。一个简单的方法是添加公司名称。
如果标签为空，搜索引擎将自动为该片段创建描述。
描述中的句子最好以关键词开头。
最好在描述中加入有说服力的词语：“立即订购”、“立即购买”。
在描述中包含有关促销、折扣和礼品的信息。
使用表情符号。但必须与主题相匹配。
网站技术优化的代码元素
ROBOTS 元标记
Robots 元标记向搜索机器人显示哪些页面应包含在索引中，哪些页面不应包含在索引中。Robots
标记具有其他属性：
index/noindex ─ 可以/不能被索引；
follow/nofollow ─ 关注/忽略超链接；
全部/无（打开/关闭页面和超链接进行索引）。
源代码中的 SEO 元素：基本设置
BODY 标签
“<body></body>”标签实际上是您网站的主体。让我们来看看它的核心元素。
H1 标签
H1 标签是网站、页面或文章的主要标题。它的任务是向读者展示该页面包含他们正在寻找的确切信息。一个页面上应该只有一个 H1 标签。它不应该重复标题。
脚本
SCRIPT 标签将脚本连接到 HTML 文档。SCRIPT 标签用于描述脚本，它可以包含指向程序或其特定语言文本的链接。脚本可以位于外部文件中并链接到任何 HTML 文档。
图片的 Alt 和 Title 标签 图片
的 ALT 属性是 html 标签中描述图片的文本。如果图片无法加载，它将变为可见。文本将代替图片出现（如果您填写了 ALT 属性）。当用户看不到图片时，ALT 属性可以找出图片的内容。此外，搜索机器人在索引网站时会考虑 ALT 文本。最后，优化标签中的图片名称和 ALT 属性可以更轻松地在 Google 图片中搜索图片。
如何正确创建图像的 ALT 属性
最佳字数为3-4个，但标签文本的长度不超过75个字符。
使用关键词。
有必要的是ALT属于页面的文字，并描述图片的含义。
除了 ALT 属性之外，您还应该在 Title 属性中写入文本。当用户将光标悬停在图像上时，此参数会提供有关图像的附加信息。
如何正确书写图片标题
标题属性必须与图像匹配。
使用简短的标题。
在标题中添加关键词。
网站的交互式源代码：帮助发布者的又一个工具
到目前为止，我们已经使用“查看页面代码”选项分析了您网站的源代码。此选项对于分析单个代码元素很有用。
但您也可以获取网站的交互式源代码。为此，您可以使用热键 CTRL + SHIFT + I或使用开发人员工具。
单击浏览器中的菜单图标。通常，它位于右侧，用三个点或条纹表示。在更多工具部分中，选择“开发人员工具”。打开的菜单有多个选项卡。
元素选项卡
元素选项卡显示页面的整个 HTML 代码。CTRL + 按键或域搜索。此选项卡显示代码的活动状态。单击标记时，您会看到旁边的元素样式，并且所选块将在页面上突出显示。
Devtools 面板中的元素选项卡
控制台选项卡
控制台显示有关代码错误的信息。如果 HTML 代码或 JavaScript 中存在错误，浏览器肯定会在此处记录。该示例显示浏览器阻止了一些脚本。您还可以在选项卡中输入命令来执行命令。如果页面上未加载字体、图像或样式，则会在此处收到错误消息。DevTools 的右上角会出现警告图标，用于打开控制台窗口。控制台还会显示所有错误（例如广告代码放置错误）。
在哪里可以找到控制台选项卡
“源”选项卡
它显示了与页面相关的所有资源。在“源”选项卡中，您可以查看一些文件的内容：脚本、字体、图像。
Devtools 面板中的“Sources”选项卡
“网络”选项卡
您可以使用它来了解页面加载时间、哪些资源与页面相关，等等。第一次打开选项卡时，它可能是空的 — 只需重新加载页面即可。重新加载后，底部将显示一个表格，其中包含与页面相关的所有资源及其相关数据。
DevTools 面板上的“网络”选项卡
阅读源代码如何帮助网站管理员
使用源代码，您可以检查是否已正确放置原生横幅、弹出式广告、社交栏、展示横幅或VAST 广告。获取 Adsterra 代码后，您总会收到有关放置位置的简短说明。现在，您可以确保根据这些说明放置了广告。
另请参阅我们的帮助中心中的文章“向静态 HTML 网站添加广告”和“将广告安装到 WordPress”。
检查您网站的每个页面并确保：
⦁您的页面在搜索中显示正确。⦁
没有空标题和描述。⦁
标题和描述匹配，以便在搜索结果中获得更好的排名。⦁
自定义代码和脚本正常运行。⦁
所有分析计数器均按照说明放置。⦁
您的网站布局适合移动设备。
结论
现在，您已准备好积极地为网站的有效 SEO 推广做出贡献，这将确保网站在搜索结果中排名更高。这意味着更多的客户将访问您的网站并完成预期的目标操作。因此，您将获得更多收入。
