ขัดเกลาส่วน head ของหน้า: title, description, favicon และลิงก์ภายนอกที่ปลอดภัย
เปิดบทเรียนนี้ใน Kodokonก่อนจะเข้าชมหน้าเว็บของคุณเสียอีก ผู้คนเห็นมันจากที่อื่น: ในแท็บเบราว์เซอร์ ในผลการค้นหา ในลิงก์ที่แชร์กัน ทั้งหมดนั้นเกิดขึ้นใน head head ที่ประดิษฐ์มาอย่างดีคือความแตกต่างระหว่างเว็บไซต์มือสมัครเล่นกับเว็บไซต์มืออาชีพ
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Quick Recipes | Lea's Kitchen</title>
<meta
name="description"
content="30 recipes ready in 20 minutes flat,
tested by our readers."
>
</head>title ปรากฏในแท็บ ในบุ๊กมาร์ก และในผลการค้นหา: ทำให้มัน ไม่ซ้ำกันในแต่ละหน้า สื่อความหมาย เอาหัวข้อขึ้นก่อน และยาวประมาณ 60 ตัวอักษร ส่วน meta description คือข้อความที่แสดงใต้ชื่อในเครื่องมือค้นหา: ตั้งเป้าไว้ที่ 150 ตัวอักษรที่ทำให้คนอยากคลิก
favicon คือไอคอนเล็กๆ ที่แสดงในแท็บและในบุ๊กมาร์ก แนวปฏิบัติสมัยใหม่: favicon.ico สำรองที่รากของไซต์ เวอร์ชัน SVG ที่คมชัดในทุกขนาด และไอคอนเฉพาะสำหรับหน้าจอโฮมของ Apple
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-icon.png">ปฏิกิริยาเชิงมืออาชีพข้อสุดท้าย: ลิงก์ภายนอก การเปิดลิงก์ในแท็บใหม่ด้วย target="_blank" ทำให้หน้าที่เปิดขึ้นมามีโอกาสเข้าถึง window.opener และจึงเข้าถึงหน้าของคุณได้ เพิ่ม rel="noopener noreferrer" เพื่อตัดความเชื่อมโยงนั้นและหลีกเลี่ยงการส่งต่อที่อยู่ต้นทางไปด้วย
<a
href="https://developer.mozilla.org"
target="_blank"
rel="noopener noreferrer"
>
MDN documentation (new tab)
</a>