ในส่วนโครงสร้างเอกสาร คุณได้เรียนรู้เกี่ยวกับคอมโพเนนต์ที่คุณ (เกือบ) พบใน <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
เปิดเมตาแท็กกราฟ