ในขณะที่สำหรับวัตถุประสงค์ของ SEO มันอาจเป็นจริงที่คำสั่งไม่สำคัญมันไม่เป็นความจริงเมื่อพิจารณาสิ่งอื่น ๆ เช่นการรักษาความปลอดภัยการแสดงเนื้อหา (อักขระ) หรือความเร็วในการโหลด มันเป็นความคิดที่ดีที่จะสั่งซื้อส่วนหัวของหน้าเว็บของคุณอย่างคร่าวๆ (สมมติว่า HTML5 เป็นไวยากรณ์):
<head>
จนถึงตอนนี้ในเอกสารคุณไม่ควรใช้อักขระที่ไม่ใช่ ASCII ดังนั้นการเข้ารหัสอักขระยังไม่เป็นปัญหา แต่โอกาสในการใช้อักขระที่ไม่ใช่ ASCII จะเพิ่มขึ้นอย่างเด่นชัดเมื่อคุณเปิดแท็กส่วนหัวนั้น ดังนั้น (และสมมติว่าคุณไม่ได้ประกาศการเข้ารหัสตัวอักษรของคุณโดยทางโปรแกรมหรือที่ระดับเซิร์ฟเวอร์) คุณควรสร้างข้อความสั่งถัดไปที่เป็นการประกาศการเข้ารหัสอักขระของคุณ สิ่งนี้ยังสอดคล้องกับตัวแยกวิเคราะห์ / เบราว์เซอร์ / เอเจนต์ที่จะดมกลิ่นสำหรับคำสั่งการเข้ารหัสอักขระ:
<meta charset="utf-8">
สอง ( X-UA-Compatibleและviewport) ต่อไปนี้ได้รับการแนะนำโดยคนที่ Bootstrap (เมื่อเร็ว ๆ นี้เป็น v3.3.4) ในขณะที่ฉันเกือบจะเป็นบวกที่คำแนะนำเหล่านี้ขึ้นอยู่กับประสิทธิภาพการทำงาน แต่สิ่งที่ฉันพูดได้ส่วนใหญ่จะเป็นการเก็งกำไร:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
หากคุณกำลังคิดเกี่ยวกับการออกแบบ / พัฒนาอุปกรณ์ที่ไม่เชื่อเรื่องพระเจ้า (รวมถึงตัวแทนผู้ใช้ที่ไม่ใช่เดสก์ท็อปขนาดเล็ก) คุณควรรวมสิ่งต่อไปนี้:
<meta name="viewport" content="width=device-width, initial-scale=1">
สุดท้ายชื่อ:
<title>Ingenious Page Title</title>
ถัดไปคุณจะเสนอ CSS ทันทีหลังจากที่ชื่อเป็นไปได้ (ไม่ 'กลางวัน' ระหว่างพวกเขา):
<link rel="stylesheet" href="stylesheet-1.css">
<link rel="stylesheet" href="stylesheet-2.css">
หากคุณใช้สไตล์ระดับหน้าเว็บพวกเขาจะไปที่นี่ นี่คือสาเหตุส่วนใหญ่เนื่องจากลักษณะ 'cascading' ของ CSS: คือการประกาศลักษณะสุดท้ายของระดับความจำเพาะที่เหมือนกัน (เช่นข้อความสองข้อความที่กำหนดเป้าหมายในย่อหน้าp) เพื่อให้การเอาชนะสไตล์ภายนอกง่ายขึ้น (เช่นโดยไม่ต้องใช้ความเฉพาะเจาะจงมากขึ้นหรือ!important) คุณควรวางสไตล์ระดับหน้าหลังจากสไตล์ภายนอก (<link> s) นอกจากนี้โดยทั่วไปแล้วจะไม่สามารถใช้คำสั่ง @import ในสไตล์ระดับหน้าได้เนื่องจากจะขัดขวางการดาวน์โหลดสินทรัพย์สไตล์อื่น ๆ พร้อมกัน:
<style>body{color:black;}</style>
นี่คือจุดที่เหมาะสมที่สุดในการวางเมตาแท็ก, favicons และ cruft อื่น ๆ เป็นที่ถกเถียงกันอยู่ว่า favicons หรือเนื้อหาที่คล้ายกัน (เช่นรูปภาพแอป iOS) จะโหลดก่อนเมตาแท็กส่วนใหญ่เพราะจะได้รับการดาวน์โหลดเนื้อหาเหล่านั้นเริ่มเร็วขึ้นเล็กน้อย
<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">
เนื่องจากเป็นการบล็อก / การเรนเดอร์การแสดงผลถ้าคุณตั้งใจจะต้องใช้สคริปต์โหลดมันให้ช้าที่สุด หากพวกเขาจะต้องอยู่ในheadคุณอาจโหลดพวกเขาก่อนที่จะปิดhead( </head>) หากคุณสามารถโหลดได้ในภายหลังให้วางไว้ก่อนปิดbodyแท็ก ( </body>)
<script src="script-1.js"></script>
<script src="script-2.js"></script>
</head>
ดูเหมือนว่าไม่สำคัญในกรณีส่วนใหญ่ให้ความสนใจมากกับคำสั่งของเมตาแท็กเพื่อวัตถุประสงค์ SEO เนื่องจากบอทการจัดทำดัชนี (เช่นแมงมุมเครื่องมือค้นหา) จะกินทั้งหน้า มิฉะนั้นพวกเขาจะจัดทำดัชนีเนื้อหาของหน้าเว็บอย่างไรหรือปรับปรุงดัชนีนั้นในภายหลัง
เป็นสิ่งที่น่าทึ่งสำหรับฉันที่ทุกคนคิดว่าเรารู้และคำแนะนำทั้งหมดที่เราพบบนเว็บ (แม้จากสถานที่ต่าง ๆ เช่น Google และ Bing Webmaster Tools ฯลฯ ) เว็บไซต์เช่น Amazon, Google และคนอื่น ๆ ที่ใส่ใจอย่างชัดเจน เกี่ยวกับการเพิ่มประสิทธิภาพการทำงานขนาดจิ๋วนั้นไม่เป็นไปตามกฎเหล่านี้