前端基础知识梳理——meta标签与seo相关标签

雨点打透心脏的1/2处 2022-05-25 10:46 227阅读 0赞

##### 前言 #####

在标准HTML页面中<header></header>标签和<body></body>标签处于同一级别。其中header标签用于向浏览器说明本网页的一些基础信息（网页的属性）。比如title标签告诉浏览器网页的标题，meta标签告诉浏览器网页改用什么编码格式解码，网页的关键字，描述。下面我们先简单说明一下meta标签。

（1）charset属性，指定字符编码，浏览器该用什么编码去解码。目前通用的编码是utf-8

这里涉及到一个常见问题为什么我们的编写的网页为出现乱码。因为你在编写网页的时候保存的文件如果没有指定编码的话，会有一个默认编码ANSI，这个编码的意思是系统默认编码，如果你用中文系统就是GB2312。

![70][]

浏览器在解码的时候也会根据一个默认编码去解码，如果这个方式不一致就会出现乱码，而charset就是告诉网页用什么方式去解码。

![70 1][]

（2） name  content属性

用这个可以设置网页的关键字和描述，这样搜索引擎就可以搜索到这个关键字

两个常见的属性：

可以被搜索引擎搜索到，以此信息作为参考。但不会影响排名。

那么搜索引擎会搜索到哪些标签呢？

**1.Title 标签**

Title 标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直是搜索引擎的抓取重点。通常，搜索引擎抓取Title标签出于两个目的：作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的，对我们做SEO来说都非常重要。  
一般来说，Title标签中的单词最好保持在3~6个左右，最好包含关键字。但Title标签中的单词不要全部都是关键字，因为这样可能会造成页面关键字堆砌，导致过度优化。所选单词应简洁明了、具有描述性，要与网页内容具有很大的相关性，并且每个不同的页面都应该包含Title标签。

**2.Meta Description标签**

对Title标签优化之后，接下来就是对Meta Description标签的优化。Meta Description标签可以说是对Title标签的进一步解释，可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta Description标签，并且Meta Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似，该部分内容也应具有描述性，与网页内容具有相关性，可包含关键字，但不可过多。

**3.Heading标签**

Heading标签包含了H1、H2、H3等等，是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰，有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签：从H1开始，依次往下添加。但不可添加太多Heading标签，否则会适得其反。

**4.Strong和B标签**

相信大多数朋友都知道Strong和B标签都有加粗的意思，但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗，而Strong标签不仅是对文字加粗，并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看，是有很大的区别的。  
上文中所提到的Heading标签页具有加粗效果，那么这三种标签到底该怎么用？其实，Heading标签一般用于文章大标题以及每段的小标题，而Strong标签一般用于文章段落中的重点词汇，而B标签一般只是强调一种视觉效果。

**5.ALT标签**

ALT标签是一种图片标签，它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求，只要在网页中出现图片的部分添加上该属性即可，但其标签内容应与相应页面内容具有相关性，长度不得过长，一般1~5个单词即可。

以上介绍了HTML代码中的五种重要标签，相信会对做SEO工作的人员特别是SEO新手具有很大帮助。对HTML代码的优化一直是我们做搜索引擎优化工作的非常基础并且重要的一部分，只有做好了这部分优化工作，我们才能开展更加深层的优化。

[70]: /images/20220525/c13d6163691e4cb3851555f9656d38ab.png
[70 1]: /images/20220525/682ed788ce5e4d58b1fd17f265c77a61.png