Skip to content

Instantly share code, notes, and snippets.

@faruzzy
Forked from liuyanghejerry/index.html
Created May 22, 2017 17:04
Show Gist options
  • Save faruzzy/96f33576eda40c6810b7e1600aba0bba to your computer and use it in GitHub Desktop.
Save faruzzy/96f33576eda40c6810b7e1600aba0bba to your computer and use it in GitHub Desktop.
Modern index file in 2017
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment