html meta標簽使用總結

来源:http://www.cnblogs.com/lovesong/archive/2016/08/07/5745893.html
-Advertisement-
Play Games

meta標簽作用 META標簽是HTML標記HEAD區的一個關鍵標簽，提供文檔字元集、使用語言、作者等基本信息，以及對關鍵詞和網頁等級的設定等，最大的作用是能夠做搜索引擎優化（SEO）。 PS：便於搜索引擎機器人查找、分類，互聯網應用應該要註意。 大網站都是怎麼寫？ 在瞭解這個標簽之前，我查找了各個 ...


meta標簽作用

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

PS：便於搜索引擎機器人查找、分類，互聯網應用應該要註意。

大網站都是怎麼寫？

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

京東首頁的Meta設置：

<meta charset="gbk">
<meta name="description" content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數位通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!">
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數位,配件,手錶,存儲卡,京東">

淘寶首頁的Meta設置：

<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設置：

<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設置：

<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設置：

<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設置：

<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" />

meta詳解

meta標簽可分為兩大部分：http-equiv和name變數。

http-equiv

http-equiv相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。

值 描述 例子
content-type 設定頁面使用的字元集 
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
GB2312時，代表說明網站是採用的編碼是簡體中文； ISO-8859-1時，代表說明網站是採用的編碼是英文； UTF-8時，代表世界通用的語言編碼； PS：html5頁面的做法是直接使用<meta charset="utf-8"/>
X-UA-Compatible IE8的專用標記，用來指定IE8瀏覽器去模擬某個特定版本的IE瀏覽器的渲染方式，以此來解決部分相容問題。 
<meta http-equiv="X-UA-Compatible" content="IE=7">
以上代碼告訴IE瀏覽器，無論是否用DTD聲明文檔標準，IE8/9都會以IE7引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=8">
以上代碼告訴IE瀏覽器，IE8/9都會以IE8引擎來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代碼告訴IE瀏覽器，IE8/9及以後的版本都會以最高版本IE來渲染頁面。  
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
以上代碼IE=edge告訴IE使用最新的引擎渲染網頁，chrome=1則可以激活Chrome Frame. PS：谷歌添加一個插件：Google Chrome Frame（谷歌內嵌瀏覽器框架GCF），這個插件可以讓用戶的IE瀏覽器外不變，但用戶在瀏覽網頁時，實際上使用的是Google Chrome瀏覽器內核，而且支持IE6、7、8等多個版本的IE瀏覽器。
expires 設定網頁的過期時間。 
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
PS：必須使用GMT的時間格式
refresh 自動刷新並指向新頁面。 
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
PS：2代表頁面停留2秒後跳轉到後面的網址上
set-cookie 如果網頁過期，那麼自動刪除本地cookie。 
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
PS：必須使用GMT的時間格式。
windows-target 強制頁面在當前視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁調用 
<meta http-equiv="Window-target" content="_top">
cache-control 緩存機制 
<meta http-equiv="cache-control" content="no-cache">
Public：指示響應可被任何緩存區緩存。 Private：指示對於單個用戶的整個或部分響應消息，不能被共用緩存處理。這允許伺服器僅僅描述當用戶的部分響應消息，此響應消息對於其他用戶的請求無效。 no-cache：指示請求或響應消息不能緩存。 no-store：用於防止重要的信息被無意的發佈。在請求消息中發送將使得請求和響應消息都不使用緩存。 max-age：指示客戶機可以接收生存期不大於指定時間（以秒為單位）的響應。 min-fresh：指示客戶機可以接收響應時間小於當前時間加上指定時間的響應。 max-stale：指示客戶機可以接收超出超時期間的響應消息。如果指定max-stale消息的值，那麼客戶機可以接收超出超時期指定值之內的響應消息。

name

name屬性主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

值 描述 例子
author 標註網頁的作者 
<meta name="author" content="dashen" />
keywords 頁面關鍵詞，用於被搜索引擎收錄 
<meta name="keywords" content="新聞,新聞中心, 新聞頻道">
description 頁面描述，用於搜索引擎收錄 
<meta name="description" content="新聞中心,包含有時政新聞、國內新聞、國際新聞、社會新聞、時事評論、新聞圖片、新聞專題、新聞論壇、軍事、歷史、的專業時事報道門戶網站">
viewport 用於控制頁面縮放 
<meta name="viewport" content="width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no">
詳情可查看：http://www.cnblogs.com/lovesong/p/4355029.html
renderer 指定雙核瀏覽器預設以何種方式渲染頁面。 
<meta name="renderer" content="webkit">//預設webkit內核
<meta name="renderer" content="ie-comp">//預設IE相容模式
<meta name="renderer" content="ie-stand">//預設IE標準模式
PS：360瀏覽器支持
generator 說明網站的採用的什麼軟體製作 
<meta name="generator" content="Microsoft"/>
revised 網頁文檔的修改時間 
<meta name="revised" content="設計網, 6/24/2015"/>
robots 用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。 
<meta name="robots" content="none"/>
取值：all|none|index|noindex|follow|nofollow, 預設all all：文件將被檢索，且頁面上的鏈接可以被查詢； none：文件將不被檢索，且頁面上的鏈接不可以被查詢； index：文件將被檢索； follow：頁面上的鏈接可以被查詢； noindex：文件將不被檢索，但頁面上的鏈接可以被查詢； nofollow：文件將不被檢索，頁面上的鏈接可以被查詢。
copyright 網站版權信息 
<meta name="copyright" content="本頁版權XXX所有。All Rights Reserved" />
 

 

總結

通過大網站對於meta的設置，可以看到常用的有，X-UA-Compatible、keywords、description。

 

參考文獻

1. http://www.haorooms.com/post/html_meta_ds

 

本文為原創文章，轉載請保留原出處，方便溯源，如有錯誤地方，謝謝指正。 本文地址 ：http://www.cnblogs.com/lovesong/p/5745893.html
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript標準參考教材（alpha）--筆記
    一、導論 二、基本語法 1、嚴格來說var a=1與a=1效果不太一樣，delete命令無法刪除前者。 JavaScirpt是一種動態類型語言，也就是說，變數的類型沒有限制，可以賦予各種類型的值。 JavaScript引擎的工作方式是，先解析代碼，獲取所有被聲明的變數，然後再一行一行地運行。中文是合 ...
  • 遞歸
    概念：一種化歸思想，將一個問題轉換為已解決的問題來實現；函數自己直接或間接的調用自己，要有跳出結構求n的m次冪 function power(n,m){ if(m==1)return n; return n*power(n,m-1); }斐波那契數列 1,1,2,3,5,8,13,21,54...帶 ...
  • 對js原型簡單的理解和圖解
    對js原型簡單的理解和圖解 最近在努力的學習js中，今天就抽了個空把自己理解的原型，記下一下在筆記中，以後自己查看，有空在會把原型鏈記錄一下。 1.prototype prototype:是一個函數的屬性，每個函數中都會有一個prototype屬性，這個屬性是一個指針，指向一個對象。 該如何查看pr ...
  • 頁面佈局3
    先分析佈局 我把頁面分為5部分 第一行 一張圖片 第二行 一個p里包含了7個超鏈接 修飾： 第三行 一張圖片 第四行 終於把內容寫完了 修飾： 1 修飾國內新聞和國際新聞 2.修飾小標題 3.修飾p標簽 4.修飾hr 5.修飾國際新聞下麵的文字 我選擇用結構偽類選擇器 選擇p這個類型的第3個p 6. ...
  • html元素溢出問題
    我是一個初識html基礎的菜鳥，讓我感受博客園的大愛吧！ 下麵這個問題是建立在我對html現階段理解的程度上遇到的一個 元素溢出問題，希望能得到老鳥的指點。 問題如下： 希望有對該問題的多種不同解決方案，和網頁佈局建議(希望有乾貨)。 問題2：新手上路，很多企業級前端問題充斥大腦，全是問號，經驗是在 ...
  • 頁面佈局一
    先分析做題思路 一、佈局 1.因為剛剛學到表格佈局，所以首先把頁面劃分為幾個部分 2.經過觀察，發現這個表格可以分為6行，先把table和tr弄好 3、把每一行的元素寫上 （1）第一行 可以分為兩列 第一列：一張圖片 第二列：一行超鏈接（我用p包含），自動換行後，一個輸入框，一個普通按鈕 （2）第二 ...
  • CSS3 一、文本陰影text-shadow屬性
    文本陰影text-shadow屬性特效： 1.右下角陰影，左下角陰影，左上角陰影，右上角陰影 文字效果為： 如果將text-shadow改成：text-shadow:-10px 10px #333 ，就將出現左下角陰影 將text-shadow改成：text-shadow:-10px -10px # ...
  • Nodejs學習資源彙總
    Node.js v6.3.1 Documentation https://nodejs.org/dist/latest-v6.x/docs/api/​ npm官網 https://www.npmjs.com/​ 菜鳥教程nodejs http://www.runoob.com/nodejs/node ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類