html5 里面的meta有什么用

meta屬性在HTML中占據了很重要的位置。如：針對搜索引擎的SEO，文檔的字符編碼，設置刷新緩存等。雖然一些網頁可能沒有使用meta，但是作為正規(guī)軍，我們還是有必要了解一些meta的屬性，并且能夠熟練使用它們。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：申請域名、網頁空間、營銷軟件、網站建設、建安網站維護、網站推廣。

1、聲明文檔使用的字符編碼

meta charset='utf-8'11

2、聲明文檔的兼容模式

meta http-equiv="X-UA-Compatible" content="IE=edge" / 指示IE以目前可用的最高模式顯示內容

meta http-equiv="X-UA-Compatible" content="IE=Emulate IE7" /指示IE使用 !DOCTYPE 指令確定如何呈現內容。標準模式指令以IE7 標準模式顯示，而 Quirks 模式指令以 IE5 模式顯示。1212

3、SEO 優(yōu)化

meta name="description" content="不超過150個字符" /頁面描述

meta name="keywords" content="html5, css3, 關鍵字"/頁面關鍵詞

meta name="author" content="魔法小棧" /定義網頁作者

meta name="robots" content="index,follow" /定義網頁搜索引擎索引方式，robotterms是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。12341234

4、為移動設備添加 viewport

meta name ="viewport" content ="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"

content 參數解釋：

width viewport 寬度(數值/device-width)

height viewport 高度(數值/device-height)

initial-scale 初始縮放比例

maximum-scale 最大縮放比例

minimum-scale 最小縮放比例

user-scalable 是否允許用戶縮放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增屬性，可以在頁面加載時最小化上下狀態(tài)欄。這是一個布爾值，可以直接這樣寫：

meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui"1234567891012345678910

5、iOS 設備

meta name="apple-mobile-web-app-title" content="標題"添加到主屏后的標題（iOS 6 新增）

meta name="apple-mobile-web-app-capable" content="yes" /是否啟用 WebApp 全屏模式

meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /設置狀態(tài)欄的背景顏色

只有在 "apple-mobile-web-app-capable" content="yes" 時生效

content 參數：

default 默認值。

black 狀態(tài)欄背景是黑色。

black-translucent 狀態(tài)欄背景是黑色半透明。

設置為 default 或 black ,網頁內容從狀態(tài)欄底部開始。

設置為 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態(tài)欄遮擋。1234567891012345678910

6、iOS 圖標 rel 參數

apple-touch-icon 圖片自動處理成圓角和高光等效果。

apple-touch-icon-precomposed 禁止系統(tǒng)自動添加效果，直接顯示設計原圖。

link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /iPhone 和 iTouch，默認 57x57 像素，必須有

link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" /iPad，72x72 像素，可以沒有，但推薦有

link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /Retina iPhone 和 Retina iTouch，114x114 像素，可以沒有，但推薦有

link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /Retina iPad，144x144 像素，可以沒有，推薦大家使用

meta name="apple-mobile-web-app-title" content="標題"title最好限制在六個中文長度內，超長的內容會被隱藏，添加到主屏后的標題（iOS 6 新增）12345671234567

7、iOS 啟動畫面

iPad 的啟動畫面是不包括狀態(tài)欄區(qū)域的。

iPad 豎屏 768 x 1004（標準分辨率）

link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /iPad 豎屏 1536x2008（Retina）

link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /iPad 橫屏 1024x748（標準分辨率）

link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /iPad 橫屏 2048x1496（Retina）

link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /

iPhone 和 iPod touch 的啟動畫面是包含狀態(tài)欄區(qū)域的。

iPhone/iPod Touch 豎屏 320x480 (標準分辨率)

link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /iPhone/iPod Touch 豎屏 640x960 (Retina)

link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /iPhone 5/iPod Touch 5 豎屏 640x1136 (Retina)

link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /

link rel="apple-touch-startup-image" href="Startup.png" / 當用戶點擊主屏圖標打開 WebApp 時，系統(tǒng)會展示啟動畫面，在未設置情況下系統(tǒng)會默認顯示該網站的首頁截圖，當然這個體驗不是很好123456789101112123456789101112

8、Windows 8

meta name="msapplication-TileColor" content="#000"/ Windows 8 磁貼顏色

meta name="msapplication-TileImage" content="icon.png"/Windows 8 磁貼圖標1212

9、不常用的

link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /添加 RSS 訂閱

link rel="shortcut icon" type="image/ico" href="/favicon.ico" /添加 favicon icon

meta name="format-detection" content="telephone=no" /禁止數字識自動別為電話號碼

meta name="format-detection" content="email=no" /不讓android識別郵箱

meta name="renderer" content="webkit"啟用360瀏覽器的極速模式(webkit)

meta http-equiv="X-UA-Compatible" content="IE=edge"避免IE使用兼容模式

meta name="HandheldFriendly" content="true"針對手持設備優(yōu)化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓

meta name="MobileOptimized" content="320"微軟的老式瀏覽器

meta name="x5-orientation" content="portrait"QQ強制豎屏

meta name="full-screen" content="yes"UC強制全屏

meta name="x5-fullscreen" content="true"QQ強制全屏

meta name="browsermode" content="application"UC應用模式

meta name="x5-page-mode" content="app"QQ應用模式

meta http-equiv="Cache-Control" content="no-siteapp" /禁止百度轉碼

meta name="msapplication-tap-highlight" content="no"windows phone 點擊無高光

meta name="keywords" content="" / 關鍵字

meta name="description" content="" / 描述

meta name="title" content="" / 標題

meta name="author" content="-06" / 作者

meta name="Copyright" content="" / 公司

meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" 讓IE瀏覽器用最高級內核渲染頁面 還有用 Chrome 框架的頁面用webkit 內核

meta name="apple-mobile-web-app-capable" content="yes" IOS6全屏

meta name="mobile-web-app-capable" content="yes" Chrome高版本全屏

meta name="renderer" content="webkit" 讓360雙核瀏覽器用webkit內核渲染頁面

meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" 添加智能 App 廣告條 Smart App Banner（iOS 6+ Safari）1234567891011121314151617181920212223242512345678910111213141516171819202122232425

10、sns 社交標簽

參考微博API

meta property="og:type" content="類型" /

meta property="og:url" content="URL地址" /

meta property="og:title" content="標題" /

meta property="og:image" content="圖片" /

meta property="og:description" content="描述" /1234512345

11、條件注釋判斷IE瀏覽器

!--[if IE]條件注釋區(qū)分非IE瀏覽器

!--[if lt IE 7 ]html class="oldie ie ie6" ![endif]--

!--[if IE 7 ]html class="oldie ie ie7" ![endif]--

!--[if IE 8 ]html class="ie ie8" ![endif]--

!--[if (gte IE 9)|!(IE)]!--html !--![endif]--

!--[if lt IE 9] ![endif]--123456123456

12.如果頁面上出現很多http請求會自動轉換成https

meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /

HTML Meta標簽知多少

一、基本屬性

標簽常常被用來定義HTML文檔的元數據或者HTTP協議的指向，這些元數據常用在SEO、HTML Pages or Apps on Mobile/Handheld Devices，該標簽主要包括以下屬性：

Attribute Description

Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.

content Specifies the property’s value.

scheme Specifies a scheme to interpret the property’s value (as declared in the content attribute).

http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

二、基本的HTML Meta標簽

01

!-- SEO --

02

meta name="keywords" content="your, tags"/

03

meta name="description" content="150 words"/

04

meta name="subject" content="your website's subject"

05

meta name="copyright"content="company name"

06

07

meta name="language" content="ES"

08

meta name="robots" content="index,follow" /

09

meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" /

10

meta name="abstract" content=""

11

meta name="topic" content=""

12

meta name="summary" content=""

13

meta name="Classification" content="Business"

14

meta name="author" content="name, email@hotmail.com"

15

meta name="designer" content=""

16

meta name="copyright" content=""

17

meta name="reply-to" content="email@hotmail.com"

18

meta name="owner" content=""

19

meta name="url" content=""

20

meta name="identifier-URL" content=""

21

meta name="directory" content="submission"

22

meta name="category" content=""

23

meta name="coverage" content="Worldwide"

24

meta name="distribution" content="Global"

25

meta name="rating" content="General"

26

meta name="revisit-after" content="7 days"

27

28

meta http-equiv="Expires" content="0"

29

meta http-equiv="Pragma" content="no-cache"

30

meta http-equiv="Cache-Control" content="no-cache"

三、OpenGraph Meta標簽

為了提高站外內容的傳播效率，2010年9月，在F8會議上Facebook公布了一套開放圖景協議(Open Graph Protocol)，任何網頁只要遵守該協議，SNS就能從頁面上提取最有效的信息并呈現給用戶。通過Open Graph把其他社交網站建構的網絡給連接起來，將創(chuàng)造一個更聰明、更與社交連接、更個人化也更具語意意識的網絡。

01

meta name="og:title" content="The Rock"/

02

meta name="og:type" content="movie"/

03

meta name="og:url" content=""/

04

meta name="og:image" content=""/

05

meta name="og:site_name" content="IMDb"/

06

meta name="og:description" content="A group of U.S. Marines, under command of..."/

07

08

meta name="fb:page_id" content="43929265776" /

09

10

meta name="og:email" content="me@example.com"/

11

meta name="og:phone_number" content="650-123-4567"/

12

meta name="og:fax_number" content="+1-415-123-4567"/

13

14

meta name="og:latitude" content="37.416343"/

15

meta name="og:longitude" content="-122.153013"/

16

meta name="og:street-address" content="1601 S California Ave"/

17

meta name="og:locality" content="Palo Alto"/

18

meta name="og:region" content="CA"/

19

meta name="og:postal-code" content="94304"/

20

meta name="og:country-name" content="USA"/

21

22

meta property="og:type" content="game.achievement"/

23

meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/

24

25

meta property="og:video" content="" /

26

meta property="og:video:height" content="640" /

27

meta property="og:video:width" content="385" /

28

meta property="og:video:type" content="application/x-shockwave-flash" /

29

meta property="og:video" content="" /

30

meta property="og:video:type" content="video/mp4" /

31

meta property="og:video" content="" /

32

meta property="og:video:type" content="text/html" /

33

34

meta property="og:audio" content="" /

35

meta property="og:audio:title" content="Amazing Song" /

36

meta property="og:audio:artist" content="Amazing Band" /

37

meta property="og:audio:album" content="Amazing Album" /

38

meta property="og:audio:type" content="application/mp3" /

四、公司/服務 Meta標簽

4.1 CLAIMID

ClaimID was a website that allowed users to create unique profiles that showed personal websites, profiles at other sites, and other biographical information.

1

meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" /

4.2 APPLE META TAGS

01

!-- 從桌面icon啟動IOS Safari是否進入全屏狀態(tài)（APP模式） --

02

meta name="apple-mobile-web-app-capable" content="yes"

03

04

!-- 添加到主屏幕“后，全屏顯示 --

05

meta name="apple-touch-fullscreen" content="yes"

06

07

!-- 指定狀態(tài)欄的顏色 --

08

meta name="apple-mobile-web-app-status-bar-style" content="black"

09

10

!-- ios設備上禁止將數字識別為可點擊的telephone link --

11

meta name="format-detection" content="telephone=no"

12

13

!-- 頁面CSS計算時使用寬度為320，初始縮放比例2.3， 不允許用戶縮放, 最大縮放因子為1 --

14

meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no, maximum-scale=1 "

15

16

!-- 頁面CSS計算時使用的寬度根據設備給定值自適應 --

17

meta name= "viewport" content = "width = device-width"

4.3 INTERNET EXPLORER META TAGS

01

meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" /

02

meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" /

03

meta name="mssmarttagspreventparsing" content="true"

04

05

!-- 告訴IE瀏覽器以什么模式展示網頁 --

06

meta http-equiv="X-UA-Compatible" content="chrome=1"

07

08

meta name="msapplication-starturl" content=""/

09

meta name="msapplication-window" content="width=800;height=600"/

10

meta name="msapplication-navbutton-color" content="red"/

11

meta name="application-name" content="Rey Bango Front-end Developer"/

12

meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/

13

meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" /

14

meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" /

15

meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" /

16

meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" /

17

18

!-- Tab標簽icon --

19

link rel="shortcut icon" href="/images/favicon.ico" /

4.4 TWEETMEME META TAGS

Tweetmeme跟蹤Twitter上的鏈接，以給用戶更好的體驗。它使用一種常用的排序系統(tǒng)，以在這個微博世界里找出最熱門的信息。

1

meta name="tweetmeme-title" content="Retweet Button Explained" /

4.5 BLOG CATALOG META TAGS

1

meta name="blogcatalog" /

4.6 RAILS META TAGS

1

meta name="csrf-param" content="authenticity_token"/

2

meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/

五、創(chuàng)建自定義 Meta標簽

Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags. Here’s some examples:

1

meta name="google-analytics" content="1-AHFKALJ"/

2

meta name="disqus" content="EEEE"/

3

meta name="uservoice" content="XXXX"/

4

meta name="mixpanel" content="XXXXE"/

html5中meta標簽的正確寫法是哪種？

一般放在head標簽或head標簽的noscript標簽中。 為空元素（沒有內容）。 除了全局屬性之外，還有 name、http-equiv、content、charset DOM接口 代碼: 全選 運行 interface HTMLMetaElement : HTMLElement { attribute DOMString name; attribute DOMString httpEquiv; attribute DOMString content; }; meta標簽用來表達title, base, link, style, and script 等標簽所表達不了的metadata或pragma信息。 其中name, http-equiv, 和charset屬性必須且只能設置一個。 如果設置了name屬性或http-equiv屬性，還必須設置content屬性。 charset屬性用來設定文檔的編碼，如UTF-8。 只允許一個meta標簽設置charset屬性。

HTML里的meta標簽有什么作用？怎么用？六安市康運有人會這個嗎？

meta標簽共有兩個屬性，分別是http-equiv屬性和name屬性。

1. name屬性

name屬性主要用于描述網頁，比如網頁的關鍵詞，敘述等。與之對應的屬性值為content，content中的內容是對name填入類型的具體描述，便于搜索引擎抓取。meta標簽中name屬性語法格式是：

meta name="參數" content="具體的描述"。

其中name屬性共有以下幾種參數。(A-C為常用屬性)

A. keywords(關鍵字)

說明：用于告訴搜索引擎，你網頁的關鍵字。舉例：

meta name="keywords" content="Lxxyx,博客，文科生，前端"

B. description(網站內容的描述)

說明：用于告訴搜索引擎，你網站的主要內容。舉例：

meta name="description" content="文科生，熱愛前端與編程。目前大二，這是我的前端博客"

C. viewport(移動端的窗口)

說明：這個概念較為復雜，具體的會在下篇博文中講述。這個屬性常用于設計移動端網頁。在用bootstrap,AmazeUI等框架時候都有用過viewport。

舉例（常用范例）：

meta name="viewport" content="width=device-width, initial-scale=1"

D. robots(定義搜索引擎爬蟲的索引方式)

說明：robots用來告訴爬蟲哪些頁面需要索引，哪些頁面不需要索引。content的參數有all,none,index,noindex,follow,nofollow。默認是all。

舉例：

meta name="robots" content="none"

具體參數如下：

1.none : 搜索引擎將忽略此網頁，等價于noindex，nofollow。

2.noindex : 搜索引擎不索引此網頁。

3.nofollow: 搜索引擎不繼續(xù)通過此網頁的鏈接索引搜索其它的網頁。

4.all : 搜索引擎將索引此網頁與繼續(xù)通過此網頁的鏈接索引，等價于index，follow。

5.index : 搜索引擎索引此網頁。

6.follow : 搜索引擎繼續(xù)通過此網頁的鏈接索引搜索其它的網頁。

E. author(作者)

說明：用于標注網頁作者舉例：

meta name="author" content="Lxxyx,841380530@qq.com"

F. generator(網頁制作軟件)

說明：用于標明網頁是什么軟件做的舉例: (不知道能不能這樣寫)：

meta name="generator" content="Sublime Text3"

G. copyright(版權)

說明：用于標注版權信息舉例：

meta name="copyright" content="Lxxyx" //代表該網站為Lxxyx個人版權所有。

H. revisit-after(搜索引擎爬蟲重訪時間)

說明：如果頁面不是經常更新，為了減輕搜索引擎爬蟲對服務器帶來的壓力，可以設置一個爬蟲的重訪時間。如果重訪時間過短，爬蟲將按它們定義的默認時間來訪問。舉例：

meta name="revisit-after" content="7 days"

I. renderer(雙核瀏覽器渲染方式)

說明：renderer是為雙核瀏覽器準備的，用于指定雙核瀏覽器默認以何種方式渲染頁面。比如說360瀏覽器。舉例：

meta name="renderer" content="webkit" //默認webkit內核

meta name="renderer" content="ie-comp" //默認IE兼容模式

meta name="renderer" content="ie-stand" //默認IE標準模式

HTML5中的meta

META NAME="MobileOptimized" CONTENT="240"瀏覽器不會自動調整文件的大小,也就是說是固定大小,不會隨著瀏覽器拉伸縮放。

meta name="apple-touch-fullscreen" content="yes""添加到主屏幕“后，全屏顯示

meta name="apple-mobile-web-app-capable" content="yes" /

如果內容設置為YES，Web應用程序運行在全屏模式;否則，它不會。默認行為是使用Safari瀏覽器顯示網頁內容

為什么說HTML5中的meta標簽有利于收錄

Meta標簽用來描述一個HTML網頁文檔的屬性，例如作者、日期和時間、網頁描述、關鍵詞、頁面刷新等。搜索引擎通過機器人自動查找網頁中的meta值來給網站分類，只有完善了Meta，一個HTML頁面才能算是完整的網頁。

通常，Meta值在網頁中的存在形式：

META NAME=”Title” CONTENT=”網頁標題”

META NAME=”Author” CONTENT=”網頁的作者說明”

Meta還有很多種表述功能，合理利用Meta標簽的Deion和Keywords屬性，加入網站的關鍵字或者網頁的關鍵字，可使網站的SEO優(yōu)化排名快速提升，并且更加貼近用戶體驗。

Meta標簽的重要參數

搜索引擎對網頁的排名大部分是基于網頁的title（標題）進行的，這就是讓大家做網站關鍵詞的時候不要單純設置“首頁”，最好是整個網站的名稱。

網頁名稱：html5的meta,html5?
文章地址：http://www.yijiale78.com/article18/dsccjdp.html

成都網站建設公司_創(chuàng)新互聯，為您提供微信小程序、虛擬主機、小程序開發(fā)、網站排名、服務器托管、域名注冊

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯