ข้อมูลเมตา OpenGraph และ Twitter Card
เพิ่มแท็กข้อมูลเมตา og: และ twitter: สำหรับตัวอย่างลิงก์โซเชียลมีเดียแบบสมบูรณ์
ข้อมูลเมตา OpenGraph และ Twitter Card เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
เหตุผลที่ใช้แท็ก OG
ข้อมูลเมตา Open Graph ช่วยให้แพลตฟอร์มโซเชียล (Facebook, LinkedIn, Slack) แสดงตัวอย่างลิงก์ที่มีรายละเอียดเมื่อมีการแชร์ลิงก์
แท็ก OG ที่จำเป็น
og:title, og:description, og:image และ og:url เป็นแท็กที่สำคัญที่สุด
<svelte:head>
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={imageUrl} />
<meta property="og:url" content={url} />
</svelte:head>ขนาดรูปภาพ
ขนาด 1200x630 เป็นขนาดรูปภาพ OG ที่แนะนำ เพื่อให้แสดงผลได้ดีที่สุดบนแพลตฟอร์มต่าง ๆ
การ์ด Twitter
Twitter รองรับแท็ก OG แต่ยังมีข้อมูลเมตา twitter: ของตนเองเพื่อควบคุมได้มากขึ้น
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />ประเภทการ์ด
Twitter รองรับการ์ดแบบ summary, summary_large_image, app และ player
การตรวจสอบ
ใช้ Sharing Debugger ของ Facebook และ Card Validator ของ Twitter เพื่อดูตัวอย่างแท็กของคุณ
URL แบบเต็ม
URL ของรูปภาพ OG ต้องเป็น URL แบบเต็ม เส้นทางแบบสัมพัทธ์จะใช้งานไม่ได้
การปรับแต่งแยกตามหน้า
กำหนดแท็ก OG แยกตามบทความ ผลิตภัณฑ์ หรือโปรไฟล์ เพื่อให้ตัวอย่างลิงก์มีบริบทชัดเจน
หลีกเลี่ยงค่าเริ่มต้นที่ซ้ำกัน
กำหนดค่าเริ่มต้นสำหรับทั้งเว็บไซต์ไว้ในเลย์เอาต์ราก แล้วเขียนทับเป็นรายหน้า
การแคช
แพลตฟอร์มโซเชียลจะเก็บข้อมูล OG ไว้ในแคช ให้ใช้เครื่องมือตรวจสอบของแพลตฟอร์มนั้นเพื่อเรียกข้อมูลใหม่
ผลกระทบในโลกจริง
ตัวอย่างลิงก์ที่มีรายละเอียดช่วยเพิ่มอัตราการคลิกผ่านจากการแชร์บนโซเชียลได้อย่างมาก
ตรวจสอบอย่างรวดเร็ว
เหตุใด URL ของรูปภาพ OG จึงต้องเป็น URL แบบเต็ม
สรุปทบทวน
เพิ่มข้อมูลเมตา OG และ Twitter ใน <svelte:head> พร้อมใช้ URL รูปภาพแบบเต็ม เพื่อสร้างตัวอย่างลิงก์บนโซเชียลที่มีรายละเอียด
คำถามที่พบบ่อย
บทเรียน “ข้อมูลเมตา OpenGraph และ Twitter Card” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อมูลเมตา OpenGraph และ Twitter Card” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อมูลเมตา OpenGraph และ Twitter Card”
เพิ่มแท็กข้อมูลเมตา og: และ twitter: สำหรับตัวอย่างลิงก์โซเชียลมีเดียแบบสมบูรณ์ คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ข้อมูลเมตา OpenGraph และ Twitter Card” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- svelte:head สำหรับแท็กข้อมูลเมตาแบบไดนามิก
- ข้อมูลเมตา OpenGraph และ Twitter Card
- ข้อมูลมีโครงสร้าง JSON-LD ใน SvelteKit
- URL มาตรฐานและการสร้างแผนผังเว็บไซต์