为了帮助大家更好的了解技术层面SEO的知识，今天的内容主要分为3个部分

• 网站的工作原理是怎样的，如何进行运作；
• 如何读懂网站，需要注意的问题；
• 有哪些方法可以优化用户和网站的互动体验。

网站如何运作

如果搜索引擎优化是优化网站以便搜索的过程，那么SEO至少需要对他们正在优化的事物有基本的了解！

本节，小编和大家一起了解一下网站从域名购买到在浏览器中完全呈现的过程。网站运行的一个重要组成部分是关键的渲染路径，即浏览器将网站的代码转换为可查看页面的过程。

为什么了解这一点对于SEO很重要呢？

• 在网页集成过程中，这些环节可能会影响页面加载时间。速度不仅对于用户在网站上停留很重要，而且也是Google的排名因素之一。
• Google会在“ 二次索引 ”中提交一些信息，例如JavaScript网站 。Google将首先查看没有JavaScript代码的页面，过了几天或几周后，它将提交JavaScript页面信息。因此，尽管把一些关键的SEO要素添加在JavaScript代码的页面，有可能不会被索引。

接下来，我们一起来聊聊如何诊断网站效率低的地方，以及如何通过优化来提升排名和用户体验。

1. 网站可访问的必要条件

• 购买域名。目前购买域名的平台有很多，如阿里云、三五互联等。可以自己购买管理，也可以有服务商帮忙购买和管理。要注意的是，域名正常是每年都需要续费的，作为长期使用，建议一次多买几年，以避免疏忽造成域名进入赎回期的麻烦。
• 域名链接到IP地址。没有域名服务器（DNS）的帮助，互联网无法将“xxx.com”之类的名称理解为网站地址。互联网使用一系列称为互联网协议（IP）地址的数字（例如：127.0.0.1）来标记网站地址，但我们更想使用诸如“xxx.com”之类的名称，因为它们更容易让人记住。我们需要使用DNS将那些人类可读的名称与机器可读的数字链接起来。

2. 从服务器到浏览器的运作流程

S1 用户请求域：域名通过DNS链接到IP地址后，用户可以直接在浏览器中输入域名或单击网站链接来提交访问请求。

S2 浏览器发出请求：对该网页的请求提示浏览器发出DNS查找请求，以将域名转换为其IP地址。然后，浏览器向服务器发出请求来获取该页面代码，例如HTML，CSS和JavaScript。

S3 服务器发送资源：服务器接收到对网站的请求后，就会发送需要在用户浏览器中汇编的网站文件。

S4 浏览器组装网页：虽然浏览器从服务器获取了资源，但仍需将所有资源整合并转换成网页，以便用户可以在浏览器中看到它。当浏览器解析并组织所有网页资源时，它正在创建文档对象模型（DOM）。在Chrome浏览器中的网页上右击并选择“检查网页源代码”（Ctrl+U或F12）时，就可以看到DOM 。

S5 浏览器发出最终请求：浏览器仅在下载，解析和执行所有页面所需的代码后才会显示网页，因此，如果浏览器此时需要任何其他代码来显示你的网站，就会向你的服务器追加请求。

S6 网站出现在浏览器中：最后，你的网站就会由代码转换为你在浏览器中看到的内容。

3. 3种常见的网站代码

了解了网站是怎样在浏览器中显示的，接下来和小编一起了解一下网站是怎样构成的吧。

网站的构成有3种常见的编程语言，即代码。

T1. HTML -网站表达的内容（标题，正文内容等）

HTML代表超文本标记语言，并且它是网站的基础。标题、段落、列表和内容等元素均在HTML中定义。

这是网页的示例，其相应的HTML如下所示：

HTML对于SEO来说很重要，因为HTML是创建或处理的任何页面的底层架构。尽管你的CMS（内容管理系统）可能不需要你用HTML编写页面（例如：选择“超链接”时无需输入“ a href =”即可创建链接），但这正是你在网页上执行某些操作时需要修改的内容，例如添加内容，更改内链锚文本等。Google会抓取这些HTML元素，以确定你的文档与特定查询的相关性。换句话说，HTML内容对于网页在Google自然搜索中的排名有着重要作用！

T2. CSS -网站的外观（颜色，字体等）

CSS代表“层叠样式表”，这就是网页采用某些字体，颜色和布局的原因。创建HTML是为了描述内容，而不是为其设置样式，因此，当CSS进入场景时，它将改变规则。使用CSS，可以“美化”网页，而无需将样式手动编码到每个页面的HTML中，这是一个繁琐的过程，特别是对于大型网站。

直到2014年，Google的索引系统才开始将网页呈现为更像实际的浏览器，而不是纯文本浏览器。试图利用Google较旧的索引系统的黑帽SEO做法是通过CSS隐藏文本和链接，以优化搜索引擎排名。这种“ 隐藏的文字和链接 ”做法违反了Google的质量准则。

SEO尤其应注意的CSS要素：

• 由于样式指令可以存在于外部样式表文件（CSS文件）中，而不是页面的HTML中，因此它减少了页面代码的负担，从而减小了文件传输大小并缩短了加载时间。
• 浏览器仍然必须下载CSS文件之类的资源，所以压缩它们可以使网页加载更快，毕竟，页面速度也是一项排名因素。
• 使页面的内容比代码更多，可以更好地索引网站内容。
• 使用CSS隐藏链接和内容会使网站受到人工惩罚，并从Google的索引中删除。

T3. JavaScript -行为方式（交互式，动态等）

在互联网早期，网页是使用HTML构建的。当CSS出现时，网页内容就可以调整一些样式风格。当JavaScript编程语言出现时，网站现在不仅可以改变结构和样式，而且可以是动态的。

JavaScript为非静态网页的创建带来了很多机会。当人们尝试访问使用此编程语言增强的页面时，该用户的浏览器将针对服务器回传的静态HTML执行JavaScript，从而使该页面具有某种交互性。

你一定在不知情的时候就已经看到了JavaScript的运作了！因为JavaScript几乎可以对页面执行任何操作。例如，它可以创建一个弹出窗口，也可以请求第三方资源（例如广告）显示在页面上。

搜索引擎如何读懂网站

1. 怎样理解模式标记

举个例子，当搜索引擎爬虫正在扫描有关如何做蛋炒饭的文章时，你怎么确定作者，食谱，配料或步骤呢？这就是模式标记的用处。它可以帮助你为搜索引擎提供页面上不同类型的信息的更具体的分类。

模式是一种标记或组织内容的方法，以便搜索引擎可以更好地了解网页上的某些元素。这段代码为你的数据提供了结构，这就是模式通常被称为“结构化数据”的原因。数据结构化过程通常称为“标记”，因为你正在使用组织代码标记内容。

除了帮助Google之类的机器人了解特定内容的含义外，模式标记还可以使SERP中的页面具有特殊功能。这些特殊功能被称为“富文本摘要”，你可能已经在实际操作中看到了它们。

他们是类似于这样的：

• 热门故事轮播
• 星级评价
• 网站链接搜寻框
• 菜谱

请记住，使用结构化数据可以帮助显示丰富的摘录，但不能保证一定会有。随着模式标记的使用增加，将来可能会出现其他类型的复合式摘要。

2. 关于架构成功的建议

• 可以在页面上使用多种类型的模式标记。但是，如果你标记了一个产品之类的元素，并且页面上列出了其他产品，则还必须标记这些产品。
• 请勿标记访问者看不到的内容，并遵循Google的质量准则。例如，如果你将评论结构化标记添加到页面，请确保这些评论在该页面上是真实可见的。
• 如果你有重复的页面，Google会要求你使用结构化标记标记每个重复页面，而不只是规范版本。
• 在结构化数据的网页上适当更新原创内容。
• 结构化标记应准确反映你的页面。
• 尝试对内容使用最详细形式的模式标记。
• 标记的评论不应由企业撰写，而应该来自客户的真实反馈。

3. rel =“ canonical”标签

当Google在不同的网页上抓取相同的内容时，有时不知道要在搜索结果中索引哪个页面。所以就发明了rel =“ canonical”标签，从而帮助搜索引擎更好地索引内容的首选版本，而不是所有重复的内容。

rel =“ canonical”标签可让你告诉搜索引擎内容的原始版本在哪里，就是在告诉搜索引擎为源页面编制索引，而不是其余重复内容页面。 因此，使用此标签可以有效避免我们在《SEO指南——页面SEO7-3》中提到的内容重复的风险。

优化用户和网站的互动体验

早在《谷歌SEO指南—SEO原理解析7-1》中，我们说过，SEO既关乎人，也关乎搜索引擎本身。那是因为搜索引擎的存在就是服务于用户的，这说明了为什么Google的算法会奖励那些为用户提供最佳体验的网站，以及为什么一些网站尽管具有强大的反向链接配置文件等特质，但在搜索中的效果并不理想。

当我们了解了什么可以使网站达到最佳浏览体验时，我们就可以从这些方向入手来实现最佳搜索效果。

1. 移动端优化

随着时代发展，用户的浏览习惯发生改变，移动端流量占比逐渐提升，因此可以肯定地说，通过移动端优化来提升用户的浏览体验是很有必要的。

针对于移动端优化，有3种常见的方法

T1 移动端自适应：就是网站可以自动适应任何类型设备的屏幕，而且域名和PC端保持一致，即主域名（通常是www.xxx.com）。自适应网站是目前比较主流的移动端优化方法。

T2 AMP加速技术：AMP代表“加速的移动页面”，向移动端用户传递内容的速度比非AMP传递要快得多。AMP之所以能够如此快速地传递内容，是因为AMP从其缓存服务器（而不是原始站点）传递内容，并使用HTML和JavaScript的特殊AMP版本。要注意的是，AMP加速适用于安装SSL证书的手机独立站。

T3 移动优先索引：从2018年开始，谷歌开始将网站切换为移动优先索引。这种变化引发了移动友好性和移动优先之间的混淆，因此有助于消除歧义。通过移动优先索引，Google可以对网页的移动版本进行爬网和索引。使网站与移动屏幕兼容对用户和搜索性能都有好处，但是移动优先索引独立于移动设备的友好性而发生。

对于缺乏移动版本和桌面版本之间的奇偶性的网站，例如在其移动视图中显示不同的内容，导航，链接等，这引起了一些担忧。例如，具有不同链接的移动网站将改变Googlebot（移动设备）抓取您的网站并将链接资产发送到其他页面的方式。

2. 图像优化

在《谷歌SEO指南——页面SEO 7-3》中提到，图像是网页加载缓慢的最大原因！除了图像压缩，选择正确的图像格式，添加Alt属性外，还有其他技术方法可以优化图像显示。改善图像传递的一些主要方法如下：

SRCSET：如何为每个设备提供最佳图像尺寸

SRCSET属性允许我们有图像的多个版本，然后指定在不同情况下使用哪个版本。这段代码被添加到<img>标签（图像在HTML中的位置），从而为不同型号的设备提供专门的图像。

就像我们前面提到的移动端自适应的概念一样，但是在操作上会有不同。

这不仅可以加快图像加载时间，而且还是通过为不同的设备类型提供不同的最佳图像来增强页面用户体验的独特方法。

压缩和捆绑文件

页面速度审核通常会提出诸如“减少资源”之类的建议，但这实际上意味着什么呢？通过删除换行符和空格之类的内容来压缩精简代码文件，并尽可能缩写代码变量名称。

“捆绑”是你会听到的另一个提高页面速度的常用术语。捆绑就是将一堆相同的编码语言文件组合为一个文件。例如，可以将一堆JavaScript文件放入一个更大的文件中，以减少浏览器中JavaScript文件的数量。

通过压缩和捆绑构建网页所需的文件，你可以加快网站速度并减少HTTP（文件）请求。

Tips：

• DNS：域名服务器（DNS）允许将域名（例如：“ moz.com”）链接到IP地址（例如：“ 127.0.0.1”）。DNS本质上将域名转换为IP地址，以便浏览器可以加载页面的资源。
• 编程语言：以计算机可以理解的方式编写指令。例如，JavaScript是一种编程语言，可以向网页添加动态（非静态）元素。
• CSS：级联样式表（CSS）是使网站看起来具有某种外观的代码（例如：字体和颜色）。
• DOM：文档对象模型（DOM）是HTML文档的结构-它定义了如何通过JavaScript之类的东西来访问和更改该文档。
• CMS：Content Management System，是网站内容管理系统简称, 互联网上每个网站后台都是专业内容管理系统支撑，无论多大网站都不离开CMS的驱动。
• 富文本摘要：摘要是Google和其他搜索引擎在其结果页上显示的URL的标题和说明预览。因此，“丰富”代码段是标准代码段的增强版本。通过使用结构化数据标记，可以鼓励使用一些丰富的摘要，例如，在搜索结果中这些URL旁边，审阅标记将显示为分级星号。
• 移动优先索引： Google从2018年开始逐步将网站转移到移动优先索引。这种变化意味着Google会根据其移动版本（而非桌面版本）对您的网页进行抓取和编制索引。
• SRCSET：类似于图像的响应式设计，SRCSET指示在不同情况下显示的图像版本。
• Hreflang：向Google指示内容所用语言的标签。这有助于Google为使用该语言搜索的用户提供相应网页的语言版本。
• ccTLD： “国家/地区代码顶级域”的缩写，ccTLD指与国家/地区相关的域。例如，.ru是俄罗斯公认的ccTLD。