A list of everything that could go in the <head> of your document

github 原地址：https://github.com/joshbuchea/HEAD（最新版的可能在该地址）

目录

Recommended Minimum

Below are the essential tags for basic, minimalist websites:

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

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

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<title>Page Title</title>

Elements

<!-- Document Title -->

<title>Page Title</title>

<!-- Base URL to use for all relative URLs contained within the document -->

<base href="https://example.com/page.html">

<!-- External CSS -->

<link rel="stylesheet" href="styles.css">

<!-- In-document CSS -->

<style>

  /* ... */

</style>

<!-- JavaScript -->

<script src="script.js"></script>

Meta

<meta charset="utf-8">

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

<!-- Allows control over where resources are loaded from -->

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

<!-- Place as early in the document as possible -->

<!-- Only applies to content below this tag -->

<!-- Name of web application (only should be used if the website is used as an app) -->

<meta name="application-name" content="Application Name">

<!-- Short description of the page (limit to 150 characters) -->

<!-- In *some* situations this description is used as a part of the snippet shown in the search results. -->

<meta name="description" content="A description of the page">

<!-- Control the behavior of search engine crawling and indexing -->

<meta name="robots" content="index,follow,noodp"><!-- All Search Engines -->

<meta name="googlebot" content="index,follow"><!-- Google Specific -->

<!-- Tells Google not to show the sitelinks search box -->

<meta name="google" content="nositelinkssearchbox">

<!-- Tells Google not to provide a translation for this page -->

<meta name="google" content="notranslate">

<!-- Verify ownership for Google Search Console -->

<meta name="google-site-verification" content="verification_token">

<!-- Used to name software used to build the website (i.e. - Wordpress, Dreamweaver) -->

<meta name="generator" content="program">

<!-- Short description of your sites subject -->

<meta name="subject" content="your website's subject">

<!-- Very short sentence describing the purpose of the website -->

<meta name="abstract" content="">

<!-- Describes the topic of the website -->

<meta name="topic" content="">

<!-- Brief summary of the company or purpose of the website -->

<meta name="summary" content="">

<!-- A deprecated tag that does the same as the keywords meta tag -->

<meta name="classification" content="business">

<!-- Full domain name or web address -->

<meta name="url" content="https://example.com/">

<!-- Does the same as URL, older and not supported -->

<meta name="identifier-URL" content="https://example.com/">

<meta name="directory" content="submission">

<!-- Does the same function as the keywords tag -->

<meta name="category" content="">

<!-- Makes sure your website shows up in all countries and languages -->

<meta name="coverage" content="Worldwide">

<!-- Does the same as the coverage tag -->

<meta name="distribution" content="Global">

<!-- Gives a general age rating based on sites content -->

<meta name="rating" content="General">

<!-- Allows control over how referrer information is passed -->

<meta name="referrer" content="never">

<!-- Disable automatic detection and formatting of possible phone numbers -->

<meta name="format-detection" content="telephone=no">

<!-- Geo tags -->

<meta name="ICBM" content="latitude, longitude">

<meta name="geo.position" content="latitude;longitude">

<meta name="geo.region" content="country[-state]"><!-- Country code (ISO 3166-1): mandatory, state code (ISO 3166-2): optional; eg. content="US" / content="US-NY" -->

<meta name="geo.placename" content="city/town"><!-- eg. content="New York City" -->

Meta: Not Recommended

Below are the meta attributes which are not recommended for use:

<!-- Used to declare the document language, but not well supported. Better to use <html lang=""> -->

<meta name="language" content="en">

<!-- Google disregards & Bing considers it an indicator of spam -->

<meta name="keywords" content="your,keywords,here,comma,separated,no,spaces">

<!-- No evidence of current use in any search engines -->

<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm">

<!-- Provides an easy way for spam bots to harvest email addresses -->

<meta name="reply-to" content="email@example.com">

<!-- Better to use <link rel="author"> or humans.txt file -->

<meta name="author" content="name, email@example.com">

<meta name="designer" content="">

<meta name="owner" content="">

<!-- Tells search bots to revisit the page after a period. This is not supported because most Search Engines now use random intervals for re-crawling a webpage -->

<meta name="revisit-after" content="7 days">

<!-- Sends user to a new URL after a certain amount of time -->

<!-- The W3C recommends that this tag not be used. Google recommends using a server-side 301 redirect instead. -->

<meta http-equiv="refresh" content="300; url=https://example.com/">

<!-- Cache Control -->

<!-- Better to configure cache control server side -->

<meta http-equiv="Expires" content="0">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-cache">

Link

<!-- Helps prevent duplicate content issues -->

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

<!-- Used to be included before the icon link, but is deprecated and no longer is used -->

<link rel="shortlink" href="https://example.com/?p=42">

<!-- Links to an AMP HTML version of the current document -->

<link rel="amphtml" href="https://example.com/path/to/amp-version.html">

<!-- Points to a CSS stylesheet -->

<link rel="stylesheet" href="https://example.com/styles.css">

<!-- Links to a JSON file that specifies "installation" credentials for web applications -->

<link rel="manifest" href="manifest.json">

<!-- Links to the author of the document -->

<link rel="author" href="humans.txt">

<!-- Refers to a copyright statement that applies to the links context -->

<link rel="copyright" href="copyright.html">

<!-- Gives a reference to a location in your document that may be in another language -->

<link rel="alternate" href="https://es.example.com/" hreflang="es">

<!-- Gives information about an author or another person -->

<link rel="me" href="https://google.com/profiles/thenextweb" type="text/html">

<link rel="me" href="mailto:name@example.com">

<link rel="me" href="sms:+15035550125">

<!-- Links to a document that contains an archive link to the current document -->

<link rel="archives" href="https://example.com/2003/05/" title="May 2003">

<!-- Links to top level resource in an hierarchical structure -->

<link rel="index" href="https://example.com/" title="DeWitt Clinton">

<!-- Gives the starting point of the document -->

<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">

<!-- Leads to the preceding resource of the sequence the current document is in -->

<link rel="prev" href="https://example.com/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/" title="OpenSearch and OpenID? A sure way to get my attention.">

<!-- Gives a self reference - useful when the document has multiple possible references -->

<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">

<!-- The first, next, previous, and last documents in a series of documents, respectively -->

<link rel="first" href="https://example.com/atomFeed.php">

<link rel="next" href="https://example.com/atomFeed.php?page=4">

<link rel="previous" href="https://example.com/atomFeed.php?page=2">

<link rel="last" href="https://example.com/atomFeed.php?page=147">

<!-- Used when using a 3rd party service to maintain a blog -->

<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">

<!-- Forms an automated comment when another wordpress blog links to your wordpress blog or post -->

<link rel="pingback" href="https://example.com/xmlrpc.php">

<!-- Notifies a url when you link to it on your site -->

<link rel="webmention" href="https://example.com/webmention">

<!-- Loads in an external HTML file into the current HTML file -->

<link rel="import" href="component.html">

<!-- Open Search -->

<link rel="search" href="/open-search.xml" type="application/opensearchdescription+xml" title="Search Title">

<!-- Feeds -->

<link rel="alternate" href="https://feeds.feedburner.com/example" type="application/rss+xml" title="RSS">

<link rel="alternate" href="https://example.com/feed.atom" type="application/atom+xml" title="Atom 0.3">

<!-- Prefetching, preloading, prebrowsing -->

<link rel="dns-prefetch" href="//example.com/">

<link rel="preconnect" href="https://www.example.com/">

<link rel="prefetch" href="https://www.example.com/">

<link rel="prerender" href="https://example.com/">

<link rel="subresource" href="styles.css">

<link rel="preload" href="image.png">

<!-- More info: https://css-tricks.com/prefetching-preloading-prebrowsing/ -->

Link: Not Recommended

Below are the link relations which are not recommended for use:

<link rel="shortcut icon" href="path/to/favicon.ico">

Favicons

<!-- For IE 10 and below -->

<!-- No link, just place a file called favicon.ico in the root directory -->

<!-- For IE 11, Chrome, Firefox, Safari, Opera -->

<link rel="icon" href="path/to/favicon-16.png" sizes="16x16" type="image/png">

<link rel="icon" href="path/to/favicon-32.png" sizes="32x32" type="image/png">

<link rel="icon" href="path/to/favicon-48.png" sizes="48x48" type="image/png">

<link rel="icon" href="path/to/favicon-62.png" sizes="62x62" type="image/png">

<link rel="icon" href="path/to/favicon-192.png" sizes="192x192" type="image/png">

<!-- More info: https://bitsofco.de/all-about-favicons-and-touch-icons/ -->

Social

Facebook / Open Graph

<meta property="fb:app_id" content="123456789">

<meta property="og:url" content="https://example.com/page.html">

<meta property="og:type" content="website">

<meta property="og:title" content="Content Title">

<meta property="og:image" content="https://example.com/image.jpg">

<meta property="og:description" content="Description Here">

<meta property="og:site_name" content="Site Name">

<meta property="og:locale" content="en_US">

<meta property="article:author" content="">

<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->

<!-- Open Graph: http://ogp.me/ -->

Facebook / Instant Articles

<meta charset="utf-8">

<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->

<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->

<meta property="fb:article_style" content="myarticlestyle">

Twitter

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@site_account">

<meta name="twitter:creator" content="@individual_account">

<meta name="twitter:url" content="https://example.com/page.html">

<meta name="twitter:title" content="Content Title">

<meta name="twitter:description" content="Content description less than 200 characters">

<meta name="twitter:image" content="https://example.com/image.jpg">

<!-- More info: https://dev.twitter.com/cards/getting-started -->

<!-- Validate: https://dev.twitter.com/docs/cards/validation/validator -->

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">

<meta itemprop="name" content="Content Title">

<meta itemprop="description" content="Content description less than 200 characters">

<meta itemprop="image" content="https://example.com/image.jpg">

OEmbed

<link rel="alternate" type="application/json+oembed"

  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=json"

  title="oEmbed Profile: JSON">

<link rel="alternate" type="text/xml+oembed"

  href="http://example.com/services/oembed?url=http%3A%2F%2Fexample.com%2Ffoo%2F&amp;format=xml"

  title="oEmbed Profile: XML">

Browsers / Platforms

Apple iOS

<!-- Smart App Banner -->

<meta name="apple-itunes-app" content="app-id=APP_ID,affiliate-data=AFFILIATE_ID,app-argument=SOME_TEXT">

<!-- Disable automatic detection and formatting of possible phone numbers -->

<meta name="format-detection" content="telephone=no">

<!-- Add to Home Screen -->

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="apple-mobile-web-app-title" content="App Title">

<!-- Touch Icons -->

<link rel="apple-touch-icon" href="path/to/apple-touch-icon.png">

<link rel="apple-touch-icon-precomposed" href="path/to/apple-touch-icon-precomposed.png">

<!-- In most cases, one 180×180px touch icon in the head is enough -->

<!-- If you use art-direction and/or want to have different content for each device, you can add more touch icons -->

<!-- Startup Image -->

<link rel="apple-touch-startup-image" href="path/to/startup.png">

<!-- More info: https://developer.apple.com/safari/library/documentation/appleapplications/reference/safarihtmlref/articles/metatags.html -->

Apple Safari

<!-- Pinned Site -->

<link rel="mask-icon" href="path/to/icon.svg" color="red">

Google Android

<meta name="theme-color" content="#E64545">

<!-- Add to homescreen -->

<meta name="mobile-web-app-capable" content="yes">

<!-- More info: https://developer.chrome.com/multidevice/android/installtohomescreen -->

Google Chrome

<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/APP_ID">

<!-- Disable translation prompt -->

<meta name="google" value="notranslate">

Microsoft Internet Explorer

<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta http-equiv="cleartype" content="on">

<meta name="skype_toolbar" content="skype_toolbar_parser_compatible">

<!-- Disable link highlighting on IE 10 on Windows Phone (https://blogs.windows.com/buildingapps/2012/11/15/adapting-your-webkit-optimized-site-for-internet-explorer-10/) -->

<meta name="msapplication-tap-highlight" content="no">

<!-- Pinned sites (https://msdn.microsoft.com/en-us/library/dn255024(v=vs.85).aspx) -->

<meta name="application-name" content="Contoso Pinned Site Caption">

<meta name="msapplication-tooltip" content="Example Tooltip Text">

<meta name="msapplication-starturl" content="/">

<meta name="msapplication-config" content="http://example.com/browserconfig.xml">

<meta name="msapplication-allowDomainApiCalls" content="true">

<meta name="msapplication-allowDomainMetaTags" content="true">

<meta name="msapplication-badge" content="frequency=30; polling-uri=http://example.com/id45453245/polling.xml">

<meta name="msapplication-navbutton-color" content="#FF3300">

<meta name="msapplication-notification" content="frequency=60;polling-uri=http://example.com/livetile">

<meta name="msapplication-square150x150logo" content="path/to/logo.png">

<meta name="msapplication-square310x310logo" content="path/to/largelogo.png">

<meta name="msapplication-square70x70logo" content="path/to/tinylogo.png">

<meta name="msapplication-wide310x150logo" content="path/to/widelogo.png">

<meta name="msapplication-task" content="name=Check Order Status;action-uri=./orderStatus.aspx?src=IE9;icon-uri=./favicon.ico">

<meta name="msapplication-task-seperator" content="1">

<meta name="msapplication-TileColor" content="#FF3300">

<meta name="msapplication-TileImage" content="path/to/tileimage.jpg">

<meta name="msapplication-window" content="width=1024;height=768">

Microsoft Internet Explorer: Legacy, Do Not Use!

<!-- Disable the image toolbar when you mouse over images in IE 6 (https://msdn.microsoft.com/en-us/library/ms532986(v=vs.85).aspx) -->

<meta http-equiv="imagetoolbar" content="no">

<!-- Disable Windows theming to form inputs/buttons (https://support.microsoft.com/en-us/kb/322240) -->

<meta name="MSThemeCompatible" content="no">

<!-- Disable a feature that only appeared on IE 6 beta (https://stackoverflow.com/q/2167301) -->

<meta name="MSSmartTagsPreventParsing" content="true">

<!-- Interpage Transitions (https://msdn.microsoft.com/en-us/library/ms532847(v=vs.85).aspx) -->

<meta http-equiv="Page-Enter" content="revealtrans(duration=2,transition=2)">

<meta http-equiv="Page-Exit" content="revealtrans(duration=3,transition=12)">

<meta http-equiv="Site-Enter" content="revealtrans(duration=2,transition=2)">

<meta http-equiv="Site-Exit" content="revealtrans(duration=3,transition=12)">

App Links

<!-- iOS -->

<meta property="al:ios:url" content="applinks://docs">

<meta property="al:ios:app_store_id" content="12345">

<meta property="al:ios:app_name" content="App Links">

<!-- Android -->

<meta property="al:android:url" content="applinks://docs">

<meta property="al:android:app_name" content="App Links">

<meta property="al:android:package" content="org.applinks">

<!-- Web Fallback -->

<meta property="al:web:url" content="http://applinks.org/documentation">

<!-- More info: http://applinks.org/documentation/ -->

Browsers (Chinese)

360 Browser

<!-- select rendering engine in order -->

<meta name="renderer" content="webkit|ie-comp|ie-stand">

QQ Mobile Browser

<!-- Locks the screen into the specified orientation -->

<meta name="x5-orientation" content="landscape/portrait">

<!-- Display this page in fullscreen -->

<meta name="x5-fullscreen" content="true">

<!-- Page will be displayed in "application mode"(fullscreen,etc.) -->

<meta name="x5-page-mode" content="app">

UC Mobile Browser

<!-- Locks the screen into the specified orientation -->

<meta name="screen-orientation" content="landscape/portrait">

<!-- Display this page in fullscreen -->

<meta name="full-screen" content="yes">

<!-- UC browser will display images even if in "text mode" -->

<meta name="imagemode" content="force">

<!-- Page will be displayed in "application mode"(fullscreen,forbiding gesture, etc.) -->

<meta name="browsermode" content="application">

<!-- Disabled the UC browser's "night mode" in this page -->

<meta name="nightmode" content="disable">

<!-- Simplify the page to reduce data transfer -->

<meta name="layoutmode" content="fitscreen">

<!-- Disable the UC browser's feature of "scaling font up when there are many words in this page" -->

<meta name="wap-font-scale" content="no">

Notes

Performance

Moving the href attribute to the beginning of an element improves compression when GZIP is enabled, because the href attribute is used in a, base and link tags.

Example:

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">

Other Resources

Related Projects

Translations

Contributing

Open an issue or a pull request to suggest changes or additions.

Please follow these steps for pull requests:

  • Modify only one tag, or one related set of tags at a time

  • Use double quotes on attributes

  • Don't include a trailing slash in self-closing elements — the HTML5 spec says they're optional

  • Consider including a link to documentation that supports your change

Contributors

Check out all the super awesome contributors.

Author

Josh Buchea

License

CC0 License

本文转载于:一份你可以在 里设置的列表

一份你可以在 <head> 里设置的列表的更多相关文章

  1. 在Eclipse里设置格式化代码时不格式化注释

    在Eclipse里设置格式化代码时不格式化注释 今天格式化代码 发现直接format会把注释也一块格式化了,有时候会把好好的注释弄的很乱.甚为头疼. 查阅之后解决办法如下: Windows -> ...

  2. [转]在Linux里设置环境变量的方法

    在Linux里设置环境变量的方法(export PATH) 一般来说,配置交叉编译工具链的时候需要指定编译工具的路径,此时就需要设置环境变量.例如我的mips-linux-gcc编译器在“/opt/a ...

  3. 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动用属性:animation-play-state:paused暂停,在微信和safari里设置paused无效,在QQ里是正常的

    这几天遇到了两个很奇葩的问题,终于找到原因,趁还记得解决方法,赶紧记下来: 用css3动画 @keyframes里设置transform:rotate(); 控制动画暂停和运动可以用属性:animat ...

  4. （转）在Linux里设置用户环境变量的方法

    背景:在linux下,root用户安装完jdk后,非root用户不能使用java环境变量. 问题排查: 通过在root和非root用户下分别执行echo $PATH 可以观察环境变量的异同.然后将需要 ...

  5. 如何在BIOS里设置定时关机？

    如何在BIOS里设置定时关机? 通过CMOS设置实现定时开机的设置过程如下: 首先进入"CMOS SETUP"程序(大多数主板是在计算机启动时按DEL键进入): 然后将光条移到&q ...

  6. MVC WebAPI框架里设置异常返回格式统一

    webApi里设置全局异常返回格式今天为了设置api返回格式统一,在网上找了一推资料,各种资料参差不齐的,最后自己捣鼓,终于弄出来了,直接上代码 /// <summary> /// 消息代 ...

  7. canvas里设置width和css里设置width和js里设置width的区别

    canvas.width 和 它的style.width是不一样的: canvas是个画布,有他自己的宽和高(默认是没有单位的纯数字),就是canvas.width和canvas.height的宽和高 ...

  8. cdnbest站点里设置防盗链

    设置需求只允许 test.kangleweb.com 访问  ,其他网站链接全部拒绝 (注:如果test.kangleweb.com是用https访问,那引用的内容地址www447.yivpn.cn也 ...

  9. 在GeoServer里设置图层的默认自定义样式，出现不显示预览图的情况（不起作用）

    在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...

随机推荐

  1. Flask 自建扩展

    自建扩展介绍 Flask扩展分两类 纯功能, 如: Flask-Login 提供用户认证 对已有的库和工具包装(简化继承操作,并提供有用的功能,更方便) 如: Flask-SQLAlchemy 包装了 ...

  2. JZ-065-矩阵中的路径

    矩阵中的路径 题目描述 请设计一个函数,用来判断在一个矩阵中是否存在一条包含某字符串所有字符的路径.路径可以从矩阵中的任意一个格子开始,每一步可以在矩阵中向左,向右,向上,向下移动一个格子.如果一条路 ...

  3. find: `./folder': No such file or directory 错误处理

    这是我正在处理的目录的内容: misha@hp-laptop:~/work/c/5$ ls -l total 8 -rw-rw-r-- 1 misha misha 219 May 20 15:37 d ...

  4. mxnet源码阅读笔记之include

    写在前面 mxnet代码的规范性比Caffe2要好,看起来核心代码量也小很多,但由于对dmlc其它库的依赖太强,代码的独立性并不好.依赖的第三方库包括: cub dlpack dmlc-core go ...

  5. CF1228E题解

    设 \(f_{i,j}\) 为恰好 \(i\) 行 \(j\) 列不满足条件的矩阵个数, \(g_{i,j}\) 为钦定 \(i\) 行 \(j\) 列不满足条件的矩阵个数. 容易得到: \[g_{x ...

  6. 基于selenium实现河海大学自动健康打卡

    0.每日健康打卡有点烦 1.所用方法:selenium:需要下载响应浏览器的webdriver 2.注意事项,我感觉唯一要注意的就是页面跳转以后应该怎么操作了(那个时候困扰了我好几天) 3.相应代码: ...

  7. 如何解决代码中if/else 过多的问题

    前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...

  8. 阿里云镜像站DNS——Chrome配置方法

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 DNS 简介 域名系统(服务)协议(DNS)是一种分布式网络目录服务,主要用于域名与 IP 地址的相互转换,以及控制因特网的电子邮件的发送. 阿 ...

  9. 不借助 Docker Desktop 在Mac上开发容器应用

    镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 Docker Desktop是最为流行的开发者工具,Docker公司在 8/31 宣布对Docker Desktop的用户协议进行了变更,对个人 ...

  10. 模型 _meta API ( options )

    模型 _meta API class Options[源代码] 模型 _meta API是Django ORM的核心.它使系统的其他部分(如查找,查询,表单和管理员)能够了解每个模型的功能. API可 ...