Mặc dù đối với các mục đích của SEO, có thể đúng là thứ tự không đáng kể, nhưng điều đó không đúng khi xem xét các thứ khác như bảo mật, hiển thị nội dung (ký tự) hoặc tốc độ tải. Do đó, nên đặt hàng đầu trang của bạn một cách đại khái (giả sử HTML5 theo cú pháp):
<head>
Cho đến nay trong tài liệu, bạn không nên sử dụng bất kỳ ký tự không phải ASCII nào, vì vậy mã hóa ký tự chưa phải là vấn đề. Nhưng khả năng sử dụng các ký tự không phải ASCII sẽ tăng lên rõ rệt khi bạn mở thẻ đầu đó. Theo đó (và giả sử rằng bạn không khai báo mã hóa ký tự theo chương trình hoặc ở cấp độ máy chủ), bạn nên thực hiện tuyên bố tiếp theo về khai báo mã hóa ký tự của mình. Điều này cũng đáp ứng các trình phân tích cú pháp / trình duyệt / tác nhân sẽ đánh hơi cho các câu lệnh mã hóa ký tự:
<meta charset="utf-8">
Hai ( X-UA-Compatiblevà viewport) sau đây được khuyến nghị bởi những người ở Bootstrap (gần đây là v3.3.4). Mặc dù tôi gần như tích cực rằng những đề xuất này dựa trên hiệu suất, hầu hết những gì tôi muốn nói sẽ là đầu cơ:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Nếu bạn đang suy nghĩ về thiết kế / phát triển bất khả tri của thiết bị (bao gồm các tác nhân người dùng nhỏ hơn, không phải máy tính để bàn), bạn nên bao gồm những điều sau đây:
<meta name="viewport" content="width=device-width, initial-scale=1">
Cuối cùng, tiêu đề:
<title>Ingenious Page Title</title>
Tiếp theo, bạn cung cấp CSS ngay sau tiêu đề càng tốt (không có 'ánh sáng ban ngày' giữa chúng):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
Nếu bạn đang sử dụng các kiểu cấp độ trang, họ sẽ đến đây. Điều này phần lớn là do bản chất 'xếp tầng' của CSS: cụ thể là khai báo kiểu cuối cùng của các mức độ cụ thể giống hệt nhau (chẳng hạn như hai câu lệnh nhắm vào một đoạn p). Để làm cho việc ghi đè các kiểu bên ngoài dễ dàng hơn (nghĩa là không sử dụng độ đặc hiệu cao hơn hoặc !important), bạn nên đặt các kiểu cấp trang sau ( <link>các) kiểu bên ngoài . Ngoài ra, thông thường không thể sử dụng lệnh @import trong các kiểu cấp trang, bởi vì nó sẽ cản trở việc tải xuống đồng thời các tài sản kiểu khác:
<style>body{color:black;}</style>
Đây là điểm có vẻ thích hợp nhất để đặt thẻ meta, favicon và cruft khác. Có thể cho rằng favicon hoặc các tài sản tương tự (ví dụ: hình ảnh ứng dụng iOS) sẽ được tải trước hầu hết các thẻ meta, bởi vì việc tải xuống các tài sản đó bắt đầu sớm hơn một chút.
<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">
Bởi vì nó chặn / trì hoãn kết xuất, nếu bạn có ý định yêu cầu tập lệnh, hãy tải chúng càng muộn càng hợp lý. Nếu chúng phải ở trong head, bạn có thể tải chúng trước khi đóng head( </head>). Nếu bạn có thể tải chúng sau, hãy đặt chúng trước khi đóng bodythẻ ( </body>).
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
Có vẻ như không quan trọng trong hầu hết các trường hợp chú ý đến thứ tự các thẻ meta cho mục đích SEO, do các bot lập chỉ mục (tức là các công cụ tìm kiếm) sẽ tiêu thụ toàn bộ trang. Mặt khác, làm thế nào họ lập chỉ mục nội dung của trang hoặc cập nhật chỉ mục đó sau?
Điều đáng chú ý với tôi là đối với tất cả những gì chúng tôi nghĩ rằng chúng tôi biết và tất cả các đề xuất mà chúng tôi tìm thấy trên web (ngay cả từ những nơi như Google và Bing Webmaster Tools, v.v.), các trang web như Amazon, Google và những người khác quan tâm rõ ràng về việc tăng hiệu suất rất nhỏ như vậy không tuân theo các quy tắc này.