Mentre ai fini della SEO, può essere vero che l'ordine non è significativo, non è vero se si considerano altre cose come la sicurezza, la visualizzazione del contenuto (carattere) o la velocità di caricamento. È una buona idea ordinare la testa della tua pagina in modo approssimativo (presumendo HTML5 per la sintassi):
<head>
Finora nel documento, non avresti dovuto usare caratteri non ASCII, quindi la codifica dei caratteri non è ancora un problema. Ma la probabilità di usare caratteri non ASCII aumenta marcatamente una volta aperto quel tag head. Di conseguenza (e supponendo che non si stia dichiarando la codifica dei caratteri a livello di codice o a livello di server), è necessario rendere la dichiarazione successiva la dichiarazione di codifica dei caratteri. Ciò soddisfa anche i parser / browser / agenti che potrebbero annusare le istruzioni di codifica dei caratteri:
<meta charset="utf-8">
I seguenti due ( X-UA-Compatiblee viewport) sono raccomandati dalla gente su Bootstrap (fino alla v3.3.4). Mentre sono quasi sicuro che questi consigli siano basati sulle prestazioni, la maggior parte di ciò che direi sarebbe speculativo:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Se stai pensando alla progettazione / sviluppo indipendente dal dispositivo (inclusi agenti utente più piccoli e non desktop), dovresti includere quanto segue:
<meta name="viewport" content="width=device-width, initial-scale=1">
Infine, il titolo:
<title>Ingenious Page Title</title>
Successivamente, offri il CSS il più presto possibile dopo il titolo (nessuna "luce del giorno" tra di loro):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Se stai usando stili a livello di pagina, andrebbero qui. Ciò è in gran parte dovuto alla natura "a cascata" dei CSS: vale a dire l'ultima dichiarazione di stile con identici livelli di specificità (come due affermazioni che hanno come target un paragrafo p). Per rendere più semplice l'override degli stili esterni (ovvero senza utilizzare una maggiore specificità, o !important), è necessario inserire gli stili a livello di pagina dopo gli stili esterni <link>. Inoltre, è generalmente sconsigliabile utilizzare la direttiva @import negli stili a livello di pagina, poiché impedirà il download simultaneo di altri asset di stile:
<style>body{color:black;}</style>
Questo è il punto in cui sembra più appropriato mettere meta tag, favicon e altre cruft. È discutibile che le favicon o le risorse simili (ad es. Immagini di app iOS) vengano caricate prima della maggior parte dei meta tag, perché avvia il download di tali risorse leggermente prima.
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="apple-icon.png">
<meta name="description" content="Some information that is descriptive of the content">
<meta name="generator" content="Microsoft FrontPage 2002">
Poiché blocca / ritarda il rendering, se si desidera richiedere script, caricarli il più tardi possibile. Se devono trovarsi in head, potresti caricarli prima della chiusura di head( </head>). Se puoi caricarli in un secondo momento, inseriscili prima della chiusura del bodytag ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
Sembra poco importante nella maggior parte dei casi prestare molta attenzione all'ordine dei metatag per scopi SEO, dato che i bot di indicizzazione (ovvero i ragni dei motori di ricerca) consumeranno l'intera pagina. Altrimenti, come potrebbero indicizzare il contenuto di una pagina o aggiornarlo successivamente?
È degno di nota per me quello che pensiamo di sapere e tutti i consigli che troviamo sul web (anche da luoghi come Google e Bing Webmaster Tools, ecc.), Siti come Amazon, Google e altre persone a cui è chiaramente importante su tali minuscoli miglioramenti delle prestazioni non seguono queste regole.