HTML meta 標簽總結

来源:http://www.cnblogs.com/qjm575632320/archive/2017/05/21/6885203.html
-Advertisement-
Play Games

本文轉載自：http://www.cnblogs.com/lovesong/p/5745893.html meta標簽作用 META標簽是HTML標記HEAD區的一個關鍵標簽，提供文檔字元集、使用語言、作者等基本信息，以及對關鍵詞和網頁等級的設定等，最大的作用是能夠做搜索引擎優化（SEO）。 PS： ...


本文轉載自：http://www.cnblogs.com/lovesong/p/5745893.html

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標簽作用

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

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 微信小程式demo
    微信小程式demo "github地址" 去年小程式剛發佈時特別火，趕潮流做了個demo。感覺小程式開發還是比較簡單的，主要是官方文檔寫得比較好，遺憾的是很多API需要微信認證才能使用。 由於小程式包大小限制在1M以內，所以商品圖片等資源放在了雲上，另外用Nodejs+Express寫了個簡單的AP ...
  • CSS編輯元素的浮動
    1.元素浮動： 1）使用 float:left; 這樣的格式設置元素的浮動方式，屬性值可以是left,right； 2）元素設置為左浮動時，元素將從原區域浮動到瀏覽器的左側頁面；右浮動時，就會附在右側的區域，而且元素是按照第一個元素在右側的第一個位置，依次往左排列； 3）設置了浮動後，該元素相當於直 ...
  • HTML中的元素分類
    HTML中有很多的標簽（元素），可以按照這些元素在網頁中所占的空間情況進行分類。具體可以這樣簡單的分類： 1.塊級元素：指的是在網頁中該元素獨自占據網頁的一行顯示區域，即當使用了該元素後，該元素會使下一個元素在下一行展示，也就是產生換行；根據資料的定義是：標簽的display屬性值為block； 2 ...
  • 基於express+mongodb+pug的博客系統——後臺篇
    上一篇介紹了模板引擎pug.js的用法，這一篇就主要寫後臺邏輯了。 後臺的大部分的功能都有了，只是在已經登錄的狀態下，前臺和後臺的邏輯處理還不是很完善。 先上幾張圖吧，仿舊版的簡書，改了下UI，因為沒有簡書那麼多內容，所以沒必要完全做成一樣的。 1.項目結構 app.js 是整個工程的入口 mode ...
  • DOM事件第二彈（UIEvent事件）
    此文章主要總結UIEvent相關的事件，如有不對的地方，歡迎指正。 一、uitls.js(綁定事件公共類) 主要做一些事件名的相容性處理。 二、baseEvent 2.1 相容點 2.2 一些代碼 三、焦點事件 不是所有的標簽都支持焦點事件，如div（不可編輯狀態）、span、p等這類佈局和顯示內容 ...
  • 從零開始學習html（十四）單位和值
    一、顏色值 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>顏色值</title> 6 <style type="text/css"> 7 8 </style> 9 </head> 10 11 <body> ...
  • JS閉包總結
    閉包: 有權訪問另一個函數作用域中變數的函數 用處: 1 讀取函數內部的變數 2 讓某些變數的值始終保持在記憶體中 在瞭解閉包之前，我們需要明白變數的作用域，即函數內部能夠讀取全局變數,但是函數外卻不能讀取函數內的局部變數 1 當使用閉包訪問局部變數 此時f2就是閉包 2 累加 2.1 使用全局變數累 ...
  • ·DIV CSS3處理元素重疊
    使用top和left屬性可能會造成元素相互重疊在一起，此時可以使用z-index屬性。z-index屬性用來控制重疊元素的顯示順序，值較高的元素將覆蓋值較低的元素。如果使用值-1，則表示元素將至於頁面預設文本的後面，這對於設置背景圖案是很有用的。如果把電腦屏幕看作X-Y平面的話，那麼z軸就是垂直於屏 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類