Kodokon kodokon.com

SEO เชิงเทคนิค: Open Graph และข้อมูลที่มีโครงสร้าง

ควบคุมว่าหน้าเว็บของคุณแสดงตัวอย่างบนโซเชียลเน็ตเวิร์กอย่างไรด้วย Open Graph และมุ่งสู่ผลลัพธ์แบบ rich results ด้วย schema.org ในรูปแบบ JSON-LD

8 นาที · 3 คำถาม

เปิดบทเรียนนี้ใน Kodokon

เมื่อ URL ถูกแชร์บนโซเชียลเน็ตเวิร์กหรือในแอปแชต scraper จะอ่าน HTML เพื่อสร้างการ์ดตัวอย่าง โปรโตคอล Open Graph ขับเคลื่อนการ์ดนั้น: og:title, og:description, og:type, og:url และเหนือสิ่งอื่นใด og:image ซึ่งต้องเป็น URL แบบสัมบูรณ์ (พาธแบบสัมพัทธ์จะถูกละเว้นโดยแพลตฟอร์มส่วนใหญ่) กับดักในโลกจริง: scraper เหล่านี้ไม่รัน JavaScript ถ้าแท็กของคุณถูกฉีดเข้ามาฝั่งไคลเอนต์โดยเฟรมเวิร์กของคุณ ตัวอย่างจะว่างเปล่า มันต้องมีอยู่ใน HTML ที่ถูกส่งมาแต่แรก (SSR หรือการสร้างแบบสแตติก)

HTML
<meta property="og:title"
      content="The filter coffee guide">
<meta property="og:type" content="article">
<meta property="og:url"
      content="https://example.com/cafe-filtre">
<meta property="og:image"
      content="https://example.com/cover-1200.jpg">
<meta property="og:description"
      content="Ratios and techniques for a clean cup.">
พื้นฐาน Open Graph พร้อม og:image แบบสัมบูรณ์

สองสิ่งที่เพิ่มเข้ามาเติมเต็มพื้นฐาน <link rel="canonical"> กำหนด URL อ้างอิงเมื่อหน้าเว็บเข้าถึงได้จากหลายที่อยู่ (พารามิเตอร์ติดตาม, การแบ่งหน้า): มันคือแนวป้องกันของคุณต่อเนื้อหาซ้ำ และแท็ก Twitter Cards: แพลตฟอร์มจะย้อนกลับไปใช้ Open Graph สำหรับเนื้อหา แต่ยังต้องการ twitter:card เพื่อเลือกรูปแบบการแสดงผล โดยเฉพาะ summary_large_image

HTML
<link rel="canonical"
      href="https://example.com/cafe-filtre">
<meta name="twitter:card"
      content="summary_large_image">
Canonical และรูปแบบการ์ด: สองบรรทัดที่คุ้มค่า

ข้อมูลที่มีโครงสร้างของ schema.org อธิบายความหมายของเนื้อหาของคุณต่อเครื่องมือค้นหา: บทความ, สินค้า, สูตรอาหาร, เบรดครัมบ์, FAQ มีสามไวยากรณ์ (microdata, RDFa, JSON-LD) แต่ Google แนะนำ JSON-LD: บล็อกที่สมบูรณ์ในตัวเองภายใน <script type="application/ld+json"> แยกออกจากมาร์กอัปทางสายตา จึงสร้างและดูแลรักษาง่าย มาร์กอัปนี้คือสิ่งที่ทำให้หน้าเว็บของคุณมีสิทธิ์ได้ rich results: ดาวรีวิว, ราคา และวันที่ของอีเวนต์ ตรงในหน้าผลการค้นหา

HTML
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "The filter coffee guide",
  "datePublished": "2026-05-12",
  "author": {
    "@type": "Person",
    "name": "Ana Costa"
  }
}
</script>
Article ในรูปแบบ JSON-LD: อ่านโดยเครื่องมือค้นหา ไม่เคยถูกเรนเดอร์

ทดสอบความรู้

ตรวจสอบว่าคุณจำประเด็นสำคัญของบทเรียนนี้ได้ครบถ้วน

  1. ข้อจำกัดใดที่ใช้กับค่าของ og:image?
    • มันต้องเป็น URL แบบสัมบูรณ์ รวมโดเมนด้วย
    • มันต้องชี้ไปยังไฟล์ในรูปแบบ WebP
    • มันต้องเข้ารหัส base64 ภายในแท็ก
  2. ทำไม Google จึงแนะนำ JSON-LD มากกว่า microdata?
    • JSON-LD ถูกรันเป็น JavaScript จึงเร็วกว่า
    • JSON-LD เป็นบล็อกที่สมบูรณ์ในตัวเอง แยกจากมาร์กอัปที่มองเห็นได้และสร้างง่าย
    • microdata ไม่ถูกอ่านโดยเครื่องมือค้นหาอีกต่อไป
  3. มาร์กอัป schema.org ที่ถูกต้องและครบถ้วนรับประกันอะไร?
    • แสดง rich results ทุกครั้ง
    • เพิ่มอันดับของหน้าเว็บโดยตรง
    • สิทธิ์ในการได้ rich results โดยไม่รับประกันการแสดงผล