<HEAD>タグ内には、<title>や<meta>、CSSなど様々なタグがありますが、これらの順序はどのように記述すべきでしょうか？
まず一番最初に記載すべき要素についてですが、やはり<title>タグが最初と考えてます。大手メディアなどを参照しても一番先は<title>となっているケースが多いですし、一番最初に書くべきは<title>でほぼ間違いはないでしょう。
この<title>タグに対して、<meta name="description"や<meta name="keywords"などについては無くても機能しますので、titleタグよりも重要度ははるかに劣るものと感じています。特にmetaキーワードについては、各国の主要な検索エンジンでは利用されているケースもあるかもしれませんが、Googleについては既に意味はなくなっているため、記載してもあまりメリットはないかもしれません。
また、descriptionについては、serpで表示された際の使い方がメインになりますし、インデックスが更新されるまでは検索結果では反映されないため、今すぐ直ちに必要なわけでもないはずです。
気をつけるべきはJavascriptですが、先頭の方にこれを書いておくとそこで読み込みが止まるため、できるだけ後の方に持っておくのが一般的かと思います。
また、CSSについては同時に並行して読み込まれますが、ダウンロードするまではレンダリングが始まらないため、今すぐ必要な緊急性という面で考えると、descriptionやkeywordよりも先にCSSを記載すべきとも感じています。また、もしCSSを記載するならば、そのCSSよりも前に<link rel="preload"や<meta name="viewport"の方を先に記載すべきかもしれません。
そのため、個人的にはtitle→viewport→preload→CSS→description→keywordの順番でもありかと思います。
ただ、この「titleとdescription、keyword」の３つについては、昔からセットで記載されてきましたので、「title、description、keywordの３セット」→「viewport、CSS」といった順で記載するのがぶなんかもしれません。
次に、OGPタグを記載するのもデファクトスタンダードとなりつつありますが、こちらも今すぐその場で必要というわけでもありません。
シェアされてからタイムラインで表示されるのに数秒遅れるぐらいでは何の影響もないでしょうし、そもそもシェアされるかどうかも分からないため、OGPタグについては一番最後に記載しておけばよいでしょう。
また、OGPタグの"og:url"についてはURLのカノニカルタグになるため、本家のrelカノニカルの「<link rel="canonical"」については、OGPタグより前に記載するべきかと思います。
また、<link rel="canonical"を記載するならば、その次にAMPページの<link rel="amphtml、ガラケーページの<link rel="alternate" media="handheld"と続けてまとめて記載するのがスマートかもしれません。
まとめますと、「title、description、keyword」→「viewport、CSS」→「canonical、amphtml、handheld」→「OGP関連のタグ」→「Javascript関連」といった順序がよいのではないかと考えてます。
迷いがあるのは、<link rel="icon"ですが、ChromeデベロッパーツールのPerformanceで確認する限り、こちらはonload後の読み込みとなっていたため、レンダリングや読み込みが完了した後で参照されるものと感じています。
アイコン画像はブラウザのタブなどにも表示されるため、その場で直ちに必要ではあるものの、CSSほどの緊急性はないのかもしれません。そのため、CSSの後でカノニカル正規化タグの前あたりがぶなんかなと感じています。