Embora, para os propósitos do SEO, possa ser verdade que o pedido não é significativo, não é verdade quando se considera outras coisas como segurança, exibição de conteúdo (personagem) ou velocidade de carregamento. É uma boa ideia ordenar o cabeçalho da sua página de maneira mais ou menos assim (presumindo a sintaxe HTML5):
<head>
Até agora no documento, você não deveria ter usado caracteres não ASCII, portanto a codificação de caracteres ainda não é um problema. Mas a probabilidade de usar caracteres não-ASCII aumenta acentuadamente quando você abre esse cabeçalho. Consequentemente (e supondo que você não esteja declarando sua codificação de caracteres programaticamente ou no nível do servidor), faça da próxima declaração sua declaração de codificação de caracteres. Isso também satisfaz analisadores / navegadores / agentes que farejariam as instruções de codificação de caracteres:
<meta charset="utf-8">
Os dois ( X-UA-Compatiblee viewport) a seguir são recomendados pelo pessoal do Bootstrap (tão recentemente quanto a v3.3.4). Embora eu esteja quase certo de que essas recomendações são baseadas no desempenho, a maioria do que eu diria seria especulativa:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Se você estiver pensando em design / desenvolvimento independente de dispositivo (incluindo agentes de usuários menores, que não sejam de área de trabalho), inclua o seguinte:
<meta name="viewport" content="width=device-width, initial-scale=1">
Finalmente, o título:
<title>Ingenious Page Title</title>
Em seguida, você oferece o CSS o mais rápido possível após o título (sem 'luz do dia' entre eles):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Se você estiver usando estilos no nível da página, eles aparecerão aqui. Isso ocorre principalmente devido à natureza "em cascata" do CSS: a última declaração de estilo, com níveis idênticos de especificidade (como duas declarações direcionadas a um parágrafo p). Para facilitar a substituição de estilos externos (por exemplo, sem usar maior especificidade ou !important), você deve colocar os estilos no nível da página após estilos externos <link>. Além disso, é geralmente desaconselhável usar a diretiva @import em estilos no nível da página, porque isso impedirá o download simultâneo de outros ativos de estilo:
<style>body{color:black;}</style>
Este é o ponto em que parece mais apropriado colocar metatags, favicons e outros itens. É possível argumentar que favicons ou ativos semelhantes (por exemplo, imagens de aplicativos para iOS) seriam carregados antes da maioria das metatags, porque isso faz com que o download desses ativos seja iniciado um pouco 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">
Como ele bloqueia / atrasa a renderização, se você deseja exigir scripts, carregue-os o mais tarde possível. Se eles devem estar no diretório head, você pode carregá-los antes do fechamento de head( </head>). Se você puder carregá-los mais tarde, coloque-os antes do fechamento da bodytag ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
Parece sem importância, na maioria dos casos, prestar muita atenção à ordem das metatags para fins de SEO, uma vez que os bots de indexação (por exemplo, spiders dos mecanismos de pesquisa) vão consumir a página inteira. Caso contrário, como eles indexariam o conteúdo de uma página ou atualizariam esse índice posteriormente?
É notável para mim que, por tudo o que achamos que sabemos e por todas as recomendações que encontramos na Web (mesmo em locais como o Google e as Ferramentas para webmasters do Bing etc.), sites como Amazon, Google e outras pessoas que se importam claramente sobre tais ganhos de desempenho minúsculos não seguem essas regras.