Sedangkan untuk keperluan SEO, mungkin benar bahwa urutannya tidak signifikan, tidak benar ketika mempertimbangkan hal-hal lain seperti keamanan, konten (karakter) tampilan, atau kecepatan pemuatan. Sebaiknya pesan kepala halaman secara kasar (anggap HTML5 untuk sintaksis):
<head>
Sejauh ini dalam dokumen, Anda seharusnya tidak menggunakan karakter non-ASCII, jadi pengkodean karakter belum menjadi masalah. Tetapi kemungkinan menggunakan karakter non-ASCII meningkat tajam begitu Anda membuka tag kepala itu. Dengan demikian (dan dengan asumsi bahwa Anda tidak mendeklarasikan pengkodean karakter Anda secara terprogram atau di tingkat server), Anda harus membuat pernyataan selanjutnya deklarasi pengkodean karakter Anda. Ini juga memuaskan parser / browser / agen yang akan mengendus pernyataan penyandian karakter:
<meta charset="utf-8">
Dua ( X-UA-Compatibledan viewport) berikut ini direkomendasikan oleh orang-orang di Bootstrap (baru-baru ini sebagai v3.3.4). Meskipun saya hampir yakin bahwa rekomendasi ini didasarkan pada kinerja, sebagian besar dari apa yang saya katakan akan bersifat spekulatif:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Jika Anda berpikir tentang desain / pengembangan perangkat-agnostik (termasuk agen pengguna non-desktop yang lebih kecil), Anda harus memasukkan yang berikut ini:
<meta name="viewport" content="width=device-width, initial-scale=1">
Akhirnya, judulnya:
<title>Ingenious Page Title</title>
Selanjutnya, Anda menawarkan CSS sesegera mungkin setelah judul (tidak ada 'siang hari' di antara mereka):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Jika Anda menggunakan gaya tingkat halaman, mereka akan pergi di sini. Ini sebagian besar karena sifat 'cascading' CSS: yaitu deklarasi gaya terakhir dari tingkat spesifisitas yang identik (seperti dua pernyataan yang menargetkan paragraf p). Untuk membuat override gaya eksternal lebih mudah (yaitu tanpa menggunakan spesifisitas yang lebih besar, atau !important), Anda harus meletakkan gaya tingkat halaman setelah gaya eksternal <link>. Selain itu, umumnya tidak disarankan untuk menggunakan arahan @import dalam gaya tingkat halaman, karena itu akan menghambat pengunduhan bersamaan aset gaya lain:
<style>body{color:black;}</style>
Ini adalah titik di mana tampaknya paling tepat untuk menaruh meta tag, favicons, dan cruft lainnya. Dapat diperdebatkan bahwa favicons atau aset serupa (misalnya gambar aplikasi iOS) akan dimuat sebelum sebagian besar tag meta, karena itu akan mengunduh aset-aset tersebut mulai lebih cepat.
<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">
Karena itu memblokir / menunda rendering, jika Anda berniat membutuhkan skrip, muat selambat-lambatnya. Jika harus ada di head, Anda dapat memuatnya sebelum tutup head( </head>). Jika Anda dapat memuatnya nanti, taruh sebelum bodytag ditutup ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
Tampaknya tidak penting dalam banyak kasus untuk memperhatikan urutan meta tag untuk keperluan SEO, mengingat bahwa bot pengindeksan (yaitu spider mesin pencari) akan menghabiskan seluruh halaman. Kalau tidak, bagaimana mereka akan mengindeks konten halaman, atau memperbarui indeks itu nanti?
Penting bagi saya bahwa untuk semua yang kami pikir kami tahu, dan semua rekomendasi yang kami temukan di web (bahkan dari tempat-tempat seperti Google dan Bing Webmaster Tools, dll.), Situs-situs seperti Amazon, Google dan orang-orang lain yang jelas peduli tentang kenaikan kinerja sangat kecil seperti itu tidak mengikuti aturan ini.