Chrome View Source Code 那些事-阿里云开发者社区

开发者社区> -技术小能手-> 正文

Chrome View Source Code 那些事

简介: Chrome View Source Code 那些事
+关注继续查看

原文: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”

image.png

我们能够在该网站的 head 区域的 title 标签里,看到搜索引擎显示的搜索结果:

image.png标题标签应该是对网页内容的简明描述。检查标题标签时,您需要确保它位于页面的 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

证书有效且受信任

连接已加密并经过身份验证

所有资源都得到安全服务

image.png

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 的方法:

image.png

如果你查看像你这样的 SPA 网站的“查看页面源代码”,你只会得到 javascript 填充的代码,这对于爬虫来说“更难”索引。

Javascript 站点示例:

image.png

Example of view source code from a normal HTML site:

image.png

渲染和加载时间将影响爬虫是否或何时通过 Javascript 更好地了解您的内容。 有人说不到 5 秒就可以索引,但我们不能 100% 准确地知道爬虫何时决定。


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


您可以查看此比较原始 HTML 与呈现的 HTML 指南,或者将您的视图页面课程与 Google Search Console 爬网页面/实时测试进行比较,以查看是否有任何差异。


Crawled Pages:爬虫如何看到页面

实时测试:Google 的索引器最终将如何呈现页面

image.png

Check for viewport rendering

到目前为止,我们已经使用“元素”、“来源”和“网络”检查了元素。 所有这些都可以在 DevTools 中找到,这是包含所有这些工具的窗口。 我们可以使用的另一个工具是设备工具栏,就在“元素”之前。 这将允许您查看各种资源如何在各种视口上呈现,例如,在移动设备上。


如果您想查看它在特定设备上的呈现方式,请在开发工具右上角的自定义和控制开发工具(三个按钮)上选择“设置”,然后选择“设备”。

image.png

View source vs. Inspect element

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


这是细分:


由浏览器修正 HTML 错误

浏览器的 HTML 规范化

使用 Javascript 进行 DOM 操作

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


这是您使用“查看源代码”可能会看到的假设错误:

image.png

而“检查元素”会将 “” 更正为 “”

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用NAT网关轻松为单台云服务器设置多个公网IP
在应用中,有时会遇到用户询问如何使单台云服务器具备多个公网IP的问题。 具体如何操作呢,有了NAT网关这个也不是难题。
26546 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2849 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11025 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2299 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11950 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11778 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8806 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4573 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载