運用meta標籤進行網站優化
一,常用的HTTP-EQUIV型別:
Set-Cookie(cookie設定)
說明:如果網頁過期,存檔的cookie將會被刪除(必須是GMT的時間格式)
<meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Wednesday,21-Oct-98 16:14:21 GMT;path=/">
Window-target(顯示視窗的設定)
說明:強制頁面在當前視窗以獨立頁面顯示----用來防止別人在框架裡面呼叫你的頁面
<meta http-equiv="Window-target" content="_top">
Content-Type(顯示字符集的設定)
說明:設定頁面使用的字符集
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
expires(期限)
說明:用於設定網頁的到期時間,一旦網頁過期,必須到伺服器上重新調閱(必須使用GMT的時間格式)
<meta http-equiv="expires" content="Wed, 26 Feb 2016 08:21:57GMT">
Pragma(cache模式)
說明:禁止瀏覽器從本地機的快取中調閱頁面內容(訪問者無法離線瀏覽)
<meta http-equiv="Pragma" content="no-cache">
Refresh(重新整理)
說明:需要讓頁面定時連結到其他頁面的話,就用這句(停留五秒後自動跳轉到URL地址)
html中的meta資訊裡可以直接設定跳轉,可以設定跳轉延遲時間和跳轉url,經常應用,比如支付完了告訴使用者支付成功並跳轉到訂單頁面。下面的列子表示:5秒鐘後頁面會自動跳轉到http://www.fly63.com。
<meta http-equiv="refresh" content="5;url=www.fly63.com">
二,meta標籤name變數語法
keywords(關鍵字)---已經過時
說明:用來告訴搜尋引擎 你網頁的關鍵字是什麼
<meta name="keywords" content="xxx">
description(簡介)------(import)
說明:用來告訴搜尋引擎你網站的主要內容
<meta name="description" content="xxx">
robots(機器人嚮導)------(import)
說明:robots用來告訴搜尋機器人 哪些頁面需要索引 哪些不需要 ;用來阻止搜尋引擎獲取拷貝頁面、私密頁面和未完成的頁面.content引數有:all,none,index,noindex,follow,nofollow.預設all
<meta name="robots" content="none">
其中:all:檔案將被檢索,且頁面上的連結可以被查詢;
none:檔案將不被檢索,且頁面上的連結不可以被查詢;
index:檔案將被檢索;
follow:頁面上的連結可以被查詢;
noindex:檔案將不被檢索;
nofollow:頁面上的連結不可以被查詢。
author(作者)
說明:標註網頁的作者
<meta name="author" content="huangqingmei">
notranslate----(important)
說明:有時,Google在結果頁面會提供一個翻譯連結,但有時候你不希望出現這個連結
<meta name=”google”content=”notranslate” />
三,以下是一些不常用的例子和簡要的說明
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport屬性說明:width:可視區域的寬度,值可為數字或關鍵詞device-width
height同width
intial-scale:頁面首次被顯示時可視區域的縮放級別,取值1.0則頁面按實際尺寸顯示,無任何縮放
maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別,
maximum-scale使用者可將頁面放大的程式,1.0將禁止使用者放大到實際尺寸之上。
user-scalable:是否可對頁面進行縮放,no 禁止縮放
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="google" content="index,follow" />
啟用WebAPP全屏模式
<meta name="apple-mobile-web-app-capable" content="yes" />
隱藏狀態列/設定狀態列顏色:只有在開啟WebApp全屏模式時才生效。content的值為default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
新增到主屏後的標題
<meta name="apple-mobile-web-app-title" content="標題">
忽略數字自動識別為電話號碼
<meta content="telephone=no" name="format-detection" />
忽略識別郵箱
<meta content="email=no" name="format-detection" />
針對手持裝置優化,主要是針對一些老的不識別viewport的瀏覽器,比如黑莓
<meta name="HandheldFriendly" content="true">
微軟的老式瀏覽器
<meta name="MobileOptimized" content="320">
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">
windows phone 點選無高光
<meta name="msapplication-tap-highlight" content="no">
資源搜尋網站大全 http://www.szhdn.com 廣州VI設計公司https://www.houdianzi.com
四,例項
在html頁面上設定不快取
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">