|
<!DOCTYPE html> |
|
<html prefix="og: http://ogp.me/ns#"> |
|
|
|
<head> |
|
<!-- content-type, which overrides http equivalent header. Because of charset, this meta should be set at first. --> |
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
|
<!-- Overrides http equivalent header. This tells IE to use the most updated engine. --> |
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> |
|
<!-- Tells crawlers how to crawl this page, and the role of this page. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta --> |
|
<meta name="robots" content="index, follow"> |
|
<!-- One of the microformats. http://microformats.org/wiki/rel-home --> |
|
<link rel="home" href="/"> |
|
<!-- Page generator if your html file is generated by machine. --> |
|
<meta name="generator" content="My bare hands"> |
|
<!-- Probably the most well-known meta, but most of the search engine has abandon this tag. Avoid using this if possible. --> |
|
<!-- <meta name="keywords" content="key, words, something"> --> |
|
<!-- Defines a favicon which shows in address bar of desktop browsers. Most of the mobile browsers have no place to show it though. --> |
|
<link rel="shortcut icon" href="/favicon.ico"> |
|
<!-- Pretty similar to the one above. But gives size and png is also valid here. --> |
|
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192"> |
|
<!-- iPhone stuff. This will be used as icon if you save this page as Web Clip. --> |
|
<!-- Most of the icon things are described on https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html --> |
|
<!-- -precomposed suffix indicates the image should not be added effects again. --> |
|
<!-- For third-generation iPad with high-resolution Retina display. --> |
|
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/image.png"> |
|
<!-- For iPhone with high-resolution Retina display. --> |
|
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/image.png"> |
|
<!-- For first- and second-generation iPad. --> |
|
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/image.png"> |
|
<!-- Fallback for ones above. For non-Retina iPhone, iPod Touch, and Android 2.1+ devices. --> |
|
<link rel="apple-touch-icon-precomposed" href="/image.png"> |
|
<!-- suffix-free one. --> |
|
<link rel="apple-touch-icon" sizes="180x180" href="/image.png"> |
|
<!-- For launch screen. --> |
|
<link rel="apple-touch-startup-image" href="/launch.png"> |
|
<!-- And you can also add a title for launch screen icon. --> |
|
<meta name="apple-mobile-web-app-title" content="AppTitle"> |
|
<!-- If your site is a webapp, put this to make it even more like a native app. --> |
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
<!-- You may change the status bar. --> |
|
<meta name="apple-mobile-web-app-status-bar-style" content="black"> |
|
<!-- Android Chrome manifest. Does the similar things compared to those apple stuff. https://developer.chrome.com/multidevice/android/installtohomescreen --> |
|
<link rel="manifest" href="manifest.json"> |
|
<!-- Open Search hint. This will be used in Chrome's omni bar if you press tab when focus on this site. http://www.opensearch.org/Specifications/OpenSearch/1.1 --> |
|
<link rel="search" type="application/opensearchdescription+xml" href="/search-api" title="Site Name"> |
|
<!-- Hint for RSS feed. https://developer.mozilla.org/en-US/docs/Web/RSS/Getting_Started/Syndicating --> |
|
<link rel="alternate" type="application/rss+xml" title="Site Name" href="/rss"> |
|
<!-- Hint for Atom feed. People are using this, but I don't see any reliable source of this. --> |
|
<link rel="alternate" type="application/atom+xml" title="Site Name" href="/atom"> |
|
<!-- Tag for AMP project entry. If you have a AMP version of your site, put this to other pages. https://www.ampproject.org/ --> |
|
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> |
|
<!-- set rules only for IE. --> |
|
<!--[if lt IE 9]> |
|
<link rel="stylesheet" type="text/css" href="no-ie.css" /> |
|
<![endif]--> |
|
<!-- Provides a JSON description of this page. --> |
|
<link rel="alternate" type="application/json" href="https://example.com/page.json"> |
|
<!-- The most canonical version of this page. Helps SEO. https://moz.com/blog/canonical-url-tag-the-most-important-advancement-in-seo-practices-since-sitemaps --> |
|
<link rel="canonical" href="https://example.com/page"> |
|
<!-- Other languages of this page. --> |
|
<link rel="alternate" hreflang="zh-CN" href="https://example.com/zh-CN/page" title="内容"> |
|
<!-- Also overrides http equivalent header, for CSP rules. https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --> |
|
<meta http-equiv="Content-Security-Policy" content="default-src localhost:8080 localhost:8080 *.example.com 'self' 'unsafe-inline' 'unsafe-eval' data:;"> |
|
<!-- http equivalent header. This will protect your referrer from being abused or leaked. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy --> |
|
<meta http-equiv="Referrer-Policy" content="same-origin"> |
|
<!-- viewport, this tells mobile browsers how to scale page content. https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag --> |
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"> |
|
<!-- Disable telephone number auto detection. This is optional, depends on your willingness. http://stackoverflow.com/questions/28027330/html-email-ios-format-detection --> |
|
<meta name="format-detection" content="telephone=no"> |
|
<!-- Other formats. Also optional. --> |
|
<meta name="format-detection" content="date=no"> |
|
<meta name="format-detection" content="address=no"> |
|
<meta name="format-detection" content="email=no"> |
|
<!-- Preload image if possible. https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/ --> |
|
<link rel="preload" href="//example.com/preload.png" as="image" crossorigin> |
|
<!-- Metas for OpenGraph protocol. Mainly about how to share this page via social networks. http://ogp.me/ --> |
|
<meta property="og:title" content="Title"> |
|
<meta property="og:type" content="something.page"> |
|
<meta property="og:url" content="https://example.com"> |
|
<meta property="og:image" content="https://example.com/preview.jpg"> |
|
<!-- Metas for Twitter share. --> |
|
<meta name="twitter:url" content="https://example.com"> |
|
<meta name="twitter:title" content="Title"> |
|
<!-- Stylesheet resource protected by Subresource Integrity. https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity --> |
|
<link crossorigin="anonymous" href="https://example.com/resource" integrity="sha256-17GUFcEII0uRrKwNDAIJHIYJk8E2h6dX7jRcwezTqdE=" media="all" rel="stylesheet"> |
|
<!-- Finally, title. --> |
|
<!-- But actually there are even more meta extensions: https://wiki.whatwg.org/wiki/MetaExtensions --> |
|
<title>Sample HTML index file</title> |
|
</head> |
|
<body> |
|
</body> |
|
|
|
</html> |