sea_ljf

<head> 速查表

sea_ljf · 2017-05-20翻译 · 863阅读 原文链接

内容索引

基础标签

对于一个页面来说,(在<head>内)最起码要有以下标签:

&lt;meta charset="utf-8"&gt;
&lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;

&lt;title&gt;Page Title&lt;/title&gt;

Elements


&lt;title&gt;Page Title&lt;/title&gt;


&lt;base href="https://example.com/page.html"&gt;


&lt;link rel="stylesheet" href="styles.css"&gt;


&lt;style&gt;
  /* ... */
&lt;/style&gt;


``&lt;script src="script.js"&gt;``&lt;/script&gt;
&lt;noscript&gt;&lt;/noscript&gt;

meta标签

&lt;meta charset="utf-8"&gt; 
&lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;



&lt;meta http-equiv="Content-Security-Policy" content="default-src 'self'"&gt;




&lt;meta name="application-name" content="Application Name"&gt;



&lt;meta name="description" content="A description of the page"&gt;


&lt;meta name="robots" content="index,follow,noodp"&gt;
&lt;meta name="googlebot" content="index,follow"&gt;


&lt;meta name="google" content="nositelinkssearchbox"&gt;


&lt;meta name="google" content="notranslate"&gt;


&lt;meta name="google-site-verification" content="verification_token"&gt;


&lt;meta name="generator" content="program"&gt;


&lt;meta name="subject" content="your website's subject"&gt;


&lt;meta name="rating" content="General"&gt;


&lt;meta name="referrer" content="no-referrer"&gt;



&lt;meta name="format-detection" content="telephone=no"&gt;


&lt;meta http-equiv="x-dns-prefetch-control" content="off"&gt;


&lt;meta http-equiv="set-cookie" content="name=value; expires=date; path=url"&gt;


&lt;meta http-equiv="Window-Target" content="_value"&gt;


&lt;meta name="ICBM" content="latitude, longitude"&gt;
&lt;meta name="geo.position" content="latitude;longitude"&gt;
&lt;meta name="geo.region" content="country[-state]"&gt;
&lt;meta name="geo.placename" content="city/town"&gt;

不推荐使用的meta标签

以下meta标签属性,由于使用率较低或已经过时等原因,不推荐使用:


&lt;meta name="keywords" content="your,keywords,here,comma,separated,no,spaces"&gt;

&lt;meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm"&gt;


&lt;meta name="reply-to" content="email@example.com"&gt;


&lt;meta name="author" content="name, email@example.com"&gt;
&lt;meta name="designer" content=""&gt;
&lt;meta name="owner" content=""&gt;


&lt;meta name="revisit-after" content="7 days"&gt;



&lt;meta http-equiv="refresh" content="300; url=https://example.com/"&gt;


&lt;meta name="topic" content=""&gt;


&lt;meta name="summary" content=""&gt;


&lt;meta name="classification" content="business"&gt;


&lt;meta name="identifier-URL" content="https://example.com/"&gt;


&lt;meta name="category" content=""&gt;


&lt;meta name="coverage" content="Worldwide"&gt;


&lt;meta name="distribution" content="Global"&gt;


&lt;meta http-equiv="Pics-label" content="value"&gt;



&lt;meta http-equiv="Expires" content="0"&gt;
&lt;meta http-equiv="Pragma" content="no-cache"&gt;
&lt;meta http-equiv="Cache-Control" content="no-cache"&gt;


&lt;link rel="stylesheet" href="https://example.com/styles.css"&gt;


&lt;link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html"&gt;


&lt;link rel="shortlink" href="https://example.com/?p=42"&gt;


&lt;link rel="amphtml" href="https://example.com/path/to/amp-version.html"&gt;


&lt;link rel="manifest" href="manifest.json"&gt;


&lt;link rel="author" href="humans.txt"&gt;


&lt;link rel="copyright" href="copyright.html"&gt;


&lt;link rel="alternate" href="https://es.example.com/" hreflang="es"&gt;


&lt;link rel="me" href="https://google.com/profiles/thenextweb" type="text/html"&gt;
&lt;link rel="me" href="mailto:name@example.com"&gt;
&lt;link rel="me" href="sms:+15035550125"&gt;


&lt;link rel="archives" href="https://example.com/archives/"&gt;


&lt;link rel="index" href="https://example.com/"&gt;


&lt;link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3"&gt;


&lt;link rel="first" href="https://example.com/atomFeed.php"&gt;
&lt;link rel="next" href="https://example.com/atomFeed.php?page=4"&gt;
&lt;link rel="prev" href="https://example.com/atomFeed.php?page=2"&gt;
&lt;link rel="last" href="https://example.com/atomFeed.php?page=147"&gt;


&lt;link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD"&gt;


&lt;link rel="pingback" href="https://example.com/xmlrpc.php"&gt;


&lt;link rel="webmention" href="https://example.com/webmention"&gt;


&lt;link rel="import" href="/path/to/component.html"&gt;


&lt;link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title"&gt;


&lt;link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS"&gt;
&lt;link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3"&gt;


&lt;link rel="dns-prefetch" href="//example.com/"&gt;
&lt;link rel="preconnect" href="https://www.example.com/"&gt;
&lt;link rel="prefetch" href="https://www.example.com/"&gt;
&lt;link rel="prerender" href="https://example.com/"&gt;
&lt;link rel="preload" href="image.png" as="image"&gt;

网站图标





&lt;link rel="icon" type="image/png" sizes="16x16" href="/path/to/favicon-16x16.png"&gt;
&lt;link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"&gt;
&lt;link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"&gt;

社交分享相关

Facebook Open Graph 分享协议

&lt;meta property="fb:app_id" content="123456789"&gt;
&lt;meta property="og:url" content="https://example.com/page.html"&gt;
&lt;meta property="og:type" content="website"&gt;
&lt;meta property="og:title" content="Content Title"&gt;
&lt;meta property="og:image" content="https://example.com/image.jpg"&gt;
&lt;meta property="og:description" content="Description Here"&gt;
&lt;meta property="og:site_name" content="Site Name"&gt;
&lt;meta property="og:locale" content="en_US"&gt;
&lt;meta property="article:author" content=""&gt;

Facebook Instant Articles 平台分享协议

&lt;meta charset="utf-8"&gt;
&lt;meta property="op:markup_version" content="v1.0"&gt;


&lt;meta property="fb:article_style" content="myarticlestyle"&gt;

Twitter Cards 分享协议

&lt;meta name="twitter:card" content="summary"&gt;
&lt;meta name="twitter:site" content="@site_account"&gt;
&lt;meta name="twitter:creator" content="@individual_account"&gt;
&lt;meta name="twitter:url" content="https://example.com/page.html"&gt;
&lt;meta name="twitter:title" content="Content Title"&gt;
&lt;meta name="twitter:description" content="Content description less than 200 characters"&gt;
&lt;meta name="twitter:image" content="https://example.com/image.jpg"&gt;

Google+ / Schema.org

&lt;link href="https://plus.google.com/+YourPage" rel="publisher"&gt;
&lt;meta itemprop="name" content="Content Title"&gt;
&lt;meta itemprop="description" content="Content description less than 200 characters"&gt;
&lt;meta itemprop="image" content="https://example.com/image.jpg"&gt;

Pinterest

Pinterest 能阻止用户从你的网站中保存内容, 阻止提示可自定义。

&lt;meta name="pinterest" content="nopin" description="Sorry, you can't save from my website!"&gt;

OEmbed

&lt;link rel="alternate" type="application/json+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=json"
  title="oEmbed Profile: JSON"&gt;
&lt;link rel="alternate" type="text/xml+oembed"
  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&format=xml"
  title="oEmbed Profile: XML"&gt;

浏览器或平台 相关

iOS 相关


&lt;meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT"&gt;


&lt;meta name="format-detection" content="telephone=no"&gt;


&lt;meta name="apple-mobile-web-app-capable" content="yes"&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black"&gt;
&lt;meta name="apple-mobile-web-app-title" content="App Title"&gt;


&lt;link rel="apple-touch-icon" href="/path/to/apple-touch-icon.png"&gt;
&lt;link rel="apple-touch-icon-precomposed" href="/path/to/apple-touch-icon-precomposed.png"&gt;





&lt;link rel="apple-touch-icon" sizes="57x57" href="/path/to/icon@57.png"&gt;
&lt;link rel="apple-touch-icon" sizes="72x72" href="/path/to/icon@72.png"&gt;
&lt;link rel="apple-touch-icon" sizes="114x114" href="/path/to/icon@114.png"&gt;
&lt;link rel="apple-touch-icon" sizes="144x144" href="/path/to/icon@144.png"&gt;


&lt;link rel="apple-touch-startup-image" href="/path/to/startup.png"&gt;


&lt;meta name="apple-itunes-app" content="app-id=APP-ID, app-argument=http/url-sample.com"&gt;
&lt;link rel="alternate" href="ios-app://APP-ID/http/url-sample.com"&gt;

Safari 相关


&lt;link rel="mask-icon" href="/path/to/icon.svg" color="red"&gt;

安卓相关

&lt;meta name="theme-color" content="#E64545"&gt;


&lt;meta name="mobile-web-app-capable" content="yes"&gt;



&lt;meta name="google-play-app" content="app-id=package-name"&gt;
&lt;link rel="alternate" href="android-app://package-name/http/url-sample.com"&gt;

Chrome 相关

&lt;link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID"&gt;


&lt;meta name="google" value="notranslate"&gt;

Google Chrome Mobile (Android)

Chrome 31版本之后,你可以和Safari一样设定网站应用为 “app mode” 。



&lt;link rel="manifest" href="manifest.json"&gt;


&lt;meta name="mobile-web-app-capable" content="yes"&gt;


&lt;link rel="icon" sizes="192x192" href="highres-icon.png"&gt;

IE 相关

&lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
&lt;meta name="skype_toolbar" content="skype_toolbar_parser_compatible"&gt;


&lt;meta name="msapplication-tap-highlight" content="no"&gt;


&lt;meta name="application-name" content="Sample Title"&gt;
&lt;meta name="msapplication-tooltip" content="A description of what this site does."&gt;
&lt;meta name="msapplication-starturl" content="http://example.com/index.html?pinned=true"&gt;
&lt;meta name="msapplication-navbutton-color" content="#FF3300"&gt;
&lt;meta name="msapplication-window" content="width=800;height=600"&gt;
&lt;meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico"&gt;
&lt;meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico"&gt;
&lt;meta name="msapplication-badge" value="frequency=NUMBER_IN_MINUTES;polling-uri=http://example.com/path/to/file.xml"&gt;
&lt;meta name="msapplication-TileColor" content="#FF3300"&gt;
&lt;meta name="msapplication-TileImage" content="/path/to/tileimage.jpg"&gt;

&lt;meta name="msapplication-config" content="http://example.com/browserconfig.xml"&gt;
&lt;meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile;polling-uri2=http://example.com/livetile2"&gt;
&lt;meta name="msapplication-task-separator" content="1"&gt;


&lt;meta property="al:ios:url" content="applinks://docs"&gt;
&lt;meta property="al:ios:app_store_id" content="12345"&gt;
&lt;meta property="al:ios:app_name" content="App Links"&gt;

&lt;meta property="al:android:url" content="applinks://docs"&gt;
&lt;meta property="al:android:app_name" content="App Links"&gt;
&lt;meta property="al:android:package" content="org.applinks"&gt;

&lt;meta property="al:web:url" content="http://applinks.org/documentation"&gt;

中国浏览器相关

360


&lt;meta name="renderer" content="webkit|ie-comp|ie-stand"&gt;

QQ


&lt;meta name="x5-orientation" content="landscape/portrait"&gt;

&lt;meta name="x5-fullscreen" content="true"&gt;

&lt;meta name="x5-page-mode" content="app"&gt;

UC


&lt;meta name="screen-orientation" content="landscape/portrait"&gt;

&lt;meta name="full-screen" content="yes"&gt;

&lt;meta name="imagemode" content="force"&gt;

&lt;meta name="browsermode" content="application"&gt;

&lt;meta name="nightmode" content="disable"&gt;

&lt;meta name="layoutmode" content="fitscreen"&gt;

&lt;meta name="wap-font-scale" content="no"&gt;

小窍门

性能

当使用 GZIP 压缩时,将 href 属性移至最前可提供压缩比率,这是由于 href 属性会用于 a, baselink 标签。

例如:

`&lt;link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet"&gt;`

其他资源

相关项目

译者sea_ljf尚未开通打赏功能

相关文章