Chociaż dla celów SEO może być prawdą, że kolejność nie jest znacząca, nie jest to prawdą, gdy rozważa się inne rzeczy, takie jak bezpieczeństwo, wyświetlanie treści (znaków) lub szybkość ładowania. Dobrym pomysłem jest zgrubne uporządkowanie głowy strony (przy założeniu HTML5 pod względem składni):
<head>
Do tej pory w dokumencie nie powinieneś używać żadnych znaków spoza ASCII, więc kodowanie znaków nie jest jeszcze problemem. Ale prawdopodobieństwo użycia znaków spoza ASCII znacznie wzrasta po otwarciu tego tagu head. Odpowiednio (i zakładając, że nie deklarujesz kodowania znaków programowo lub na poziomie serwera), powinieneś uczynić następną instrukcję deklaracją kodowania znaków. Spełnia to również parsery / przeglądarki / agenty, które wąchałyby instrukcje kodowania znaków:
<meta charset="utf-8">
Następujące dwa ( X-UA-Compatiblei viewport) są zalecane przez ludzi z Bootstrap (ostatnio w wersji 3.3.4). Chociaż jestem prawie pewien, że te zalecenia są oparte na wydajności, większość tego, co powiedziałbym, byłoby spekulacyjne:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Jeśli zastanawiasz się nad projektowaniem / opracowywaniem zależnym od urządzenia (w tym mniejszych, niebędących komputerami klienckimi), powinieneś uwzględnić następujące elementy:
<meta name="viewport" content="width=device-width, initial-scale=1">
Wreszcie tytuł:
<title>Ingenious Page Title</title>
Następnie oferujesz CSS jak najszybciej po tytule (bez „światła dziennego” między nimi):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Jeśli używasz stylów na poziomie strony, przejdą one tutaj. Wynika to głównie z „kaskadowej” natury CSS: mianowicie ostatniej deklaracji stylu o identycznych poziomach specyficzności (takiej jak dwie instrukcje skierowane na akapit p). Aby ułatwić zastępowanie stylów zewnętrznych (tj. Bez stosowania większej specyficzności lub !important), należy umieszczać style na poziomie strony po stylach zewnętrznych <link>. Ponadto generalnie nie jest wskazane stosowanie dyrektywy @import w stylach na poziomie strony, ponieważ utrudni to jednoczesne pobieranie innych zasobów stylu:
<style>body{color:black;}</style>
W tym miejscu najbardziej odpowiednie wydaje się umieszczanie metatagów, ulubionych i innych cruft. Można argumentować, że ulubione lub podobne zasoby (np. Obrazy aplikacji na iOS) byłyby ładowane przed większością metatagów, ponieważ pobieranie tych zasobów zaczyna się nieznacznie szybciej.
<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">
Ponieważ blokuje / opóźnia renderowanie, jeśli zamierzasz wymagać skryptów, ładuj je tak późno, jak to możliwe. Jeśli muszą znajdować się w head, możesz je załadować przed zamknięciem head( </head>). Jeśli możesz je później załadować, umieść je przed zamknięciem bodytagu ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
W większości przypadków wydaje się nieważne zwracanie dużej uwagi na kolejność metatagów do celów SEO, biorąc pod uwagę, że roboty indeksujące (tj. Pająki wyszukiwarek) zajmą całą stronę. W przeciwnym razie, jak zaindeksowaliby treść strony lub zaktualizowali ten indeks później?
Godne uwagi jest to, że pomimo tego, co uważamy za znane, i wszystkich rekomendacji, które znajdujemy w Internecie (nawet z takich miejsc jak Google i Bing Webmaster Tools itp.), Witryn takich jak Amazon, Google i innych ludzi, którym wyraźnie zależy o takich niewielkich przyrostach wydajności nie przestrzegaj tych zasad.