การตรวจสอบ Open Graph ออนไลน์: ลิงก์เว็บไซต์ปรากฏบนโซเชียลมีเดียอย่างไร และวิธีแก้ไข

คำตอบสั้นๆ คือ: ในการตรวจสอบ Open Graph ออนไลน์ ให้วางที่อยู่หน้าเว็บลงในโปรแกรม ดีบัก Open Graph ฟรี PromoPilot โปรแกรม จะอ่านแท็ก og:* และ Twitter Card ทั้งหมด ตรวจสอบการมีอยู่และขนาดของรูปภาพ ประเมินความสมบูรณ์ของมาร์กอัป และแสดงตัวอย่างลิงก์สำหรับ Facebook, X (Twitter) และ LinkedIn พร้อมคำแนะนำเกี่ยวกับสิ่งที่จะเพิ่ม ไม่จำเป็นต้องลงทะเบียน ด้านล่างนี้คุณจะพบแท็กที่จำเป็น ขนาด og:image ที่จำเป็น และวิธีการอัปเดตตัวอย่างที่ "ค้าง"

ผมทำเว็บไซต์มา 12 ปีแล้ว และผมได้ยินคำถามจากลูกค้าบ่อยกว่าคำถามเกี่ยวกับการจัดอันดับ Telegram อีก ส่วนใหญ่แล้วมันใช้เวลาแค่ห้านาทีเท่านั้น ถ้าคุณรู้ว่าจะต้องดูตรงไหน

OpenGraph Debugger ตรวจสอบอะไรบ้าง?

เมื่อคุณแทรกลิงก์ลงในโพสต์หรือข้อความ แพลตฟอร์มจะเข้าไปที่หน้าเว็บและค้นหาแท็ก Open Graph หากพบแท็ก ระบบจะแสดงผลเป็นการ์ดที่สวยงาม แต่ถ้าไม่พบ ระบบจะใช้ข้อมูลที่พบหรือแสดง URL แบบธรรมดา เครื่องมือนี้จะตรวจสอบเฉพาะสิ่งที่เครือข่ายสังคมออนไลน์อ่านได้เท่านั้น

วิธีตรวจสอบหน้า Open Graph ออนไลน์?

1. เปิด โปรแกรม Open Graph Debugger
2. ป้อน URL ของหน้าเว็บ ที่คุณต้องการแชร์: บทความ ผลิตภัณฑ์ หรือหน้า Landing Page สำหรับโฆษณา แล้วคลิก "เลือก"
3. ตรวจสอบรายการแท็ก: แท็กใดถูกตั้งค่า แท็กใดว่างเปล่า และมีที่อยู่ต่างประเทศหรือที่อยู่ทดสอบใน og:url หรือไม่
4. ตรวจสอบภาพตัวอย่างของแต่ละช่อง: ชื่อเรื่องถูกตัดขาดหรือไม่ ภาพแสดงชัดเจนหรือไม่ และมีข้อความสำคัญใดๆ อยู่บริเวณขอบภาพหรือไม่
5. โปรดเพิ่มแท็กที่ขาดหายไป ตามคำแนะนำ และตรวจสอบหน้าเว็บอีกครั้ง

หน้าเครื่องมือ: ช่องกรอกที่อยู่, ปุ่ม "ตรวจสอบ", รายการตรวจสอบ และคำถามที่พบบ่อย (FAQ)

เครื่องมือนี้มีขนาดเล็ก: ขีดจำกัดรายวันเพียงพอสำหรับผู้เยี่ยมชมในการตรวจสอบเทมเพลตทั้งหมดของเว็บไซต์ ได้แก่ หน้าแรก หมวดหมู่ สินค้า และบทความ หลังจากลงทะเบียนฟรีแล้ว ขีดจำกัดจะเพิ่มขึ้นเป็นสามเท่า

ข้อผิดพลาดที่พบบ่อยที่สุดใน Open Graph คืออะไร?

นี่คือสิ่งที่ฉันพบเห็นได้เกือบทุกเว็บไซต์ และลำดับขั้นตอนในการแก้ไขปัญหา

1. ไม่มี og:image หรือระบุไว้เป็น URL สัมพัทธ์ เครือข่ายโซเชียลจะไม่เข้าใจ content="/img/cover.jpg" —ต้องใช้ URL เต็มที่ขึ้นต้นด้วย https:// หากไม่มีรูปภาพ การเข้าถึงโพสต์จะลดลงอย่างมาก
2. รูปภาพมีขนาดเล็กเกินไป โลโก้ขนาด 200x200 พิกเซลทำให้ด้านข้างของการ์ดกลายเป็นสี่เหลี่ยมจัตุรัสเล็กๆ จำเป็นต้องใช้รูปภาพขนาด 1200x630 พิกเซล
3. ใช้ภาพโลโก้เดียวสำหรับทั้งเว็บไซต์ บทความทุกชิ้นและสินค้าทุกชิ้นบนโซเชียลมีเดียควรมีหน้าตาเหมือนกันหมด โดยมีโลโก้กำกับอยู่ สำหรับบล็อกและแคตตาล็อก ควรใช้ภาพจากภาพหลักของเพจนั้นๆ
4. og:url จะนำไปยังที่อยู่อื่น เช่น หน้าแรก โดเมนทดสอบ หรือเวอร์ชัน http:// แพลตฟอร์มสามารถรวมลิงก์ทั้งหมดไว้ในหน้าเดียวได้
5. ไม่มี twitter:card หากไม่มีคำสั่งนี้ X มักจะแสดงการ์ดขนาดเล็ก หากต้องการภาพขนาดใหญ่ คุณต้องใช้ summary_large_image
6. og:title จะทำซ้ำชื่อเรื่องโดยเพิ่มคำว่า "ซื้อ" และชื่อแบรนด์ เข้าไป ในฟีดโซเชียลมีเดีย มันจะดูเหมือนโฆษณา ควรใช้หัวข้อที่ดึงดูดใจมากกว่า เช่น หัวข้อสำหรับโพสต์

ชุดขั้นต่ำที่ถูกต้องมีลักษณะดังนี้:

<meta property="og:title" content="Как выбрать кожаный рюкзак: 7 признаков качества"> <meta property="og:type" content="article"> <meta property="og:url" content=" https://example.com/blog/kozhanyj-ryukzak/"> <meta property="og:image" content=" https://example.com/img/og/kozhanyj-ryukzak.jpg"> <meta name="twitter:card" content="summary_large_image">

วิธีเตรียมภาพสำหรับ og:image ทำอย่างไร?

ภาพบนการ์ดเป็นส่วนที่โดดเด่นที่สุด และเป็นส่วนที่หลายคนมักประหยัดงบประมาณ นี่คือหลักเกณฑ์บางข้อที่ผมยึดถือ:

• ขนาดภาพคือ 1200×630 พิกเซล และจัดวางในแนวนอน เครือข่ายสังคมออนไลน์จะตัดส่วนบนและล่างของภาพสินค้าที่เป็นรูปสี่เหลี่ยมจัตุรัส ซึ่งอาจทำให้ภาพสินค้าบางส่วนขาดส่วนหัวหรือส่วนเท้าไปได้
• สิ่งสำคัญคือต้องอยู่ตรงกลาง แพลตฟอร์มต่างๆ ตัดขอบไม่เหมือนกัน และในฟีดบนมือถือ การ์ดจะมีขนาดเล็กกว่า ดังนั้นควรใช้ตัวอักษรขนาดใหญ่และเว้นระยะห่างจากขอบ
• ข้อความน้อยที่สุด ชื่อเรื่องอยู่ด้านล่างภาพแล้ว ข้อความ 3-6 คำ หรือไม่มีคำบรรยายภาพเลยก็เพียงพอแล้ว
• ไฟล์มีขนาดเล็ก ไฟล์ JPG หรือ PNG ที่มีขนาดเหมาะสมจะโหลดได้อย่างรวดเร็ว และแพลตฟอร์มจะไม่หมดเวลาการแสดงผล
• มีภาพเฉพาะสำหรับแต่ละหน้าสำคัญ สำหรับบทความและผลิตภัณฑ์ การสร้างภาพโดยอัตโนมัติจะช่วยให้สะดวกยิ่งขึ้น เช่น ภาพปกบทความหรือภาพหลักของผลิตภัณฑ์

วิธีทดสอบที่ดีคือเปิดดูตัวอย่างในดีบักเกอร์บนโทรศัพท์ของคุณ หากลิงก์ไม่ชัดเจนโดยไม่ต้องซูมเข้า แสดงว่าต้องปรับปรุงภาพใหม่

ฉันจะอัปเดตตัวอย่างเก่าหลังจากแก้ไขข้อผิดพลาดได้อย่างไร?

สถานการณ์ทั่วไป: คุณแก้ไขแท็กแล้ว แต่โซเชียลเน็ตเวิร์กยังคงแสดงภาพเก่าอยู่ สาเหตุมาจากแคช: แพลตฟอร์มจดจำภาพตัวอย่างจากการแชร์ครั้งแรกไว้ บน Facebook การรวบรวมข้อมูลใหม่ใน Sharing Debugger จะช่วยได้ บน LinkedIn ใช้ Post Inspector และบน Telegram ใช้บอท @WebpageBot ที่คุณส่งลิงก์ไปให้ หากวิธีทั้งหมดไม่ได้ผล ให้เพิ่มพารามิเตอร์ที่ไม่เป็นอันตรายลงในที่อยู่ เช่น ?v=2: สำหรับแพลตฟอร์มแล้ว นี่คือลิงก์ใหม่

การเปรียบเทียบ: Open Graph Debugger และโปรแกรมทางเลือกอื่นๆ

สรุป: จำเป็นต้องใช้ดีบักเกอร์อย่างเป็นทางการของแต่ละแพลตฟอร์มเพื่อล้างแคช แต่แต่ละแพลตฟอร์มจะแสดงเฉพาะเครือข่ายของตนเองเท่านั้น หากต้องการดูตัวอย่างทั้งหมดและรายการแท็กที่หายไปในคราวเดียว ดีบักเกอร์แบบสากลจะสะดวกกว่า

อย่างไรก็ตาม PromoPilot มี เครื่องมือ SEO ฟรีถึง 87 รายการ หากคุณยังไม่ได้เขียนแท็ก เรามีบทความในชุดบทความของเราเกี่ยวกับเครื่องมือสร้างเมตาแท็กที่จะสร้างบล็อก Open Graph พร้อมแสดงตัวอย่างให้ดู

Open Graph Debugger แตกต่างจากการวิเคราะห์เมตาแท็กอย่างไร?

การวิเคราะห์เมตาแท็กจะมองหน้าเว็บผ่านมุมมองของเครื่องมือค้นหา: ชื่อเรื่อง คำอธิบาย Canonical URL hreflang และ Open Graph เป็นเพียงกลุ่มหนึ่งเท่านั้น ส่วนดีบักเกอร์จะเน้นไปที่โซเชียลมีเดีย: มันจะสร้างการ์ดสำหรับแพลตฟอร์มต่างๆ ตรวจสอบขนาดรูปภาพ และให้คำแนะนำเฉพาะตามตัวอย่างที่แสดง หากเว็บไซต์ของคุณถูกแชร์อย่างสม่ำเสมอในโซเชียลมีเดียและแอปพลิเคชันส่งข้อความ ดีบักเกอร์ก็จะยิ่งมีประโยชน์มากขึ้น

ทั้งสองวิธีมีข้อจำกัดอย่างหนึ่งคือ พวกมันอ่านโค้ด HTML ที่ส่งกลับมาจากเซิร์ฟเวอร์ หากแท็กถูกแทรกโดยสคริปต์ของเบราว์เซอร์ เครือข่ายโซเชียลหลายแห่งจะไม่เห็นแท็กเหล่านั้น ซึ่งจำเป็นต้องแก้ไขที่ฝั่งเว็บไซต์ อีกประเด็นหนึ่งคือ ตัวดีบั๊กเกอร์ตรวจสอบแท็ก แต่ไม่ได้ตรวจสอบการแชร์เอง หากหน้าเว็บมีการป้องกันด้วยรหัสผ่าน การบล็อกตามภูมิศาสตร์ หรือการป้องกันจากบอท เครือข่ายโซเชียลอาจไม่สามารถเข้าถึงได้แม้ว่าจะมีแท็กครบถ้วนก็ตาม

เมื่อไหร่ที่เครื่องมือฟรีจะไม่เพียงพอ?

โปรแกรมดีบักเกอร์จะแสดงให้เห็นว่าหน้าเว็บไม่มี og:image แต่ถ้ามีหน้าเว็บหลายพันหน้า การแทรกรูปภาพด้วยตนเองเป็นไปไม่ได้ จำเป็นต้องขอความช่วยเหลือจากผู้เชี่ยวชาญในกรณีต่อไปนี้:

• สินค้าหรือบทความแต่ละชิ้นควรมีภาพตัวอย่างของตัวเอง ซึ่งรวบรวมโดยอัตโนมัติ
• เว็บไซต์นี้ส่งคืนแท็กโดยใช้สคริปต์ และเครือข่ายสังคมออนไลน์จะไม่เห็นแท็กเหล่านั้น
• คุณเปิดตัวโฆษณาและจดหมายข่าว โดยที่การแสดงตัวอย่างแต่ละครั้งจะส่งผลต่อต้นทุนต่อคลิก
• เราต้องการการผสมผสานระหว่าง "เว็บไซต์ + ช่อง Telegram + การเผยแพร่อัตโนมัติ" พร้อมด้วยการ์ดที่เหมาะสม

ฉันสามารถช่วยอะไรเว็บไซต์ของคุณได้บ้าง?

ผมคือวาเลรี ดานยุก นักพัฒนาและผู้เชี่ยวชาญด้าน SEO ที่มีประสบการณ์ 12 ปี และลูกค้ากว่า 200 ราย การแสดงตัวอย่างลิงก์ที่สวยงามนั้นช่วยให้เข้าถึงลูกค้าได้ฟรี และผมยังปรับแต่งให้เหมาะสมกับทุกโครงการอีกด้วย

SEO และการโปรโมท

• บริการตรวจสอบ SEO เว็บไซต์แบบครบวงจร: ฉันตรวจสอบแท็กเทมเพลตทั้งหมด ตั้งค่าภาพตัวอย่างอัตโนมัติ และแก้ไขโค้ด

เว็บไซต์และร้านค้าออนไลน์

• ย้ายร้านค้าของคุณจาก Instagram ไปยังเว็บไซต์ของคุณ — พร้อมแสดงภาพตัวอย่างสินค้าอย่างถูกต้อง เพื่อให้แชร์ได้ง่าย
• หน้า Landing Page สำหรับผลิตภัณฑ์ใหม่ที่สร้างเสร็จภายในค่ำคืนเดียว – กรณีศึกษาจาก NordHarvest พร้อมการ์ดสำเร็จรูปสำหรับโซเชียลมีเดีย
• เว็บไซต์คลินิกศัลยกรรมตกแต่งที่ใช้ AI และแอปพลิเคชันผ่าน Telegram
• เว็บไซต์บน 1001site: การตั้งค่าตัวอย่างสำหรับเครือข่ายสังคมออนไลน์และการเผยแพร่อัตโนมัติใน Telegram จะดำเนินการโดยอัตโนมัติ

บอทและระบบอัตโนมัติ

• บอท Telegram ที่ใช้ AI สำหรับร้านขายซอสออนไลน์
• QuestFlow เป็นซอฟต์แวร์แบบ SaaS Telegram ด้วย AI
• ใช้ตัวแทนอีคอมเมิร์ซแทนแชทบอท

ส่งลิงก์ที่ดูไม่ดีในแอปส่งข้อความ บน Telegram มาให้ฉัน แล้วฉันจะบอกคุณว่าแท็กไหนหายไป

ผลลัพธ์

1. เครื่องมือตรวจสอบ Open Graph ออนไลน์จะแสดงให้เห็นว่าลิงก์มีลักษณะอย่างไรบน Facebook, X และ LinkedIn และแท็กใดบ้างที่ขาดหายไป
2. ค่าขั้นต่ำที่ต้องการคือ og:title, og:type, og:image (1200×630, ที่อยู่แบบเต็ม) และ og:url รวมถึง twitter:card
3. หลังจากแก้ไขเสร็จแล้ว ให้รีเซ็ตแคชของเว็บไซต์ต่างๆ ได้แก่ Sharing Debugger, Post Inspector และ @WebpageBot
4. สำหรับแคตตาล็อกและบล็อก ควรมีการรวบรวมภาพตัวอย่างโดยอัตโนมัติ เช่นเดียวกับใน 1001site

ตรวจสอบหน้าเว็บที่คุณกำลังจะแชร์ใน Open Graph Debugger เวอร์ชันฟรี ก่อนที่ผู้ติดตามของคุณจะเห็นโพสต์นั้น

แหล่งที่มา

• หน้าเครื่องมือ Open Graph Debugger ของ PromoPilot — รายการตรวจสอบและคำถามที่พบบ่อย
• Open Graph Protocol (ogp.me) - คุณสมบัติที่จำเป็นและคุณสมบัติเสริม
• Meta's Sharing Debugger และ LinkedIn Post Inspector เป็นเครื่องมืออย่างเป็นทางการของแพลตฟอร์ม