Curated Sample HEAD #51

TraderStf · 2016-04-28T09:43:23Z

Here is an example of a curated HEAD.
I will give some explanations later or check the respective sites, twitter, fb

NOTE

html5, quotes are no more required unless special chars : = ; / (script-type neither)
the order of the first line is important for some problematic search engines
not all tags are required for twitter, twitter can understand some usual one or og:
some twitter content are without a dot!
for the icon, that's totally crazy, the block is curated, ~1 year ago, some usual are not missing, order is very important as some are omitted intentionally, I'll try to find the site to produce and the explanations, need to be enhanced as MS 10 has new one.
and for SEO, length, type, etc of the contents are important

<!doctype html>
<html lang=fr prefix="og: http://ogp.me/ns#">
<head>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">
<meta http-equiv=content-type content="text/html;charset=utf-8">

<title>Stop wasting paper</title>
<meta name=description content="How can we stop wasting paper at the office">
<meta name=keywords content="waste, paper, wasting paper, environment">
<meta name=title content="Stop to waste paper">
<meta name=author content="John Doe">

<meta name=twitter:card content=summary>
<meta name=twitter:site content="@examplecom">
<meta property=og:title content="Stop to waste paper">
<meta property=og:description content="How can we stop wasting paper at the office.">
<meta name=twitter:creator content="@mrjohnnydoe">

<meta property=og:image content="https://www.example.com/apple-touch-icon-180x180.png">
<meta property=og:image:type content="image/png">
<meta property=og:image:width content=180>
<meta property=og:image:height content=180>

<meta property=og:site_name content=example.com>
<meta property=og:url content="https://www.example.com/">
<meta property=og:locale content=fr_FR>
<meta property=og:type content=website>

<meta name=robots content="index,follow">

<link rel=canonical href="https://www.example.com/">

<base href="https://www.example.com/"><!--[if lte IE 6]></base><![endif]-->

<link rel=stylesheet href=mynice.css>

<link rel=apple-touch-icon sizes=57x57 href="/apple-touch-icon-57x57.png">
<link rel=apple-touch-icon sizes=60x60 href="/apple-touch-icon-60x60.png">
<link rel=apple-touch-icon sizes=72x72 href="/apple-touch-icon-72x72.png">
<link rel=apple-touch-icon sizes=76x76 href="/apple-touch-icon-76x76.png">
<link rel=apple-touch-icon sizes=114x114 href="/apple-touch-icon-114x114.png">
<link rel=apple-touch-icon sizes=120x120 href="/apple-touch-icon-120x120.png">
<link rel=apple-touch-icon sizes=144x144 href="/apple-touch-icon-144x144.png">
<link rel=apple-touch-icon sizes=152x152 href="/apple-touch-icon-152x152.png">
<link rel=apple-touch-icon sizes=180x180 href="/apple-touch-icon-180x180.png">
<link rel=icon type="image/png" sizes=16x16 href="/favicon-16x16.png">
<link rel=icon type="image/png" sizes=32x32 href="/favicon-32x32.png">
<link rel=icon type="image/png" sizes=96x96 href="/favicon-96x96.png">
<link rel=icon type="image/png" sizes=194x194 href="/favicon-194x194.png">
<link rel=icon type="image/png" sizes=192x192 href="/android-chrome-192x192.png">
<link rel=manifest href="/manifest.json">
<link rel=mask-icon href="/safari-pinned-tab.svg" color="#ff6600">
<meta name=apple-mobile-web-app-title content=example.com>
<meta name=application-name content=example.com>
<meta name=msapplication-TileColor content="#ffffff">
<meta name=msapplication-TileImage content="/mstile-144x144.png">
<meta name=theme-color content="#ffffff">

</head>
<body>
<p>Hello World!</p>
</body>
</html>

The text was updated successfully, but these errors were encountered:

plexus · 2016-04-29T07:28:23Z

<meta charset=utf-8>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">

Why put both? As I understood it the first version was standardized in HTML5 because it already worked in older browsers, because parsers looking at the second line will just scan until they find "charset=utf-8".

TraderStf · 2016-04-29T07:55:35Z

Bug in old browser, when you know several dozen of percents of users are still under Xp...
I regret I did not keep the references of all these exceptions still required for compatibility.
But for sure, it's required, I made that head very carefully, just for fun.

May be it's not a bug in browsers but also a bug in some servers.

For example, in htaccess you can add
AddDefaultCharset utf-8

About the utf in htaccess, at the time I made this head, google check tool was still crying to have both, one in html and one in htaccess... go figure!
When are we going to have a 'certified browser label' instead of having to deal with all these stupid differences.

plexus · 2016-04-29T08:15:17Z

Seems you're right, just tried this W3C test in a bunch of old and new browsers

https://www.w3.org/International/tests/html-css/generate?test=character-encoding-009

Results:

https://www.browserstack.com/screenshots/a6ba97653b86cab632a9e6d84a117cc91f7b45f9

But surely then you can drop the HTML5 one and just keep the http-equiv version?

TraderStf · 2016-04-29T08:22:39Z

If I kept both, there is a reason. old-browser, server or site-checker.

In the case it was only to make 'well-known' site-checkers happy, it's because some were 'incorrect' and also to make the clients happy to see they are 100% compliant.

TraderStf · 2016-04-29T08:50:07Z

@plexus My head is a summary of all the spaghetti requirements I have found, trying to please all browsers/OS/devices in one single minimum block and to get the best result, e.g. not resize an icon.

Even putting all existing meta/link/equiv... in the head would not always give the good results.
Look at the favicon.
Some browsers will stop at the first icon they can handle and if required resize it, even if a better one is provided later in the head.
That means you have to carefully sort/order the lines to avoid such problem, first-encounter—first-used.

In the same way, some browsers for one OS can handle items of another OS and/or browser.
Once again, you have to pay attention to the order.

With just only these 2 requirements, it's impossible to always provide the best solution in all cases, as a worse icon one can be encountered before the best one.
The always perfect solution would required some kind of if-then-else.
And even with that, you have to add the new ones, look at ms ie 11, some icons are just 2 pixels bigger than those of apple-touch...

Sometimes, I'm wondering how web developers can manage all that mess: css, html,browsers, meta...
Hopefully some libraries, like modernizr, are available.

TraderStf · 2016-04-29T10:18:48Z

Here some extra info restrictions:

http://www.w3.org/TR/html5/document-metadata.html#character-encoding-declaration

The element containing the character encoding declaration must be serialized completely within the first 1024 bytes of the document.

In addition, due to a number of restrictions on meta elements, there can only be one meta-based character encoding declaration per document.

If an HTML document does not start with a BOM, and its encoding is not explicitly given by Content-Type metadata, and the document is not an iframe srcdoc document, then the character encoding used must be an ASCII-compatible character encoding, and the encoding must be specified using a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state.

If an HTML document contains a meta element with a charset attribute or a meta element with an http-equiv attribute in the encoding declaration state, then the character encoding used must be an ASCII-compatible character encoding.

Doooee...

TraderStf · 2016-04-29T10:28:27Z

<link href=mynice.css rel=stylesheet type="text/css" media=all>
the last 2 can be omitted as they are equal to the default values.
<link href=mynice.css rel=stylesheet>

Though need to check if it's compatible, correctly supported by all browsers. Hi M$!

TraderStf · 2016-05-04T08:14:31Z

Updated to put IE on top as recommended, google it, based on @joshbuchea note.
MS sites are with

<head>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1.0">

coliff · 2016-05-23T13:42:53Z

meta name=keywords is not needed AFAIK. I don't think any search engines use that at all.

joshbuchea · 2016-05-23T22:43:01Z

Closing as this is very broad. Thanks for the info & discussion!

TraderStf mentioned this issue Apr 29, 2016

Favicon section is not up-to-date #53

Closed

joshbuchea closed this as completed May 23, 2016

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Curated Sample HEAD #51

Curated Sample HEAD #51

TraderStf commented Apr 28, 2016 •

edited

plexus commented Apr 29, 2016

TraderStf commented Apr 29, 2016 •

edited

plexus commented Apr 29, 2016

TraderStf commented Apr 29, 2016

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented May 4, 2016

coliff commented May 23, 2016

joshbuchea commented May 23, 2016

Curated Sample HEAD #51

Curated Sample HEAD #51

Comments

TraderStf commented Apr 28, 2016 • edited

plexus commented Apr 29, 2016

TraderStf commented Apr 29, 2016 • edited

plexus commented Apr 29, 2016

TraderStf commented Apr 29, 2016

TraderStf commented Apr 29, 2016 • edited

TraderStf commented Apr 29, 2016 • edited

TraderStf commented Apr 29, 2016 • edited

TraderStf commented May 4, 2016

coliff commented May 23, 2016

joshbuchea commented May 23, 2016

TraderStf commented Apr 28, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited

TraderStf commented Apr 29, 2016 •

edited