Meta 标签
1.1 Meta description 标签可能是最有用的标签之一，顾名思义，它会提供给搜索引擎关于这个页面的一个简短的介绍； 例如：
代码语言：javascript
复制
代码语言：javascript
复制
代码语言：javascript
复制
代码语言：javascript
复制
这个标签曾经在搜索排名中占有很大的权重，但随着搜索算法的不断升级，它的地位也逐渐被削弱。它将不会再提高网站的排名，然而，description 标签依然很有用，因为它会被用在搜索引擎的结果页。这也就意味着它仍然可以提高你的网页点击率，毕竟，当 description 的内容与用户搜索的关键字相匹配时，在搜索结果页会显示成粗体。 推荐的 description 长度是 160 个字符。（PS：中文建议不超过 80 个字符。）
1.2 Meta keywords
按照搜索引擎的工作原理,搜索引擎首先派出机器人自动检索页面中的 keywords 和 description 。 选择关键字的几点建议：
利用百度指数：
网站页面较多,不要所有的页面关键词都一样；
关键词不能用频率非常高的，也能不用很生僻的词；
关键字多的话,用半角空格或者半角逗号隔开；
例如：
代码语言：javascript
复制
代码语言：javascript
复制
代码语言：javascript
复制
代码语言：javascript
复制
每个关键词字数控制在8个汉子左右，关键字控制在8个左右。
1.3 这里写代码片Meta robots
Meta robots管理着搜索引擎进入你网页的权限，你可以用它来允许或不允许搜索引擎来抓取你的网页、进入你网页中的子链接或对你的网页存档（PS:存档类似于百度快照）。 例如：
代码语言：javascript
复制
上面的标签告诉搜索引擎不要抓取我，不要进入我的子链。 为什么这个标签会对SEO有用呢？——它可以防止对拷贝内容的冗余抓取，它也可能会对那些内容不完整的页面或带有私密信息的页面有一定的作用。
1.4 Meta content Type(charset)
meta content type标签被用来声明网页的字符编码，最好添加这个属性来防止浏览器产生编码问题,但是它不会对搜索排名或点击率产生影响; 例如;
代码语言：javascript
复制
或者简写：
代码语言：javascript
复制
这个标签应该放在任何包含文本元素的标签之前，包括title。
1.5 Meta Language
这个标签以前用来声明网页的语言。能够使屏幕阅读器和其他文本工具更好的工作。W3C推荐使用标签的属性来声明语言。 例如：
代码语言：javascript
复制
//表示英语
//表示中文简体1.6 Meta canonical
canonical是meta一个标签，存放在之中，它的作用是告诉搜索引擎，你现在索引的页面是的正确，跟301转向（“网页A用301重定向转到网页B，搜索引擎可以肯定网页A永久性改变网址，或者说实际上不存在了，搜索引擎就会把网页B当做唯一有效目标。这是搜索引擎唯一推荐的不会产生怀疑的转向方法，更重要的是，网页A积累的页面权重将被传到网页B。”）有点相似，而主要作用是用来解决由于网址形式不同内容相同而造成的内容重复问题。简单的说它可以让搜索引擎只抓取你想要强调的内容。 例如： 有如下网址
代码语言：javascript
复制
http://www.yzznl.cn/archives/2011-snow.html
http://www.yzznl.cn/archives/2011-snow.html?comments=true
http://www.yzznl.cn/archives/2011-snow.html?postcomment=true这三个网址形式不同，第一个才是我们想显示给搜索引擎和用户的网址，但是打开它们网站的内容却是相同的。一般像这种状况搜索引擎是很难分辨出来哪个才是网站主想要强调的网址。这时，canonical就能帮上忙。 我们只需要在网址的 head 区域添加如下代码：
代码语言：javascript
复制
这样的话 Google、baidu 等搜索引擎最终都会只收录 canonical 标签指定的这个网址，搜索引擎会将其它页面作为重复内容，这些重复的内容不再参与页面的权重分配。
注意： 百度虽然支持 Canonical 标签，但并不保证完全遵守该标签。 最好在完全相同的网页中使用 Canonical 标签——这样可以提升 Canonical 标签的使用效果。 在设置 Canonical 标签前，仔细检查两个网页是否真的完全相同——一旦百度发现其中一个 Canonical 标签有问题，会不信任该站点的所有 Canonical 标签。(❤️ 现在关注【前端修罗场】，后台回复【666】，即可获取一份【免费的优质学习资料】,一起学习，一起进步，不走弯路，不吃亏~)
Title
对于HTML文档来说，title是必须的，它定义了整个文档的标题。 是第一个可以访问到内容的元素，所以一定要非常重视。 标题通常会显示在两个不同的地方：浏览器的标签上和搜索结果页（SERP）。这就意味着title在点击率和排名上有着很重要的影响。
建议：
一个好的标题应该包括关键字，而且最好放在标题的开头处。 写关键字的时候应该简洁明了,并且Title一定要能代表当前页面的主题。 不要使用引号或是任何非字母字符，不要重复关键词； 按重要性降序写； 标题应该有概括性，能明确告知搜索引擎和用户你的网站大概内容和目的，可以是当前页面标题-所属类型-产品名;
例如“全民来猜歌-年费黄钻-QQ空间”。 另一件应该记住的事就是标题的长度，Google会限制标题为70个字符。而baidu通常中文会限制在30个字符内，一般10-30个中文字符。 例如：
代码语言：javascript
复制
贝瓦儿歌 - 高清儿歌视频大全连续播放 - 中国最好的儿歌
拾稻穗的小姑娘 - 拾稻穗的小姑娘儿歌 - 拾稻穗的小姑娘儿歌视频 - 贝瓦儿歌
贝瓦儿歌专辑 - 儿歌视频大全-儿童歌曲大全-儿歌串烧50首-儿歌视频大全连续播放-中国最好的儿歌
儿歌视频大全,儿歌大全,儿歌大全100首,亲宝儿歌
快速问医生_免费在线咨询专家医生_有问必答网
站长之家 - 中国站长站 - 站长资讯 | 我们致力于为中文网站提供动力！
站长工具 - 站长之家 首页：站名 - 用处/目的点/功能 - 口号 子页：产品名 - 产品名+功能 - 口号 - 站名
提醒： 不要轻意改标题名，关键字，描述这些东西，后果很严重。
3.提供文字替代方案
建议：
网页上所有的图片、iframe、object，检查这些元素是否填写了适当的alt属性或者title属性的值，看看这些值是否可以描述这些元素的内容或者目的； heading元素是否标记了内容，而不仅仅是图片或者背景图片。
4.按Ctrl+或者command+查看页面是否可以被缩放
也许你因为某个效果使用了font-size-adjust:none，或者在viewport中设置了禁止用户缩放，从而使得页面无法缩放。 但是，老年人和使用11寸高档笔记本的老板可是非常喜欢使用放大页面的功能的T~T。
5.添加landmark角色
添加的方法就是给相应功能的元素添加role这个属性并赋予响应的landmark值。
一共有8个值，一般你只能用到6个：
banner（banner）、complementary（辅助内容区）、contentinfo（网站信息和版权）、form（表单）、main（主内容区）、navigation（导航区）、search（搜索区）。如果一个表单仅仅是提供搜索功能，那么就将role设置为search，而不是form。 图示：
![图片[1]-关于 web 性能的思考与分享［04］——页面 SEO 优化方案-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/08/1723838618947_0.png)
这里写图片描述
6.设置快捷键——人性化考虑
“1”是指向首页的那个链接。 “Esc”是停止播放音视频，是停止，不是暂停。 这两个按键是迄今为止最能达成共识的快捷键了。haha~
7.触发界面转换需设置焦点
比如， 点击一个按钮，弹出了一个模态或者非模态的弹窗（不是浏览器弹窗），利用js把焦点移动到这个窗口的第一个有内容的DOM上；
比如， 点击“返回首页”按钮，如果仅仅是链接的是#或者改变类似scrollTop的值，那么也一定利用js将焦点移动到这个页面的第一个有内容的DOM上。 如果你通过一个按钮触发了一个组件窗口，在关闭这个组件窗口的时候，请把焦点重新移动回到触发这个窗口的按钮上。
8.优化你的超链接和图片
（1）a标签
包括优化超链接显示的文本，要具有语义性也要跟超链接的网页具有相关性； 例如 ：“空间主页” 就不要链接到“”。 除此之外，a标签也是里面title最好也要加点东西。 例如：
代码语言：javascript
复制
腾讯首页（2）img标签
补充”title”和”alt”属性： 例如 ：
代码语言：javascript
复制
”9.建立良好的网站导航和sitemap
网站需要有一个良好的导航，控制根目录和各子目录的关键； 建立sitemap文件可以帮助网站主了解网站结构，也方便搜索引擎收录整个站点。（通常，baidu推荐 robots.txt格式的地图；Google推荐使用.xml格式的网站地图）
h1-h6
合理的标题可以强调文字，也能让搜索引擎更加了解到各标题的重要性，因此建立良好的标题树十分有意义。
建议 : 通常情况下，按照重要性向下排列：
中使用的关键词，往往是在网页标题中使用的。
尽量靠近在html 中的标签，越近越好，以便让搜索引擎最快的领略主题。 例如：
代码语言：javascript
复制
Logo/主标题
儿歌/小节标题
1-3岁
3-6岁
版权声明
免责声明
解释：
用来修饰网页的主标题，
表示一个段落的标题，
表示段落的小节标题 对于一个网站来说哪个标题才是最大的？是LOGO，我们通常会在网站的最前面先标注这个网站的名称。
所以h1就用来放LOGO，当然如果你的网站没有LOGO，只有一个网站名称，那也可以，并且需要注意的是网页中h1只能出现一次。 并不推荐您直接在h1里面放个图片，我们完全可以通过以图换字来实现；
h2~h4一般用在网页中出现的版块标题上。例如一个网页中有个栏目是产品展示，那么这个写法就是
产品展示；
如果产品展示里面还分有几个类型，那么我们可以这样定义：
1-3岁 ，
儿歌类 等等依次类推。
另外就是h2~h4不局限于出现的次数，你可以无限制使用；
h5与h6在浏览器默认显示字体是小于正常文本字体的,那么推荐h5与h6只作为免责声明或是版权通告来使用。这样即表明重要性，又不会太过明显影响阅读。
注意：不要用联级元素来包含块级元素！
11.不断致力于提供优质的内容
社交化分享是网站曝光最快的因素，因此不断提供优质原创内容才能真正提高你的网站曝光权重。
Strong 标签
元素标签是权重标签中的代表，在搜索引擎中能够得到高度重视，它能突出关键词。
建议： 用strong标签表现重要的内容。
13.em标签
浏览器中表现为斜体,权重标签中的重要度仅次于。
注意： 如果我们在网页上面仅仅为了表现出加粗、斜体的效果，建议使用、标签，如果使用、就会影响到seo的效果，而最明智的写法就是在css里面来控制文字样式。
14.p标签
当搜索引擎读取到网页内容遇到P标签时候，立即就知道这是一个段落，而如果使用div，就无法体现html语义化的优势了。而且段落首句在seo中也占一部分权重。 建议： 将p标签用于内容段落;
15.Ul、li标签
常常会用在导航栏中，因为使用ul li列表标签布局，这个时候搜索引擎很容易辨别为有条理的列表型内容（对搜索引擎蜘蛛更加友好）。
建议： 用在导航栏中；
16.Span
span标签中的内容，在搜索引擎中将被忽视，所以如果你需要放的文字在该网页很重要，就不要用span标签，建议用
来显示。
17.title属性
title属性用来为元素提供额外说明信息title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，可以表示区域主题。但是并不是必须的。
建议：
在a标签和img标签上加上title描述。
18.alt属性
alt属性为不能显示图像、窗体或applets的用户代理（UA），指定替换文字。替换文字的语言由lang属性指定。
建议:
在img标签中加上alt文字描述。
19 . 注释
减少或删除html页面上的注释；
20.Html文件大小、链接数限制
Google在技术指南中曾建议html文件的大小控制在100KB以下，页内链接数控制在100个以下；
Baidu目前建议html文件大小控制在128KB以内；
21.form表单
必须出现action，最好也注明“method”;
action规定当提交表单时，向何处发送表单数据。在我们做测试的时候可以使用星号*代替;
建议：
为更有利于SEO，可以再书写上name属性，出于对客户体验的考虑，可以再对打开方式进行控制：target;
例如：
代码语言：javascript
复制
(1).form 之 label
label很重要，书写label并配合for与input中的id之间的彼此绑定，可以使我们在点击“姓名”两个字（label的内容）的时候，使其对应的表单元素得到焦点，处于可操作状态。 例如：
代码语言：javascript
复制
注意： label 的标签包裹的范围要考虑是否足够大，以致于鼠标很容易的就能操作到；
例如：
在登录页面，有这么一项非要勾选同意才能进行下一步
图示：
![图片[2]-关于 web 性能的思考与分享［04］——页面 SEO 优化方案-JieYingAI捷鹰AI](https://www.jieyingai.com/wp-content/uploads/2024/08/1723838618947_1.png)
这里写图片描述
我们只要点击标签文字即可选中，这就扩大了label的包裹范围；
表单元素在被聚焦的时候是否有清晰的视觉反馈；
提交和重置按钮以及图片按钮是否标记了文字或者在title中写明了该按钮的作用。
注意：
由于在文本框获得焦点的时候，文本框外部会有不同样式（根据浏览器而定），因此需要清除样式，设置outline:none;即可
(2).Form 之 select
Select 应该有自己的 name;
Option 的 value 值应该具有语义性，简洁明了；
(3).Form 之 submit
表单提交时，所有具有 name 属性的 html 输入元素(包括input标签、button标签、select标签等)都将作为键值对提交，除了submit对象。 submit 对象只有在自己被单击后的提交中才会作为键值对被提交。
可使用 submit 来提高页面易用性。
22.URL
URL设计规则 建议： 简短(short)的URI,避免不必要的冗长(一个URI的长度最好不要超过80个字节); 一律采用小写字母,不采用大写形式; 例如：
较好: 最佳:
而且每一层级都要有它对应的页面展示以及语义。
23.外链接
链接就像一座座的桥梁,把一个个资源连接起来。这样搜索引擎会沿着一座座桥走下去,如果你是处在交通枢纽中，那你被搜索到的可能性就越大。
常用方法：
找根自己网站相似的网站，互换链接；
在页面中提供收藏，收录的工具，让你的网站被收录到各个网站中；
不要使用不正当手段添加外链接。
24.SEO工具
我们知道，要使我们的web性能达到良好当当页面的优化时不够的，关于页面的优化还涉及到浏览器缓存、Cookie值的设置、js与css文件的优化问题，所以，当你意识到web优化在web建设工程中的重要性时，相信你会获取到更多知识与受益！
ok~关于页面优化就介绍到这里，等待你的意见～
