哎呀， 今天咱们得好好唠唠这个meta标签，真的，这玩意儿太重要了简直就是我这种做SEO的心头肉，有时候也是心头恨。你说它重要吧， 就那么几行代码，藏在 里面用户根本看不见； 躺赢。 你说它不重要吧，一旦写错了或者没写好，那网站在搜索引擎眼里简直就是个“没头苍蝇”。meta元素对于网站SEO有很重要的关系。 这句话我说多少遍都不嫌多，真的，谁改谁知道。

到底什么是meta标签？别跟我扯教科书

操作一波。 咱们不整那些虚头巴脑的定义，虽然我也知道教科书上怎么写。meta元素可提供有关页面的元信息也就是meta-information。听着挺玄乎，其实就是“关于信息的信息”。就像是你去相亲，你的照片是内容，但是你的身高、体重、学历、有没有房，这些就是你的“meta信息”。搜索引擎那个爬虫，它就像个挑剔的媒婆，它先不看你的脸，它先看你的条件。

常用HTMLmeta标签属性这可不是开玩笑的。你想想，一个网页，如果没有这些辅助性的标签，那浏览器怎么知道你是谁？怎么知道你要干嘛？meta是HTML语言的head区必要的辅助性标签 它就在那儿，不显山不露水，但是缺了它，整个HTML文档就不完整了。它不包含任何实质性的页面内容，比如文字啊图片啊，它全是参数，全是定义，全是给机器看的暗号，拜托大家...。

两个核心属性：http-equiv和name

咱们得把这两个家伙分开说虽然它们总是混在一起。meta标签共有两个属性记住是两个！一个是http-equiv，一个是name。别搞混了搞混了代码就报错，或者干脆不生效，那时候你就哭去吧。

先说这个name属性。这个最常用，也最容易被乱用。name属性主要用于描述网页与之对应的属性值就是content。这个content里面装的是什么？装的就是你的描述、你的关键词、你的作者信息。content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。你看，机器人多懒，它就喜欢看这个summary。你写得好，它就给你分类分得准；你写得烂，它就把你扔到不知名的角落里去吃灰。

然后是http-equiv属性。这个名字听起来就很技术流，对吧？http-equiv顾名思义相当于http的文件头作用。啥意思呢？就是它假装自己是一个HTTP头信息，告诉浏览器怎么处理这个页面。它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。 不妨... 比如你想让页面刷新，或者你想设置什么缓存策略，或者你想告诉浏览器用什么编码，这些都得靠它。与之对应的属性值为content，content中的内容其实就是各个参数的变量值。这就像是你给浏览器下了一道圣旨，content就是圣旨的具体内容。

SEO的波动：改个meta就能让你心跳加速

他急了。 我跟你们说个事儿，特别刺激。有时候你觉得自己网站排名不行了 想去改改meta标签，比如改改description或者keywords。这一改不要紧，而且网站如果修改meta元素就会马上出现SEO波动性的现象。真的，我见过好多人，手贱，改完之后天天盯着排名看，后来啊排名忽上忽下吓得睡不着觉。

为啥会这样？这是主要原因是搜索引擎重新抓取和分析了网页的meta元素。搜索引擎那个大服务器，它发现你变了它得重新认识你啊。也就从新计算了网站的状况和参数的情况。它想：“哎？这哥们儿昨天说他是卖苹果的，今天怎么变成卖梨的了？是不是换老板了？是不是挂羊头卖狗肉？”于是它就开始重新考察你。这时候你的排名就会乱跳。但是也会很快的恢复SEO效果 只要你不是真的从卖苹果变成卖梨了只要你只是稍微润色了一下文案，过几天它就明白过来了排名也就回来了。所以改meta需谨慎，心脏不好的别天天改，体验感拉满。。

Viewport：移动端流量的守门员

盘它。 现在谁还用电脑看网页啊？全是手机！全是平板！所以这个viewport标签简直就是救命稻草。你要是不写这个，你的网页在手机上打开就会小得像蚂蚁一样，用户还得放大缩小，体验极差，直接就关掉了。

代码我都给你们准备好了 直接抄：

看看这一长串，meta标签中name属性语法格式是: name="viewport"，然后content里面全是参数。width=device-width， 意思就是宽度跟着设备走；initial-scale=1.0，初始缩放比例是1；后面那些最大最小缩放， 操作一波... 还有user-scalable=no，就是不让用户手动缩放。虽然说不让缩放有点霸道，但是为了做成App的感觉，很多老板都这么要求，没办法啊。HTML中的meta标签是文档头部的重要元素 这一行代码能决定你的移动端生死，你说重不重要？

那些年我们踩过的坑：字符编码Charset

还有一个不得不提的，就是charset。charset属性用于指定文档的字符编码。这个太基础了基础到大家都容易忘。你要是不写这个， 佛系。 或者写成了GBK，而你的文件存的是UTF-8，那恭喜你，你的网页上全是乱码，全是那种方框框或者问号，看着就让人头大。

我晕... 这是确保网页正确显示的基础。没有这个基础，你内容写得再好，SEO做得再牛，用户一看全是乱码，谁还留下来？现在的标准基本都是UTF-8，统一下来别搞那些花里胡哨的。meta标签位于文档头部,不包含内容,其属性定义了与文档关联的键值对。charset就是那个最关键的键，没有它，后面的值都没意义。

X-UA-Compatible：跟IE浏览器死磕到底

虽然IE浏览器已经被微软扔进历史垃圾堆了但是！但是！很多政府单位、很多老企业、很多学校的电脑，还在用IE啊！ 坦白说... 还在用Windows 7啊！这时候你就得用这个meta标签来哄着IE浏览器好好干活。

这行代码的意思就是告诉IE：“哥们儿， 用你最新的内核来渲染，别用那个兼容模式，那个太烂了。如果有Chrome内核，就优先用Chrome。”比如浏览器会以meta元素中的属性判断用哪种渲染模式显示网页。你不写这个， 开倒车。 IE可能就以为你是个几十年前的老网站，然后用那种极其难看的方式把你的网页排得乱七八糟。meta元素也叫元信息 这行元信息就是为了兼容性而存在的，为了那一点点存量用户，咱们程序员也是操碎了心。

SEO工具大乱斗：谁才是Meta标签的神器？

说了这么多理论，咱们来点实际的。市面上有很多SEO工具，都说自己能分析meta标签，能帮你优化。我也用过不少，有的好用，有的就是坑。为了让大家少走弯路，我特意整理了一个对比表格，大家看看哪个顺眼就用哪个。反正我是换了好几个了现在用的这个也就是凑合，脑子呢？。

你看这表格，常用HTML meta 标签属性这些工具虽然能帮忙，但也不能全信。特别是那个“SEO蜘蛛王Pro”，功能是强，但是那个界面简直让人想砸电脑。 总体来看... 不过为了SEO，忍了吧。搜索引擎会模拟用户进行访问， 所以meta元素是直接关系到网站的SEO方面工具能帮你模拟这个过程，提前发现问题。

Keywords：已经凉了还是还有救？

以前做SEO，keywords这个标签那是重中之重。大家都往里面塞词，塞得越多越好，甚至跟网页内容没关系的词也往里塞。后来啊呢？搜索引擎被玩坏了现在这个标签的权重已经低得可怜了。百度大体上都不看了谷歌更是直接无视，说到点子上了。。

但是！meta标签中name属性语法格式是: name="keywords" content="..."。虽然权重低了但我建议你还是写上。为啥？万一呢？万一哪天搜索引擎算法又改了呢？再说了写几个词又不费劲。content的值必须包含link元素的标题、 href属性链接到CSS样式表或包含CSS样式表的元素的标题……哎不对，这段话好像串台了这是说CSS的。咱们还是说keywords，content里面就是逗号分隔的关键词。别堆砌，写几个核心的就行，保持页面整洁。

Description：你的广告牌

这个标签现在可是C位出道。比如针对搜索引擎进行网页SEO优化需要设置标题、关键字、描述。标题虽然不在meta标签里但它也是head区的大佬。而Description，就是你在搜索后来啊里看到的那一小段灰色的文字。

这段文字太重要了！这是你的广告语啊！用户搜个词，出来一堆后来啊，他凭什么点你？就靠这段Description！meta标签共有两个属性,分别是http-equiv属性和name属性Description就是name属性的一种。你得写得吸引人，要把你的卖点说出来还要带上关键词。但是别太长，太长了显示不完，会被截断，还得加上省略号，多难看。

三个 HTML Meta标签是HTML语言HEAD区的一个辅助性标签……这话说得有点绕， 其实意思就是meta标签是辅助，但Description这个辅助，有时候比正文还重要。你想想，正文用户都不一定点进去看， 勇敢一点... 描述可是直接展示在搜索后来啊页面的。用来描述一个HTML网页文档的属性,比方说作者、 日期和时间、网页描述、关键词......这里面网页描述绝对是排第一位的。

Author和Robots：小众但有用

除了上面那些大腕，还有一些小弟。比如Author，这个就是写作者名字的。没啥SEO作用，就是留个名，万一有人想联系你呢？meta标签中name属性语法格式是: name="Author" content="你的名字"，内卷。。

还有Robots，这个是用来指挥爬虫的。meta标签的魅力在于它的多样性和灵活性这个Robots标签就是灵活性的体现。你可以告诉爬虫：“这个页面你别索引”，或者“这个页面的链接你别跟着爬”。 一阵见血。 代码大概就是 name="Robots" content="noindex, nofollow"。这个慎用啊，用错了页面就找不到了。

说了这么多，感觉脑子有点乱。meta标签这东西，说简单也简单，说复杂也复杂。本文详细介绍了HTML中的meta标签,包括charset、 http-equiv和name属性的用途,如字符编码设定、页面刷新、SEO优化等。你看，我这不就介绍完了么？但是实际操作起来每一个属性，每一个content值，都得琢磨。

meta标签共有两个属性,分别是http-equiv属性和name属性。这句话我好像说了好几遍了？重要的事情说三遍！ 太硬核了。 meta标签共有两个属性,分别是http-equiv属性和name属性。好了三遍说完了。

做网站不容易，做SEO更难。meta元素对于网站SEO有很重要的关系。别看它就在那几行代码，改一个字可能就是天壤之别。大家平时多检查检查，用用我上面推荐的那个表格里的工具，把meta标签都优化好。订阅专栏本文详细介绍了HTML中meta标签的name和http-equiv两个重要属性……哎呀，怎么又变成广告语了，我们都...。

也是醉了... 希望大家都能把meta标签写得漂漂亮亮的，让搜索引擎喜欢，让用户点进来让排名蹭蹭往上涨。虽然我知道这很难，但是梦想还是要有的，万一实现了呢？常用HTMLmeta标签属性这就是咱们站长的基本功，练好了它，走遍天下都不怕！好了不废话了我要去改我网站的Description了刚才灵感来了想了一句特别牛的广告词。