Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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>
@gotofritz

This comment has been minimized.

Copy link

commented May 10, 2017

<!--  Probably the most well-known meta. Crucial for SEO. -->
<meta name="keywords" content="key, words, something">

Did you say 2017...?

@defli

This comment has been minimized.

Copy link

commented May 10, 2017

@Peeeep

This comment has been minimized.

Copy link

commented May 10, 2017

@Nilloc

This comment has been minimized.

Copy link

commented May 11, 2017

@gotofritz this too:

<!--  This one is used to disable image toolbar. The toolbar only exists on IE6. https://www.thesitewizard.com/webdesign/imagetoolbar.shtml  -->
  <!--[if IE]>
    <meta http-equiv="imagetoolbar" content="no">
  <![endif]-->
@joejoinerr

This comment has been minimized.

Copy link

commented May 11, 2017

Using a relative URL for the canonical is valid but is really playing with fire. I've seen URLs change here and there with canonicals not updated and pointing to 404s. Best to use absolute here, and for hreflang too if possible.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 11, 2017

@gotofritz I see your point here. But the truth is there are still many sites using this.

@Nilloc Good catch.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 11, 2017

@joejoinerr Thanks for mentioning this. Updated.

@adam-beck

This comment has been minimized.

Copy link

commented May 11, 2017

So I've only mainly worked on intranet front-end sites. What's the joke around the <meta name="keywords" content="key, words, something">?

@Sjeiti

This comment has been minimized.

Copy link

commented May 11, 2017

The joke is meta[name=keywords] has been obsolete for at least ten years.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 11, 2017

Thinking about it twice, I decided to comment the keywords tag and discouraging people using it.

@pcylo

This comment has been minimized.

Copy link

commented May 13, 2017

Locking viewport scale isn't really a good practice, I mean this: <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">.

I believe it would be better to suggest something like: <meta name="viewport" content="width=device-width, initial-scale=1.0">.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 13, 2017

@pcylo Locking viewport scale prevents users accidentally scale the content. IMO, the scaling was introduced because earlier websites were mainly focused on desktop monitors. But now quite a lot sites are considered mobile first.
For people who rely on scaling, zooming tools from their system should do their job. Those tools are designed for this after all. And if letting people scaling pages is a good choice, then why don't native apps do that?

@pcylo

This comment has been minimized.

Copy link

commented May 13, 2017

@liuyanghejerry Sorry, I don't really agree with that. Locking viewport is just one of the bad practices based on the assumption, that you know better how your users want to display content. Forcing to disable useful browser feature without any real reason leads to anti-user design. Personally I think it's just silly, similar to disabling right-click menu. Leaving choice to users doesn't mean breaking the "mobile first" approach - actually it's even opposite, of course as long as you define the initial scale properly.

Just think about it from the other perspective - what does it actually give you to lock the viewport? Nothing I guess... There has been many words said about it, here's a sample article which I completely agree with: http://adrianroselli.com/2015/10/dont-disable-zoom.html

@StevenBlack

This comment has been minimized.

Copy link

commented May 15, 2017

Completely agree with @pcylo: Locking viewport scale isn't good practice.

Don't agree? Get back to me in a few years, let your eyesight degenerate a bit.

So many people with poor eyesight can't use your sites because of craven viewport scale locking.

Protip: the iCab mobile browser has a setting to ignore viewport scale locking. All browsers should have such a setting.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 15, 2017

@pcylo @StevenBlack Updated, thank you. The article helped a lot on getting me understand the process of deprecating viewport locking. I also visited some large sites, and they don't lock viewport anymore.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 15, 2017

Updated. Added format-detection meta.

@liuyanghejerry

This comment has been minimized.

Copy link
Owner Author

commented May 15, 2017

Updated again. AMP entry is added.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.