<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>页面标题示例</title>
6</head>
7<body>
8
9  <!-- h1 标签用于定义一级标题 -->
10  <h1>欢迎来到我们的网站 - 主页</h1>
11
12  <!-- 网页的主体内容 -->
13  <p>这是一个演示如何使用HTML h1标签的例子。在这个网页中，我们用<h1>标签来呈现主要的、最高级别的标题。</p>
14
15  <!-- 更多内容... -->
16  
17</body>
18</html>

2. 写好img标签的alt属性

正确写好alt标签有下面几点好处：

当图片无法加载的时候，alt的文本就会显示在页面上，让用户知道这张图片是介绍了什么内容。
可以让搜索引擎理解这站图片的内容，从而可以有可能把这个图片索引到图片库中，在搜索图片的时候就有可能带出来。
如果图片是页面的第一个元素，更要写好alt属性，这有利于搜索引擎理解本页面的页面内容。
图片做logo，logo是锚元素，即<a href='xxx'><img src='xxx' alt='公司logo'></a>这样的时候，图片的alt就相当于锚文本的文字（所以别草草几句就搞定了），锚文本的作用十分关键！

<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>图片及alt属性示例</title>
6</head>
7<body>
8
9  <!-- 使用img标签插入一张图片，并设置alt属性 -->
10  <p>下面是一张描述美丽风景的图片：</p>
11  <img src="beautiful-scenery.jpg" alt="美丽的山川湖泊景色，天空湛蓝，湖面如镜，周围环绕着翠绿的森林。">
12
13  <!-- 如果图片因为某种原因无法加载时，浏览器将显示alt文本 -->
14  <!-- 对于视力障碍用户使用屏幕阅读器时，也会读出该alt文本 -->
15
16</body>
17</html>

3. 特定的锚元素加nofollow

如果你的页面上有一些外链，或者不需要被跟踪的内链，请对他们加上这个属性。

<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>nofollow属性示例</title>
6</head>
7<body>
8
9  <!-- 正常的超链接 -->
10  <p>访问我们的<a href="https://www.example.com" target="_blank">主页</a></p>
11
12  <!-- 使用nofollow属性的超链接 -->
13  <p>外部链接示例：这是一个带有nofollow属性的<a href="https://www.external-site.com" rel="nofollow" target="_blank">外部网站链接</a>，搜索引擎不会通过这个链接来传递我们网页的权重。</p>
14
15</body>
16</html>

这会让搜索引擎知道这个链接不是受站长推荐的，可能会继续爬取或不继续爬取，但不会传递权重。

尤其对于新站，每天爬虫来访的频次和深度其实都比较有限，所以正确的时候nofollow（无论在外链或内链上），可以一定程度上把爬虫引入正确的爬行轨迹。

但是，爬虫的爬取，也是有它自己的想法，不能说加上nofollow就一定有作用。

4. 所有el-link一律用a代替

比如使用了element-ui或其它的前端库，其锚元素并不是<a>而是比如<el-link>这样的元素。请优先使用<a>。

尽管在页面审查元素的时候可以看到<el-link>已经被正确的解析为了<a>，但是在右键-查看网页源代码的时候，依旧是<el-link>。
尽管现在的搜索引擎爬虫可以很好的解析动态页面，但不排除对于新站或权重低的站点，仍然就是拿到源代码做解析（节省计算资源嘛）。

所以，为了安全起见，还是优先使用<a>作为锚元素，确保内链的建设能够得到正确的爬取！

5. 移动端文字适配

也许你没有单独做一个移动站，只做了一个pc站。但当你手机上访问站点的时候，发现站点的文字发生了异常的突变，指定fong-size不生效。

这时候你可能就要使用：-webkit-text-size-adjust: none

试试吧，你会发现药到病除！

6. html的title中元素的顺序很重要

举几个例子：

第一页: 分类名称-网站名称
第二页: 分类名称-第二页-网站名称
文章页面: 文章标题-网站名称

如果要使用符号，尽量使用中划线或下划线，不要使用其它特殊符号。

7. 加入新的meta标签

content-language、author，尤其是content-language，在必应bing的站长后台做网站体检的时候还会提示站长（尽管不是一个很严重的问题）。

<!DOCTYPE html>
2<html lang="zh-CN">
3<head>
4  <meta charset="UTF-8">
5  <!-- 设置网页内容的语言 -->
6  <meta http-equiv="Content-Language" content="zh-CN">
7  
8  <!-- 指定网页作者 -->
9  <meta name="author" content="张三">
10  
11  <title>示例网页 - HTML Meta 标签使用</title>
12  
13  <!-- 其他元信息，如网页描述 -->
14  <meta name="description" content="这是一个关于HTML Meta标签content-language和author属性使用的示例网页。">
15  
16</head>
17<body>
18  <!-- 网页正文内容 -->
19  ...
20</body>
21</html>

8. 减少html中的注释

一方面，有利于减少响应文本的体积，降低服务器带宽。

另一方面，有利于搜索引擎的爬虫理解页面内容，试想，如果一个页面50%的注释，那么搜索引擎理解起来也会有难度。

9. 不要使用table布局或其它复杂布局

搜索引擎爬虫对页面内容的理解不像人类的肉眼，它是需要基于代码的。

如果代码结构比较复杂，它会比较反感这样的代码，甚至会跑路。所以，简单整洁的代码是招引爬虫来的很重要的因素。

所以，不要使用比较复杂布局代码，能写到css文件里的就用css文件搞定。

10. 不要使用隐藏文字

无论是什么样的初心，使用了隐藏文字，都会被搜索引擎认为是作弊。

比如：文字颜色和背景色颜色一样、文字使用absolute绝对定位定位到可视便捷以外、文字用z-index定位到最下层...

尽管用户看不到，但搜索引擎的爬虫阅读源码会看到，尽管不一定能够正确识别这些文字是隐藏文字，但一旦识别出来，就会被判断为作弊站点。

另外，当用户点击某按钮后出来的文字，属于正常的交互，不属于隐藏文字。

知识学习

实践的时候请根据实际情况谨慎操作。

随机学习一条linux命令：

ssh user@hostname - 远程登录到另一台Linux主机。