前端笔记

包括模块、常见问题、css效果、js效果等。仅用于方便查找,提高工作效率。

网页头部的标签是什么意思?起什么作用等

1、网页头部的<meta>标签是什么意思?起什么作用?

元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度

的描述和关键词。

<meta>有哪些属性?

必要属性:

content :定义与 http-equiv 或 name 属性相关的元信息
content 属性始终要和 name 属性或 http-equiv 属性一起使用。

可选属性:name :把 content 属性关联到一个名称。

3、页头常见的<meta>及它的意义

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
服务器向浏览器发送信息:浏览器准备接受一个 HTML 文档。

这句一定要有

<meta charset=”gbk” /> 字符集
<meta name=”robots” content=”all” /> 爬虫
<meta name=”author” content=”w3school.com.cn” /> 作者
<meta name=”keywords” content=”HTML,ASP,PHP,SQL”> 关键词
<meta name=”description” content=”若干内容”> 网页描述

<meta name=”viewport” id=”viewport” content=”width=device-width, initial-scale=1″ /> 浏览器窗口缩放
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
是IE8的专属标记,用来兼容其它低版本IE浏览器的,告诉IE8浏览器以哪个低版本的IE浏览器来渲染页面。

<meta http-equiv=”X-UA-Compatible” content=”IE=edge” /> 以最高版本为标准

可以看到最常用的有,X-UA-Compatible、keywords、description、viewport 等。

4、有时我们在在一些网页的头部会看到<meta property=”og:**>之类代码,又是什么意思呢?

Meta Property=og标签是什么呢?

og是一种新的HTTP头部标记,即Open Graph Protocol:

The Open Graph Protocol enables any web page to become a rich object in a social graph.

即这种协议可以让网页成为一个“富媒体对象”。

用了Meta Property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。

SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。

Open Graph Protocol应用指南:

参与到Open Graph Protocol的好处.
● 能够正确的分享您的内容到SNS网站2
● 帮助您的内容更有效的在SNS网络中传播

Meta Property标签的应用
● 按照您网页的类型,在<head>中添加入meta标签,并填上相应的内容
● 如果一个页面上有多个需要标识出的内容怎么办?

您可以重复meta标签,将认为og:type 标签是每一段内容的起始处。

 

举例:华为官网头部meta

<!–share begin –>
<meta property=”og:title” content=”华为联合广电云与德力仪器发布5G云导播多机位帧同步解决方案”>
<meta property=”og:description” content=”2020全球移动宽带论坛期间,华为无线X Labs联合广电云和德力仪器共同发布5G云导播多机位帧同步解决方案,可以实现5G 4K视频高清直播的帧级同步,有着广泛的应用前景。”>
<meta property=”og:image” content=”https://www-file.huawei.com/-/media/corporate/images/news4/2020/q4/201117.jpg”>
<meta property=”og:url” content=”https://www.huawei.com/cn/news/2020/11/5g-cloud-broadcasting-synchronization-solution-instrument”>
<meta property=”og:site_name” content=”huawei”>
<!–share end –>
<!– add twitter meta begin –>
<meta name=”twitter:card” content=”summary_large_image”>
<meta name=”twitter:title” content=”华为联合广电云与德力仪器发布5G云导播多机位帧同步解决方案”>
<meta name=”twitter:description” content=”2020全球移动宽带论坛期间,华为无线 X Labs联合广电云和德力仪器共同发布5G云导播多机位帧同步解决方案,可以实现5G 4K视频高清直播的帧级同步,有着广泛的应用前景。”>
<meta name=”twitter:image” content=”https://www-file.huawei.com/-/media/corporate/images/news4/2020/q4/201117.jpg”>
<!– add twitter meta end –>

Open Graph Protocol对SEO的影响

有些人使用所谓的网站质量在线检测,检测后结果提示Meta Property=og这段代

码有问题,特别是一些SEO的检测,更是提示“特别错误”!然后删除Meta Property=og代码,检测正常。

因此担心Meta Property=og这段代码会对网站照成不良影响
其实Open Graph Protocol并不会对SEO照成不良影响,相反,应用的合理,非常有利于网站的推广。

5、浏览器支持

所有浏览器都支持 <meta> 标签。



打赏作者: 一分也是爱


您的支持就是我最大的动力
点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注