先附上幾篇網(wǎng)上查找的關(guān)于meta標簽的資料、文章,看完這個幾篇文章后,會對meta標簽有一定的了解!
HTML meta標簽總結(jié)與屬性使用介紹
html5手機網(wǎng)站需要加的那些meta/link標簽,html5 meta全解
下邊這些內(nèi)容是對一些資料進行了整理,因為有的文章由于廣告或者頁面排版看起來不是很舒服,所以對一些介紹meta標簽比較全面的文章進行了整理。內(nèi)容會有重復或者沖突,僅供參考?。?!
第一篇
META的屬性有三個:name,http-equiv和content
先說Name和Content:
META的NAME屬性就說說明當前的META標簽是什么類型,以便于搜索引擎抓取,索引網(wǎng)頁。相應的Content就是告訴搜索引擎相關(guān)的信息。
打個比方<meta name= keywords content= meta />
這行代碼的意思就是說:這個網(wǎng)頁的關(guān)鍵詞是meta”
Name的常用取值有下面幾種
1、Keywords:關(guān)鍵字,即告訴搜索引擎,這個網(wǎng)頁的主題是什么。示例:<meta name= Keywords Content= 關(guān)鍵字,關(guān)鍵字1,關(guān)鍵字2,關(guān)鍵字3,...,... />
每個關(guān)鍵字之間,應該用用英文的逗號,”分隔開。
當數(shù)個META元素提供文檔語言從屬信息時,搜索引擎會使用lang特性來過濾并通過用戶的語言優(yōu)先參照來顯示搜索結(jié)果。例如:
<meta name= Kyewords Content= vacation,greece,sunshine >
<meta name= Kyewords Content= vacances,grè:ce,soleil >
2、Description:簡介,即告訴搜索引擎,這個網(wǎng)頁的大致內(nèi)容。就好像Keywords是手機,Description再詳細說一下手機的大體功能、優(yōu)勢等等。
示例:<meta name= Description Content= 這個網(wǎng)頁講述了的META用法... >
3、Robots:純粹寫給搜索引擎看的,因為Keywords和Description,人類還可以看懂,而Robots是非專業(yè)人士所無法理解的。
當name為Robots時,Content可選參數(shù)有
index:當前頁面可以被抓取
follow:被當前頁面內(nèi)所鏈接的頁面可以抓取
noindex:當前頁面不可以被抓取
nofollow:被當前頁面內(nèi)所鏈接的頁面不可以抓取
由于Content的內(nèi)容可以是雙選的,例如CONTENT= INDEX,FOLLOW ,所以上述這四個參數(shù),共可以組成4種不同的雙選結(jié)果。
其中
<META NAME= Robots CONTENT= index,follow />
可以寫成<META NAME= Robots CONTENT= all />
<META NAME= Robots CONTENT= noindex,nofollow />
可以寫成<META NAME= Robots CONTENT= none />
4、Author:作者,即告訴搜索引擎,這個頁面的作者是誰,一般那種文章性質(zhì)的頁面,這個屬性被應用得比較多。
示例<meta name= Author Content= czBin,11year@Gmail.com >
5、Copyright:版權(quán),告訴搜索引擎,這個頁面的版權(quán)是屬于誰的。
示例:<meta name= Copyright Content= 版權(quán)信息 >
6、Generator:制作軟件,難道搜索引擎連這個也需要知道?用FrontPage和Dreamweaver制作出的頁面,抓取方式不同嗎?
示例:<meta name= Generator Content= PCDATA|FrontPage| >
7、revisit-after:更新時間,即告訴搜索引擎,這個頁面多長時間會更新,到時候,需要來重新抓取示例:<META name= revisit-after CONTENT= 2 days >
再說HTTP-EQUIV:
META的HTTP-EQUIV屬性,其作用類似于HTTP頭協(xié)議,它會告訴瀏覽器一些關(guān)于字符設定,頁面刷新,cookie,和緩存等等相關(guān)信息。
常用的HTTP-EQUIV取值有如下11種:
1、Content-Type:聲明頁面所適用的的字符集,以及頁面文檔屬性。示例:
<meta http-equiv= Content-Type Content= text/html; Charset=gb2312 >
'
告訴瀏覽器,該頁面為HTML類文檔,并且,適用gb2312(中文)作為默認字符。
2、Refresh:設置頁面刷新或自動跳轉(zhuǎn)的時間
。示例
:
<meta http-equiv= Refresh Content= 60 >
Content= 60 的意思是說,60秒后,頁面刷新
<meta http-equiv= Refresh Content= 10; Url=http://www.isinwin.cn >
Content= 10 的意思是說,10秒后,網(wǎng)頁將自動跳轉(zhuǎn)。
3、Expires:設定網(wǎng)頁的過期時間,當網(wǎng)頁過期后,必須重新讀取頁面信息
。示例
:
<meta http-equiv= Expires Content= Fri, 15 Jun 2007 01:13:13 GMT >
<meta http-equiv= Expires Content= 0 >
時間格式必須為GMT標準時間,Content設置為0則代表該網(wǎng)頁永不過期。
4、Pragma:禁止瀏覽器緩存網(wǎng)頁。示例:
<meta http-equiv= Pragma Content= No-cach >
禁止瀏覽器緩存頁面(但是瀏覽者同樣可以保存頁面)
5、Set-Cookie :設定cookie的過期時間。示例:
<meta http-equiv= Set-Cookie Content= cookievalue=xxx; expires=Wednesday, 21-Oct-98 16:14:21 GMT; path=/ >
6、Window-target:強制頁面在當前窗口以獨立頁面顯示
。示例
:
<meta http-equiv= Widow-target Content= _top >
這個屬性是用來防止別人在框架里調(diào)用你的頁面。Content選項:_blank、_top、_self、_parent。
第二篇
name屬性
<-- 頁面作者 -->
<meta name="author" content="author name" />
<-- 頁面描述 -->
<meta name="description" content="meta元素共有三個可選屬性(不超過150字符)" />
<-- 頁面關(guān)鍵詞 -->
<meta name="keywords" content="meta標簽總結(jié),meta標簽" />
<-- 頁面生成器 -->
<meta name="generator" content="hexo" />
<-- 頁面修改信息 -->
<meta name="revised" content="story,2015/07/22" />
<-- 版權(quán)信息 -->
<meta name="copyright" content="All Rights Reserved" />
<-- 頁面爬蟲設置 -->
<meta name="robots" content="index,follow" />
<-- robots的content取值 -->
<-- all:文件將被檢索,且頁面上的鏈接可以被查詢 -->
<-- none:文件將不被檢索,且頁面上的鏈接不可以被查詢 -->
<-- index:文件將被檢索 -->
<-- follow:頁面上的鏈接可以被查詢 -->
<-- noindex:文件將不被檢索,但頁面上的鏈接可以被查詢 -->
<-- nofollow:文件將被檢索,但頁面上的鏈接不可以被查詢 -->
http-equiv
<-- 字符編碼 -->
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<-- 頁面到期時間 -->
<meta http-equiv="expire" content="Wed,22Jul201511:11:11GMT" />
<-- 頁面重刷新,0秒后刷新并跳轉(zhuǎn) -->
<meta http-equiv="refresh" content="0;URL=''" />
<-- cookie設置 -->
<meta http-equiv="set-cookie" content="cookie value=xxx;expires=Wed,22-Jul-201511:11:11GMT;path=/" />
<-- 腳本類型 -->
<meta http-equiv="Content-Script-Type"Content="text/javascript">
<-- 禁止從本地緩存中讀取頁面 -->
<meta http-equiv="Pragma"content="no-cache">
移動端
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<-- viewport的content取值 -->
<-- width:寬度(數(shù)值 / device-width)(200~10000,默認為980px) -->
<-- height:高度(數(shù)值 / device-height)(223~10000) -->
<-- initial-scale:初始縮放比例 (0~10) -->
<-- minimum-scale:允許用戶縮放到的最小比例 -->
<-- maximum-scale:允許用戶縮放到的最大比例 -->
<-- user-scalable:是否允許用戶縮放 (no/yes) -->
<-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<-- UC應用模式 -->
<meta name="browsermode" content="application">
<-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<-- IOS啟用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<-- IOS全屏模式下隱藏狀態(tài)欄/設置狀態(tài)欄顏色 content的值為default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<-- IOS添加到主屏后的標題 -->
<meta name="apple-mobile-web-app-title" content="標題">
<-- IOS添加智能 App 廣告條 Smart App Banner -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<-- 去除iphone 識別數(shù)字為號碼 -->
<meta name="format-detection" content="telephone=no">
<-- 不識別郵箱 -->
<meta name="format-detection" content="email=no">
<-- 禁止跳轉(zhuǎn)至地圖 -->
<meta name="format-detection" content="adress=no">
<-- 可以連寫-->
<meta name="format-detection" content="telephone=no,email=no,adress=no">