简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
首頁
文章
問答
課程
專題
下載
遊戲
詞典
最近更新

首頁  >  文章  >  web前端  >  html中關於meta標籤的實例詳解

html中關於meta標籤的實例詳解

Y2J
Y2J原創
2017-05-23 09:49:002407瀏覽

下面就為大家帶來一篇html meta標籤的使用總結(推薦)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

meta標籤作用

#META標籤是HTML標記HEAD區的一個關鍵標籤，提供文件字元集、使用語言、作者等基本信息，以及對關鍵字和網頁等級的設定等，最大的作用是能夠做搜尋引擎優化（ SEO）。

PS：方便搜索引擎機器人尋找、分類，網路應用程式要注意。

大網站都是怎麼寫？

在了解這個標籤之前，我查找了各個主流網站他們的對於Meta的設置，如下：

京東首頁的Meta設定：

XML/HTML Code複製內容到剪貼簿

  1. < ;meta charset="gbk">

  3. c1ae703ba03373a107c9446daaff318d

    fc98bc7b61070934722d237ade73e895

    #淘寶首頁的Meta設定：

    XML/HTML Code

    #複製內容到剪貼簿

    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta name="keyword" content="">
    youku首頁的Meta設定：

    XML/HTML Code

    複製內容到剪貼簿

    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
    鬥魚首頁的Meta設定：

    XML/HTML Code複製內容到剪貼簿

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
<meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务，包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />
    騰訊網首頁的Meta設定：

    XML/HTML Code

    複製內容到剪貼簿

    <meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻，事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />
    起點小說網站首頁的Meta設定：#XML/HTML Code複製內容到剪貼簿 #
    <meta name="keywords" content="小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学" />
<meta name="description" content="小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说！ver:071011热门小说:。" />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
<meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
<meta name="application-name" content="起点中文小说网" /   
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />
<meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" />
<meta name="msapplication-task" content="name=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
<meta name="msapplication-task" content="name=读书客户端;action-uri=http://c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico" />
<meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />
<meta name="msapplication-task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
<meta property="qc:admins" content="204236767661141166375" />
    ##快取機制9176adcf7fd21ee70b76b75374dee2d4            #

    name

    name屬性主要用來描述網頁，與之對應的屬性值為content，content中的內容主要方便搜尋引擎機器人查找資訊和分類資訊用的。

    meta詳解

    meta標籤可分為兩大部分：http-equiv和name

    變數

    。

    http-equiv

    ######http-equiv相當於http的檔案頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。 ###############值######描述######範例###########content-type############################## #設定頁面使用的字元集######9420384aed01dccd5f0e414d03fc19e5 ###GB2312時，代表說明網站是採用的編碼是簡體中文；######ISO-8859-1時，代表說明網站是採用的編碼是英文；######UTF-8時，代表世界通用的語言編碼；######PS：html5頁面的做法是直接使用9d54027d814bba7a6c118810bbc6025d###
    X-UA-Compatible IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分相容問題。

    daee65cea63af063278cd59ca1e900be

    以上程式碼告訴IE瀏覽器，不管是否用DTD宣告文檔標準，IE8/9都會以IE7引擎來渲染頁面。  
    64772ba68a7b3c2cb16dfcd5517312f2 以上程式碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。  
    d1194aa6a0a1a4debf92ccfbff033ad7 以上程式碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。  
    dc4a9259080a7b94aa663ad18ce92fe0

    以上程式碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以啟動Chrome Frame.

    PS：Google新增一個外掛程式：Google Chrome Frame（Google內嵌瀏覽器框架GCF），這個插件可以讓使用者的IE瀏覽器外不變，但使用者在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支援IE6、7、8等多個版本的IE瀏覽器。

    expires #設定網頁的過期時間。 23c623dc02026f00c9a6d66615d33c48            

    PS：必須使用GMT的時間格式
    refresh 自動刷新並指向新頁面。 91e858456b6d7d90b873e3f50f161421

    PS：2代表頁面停留2秒後跳到後面的網址上
    #set-cookie 如果網頁過期，那麼自動刪除本地cookie。 6109f6aa0b4e46e00a7c19234845c427            

    PS：必須使用GMT的時間格式。

    windows-target 強制頁面在目前視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁呼叫 4ced9d04e0cecdb1f3bdc88aee0a229f
    cache-controlPublic：指示回應可被任何快取區快取。

    Private：指示對於單一使用者的整個或部分回應訊息，不能被共用快取處理。這允許伺服器僅描述當使用者的部分回應訊息，此回應訊息對於其他使用者的請求無效。

    no-cache：指示請求或回應訊息不能快取。

    no-store：用來防止重要的資訊被無意的發布。在請求訊息中發送將使得請求和回應訊息都不使用快取。

    max-age：指示客戶機可以接收存活期不大於指定時間（以秒為單位）的回應。

    min-fresh：指示客戶機可以接收回應時間小於目前時間加上指定時間的回應。

    max-stale：指示客戶機可以接收超出逾時期間的回應訊息。如果指定max-stale訊息的值，那麼客戶機可以接收超出超時期指定值之內的回應訊息。

    ##頁面關鍵字，用於被搜尋引擎收錄91643ef32805b434676185b528489cf3##description#viewport7b65eb39c2e78b3cd4d693ec1c6c5a4brenderer指定雙核心瀏覽器預設以何種方式渲染頁面。 2e3560c4189039010106a5cc9f144b3a//預設webkit核心3150f7dff6100b28b61e71c0f6b7edb6//預設IE相容模式< ;meta name="renderer" content="ie-stand">//預設IE標準模式說明網站的採用的什麼軟體製作#網頁文件的修改時間用來告訴搜尋機器人哪些頁面需要索引，哪些頁面不需要索引。 取值：all|none|index|noindex|follow|nofollow, 預設all#all：檔案將被檢索，且頁面上的連結可以被網站版權資訊#【相關推薦】2. 
    值 描述 範例
    author #標註網頁的作者 3aa60acd2890f76fee63281f4f2502fc
    keywords
    #頁面描述，用於搜尋引擎收錄 3db5cf8f9dcd798ef9a7152b98d15518
    ##用於控制頁面縮放
    PS：360瀏覽器支援

    ##generator
    c3e7fcb2feea10423ee86ce04431c3f3 revised
    977778d49eae572891a44f1ba8b78541 robots
    f096ca23467acc0c49d4be72525ecad0 查詢

    ;

    none：檔案將不會被檢索，且頁面上的連結不可以被查詢；index：檔案將會被檢索；

    follow：頁面上的連結可以被查詢；

    noindex：檔案將不會被檢索，但頁面上的連結可以被查詢；

    nofollow：檔案將不會被檢索，頁面上的連結可以被查詢。

    copyright

    1. 

    Html免費影片教學
    分享一個關於HTML知識點的整合

    #3. 解決div被iframe遮住的多種情況

    #4. 

    教你如何在html中插入連結

    5. 教你怎麼在nodejs下解析html

    #

以上是html中關於meta標籤的實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：分享一個關於HTML知識點的整合下一篇：分享一個關於HTML知識點的整合

相關文章

看更多