meta charset viewport author และ description
เพิ่มเมตาแท็กสำคัญสำหรับการแสดงผลและการค้นพบ
meta charset viewport author และ description เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
องค์ประกอบเมทา
องค์ประกอบ <meta> ให้ข้อมูลเมทาเกี่ยวกับหน้าเว็บ เป็นองค์ประกอบว่าง จึงไม่มีแท็กปิด:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Learn HTML5 from scratch.">
<meta name="author" content="Jane Smith">
</head>การเข้ารหัสอักขระของเมทา
ใช้ประกาศการเข้ารหัสอักขระ:
<meta charset="UTF-8">
<!-- Must be:
- Inside <head>
- Within the first 1024 bytes of the file
- Best: the first tag inside <head>
- Always use UTF-8 for web pages
-->เมทาวิวพอร์ต
แท็กเมทาวิวพอร์ตควบคุมการแสดงผลบนอุปกรณ์เคลื่อนที่:
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Without this, mobile browsers render at desktop width (900-980px)
then scale down — everything looks tiny -->
<!-- width=device-width: viewport width = device width -->
<!-- initial-scale=1: start at 1:1 zoom -->
<!-- This is REQUIRED for responsive design to work -->ค่าของเนื้อหาวิวพอร์ต
ค่าของวิวพอร์ตอื่น ๆ ที่อาจพบ:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<!-- maximum-scale: max zoom level users can reach -->
<!-- minimum-scale: min zoom level -->
<!-- AVOID: user-scalable=no
It prevents users from zooming, which is a WCAG 1.4.4 violation -->
<!-- <meta name="viewport" content="user-scalable=no"> BAD -->คำอธิบายเมทา
แท็กเมทาคำอธิบายจะแสดงบทสรุปที่ใช้ในผลการค้นหา:
<meta name="description" content="
Learn HTML5 semantic elements, forms, accessibility,
and modern web APIs. Practical lessons for real-world developers.
">
<!-- Recommended: 150-160 characters -->
<!-- Google may show this in the SERP snippet -->
<!-- Not a direct ranking factor, but affects click-through rate -->
<!-- Make every page's description unique and compelling -->ผู้เขียนเมทา
แท็กเมทาผู้เขียนใช้ระบุผู้เขียนหน้าเว็บ:
<meta name="author" content="Jane Smith">
<!-- Rarely used by search engines today -->
<!-- Schema.org Person is more semantic for author attribution -->
<!-- Still good practice for internal content management -->คำสำคัญเมทา (เลิกใช้แล้ว)
แท็กเมาคำสำคัญเคยมีความสำคัญ แต่ปัจจุบันถูกละเลยแล้ว:
<!-- Old and ignored by Google since 2009: -->
<meta name="keywords" content="html5, web development, tutorial">
<!-- Don't waste time on this -->
<!-- Focus on quality content and real on-page keywords instead -->เมทา http-equiv
แอตทริบิวต์ http-equiv จำลองส่วนหัวการตอบกลับ HTTP:
<!-- Redirect after 5 seconds: -->
<meta http-equiv="refresh" content="5; url=/new-page">
<!-- Set Content Security Policy: -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<!-- Cache control (mostly superseded by real HTTP headers): -->
<meta http-equiv="cache-control" content="no-cache">เมทาสำหรับโปรแกรมรวบรวมข้อมูล
แท็กเมาสำหรับโปรแกรมรวบรวมข้อมูลควบคุมการรวบรวมข้อมูลของเครื่องมือค้นหา:
<meta name="robots" content="index, follow">
<!-- index: allow indexing (default) -->
<!-- follow: follow links (default) -->
<!-- noindex: don't add to search index -->
<!-- nofollow: don't follow links -->
<!-- noarchive: don't show cached version -->
<!-- Page you don't want indexed: -->
<meta name="robots" content="noindex">ตัวอย่างข้อมูลเมทาของกราฟสำหรับการแชร์
ส่วน head ที่กำหนดค่าไว้อย่างเหมาะสม:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML5 Forms Guide — CoddyKit</title>
<meta name="description" content="Master HTML5 forms: inputs, validation, and accessibility.">
<meta name="author" content="CoddyKit Team">
<link rel="canonical" href="https://coddykit.com/html/forms">
</head>ตัวสร้างเมทา
แท็กเมาตัวสร้างใช้ระบุเครื่องมือที่สร้างหน้าเว็บ:
<!-- WordPress adds: -->
<meta name="generator" content="WordPress 6.4">
<!-- Jekyll adds: -->
<meta name="generator" content="Jekyll v4.3.2">
<!-- You can add your own: -->
<meta name="generator" content="MySSG v1.0">
<!-- Security note: this reveals your CMS version to attackers
Some recommend removing it -->ตรวจสอบอย่างรวดเร็ว
แท็กเมาใดจำเป็นสำหรับการออกแบบที่ปรับตามอุปกรณ์บนอุปกรณ์เคลื่อนที่
สรุปทบทวน: แท็กเมทา
แท็กเมทาที่สำคัญ:
<meta charset="UTF-8">— ต้องอยู่ลำดับแรกใน head เสมอ<meta name="viewport" ...>— จำเป็นสำหรับการออกแบบที่ปรับตามอุปกรณ์<meta name="description">— ตัวอย่างข้อมูลใน SERP ความยาว 150-160 อักขระ<meta name="author">— แสดงความเป็นเจ้าของเนื้อหา- keywords ล้าสมัยแล้ว ส่วน robots ใช้ควบคุมโปรแกรมรวบรวมข้อมูล
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “meta charset viewport author และ description” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “meta charset viewport author และ description” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “meta charset viewport author และ description”
เพิ่มเมตาแท็กสำคัญสำหรับการแสดงผลและการค้นพบ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “meta charset viewport author และ description” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- title และบทบาทต่อ SEO
- meta charset viewport author และ description
- URL หลักและเมตา robots
- Favicon และ Apple Touch Icon