Si bien para fines de SEO, puede ser cierto que el orden no es significativo, no es cierto cuando se consideran otras cosas como la seguridad, la visualización de contenido (caracteres) o la velocidad de carga. Es una buena idea ordenar el encabezado de su página más o menos así (suponiendo HTML5 para la sintaxis):
<head>
Hasta ahora en el documento, no debería haber utilizado ningún carácter que no sea ASCII, por lo que la codificación de caracteres aún no es un problema. Pero la probabilidad de usar caracteres no ASCII aumenta notablemente una vez que abre esa etiqueta de encabezado. En consecuencia (y suponiendo que no está declarando su codificación de caracteres mediante programación o en el nivel del servidor), debe hacer que la siguiente declaración sea su declaración de codificación de caracteres. Esto también satisface a los analizadores / buscadores / agentes que estarían olfateando las declaraciones de codificación de caracteres:
<meta charset="utf-8">
Los siguientes dos ( X-UA-Compatibley viewport) son recomendados por la gente de Bootstrap (tan recientemente como v3.3.4). Si bien estoy casi seguro de que estas recomendaciones se basan en el rendimiento, la mayor parte de lo que diría sería especulativo:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Si está pensando en el diseño / desarrollo independiente del dispositivo (incluidos los agentes de usuario más pequeños que no sean de escritorio), debe incluir lo siguiente:
<meta name="viewport" content="width=device-width, initial-scale=1">
Finalmente, el título:
<title>Ingenious Page Title</title>
A continuación, ofrece el CSS tan pronto como sea posible después del título (sin 'luz del día' entre ellos):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Si está utilizando estilos de nivel de página, irían aquí. Esto se debe en gran parte a la naturaleza 'en cascada' de CSS: a saber, la última declaración de estilo de niveles idénticos de especificidad (como dos declaraciones que apuntan a un párrafop ). Para facilitar la anulación de estilos externos (es decir, sin utilizar una mayor especificidad, o !important), debe colocar estilos de nivel de página después de los estilos externos <link>. Además, generalmente no es aconsejable usar la directiva @import en estilos de nivel de página, ya que impedirá la descarga simultánea de otros activos de estilo:
<style>body{color:black;}</style>
Este es el punto en el que parece más apropiado poner metaetiquetas, favicons y otros cruft. Es discutible que los favicons o activos similares (por ejemplo, imágenes de aplicaciones de iOS) se carguen antes de la mayoría de las metaetiquetas, ya que la descarga de esos activos comienza marginalmente antes.
<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">
Debido a que bloquea / retrasa la representación, si tiene la intención de requerir scripts, cárguelos tan tarde como sea razonable. Si deben estar en el head, puede cargarlos antes del cierre de head( </head>). Si puede cargarlos más tarde, colóquelos antes del cierre de la bodyetiqueta (</body> ).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
En la mayoría de los casos, parece poco importante prestar mucha atención al orden de las metaetiquetas con fines de SEO, dado que los robots de indexación (es decir, las arañas de los motores de búsqueda) consumirán toda la página. De lo contrario, ¿cómo indexarían el contenido de una página o actualizarían ese índice más adelante?
Es notable para mí que, por todo lo que creemos que sabemos, y todas las recomendaciones que encontramos en la web (incluso de lugares como Google y Bing Webmaster Tools, etc.), sitios como Amazon, Google y otras personas que claramente se preocupan sobre tales ganancias de rendimiento minúsculas no siguen estas reglas.