OpenGraph og:title og:description og:image
ควบคุมลักษณะที่หน้าเว็บปรากฏเมื่อแชร์บนเครือข่ายสังคม
OpenGraph og:title og:description og:image เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
OpenGraph คืออะไร
OpenGraph เป็นโพรโทคอลข้อมูลเมตาที่ Facebook เปิดตัว เพื่อให้ทุกหน้าอธิบายได้ว่าควรแสดงผลอย่างไรเมื่อแชร์บนแพลตฟอร์มสังคมออนไลน์ แท็กจะอยู่ใน <head> ในรูปคู่ <meta property="og:..." content="..."> และเครือข่ายสังคมออนไลน์หลักทุกแห่งจะดึงข้อมูลเหล่านี้ไปใช้
แท็กหลัก
แท็ก 4 รายการที่จำเป็นในทางปฏิบัติคือ og:title, og:description, og:image และ og:url หากขาดรายการใดรายการหนึ่ง การ์ดแชร์จะดูไม่น่าสนใจ หรือแย่กว่านั้นคือไม่มีตัวอย่างแสดงผลเลย ซึ่งผู้ใช้มักจะข้ามไป
<meta property="og:title" content="Learn HTML">
<meta property="og:description" content="From DOCTYPE to Web Components.">
<meta property="og:image" content="https://example.com/og.png">
<meta property="og:url" content="https://example.com/learn">og:title
พาดหัวบนการ์ดแชร์ ควรจำกัดให้ต่ำกว่าประมาณ 60 อักขระ เพื่อให้พอดีในบรรทัดเดียวและไม่ถูกเครือข่ายสังคมออนไลน์ตัดทอน ให้สอดคล้องกับ <title> ของหน้า แต่สามารถปรับให้เหมาะกับการคลิกต่อได้
og:description
สรุปหนึ่งหรือสองประโยคที่แสดงใต้ชื่อเรื่อง ควรมีความยาว 120–160 อักขระ ยาวพอที่จะดึงดูดความสนใจและสั้นพอที่จะแสดงได้ครบถ้วนบนทุกแพลตฟอร์ม หลีกเลี่ยงพาดหัวหลอกล่อ เพราะคำอธิบายที่ตรงไปตรงมาช่วยสร้างการมีส่วนร่วมในระยะยาวได้มากกว่า
og:image
ภาพหลัก ใช้ JPG หรือ PNG ขนาด 1200x630 พิกเซล (เล็กกว่าประมาณ 5 MB) ใช้ URL แบบสัมบูรณ์เสมอ เพราะ URL แบบสัมพัทธ์ใช้ไม่ได้เมื่อโปรแกรมดึงข้อมูลไม่รู้ว่า “หน้านี้” คือหน้าใด ระบุ og:image:width และ og:image:height เพื่อข้ามคำขอเพิ่มเติมระหว่างการสร้างตัวอย่างแสดงผล
og:url
URL หลักของหน้า กำหนดค่านี้แม้ว่าหน้าจะมี <link rel="canonical"> อยู่แล้ว เพราะโปรแกรมดึงข้อมูลบางตัวให้ความสำคัญกับแท็ก OG มากกว่า ตัดพารามิเตอร์ติดตามออก เพื่อไม่ให้ URL ที่แชร์กลายเป็นหน้า “แตกต่างกัน” จำนวนมากในฐานข้อมูลของแพลตฟอร์มสังคมออนไลน์
og:type
บอกแพลตฟอร์มว่าเนื้อหานี้เป็นประเภทใด เช่น "website", "article", "product", "video.movie", "book" เป็นต้น โดย Article เป็นตัวเลือกที่ใช้บ่อยที่สุดสำหรับบทความในบล็อก และเปิดให้ใช้แท็กเพิ่มเติมอย่าง article:published_time และ article:author
og:locale
ภาษาและภูมิภาคของเนื้อหาตาม BCP-47 (เช่น "en_US", "tr_TR") เมื่อใช้ร่วมกับ og:locale:alternate จะบอกเครือข่ายว่าหน้านี้มีภาษาอื่นใดให้บริการบ้าง ซึ่งเป็นวิธีที่ Facebook ใช้ตัดสินใจว่าควรแปลตัวอย่างแสดงผลหรือไม่
og:site_name
ชื่อที่ใช้แสดงของเว็บไซต์ผู้เผยแพร่ เครือข่ายบางแห่งจะแสดงชื่อนี้เป็นคำบรรยายรองบนการ์ด ควรใช้ชื่อที่สั้นและสอดคล้องกันในทุกหน้า เพื่อให้แบรนด์มีลักษณะเหมือนกันไม่ว่าจะมีการแชร์บทความใด
การทดสอบการ์ด
ใช้ Sharing Debugger ของ Facebook และ Post Inspector ของ LinkedIn เพื่อดึงหน้าเว็บในแบบที่โปรแกรมดึงข้อมูลมองเห็น ดูแท็กที่วิเคราะห์ได้ และรีเฟรชตัวอย่างแสดงผลที่แคชไว้ หลังนำ og:image ใหม่ไปใช้งาน ต้องดึงข้อมูลใหม่ มิฉะนั้นผู้ใช้จะเห็นภาพเก่าเป็นเวลาหลายวัน
ข้อผิดพลาดที่พบบ่อย
แท็กที่แสดงผลฝั่งเซิร์ฟเวอร์เป็นสิ่งจำเป็น เพราะโปรแกรมดึงข้อมูลส่วนใหญ่ไม่เรียกใช้ JavaScript ดังนั้นแท็ก OG ที่ React เพิ่มเข้ามาฝั่งไคลเอนต์จึงมองไม่เห็น ต้องแสดงแท็กเหล่านี้ใน HTML เริ่มต้น โดยควรใช้ SSR หรือ SSG มิฉะนั้นการ์ดแชร์จะยังคงเป็นแบบทั่วไปตลอดไป
ตรวจสอบความรู้
เหตุใด og:image จึงต้องใช้ URL แบบสัมบูรณ์แทนเส้นทางแบบสัมพัทธ์
สรุป
แท็ก OpenGraph (og:title, og:description, og:image พร้อม URL แบบสัมบูรณ์, og:url, og:type, og:locale, og:site_name) ควบคุมลักษณะของทุกหน้าเมื่อมีการแชร์ แสดงผลแท็กเหล่านี้ฝั่งเซิร์ฟเวอร์ จำกัดชื่อเรื่องให้ต่ำกว่า 60 อักขระ คำอธิบายประมาณ 150 อักขระ ใช้ภาพขนาด 1200x630 และทดสอบด้วย Facebook Sharing Debugger ก่อนเปิดใช้งานจริง
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 40
- บทเรียน
- 159
คำถามที่พบบ่อย
บทเรียน “OpenGraph og:title og:description og:image” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “OpenGraph og:title og:description og:image” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “OpenGraph og:title og:description og:image”
ควบคุมลักษณะที่หน้าเว็บปรากฏเมื่อแชร์บนเครือข่ายสังคม คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “OpenGraph og:title og:description og:image” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- OpenGraph og:title og:description og:image
- เมตาแท็ก Twitter Card
- พื้นฐานข้อมูลแบบมีโครงสร้าง JSON-LD
- Hreflang สำหรับหน้าสากล