-
-
Save liuyanghejerry/0ba882bcd364fe4ff960a1924c15b16a to your computer and use it in GitHub Desktop.
| <!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 +1
@gotofritz +1
@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]-->
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.
@gotofritz I see your point here. But the truth is there are still many sites using this.
@Nilloc Good catch.
@joejoinerr Thanks for mentioning this. Updated.
So I've only mainly worked on intranet front-end sites. What's the joke around the <meta name="keywords" content="key, words, something">?
The joke is meta[name=keywords] has been obsolete for at least ten years.
Thinking about it twice, I decided to comment the keywords tag and discouraging people using it.
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">.
@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?
@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
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.
@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.
Updated. Added format-detection meta.
Updated again. AMP entry is added.
Did you say 2017...?