Web前端開發最佳實踐（4）：在頁面中添加必要的meta信息

時間 2019-11-14

標籤 web 前端開發最佳實踐頁面添加必要 meta 信息欄目 HTML 简体版

原文原文鏈接

meta標籤放置在HTML頁面的head中，主要用於標識網站。其中基本上包含了網站的一些描述信息，例如，簡介、做者等。這些信息有助於搜索引擎更準確地識別網頁的內容，也有助於第三方工具抓取網站基本信息。html

按照W3C的標準介紹，<meta>標籤有四個屬性：name、http-equiv、content和charset。<meta>標籤經過name屬性來表述頁面文檔的元信息，經過http-equiv屬性設置HTTP請求指令，經過charset設置頁面的字符編碼。因此從屬性設置分類，meta能夠分三類：前端

1. name屬性和content屬性組合，構成名稱/值對，用於描述網站信息

這是標籤最主要的功能，使用普遍。標準的meta名稱包括：application-name、author、description、generator等。
示例代碼：chrome

<!—頁面關鍵字-->
<meta name="keywords" content="british,type face,font,fonts" />

此類型meta使用最普遍，其中，又屬keywords和description這兩個名稱的使用率最高，是搜索引擎優化的主要手段之一，推薦你們使用。設置keywords和description這兩個meta時，儘可能使用簡潔和語義明確的詞語，下面的示例展現的是BBC新聞網站設置的application-name、keywords和description對應的meta信息：瀏覽器

<meta name="application-name" content="BBC"/>
<meta name="description" content="Breaking news, sport, TV, radio and a whole lot more. The BBC informs, educates and entertains - wherever you are, whatever your age." />
<meta name="keywords" content="BBC, bbc.co.uk, bbc.com, Search, British Broadcasting Corporation, BBC iPlayer, BBCi" />

2. http-equiv屬性和content屬性組合，設置特定的HTTP指令

根據W3C制定的HTML5規範，指令型meta總共有5種，其中content-type、default-style和refresh已經肯定，content-language和set-cookie還未正式肯定。cookie

示例代碼：app

<!—頁面加載5分鐘後刷新-->
<meta http-equiv="refresh" content="300" />

此類型meta應該謹慎使用。<meta http-equiv="content-type">可使用下面介紹的更簡潔的方式代替。不推薦使用<meta http-equiv="refresh">，某些搜索引擎遇到此meta時會中止解析頁面剩餘的部分。在實際的場景中不多使用。工具

3. charset屬性，設置頁面字符編碼。

此屬性功能單一，提供了一種保存和傳輸文檔的編碼格式。優化

<!—聲明文檔爲UTF-8格式-->
<meta charset="utf-8">
這是在HTML5中新加入的meta類型，在HTML5的規範中，以下兩種頁面編碼設置是等價的：
<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
<meta charset='utf-8'>

代碼中的第二種形式更簡潔好記，而且獲得了全部主流瀏覽器的支持（尤爲是IE八、IE7和IE6），因此不存在瀏覽器兼容問題，推薦在設置頁面編碼時使用。爲了讓瀏覽器能準確失敗編碼格式，務必在<title>標籤以前設置charset，保證標題能正確顯示。示例以下：網站

<head>
    <meta charset="utf-8">
    <title>My home page</title>
</head>

以上介紹了三種規範中定義的meta格式，若是想要了解更詳細的內容，能夠參考W3C的規範，規範中很詳細地描述了meta的種類及其做用。ui

除了規範中定義的這些meta以外，還有大量的自定義meta類型。這些meta類型主要是有互聯網公司或者瀏覽器廠商爲了實現特定的功能而定製的，W3C規範中允許自定義meta類型，但爲了防止自定義的meta名稱重複，因此全部的自定義meta應該事先註冊。目前已經有不少註冊的自定義meta，以及一些廠商自定義名稱和自定義的指令。這些自定義的meta並不能經過W3C提供的標準校驗，但並非說這些meta不標準。下面介紹一些經常使用的meta。

1 設置IE瀏覽器的兼容模式

從IE8瀏覽器開始支持一種設置頁面兼容模式的meta類型，示例代碼以下：

<meta http-equiv="X-UA-Compatible" content="IE=8"/>

根據HTML規範，瀏覽器是按照頁面開頭定義的文檔類型來解析頁面的。好比，使用HTML5的文檔類型聲明：

<!DOCTYPE html>

IE就會以標準模式解析HTML文檔。可是某些已有頁面因爲各類緣由不能在最新標準模式下正確顯示，只支持特定的標準。針對這種情況，IE瀏覽器提供了一種兼容的方案，經過設置X-UA-Compatible指定頁面在IE瀏覽器中渲染時執行的標準。在IE瀏覽器中，此設置的優先級高於經過DOCTYPE設置的文檔標準。有關此meta的具體使用方式可參考微軟網站中的相關介紹。在實際的項目中應該謹慎使用此方式，當在IE瀏覽器中出現兼容問題時，最好的作法是修改頁面，編寫規範的HTML代碼，讓頁面支持最新的標準，而不是設置IE的兼容模式。

此設置還有一種常見的設置值，即：

<meta http-equiv="X-UA-Compatible" content="chrome=1">

很迷惑吧，IE定義的meta爲啥會出現chrome呢？其實設置爲chrome=1時，則會在IE9及如下瀏覽器中激活Chrome Frame ，強制IE使用Chrome Frame渲染頁面。

2. 設置頁面在移動設備中的顯示

通常針對移動設備優化的網頁都會添加以下一條mata設置，使得網頁在移動設備中顯示正常，設置的代碼相似以下的代碼語句：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

3. 設置IE瀏覽器的「固定網站」功能

這是IE瀏覽器的獨有功能，是從IE9開始支持的，它可以將網站如同應用程序同樣固定在Windows Vista及以上版本系統的任務欄中，而且在點擊圖標後顯示網站相關的菜單列表。此功能能夠經過定義網頁meta來實現，以下代碼用於展現人人網首頁中添加的meta定義：

<meta name="msapplication-task" content="name=新鮮事;action-uri=http://www.renren.com/home;icon-uri=http://a.xnimg.cn/n/res/icons/newsfeed.ico" />
<meta name="msapplication-task" content="name=日誌;action-uri=http://blog.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/blog.ico" />
<meta name="msapplication-task" content="name=相冊;action-uri=http://photo.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/photo.ico" />
<meta name="msapplication-task" content="name=音樂;action-uri=http://music.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/music.ico" />
<meta name="msapplication-task" content="name=分享;action-uri=http://share.renren.com;icon-uri=http://a.xnimg.cn/n/res/icons/share.ico" />
<meta name="msApplication-ID" content="App" />
<meta name="msApplication-PackageFamilyName" content="57722RenRenpreview.RenrenHD_fknrsfzqca1jw" />

添加到系統的任務欄後的效果如圖3-7所示，能夠看到在圖標上點擊右鍵後彈出的菜單中包含有五項定義的菜單項，點擊這些菜單項則能夠跳轉到對應的頁面中：