ป้ายกำกับ <meta> ใน <head> ให้ metadata เกี่ยวกับหน้า — การเข้ารหัสอักขระ พฤติกรรม viewport คำอธิบาย SEO และตัวอย่างการแชร์บนโซเชียล พวกมันไม่ได้ถูกเรนเดอร์ แต่ถูกอ่านโดยเบราว์เซอร์ เครื่องมือค้นหา และแพลตฟอร์มโซเชียล
สองข้อที่จำเป็น
ป้ายกำกับ <meta> ใน <head> ให้ metadata เกี่ยวกับหน้า — การเข้ารหัสอักขระ พฤติกรรม viewport คำอธิบาย SEO และตัวอย่างการแชร์บนโซเชียล พวกมันไม่ได้ถูกเรนเดอร์ แต่ถูกอ่านโดยเบราว์เซอร์ เครื่องมือค้นหา และแพลตฟอร์มโซเชียล
charset ให้แน่ใจว่าข้อความ (โดยเฉพาะ non-ASCII) ถูกถอดรหัสอย่างถูกต้อง วางไว้ก่อนviewport คือสิ่งที่ทำให้ไซต์ ตอบสนอง บนมือถือ — โดยไม่มี โทรศัพท์จะแสดงที่ความกว้าง 980px ปลอมและซูมออก ทำลาย CSS ตอบสนองของคุณ<title>Page Title — 50–60 chars</title>
<meta name="description" content="Summary shown in search results, ~150 chars" />
<link rel="canonical" href="https://site.com/page" /> <!-- avoid duplicate-content penalties -->
<title> และ description คือสิ่งที่ปรากฏในผลการค้นหา Google ดังนั้นจึงขับเคลื่อนการคลิกผ่าน canonical บอกเครื่องมือค้นหาว่า URL ไหนเป็นแบบบัญญัติ
<meta property="og:title" content="Shareable title" />
<meta property="og:description" content="Shown when shared" />
<meta property="og:image" content="https://site.com/preview.jpg" />
<meta property="og:url" content="https://site.com/page" />
<meta name="twitter:card" content="summary_large_image" />
สิ่งเหล่านี้ควบคุมการ์ดที่ปรากฏเมื่อลิงก์ของคุณถูกแชร์บน Facebook LinkedIn Slack X เป็นต้น — หากไม่มีสิ่งเหล่านี้ คุณจะได้ตัวอย่างที่น่าเกลียดหรือว่าง
charset และ viewport ไม่สามารถเจรจาได้สำหรับการเรนเดอร์ที่ถูกต้องและการตอบสนองบนมือถือ title/description/canonical ขับเคลื่อน SEO ป้ายกำกับ Open Graph ควบคุมว่าลิงก์ของคุณมีลักษณะอย่างไรเมื่อแชร์
รวมกันแล้ว พวกมันเป็นชั้นข้อมูลที่ทำให้หน้าแสดงผลอย่างถูกต้อง จัดอันดับได้ และแชร์ได้ดี