ในส่วนโครงสร้างเอกสาร คุณได้เรียนรู้เกี่ยวกับคอมโพเนนต์ที่คุณ (เกือบ) พบใน <head> ของเอกสาร HTML เสมอ ในขณะที่ทุกอย่างใน <head> ซึ่งรวมถึง <title>, <link>, <script>, <style> และ <base> ที่ใช้น้อย ที่จริงแล้วเป็น "ข้อมูลเมตา" จะมีแท็ก <meta> สำหรับข้อมูลเมตาที่องค์ประกอบอื่นๆ เหล่านี้แสดงไม่ได้
ข้อกำหนดนี้ประกอบด้วยเมตาประเภทต่างๆ และมีประเภทเมตาอื่นๆ มากมายที่สนับสนุนแอปพลิเคชันซึ่งไม่มีในข้อกำหนดอย่างเป็นทางการใดๆ ในส่วนนี้ เราจะกล่าวถึงแอตทริบิวต์และค่าที่อยู่ในข้อกำหนด ชื่อเมตาโดยทั่วไปและค่าเนื้อหาบางส่วน รวมทั้งประเภทเมตา 2-3 ประเภทที่มีประโยชน์อย่างยิ่งสำหรับการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือค้นหา การโพสต์ทางโซเชียลมีเดีย และประสบการณ์ของผู้ใช้ที่ไม่ได้กำหนดไว้อย่างเป็นทางการโดย WHATWG หรือ W3C
แท็ก <meta> ที่จำเป็นโดยกลับไปดูอีกครั้ง
มาทบทวนแท็ก <meta> ที่จำเป็นซึ่งครอบคลุมอยู่แล้ว 2 แท็ก ได้แก่ การประกาศชุดอักขระและเมตาแท็กวิวพอร์ต เพื่อทำความเข้าใจแท็ก <meta> ให้มากขึ้นในกระบวนการนี้
แอตทริบิวต์ charset ขององค์ประกอบ <meta> มีลักษณะการทำงานที่ไม่เหมือนใคร เริ่มแรกข้อมูลเมตาชุดอักขระเขียนเป็น <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" /> แต่นักพัฒนาซอฟต์แวร์จำนวนมากพิมพ์แอตทริบิวต์ content ผิดเป็น content="text/html" charset="<characterset>" ซึ่งเบราว์เซอร์เริ่มรองรับชุดอักขระเป็นแอตทริบิวต์ ขณะนี้ ได้รับการปรับให้เป็นมาตรฐานในมาตรฐานที่ใช้จริงของ HTML เป็น <meta charset="<charset>" /> โดยที่สำหรับ HTML<charset> คือสตริง "utf-8" ที่ไม่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่
คุณอาจสังเกตเห็นว่าการประกาศเมตาชุดอักขระดั้งเดิมที่ใช้ในการรวมแอตทริบิวต์ http-equiv คำนี้ย่อมาจาก "เทียบเท่ากับ http" เนื่องจากโดยทั่วไปเมตาแท็กจะจำลองสิ่งที่ตั้งค่าได้ในส่วนหัว HTTP นอกจากข้อยกเว้น charset แล้ว เมตาแท็กอื่นๆ ทั้งหมดที่กำหนดไว้ในข้อกำหนด HTML ของ WHATWG มีแอตทริบิวต์ http-equiv หรือ name ด้วย
เมตาแท็กที่กำหนดไว้อย่างเป็นทางการ
เมตาแท็กมี 2 ประเภทหลักๆ ได้แก่ คำสั่ง Pragma ที่มีแอตทริบิวต์ http-equiv เช่น เมตาแท็กชุดอักขระที่เคยมี และประเภทเมตาที่มีชื่อ เช่น เมตาแท็กวิวพอร์ตที่มีแอตทริบิวต์ name ที่เราได้อธิบายในส่วนโครงสร้างเอกสาร ทั้งประเภทเมตา name และ http-equiv ต้องมีแอตทริบิวต์ content ซึ่งกำหนดเนื้อหาสำหรับประเภทข้อมูลเมตาที่ระบุ
คำสั่งของ Pragma
แอตทริบิวต์ http-equiv มีค่าเป็นคำสั่ง Pragma คำสั่งเหล่านี้อธิบายวิธีการแยกวิเคราะห์หน้าเว็บ ค่า http-equiv ที่รองรับจะเปิดใช้คำสั่งการตั้งค่าเมื่อคุณตั้งค่าส่วนหัว HTTP โดยตรงไม่ได้
ข้อกำหนดนี้ระบุคำสั่งของ Pragma ได้ 7 รายการ ซึ่งส่วนใหญ่จะมีวิธีอื่นๆ ในการตั้งค่าด้วย ตัวอย่างเช่น แม้คุณจะใส่คำสั่งภาษากับ <meta http-equiv="content-language" content="en-us" /> ได้ แต่เราก็ได้พูดคุยกันไปแล้วโดยใช้แอตทริบิวต์ lang ในองค์ประกอบ HTML ซึ่งเป็นแอตทริบิวต์ที่ควรใช้แทน
คำสั่ง Pragma ที่ใช้กันมากที่สุดคือคำสั่ง refresh
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
เราไม่แนะนำให้ตั้งคำสั่งนี้แม้ว่าคุณจะตั้งค่าคำสั่งให้รีเฟรชตามช่วงจำนวนวินาทีที่ตั้งไว้ในแอตทริบิวต์ content หรือแม้กระทั่งเปลี่ยนเส้นทางไปยัง URL อื่น การรีเฟรชและเปลี่ยนเส้นทางเนื้อหาโดยไม่มีคำขอจากผู้ใช้อย่างชัดแจ้งจะทำให้ใช้งานยากและส่งผลเสียต่อความสามารถเข้าถึงได้ง่าย คุณไม่รู้สึกเกลียดชังนี้หรือไม่เมื่อคุณอยู่กลางย่อหน้าและหน้าเว็บรีเซ็ต ลองนึกภาพว่าคุณกำลังมีปัญหาเรื่องการรับรู้หรือการมองเห็นเกิดขึ้นจริง ถ้าคุณจะตั้งค่าการรีเฟรชด้วยการเปลี่ยนเส้นทาง โปรดตรวจสอบว่าผู้ใช้มีเวลาเพียงพอที่จะอ่านหน้าเว็บ ลิงก์สำหรับช่วยเร่งกระบวนการ และปุ่ม "หยุดการทำงาน" และป้องกันไม่ให้เกิดการเปลี่ยนเส้นทาง หากเหมาะสม
เราจะไม่รวมส่วนนี้ในเว็บไซต์ของเรา เนื่องจากไม่มีเหตุผลใดที่จะหมดเวลาเซสชันของผู้ใช้ นอกเหนือจากที่จะรบกวนผู้เข้าชมของเรา
คำสั่ง Pragma ที่มีประโยชน์มากที่สุดคือ content-security-policy ซึ่งทำให้กำหนดนโยบายเนื้อหาสำหรับเอกสารปัจจุบันได้ นโยบายเนื้อหาส่วนใหญ่จะระบุต้นทางของเซิร์ฟเวอร์และปลายทางของสคริปต์ที่อนุญาต ซึ่งจะช่วยป้องกันการโจมตีแบบ Cross-site Scripting
<meta http-equiv="content-security-policy" content="default-src https:" />
หากคุณไม่มีสิทธิ์เข้าถึงเพื่อเปลี่ยนส่วนหัว HTTP (หรือหากต้องการเปลี่ยน) โปรดดูรายการค่าเนื้อหาที่คั่นด้วยช่องว่างสำหรับคำสั่ง content-security-policy
เมตาแท็กที่มีชื่อ
ส่วนมากคุณจะใส่ข้อมูลเมตาที่มีชื่อ ระบุแอตทริบิวต์ name โดยค่าแอตทริบิวต์เป็นชื่อของข้อมูลเมตา คุณต้องระบุแอตทริบิวต์ content เช่นเดียวกับคำสั่ง Pragma
แอตทริบิวต์ name คือชื่อของข้อมูลเมตา นอกเหนือจาก viewport คุณอาจต้องการรวม description และ theme-color แต่ไม่ใช่ keywords
คีย์เวิร์ด
พนักงานขายน้ำมันงูสำหรับการปรับแต่งเว็บไซต์ให้ติดอันดับบนเครื่องมือการค้นหาละเมิดเมตาแท็กคีย์เวิร์ดโดยการใส่รายการคำสแปมที่คั่นด้วยคอมมาแทนรายการคีย์เวิร์ดที่เกี่ยวข้อง ดังนั้นเครื่องมือค้นหาจะไม่ถือว่าข้อมูลเมตานี้เป็นประโยชน์อีกต่อไป โดยไม่ต้องเสียเวลา ความพยายาม หรือไบต์ในการเพิ่มข้อมูล
คำอธิบาย
อย่างไรก็ตาม ค่า description มีประโยชน์สำหรับ SEO เนื่องจากค่าของเนื้อหาคำอธิบายมักจะเป็นสิ่งที่เครื่องมือค้นหาแสดงใต้ชื่อของหน้านั้นในผลการค้นหา เบราว์เซอร์หลายชนิด เช่น Firefox และ Opera จะใช้คำอธิบายนี้เป็นคำอธิบายเริ่มต้นของหน้าที่บุ๊กมาร์กไว้ คำอธิบายควรเป็นการสรุปเนื้อหาของหน้าเว็บที่สั้นและถูกต้อง
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
หากส่วนครึ่งหลังของคำอธิบายไม่เหมาะกับคุณ คุณอาจยังไม่เคยดูภาพยนตร์เรื่อง Zoolander
หุ่นยนต์
หากไม่ต้องการให้เครื่องมือค้นหาจัดทำดัชนีเว็บไซต์ คุณก็แจ้งให้เครื่องมือค้นหาทราบได้ <meta name="robots" content="noindex, nofollow" /> บอกบ็อตไม่ให้จัดทำดัชนีเว็บไซต์และไม่ให้ติดตามลิงก์ใดๆ บ็อตควรฟังคำขอ แต่ไม่มีกฎหมายใดกำหนดให้ปฏิบัติตามคำขอ คุณไม่จำเป็นต้องใส่ <meta name="robots" content="index, follow" /> เพื่อขอการจัดทำดัชนีเว็บไซต์และลิงก์ต่อไปนี้ เนื่องจากเป็นค่าเริ่มต้น เว้นแต่ส่วนหัว HTTP จะระบุไว้เป็นอย่างอื่น
<meta name="robots" content="index, follow" />
สีธีม
ค่า theme-color ช่วยให้คุณกำหนดสีเพื่อปรับแต่งอินเทอร์เฟซเบราว์เซอร์ได้ เบราว์เซอร์และระบบปฏิบัติการที่รองรับจะใช้ค่าสีในแอตทริบิวต์ content ซึ่งจะช่วยให้คุณระบุสีที่แนะนำสำหรับ User Agent ที่รองรับการระบายสีแถบชื่อ แถบแท็บ หรือคอมโพเนนต์อื่นๆ ของ Chrome ได้ เมตาแท็กนี้มีประโยชน์อย่างยิ่งสำหรับ Progressive Web App แต่หากใส่ไฟล์ Manifest ที่ PWA กำหนดให้ใส่ คุณก็ใส่สีธีมลงไปแทนได้ อย่างไรก็ตาม การกำหนดสีใน HTML จะช่วยให้มั่นใจได้ว่าจะพบสีได้ทันทีก่อนที่จะแสดงผล ซึ่งอาจเป็นการโหลดครั้งแรกเร็วกว่าการรอไฟล์ Manifest
หากต้องการตั้งค่าสีธีมเป็นโทนสีฟ้าของสีพื้นหลังของไซต์ของเรา ให้ใส่ข้อมูลต่อไปนี้
<meta name="theme-color" content="#226DAA" />
เมตาแท็กสีธีมอาจมีแอตทริบิวต์ media ที่เปิดใช้การตั้งค่าสีธีมต่างๆ ตามคำค้นหาสื่อ แอตทริบิวต์ media สามารถรวมอยู่ในเมตาแท็กนี้เท่านั้น และละเว้นในเมตาแท็กอื่นๆ ทั้งหมด
มีข้อมูลเมตาอื่นๆ อีก name รายการ แต่ค่าที่เราพูดถึงนั้นใช้กันมากที่สุด ใส่เมตาแท็กแต่ละรายการเพียง 1 แท็กเท่านั้น ยกเว้นการประกาศค่า theme-color ที่แตกต่างกันสำหรับคำค้นหาสื่อที่แตกต่างกัน หากคุณจำเป็นต้องรวมเมตาแท็กมากกว่า 1 ประเภทเพื่อรองรับเบราว์เซอร์แบบเดิม ค่าเดิมควรอยู่หลังค่าที่ใหม่กว่า เนื่องจาก User Agent จะอ่านกฎต่อๆ ไปจนกว่าจะพบรายการที่ตรงกัน
เปิดกราฟ
คุณสามารถใช้ Open Graph และโปรโตคอลเมตาแท็กที่คล้ายกันเพื่อควบคุมวิธีที่เว็บไซต์โซเชียลมีเดีย เช่น Twitter, LinkedIn และ Facebook แสดงลิงก์ไปยังเนื้อหาของคุณ หากไม่ระบุ เว็บไซต์โซเชียลมีเดียจะดึงข้อมูลชื่อของหน้าเว็บและคำอธิบายจากเมตาแท็กคำอธิบายได้อย่างถูกต้อง ซึ่งเป็นข้อมูลเดียวกันกับที่เครื่องมือค้นหาแสดง แต่คุณสามารถกำหนดสิ่งที่คุณต้องการให้ผู้ใช้เห็นเมื่อมีการโพสต์ลิงก์ในเว็บไซต์ของคุณได้
เมื่อโพสต์ลิงก์ไปยัง MachineLearningWorkshop.com หรือ web.dev ใน Facebook หรือ Twitter การ์ดที่มีรูปภาพ ชื่อเว็บไซต์ และคำอธิบายเว็บไซต์จะปรากฏขึ้น การ์ดทั้งใบคือไฮเปอร์ลิงก์ไปยัง URL ที่คุณระบุ
เมตาแท็ก Open Graph มี 2 แอตทริบิวต์ ได้แก่ แอตทริบิวต์ property ไม่ใช่แอตทริบิวต์ name รวมถึงเนื้อหาหรือค่าของพร็อพเพอร์ตี้ดังกล่าว แอตทริบิวต์ property ไม่ได้กำหนดในข้อกำหนดอย่างเป็นทางการ แต่ได้รับการรองรับอย่างกว้างขวางจากแอปพลิเคชันที่รองรับโปรโตคอล Open Graph การสร้างแอตทริบิวต์ "ใหม่" เช่น property ช่วยให้แน่ใจว่าค่าแอตทริบิวต์ที่สร้างขึ้นสำหรับแอตทริบิวต์ของโปรโตคอลจะไม่ขัดแย้งกับค่าในอนาคตของแอตทริบิวต์ name หรือ http-equiv
วิธีสร้างการ์ดสื่อของ Facebook
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
ใส่ชื่อโพสต์ให้แสดง โดยทั่วไป ชื่อนี้จะแสดงใต้รูปภาพและเหนือคำอธิบาย คำอธิบายควรมีไม่เกิน 3 ประโยคที่สรุปโพสต์ของคุณ ซึ่งจะปรากฏหลังจากบรรทัดแรกที่กำหนดไว้ใน og:title ระบุ URL ที่สมบูรณ์ให้กับรูปภาพแบนเนอร์ที่ต้องการแสดง รวมถึงโปรโตคอล https:// เมื่อมีการเพิ่มรูปภาพในรูปแบบ HTML ให้ใส่ข้อความอธิบายทางเลือกสำหรับรูปภาพนั้นเสมอ แม้ว่ารูปภาพนั้นจะปรากฏในที่อื่นก็ตาม สำหรับการ์ดโซเชียลมีเดีย Open Graph ให้กำหนด alt เป็นค่าเนื้อหาสำหรับพร็อพเพอร์ตี้ og:image:alt คุณยังใส่ Canonical URL ที่มี og:url ได้อีกด้วย
เมตาแท็กเหล่านี้มีการกำหนดไว้ในโปรโตคอล Open Graph ค่าควรเป็นเนื้อหาที่คุณต้องการให้เว็บแอปพลิเคชันของบุคคลที่สามแสดง
โซเชียลมีเดียอื่นๆ จะมีไวยากรณ์ที่คล้ายกัน เช่น มาร์กอัปการ์ด Twitter ซึ่งจะมอบประสบการณ์ที่แตกต่างกันตามตำแหน่งที่ลิงก์ปรากฏ หรือเปิดใช้การติดตามลิงก์โดยเพิ่มพารามิเตอร์ที่ส่วนท้ายของ URL
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
ในกรณีของ Twitter ค่าของแอตทริบิวต์ name จะไม่ขัดแย้งกับข้อกำหนดเฉพาะในอนาคต แทนที่จะใช้แอตทริบิวต์ใหม่ เช่น แอตทริบิวต์ property ใน Open Graph สำหรับข้อมูลการ์ด Twitter ค่าชื่อทั้งหมดจะขึ้นต้นด้วย twitter:
คุณดูได้ว่าการ์ดโซเชียลมีเดียของคุณจะมีลักษณะอย่างไรใน Twitter และ Facebook
คุณจะมีรูปภาพการ์ด ชื่อ และคำอธิบายที่แตกต่างกันสำหรับแต่ละเว็บไซต์โซเชียลมีเดียหรือสำหรับพารามิเตอร์ลิงก์ที่แตกต่างกันได้ เช่น https://perfmattersconf.com ตั้งค่าที่แตกต่างกันสําหรับ og:image, og:title และ og:description ตามพารามิเตอร์ของ URL
หากป้อน https://perfmattersconf.com?name=erica และ https://perfmattersconf.com?name=melanie ในโปรแกรมตรวจสอบการ์ดของ Twitter คุณจะเห็นการ์ด 2 ใบนี้แตกต่างกัน โดยเราได้ให้เนื้อหาที่ต่างกันแม้ว่าทั้งสองจะลิงก์กับหน้าแรกของการประชุมเดียวกันก็ตาม
ข้อมูลเมตาอื่นๆ ที่เป็นประโยชน์
หากมีผู้บุ๊กมาร์กเว็บไซต์ของคุณ เพิ่มลงในหน้าจอหลัก หรือหากเว็บไซต์ของคุณเป็น Progressive Web App หรือทำงานแบบออฟไลน์หรือไม่แสดงฟีเจอร์ Chrome ของเบราว์เซอร์ คุณสามารถระบุไอคอนแอปพลิเคชันสำหรับหน้าจอหลักของอุปกรณ์เคลื่อนที่ได้
คุณใช้แท็ก <link> เพื่อลิงก์กับอิมเมจเริ่มต้นที่ต้องการใช้ได้ ต่อไปนี้เป็นตัวอย่างของการรวมรูปภาพ 2-3 รูปพร้อมกับคำค้นหาสื่อ
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
หากเว็บไซต์หรือแอปพลิเคชันของคุณใช้เว็บแอปได้ ซึ่งหมายความว่าเว็บไซต์จะทำงานได้ด้วยตนเองโดยมี UI น้อยที่สุด เช่น ไม่มีปุ่มย้อนกลับ คุณสามารถใช้เมตาแท็กเพื่อบอกเบราว์เซอร์ได้เช่นกัน โดยทำดังนี้
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
โปรดใส่ชิ้นงานเหล่านี้ต่อเมื่อแอปของคุณรองรับแอปได้จริงๆ หากไม่มีเว็บไซต์ คุณกำลังตั้งค่าผู้สนับสนุนที่กระตือรือร้นมากที่สุด ซึ่งก็คือผู้ที่เพิ่มเว็บไซต์ของคุณในหน้าจอหลัก เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี คุณจะสูญเสียความรักของคนเหล่านี้
หากมีใครจะบันทึกไอคอนของคุณลงในหน้าจอหลักของอุปกรณ์ตัวจิ๋ว คุณควรระบุระบบปฏิบัติการด้วยชื่อย่อที่ใช้พื้นที่บนหน้าจอหลักของอุปกรณ์ขนาดเล็กไม่มาก ซึ่งทำได้โดยการรวมเมตาแท็กหรือใช้ไฟล์ Manifest ของเว็บ ต่อไปนี้เป็นการสาธิตเมธอดเมตาแท็ก
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
คุณได้ครอบคลุมเมตาแท็กหลายรายการ ซึ่งทั้งหมดจะทำให้ส่วนหัวของคุณยาวขึ้น หากคุณกำลังสร้างเว็บแอปพลิเคชันแบบ Progressive Web App ที่สามารถใช้งานแบบออฟไลน์และใช้งานแบบออฟไลน์ได้ แทนที่จะต้องใส่เมตาแท็กเพิ่มเติม 2 รายการนี้ คุณสามารถรวม short_name: MLW ในไฟล์ Webmanifest ได้ง่ายและกระชับมากขึ้น
ไฟล์ Manifest สามารถป้องกันส่วนหัวที่ไม่ถูกต้องซึ่งเต็มไปด้วยแท็ก <link> และ <meta> เราสามารถสร้างไฟล์ Manifest ซึ่งโดยทั่วไปจะเรียกว่า manifest.webmanifest หรือ manifest.json จากนั้นเราจะใช้แท็ก <link> ที่มีประโยชน์ซึ่งมีแอตทริบิวต์ rel ที่ตั้งค่าเป็น manifest และแอตทริบิวต์ href ที่ตั้งค่าเป็น URL ของไฟล์ Manifest ดังนี้
<link rel="manifest" href="/mlw.webmanifest" />
ซีรีส์นี้มุ่งเน้นที่ HTML แต่คุณสามารถดูหลักสูตร web.dev เกี่ยวกับเว็บแอปพลิเคชันแบบ Progressive หรือเอกสารประกอบไฟล์ Manifest ของเว็บแอปของ MDN ได้
ตอนนี้ HTML มีลักษณะดังนี้
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
ค่อนข้างยาวทีเดียว แต่ก็เสร็จเรียบร้อยแล้ว
ตอนนี้ <head> ของคุณเสร็จสมบูรณ์แล้ว คุณสามารถเจาะลึกบางอย่างกับ HTML เชิงความหมายได้
ทดสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับข้อมูลเมตา
คำสั่งรีเฟรช Pragma
เปิดเมตาแท็กกราฟ