SEO 優化部分
頁面標題<title>標簽(head 頭部必須)
<title>your title</title>
頁面關鍵詞 keywords
<meta name="keywords" content="your keywords">
頁面描述內容 description
<meta name="description" content="your description">
定義網頁作者 author
<meta name="author" content="author,email address">
定義網頁搜索引擎索引方式，robotterms 是一組使用英文逗號「,」分割的值，通常有如下幾種取值：none，noindex，nofollow，all，index和follow。
<meta name="robots" content="index,follow">
百度禁止轉碼
通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你的身上貼狗皮膏葯的廣告，為此可在 head 內添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
link 標簽
說到 link 標簽，估計大家的第一反應和我一樣，就是引入外部CSS樣式文件的，不錯，這是 link 標簽最最常用的功能。不過它還有很多別的用處，比如這是瀏覽器 favicon 圖標，touch圖標等等。
<!-- 有助於防止出現內容重復的問題 -->
<link rel="canonical" href="https://example.com/2010/06/9-things-to-do-before-entering-social-media.html">
<!-- 之前用於包含 icon 鏈接，但已被廢棄並不再使用 -->
<link rel="shortlink" href="https://example.com/?p=42">
<!-- 鏈接到當前文檔的一個 AMP HTML 版本 -->
<link rel="amphtml" href="https://example.com/path/to/amp-version.html">
<!-- 表明一個 CSS 樣式表 -->
<link rel="stylesheet" href="https://example.com/styles.css">
<!-- 鏈接到一個指定 Web 應用程序“安裝”證書的 JSON 文件 -->
<link rel="manifest" href="manifest.json">
<!-- 鏈接到文檔的作者 -->
<link rel="author" href="humans.txt">
<!-- 指向一個適用於鏈接內容的版權申明 -->
<link rel="copyright" href="copyright.html">
<!-- 給出可能的你的另一種語言的文檔位置參考 -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
<!-- 提供了關於作者或其他人的信息 -->
<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">
<!-- 鏈接到一個文檔，包含當前文檔的一個歸檔鏈接 -->
<link rel="archives" href="https://example.com/2003/05/" title="May 2003">
<!-- 鏈接到層次結構中的頂級資源 -->
<link rel="index" href="https://example.com/" title="DeWitt Clinton">
<!-- 給出該文檔的起點 -->
<link rel="start" href="https://example.com/photos/pattern_recognition_1_about/" title="Pattern Recognition 1">
<!-- 引導當前文檔的前述資源序列 -->
<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.">
<!-- 給出一個自我參考 - 當文檔有多個可能的參考時非常有用 -->
<link rel="self" type="application/atom+xml" href="https://example.com/atomFeed.php?page=3">
<!-- 分別是在一系列文件中的第一個、下一個、上一個和最后一個 -->
<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">
<!-- 當使用第三方服務來維護 blog 時使用 -->
<link rel="EditURI" href="https://example.com/xmlrpc.php?rsd" type="application/rsd+xml" title="RSD">
<!-- 當另一個 WordPress 博客鏈接到你的 WordPress 博客或文章時形成一個自動化的評論 -->
<link rel="pingback" href="https://example.com/xmlrpc.php">
<!-- 當你在自己的頁面上鏈接到一個 url 時通知它 -->
<link rel="webmention" href="https://example.com/webmention">
<!-- 加載一個外部的 HTML 文件到當前 HTML 文件中 -->
<link rel="import" href="component.html">
<!-- 打開搜索 -->
<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">
<!-- 預取，預載，預瀏覽 -->
<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="preload" href="image.png" as="image">
<!-- 更多信息：https://css-tricks.com/prefetching-preloading-prebrowsing/ -->
不推薦的link標簽
<link rel="shortcut icon" href="path/to/favicon.ico">
<!-- 沒有用的, 專有的和錯誤的, 詳見 https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/Y_2eFRh9BOs/gULYapoRBwAJ -->
<link rel="subresource" href="styles.css">
rss訂閱
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!-- 添加 RSS 訂閱 -->
favicon 圖標
IE 11, Chrome, Firefox, Safari, Opera支持<link>形式設置：
<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">
注意：對於IE 10及以下版本不支持<link>形式設置，只通過將命名為favicon.ico的文件放置在網站根目錄中實現。
比較詳細的 favicon 介紹可參考：