RANKFINDER

คู่มือการสร้าง Schema Markup แบบสมบูรณ์
คู่มือการสร้าง Schema Markup แบบสมบูรณ์

คู่มือ Schema Markup ฉบับสมบูรณ์ สำหรับเว็บไซต์ในไทย

Schema Markup คืออะไร ? – เป็นรหัส HTML พิเศษที่ช่วยให้ Search Engine เข้าใจเนื้อหาบนเว็บไซต์ได้ดียิ่งขึ้น โดยเฉพาะอย่างยิ่งสำหรับเว็บไซต์ภาษาไทยที่มีความท้าทายในการทำความเข้าใจโครงสร้างภาษาที่ซับซ้อน การใช้ Schema Markup จะช่วยให้ Google และ Search Engine อื่นๆ แสดงผล Rich Snippets ได้อย่างถูกต้อง ซึ่งจะช่วยเพิ่มอัตราการคลิก (CTR) และดึงดูดผู้ใช้งานได้มากขึ้น นอกจากนี้ Schema ยังช่วยในการจัดหมวดหมู่และจัดระเบียบข้อมูลบนเว็บไซต์ให้เป็นระบบ ทำให้ง่ายต่อการค้นหาและเข้าถึงข้อมูล

คู่มือการสร้าง Schema Markup แบบสมบูรณ์


ประเภทของ Schema Markup ที่จำเป็นสำหรับเว็บไซต์ไทย

การเลือกใช้ Schema Markup ที่เหมาะสมกับประเภทของเว็บไซต์เป็นสิ่งสำคัญ สำหรับเว็บไซต์ธุรกิจ ควรใช้ LocalBusiness Schema ที่ระบุข้อมูลที่ตั้ง เวลาทำการ และข้อมูลการติดต่อ สำหรับเว็บข่าวหรือบทความ ควรใช้ Article Schema ที่ระบุผู้เขียน วันที่เผยแพร่ และหมวดหมู่ของเนื้อหา ส่วนเว็บไซต์ร้านค้าออนไลน์ ควรใช้ Product Schema ที่ระบุราคา สถานะสินค้า และรีวิวจากลูกค้า การเลือกใช้ Schema ที่ถูกต้องจะช่วยให้ Search Engine แสดงผลข้อมูลได้ตรงตามวัตถุประสงค์ของเว็บไซต์

การติดตั้งและตรวจสอบ Schema Markup บนเว็บไซต์

การติดตั้ง Schema Markup สามารถทำได้หลายวิธี วิธีที่นิยมที่สุดคือการใช้ JSON-LD ซึ่งเป็นการเพิ่มโค้ด JavaScript ในส่วน ของเว็บไซต์ วิธีนี้ง่ายต่อการจัดการและแก้ไข นอกจากนี้ยังสามารถใช้ Microdata หรือ RDFa ซึ่งเป็นการเพิ่ม attribute เข้าไปในแท็ก HTML โดยตรง การเลือกวิธีการติดตั้งขึ้นอยู่กับความถนัดของผู้พัฒนาและโครงสร้างของเว็บไซต์ แต่ Google แนะนำให้ใช้ JSON-LD เนื่องจากง่ายต่อการจัดการและมีโอกาสเกิดข้อผิดพลาดน้อยกว่า และต้องวางที่ส่วนของ Head เท่านั้น

<head>
    <script type="application/ld+json">
        // วางโค้ด JSON-LD ที่รวม Schema ทั้งหมดที่นี่
    </script>
</head>

การตรวจสอบความถูกต้องของ Schema

การตรวจสอบ Schema Markup หลังการติดตั้งเป็นขั้นตอนที่สำคัญมาก เราสามารถใช้เครื่องมือ Rich Results Test ของ Google เพื่อตรวจสอบว่า Schema ที่ติดตั้งทำงานได้ถูกต้องหรือไม่ นอกจากนี้ยังมีเครื่องมือ Schema Markup Validator ที่ช่วยตรวจจับข้อผิดพลาดและให้คำแนะนำในการแก้ไข การตรวจสอบอย่างสม่ำเสมอจะช่วยให้มั่นใจว่า Schema ทำงานได้อย่างมีประสิทธิภาพและเว็บไซต์ได้รับประโยชน์สูงสุดจากการใช้งาน

ตัวอย่างการ test schema markup


การใช้ Schema Markup สำหรับ E-commerce

Schema สำหรับหน้าสินค้า

การใช้ Product Schema สำหรับหน้าสินค้าเป็นสิ่งจำเป็นสำหรับเว็บ E-commerce ต้องระบุข้อมูลสำคัญเช่น ชื่อสินค้า ราคา รูปภาพ คำอธิบายสินค้า และรีวิวจากลูกค้า นอกจากนี้ควรเพิ่ม Offer Schema เพื่อระบุข้อมูลเกี่ยวกับโปรโมชั่น ส่วนลด และสถานะสินค้า การใช้ Schema อย่างครบถ้วนจะช่วยให้สินค้าปรากฏใน Google Shopping และผลการค้นหาแบบ Rich Snippets ซึ่งจะช่วยเพิ่มโอกาสในการขายได้มากขึ้น

Schema สำหรับหน้าหมวดหมู่สินค้า

หน้าหมวดหมู่สินค้าควรใช้ ItemList Schema เพื่อแสดงความสัมพันธ์ระหว่างสินค้าในหมวดหมู่เดียวกัน การระบุความสัมพันธ์นี้จะช่วยให้ Search Engine เข้าใจโครงสร้างของเว็บไซต์และจัดหมวดหมู่สินค้าได้ถูกต้อง นอกจากนี้ยังควรใช้ BreadcrumbList Schema เพื่อแสดงลำดับชั้นของหมวดหมู่ ซึ่งจะช่วยให้ผู้ใช้และ Search Engine เข้าใจการนำทางภายในเว็บไซต์ได้ดียิ่งขึ้น

ตัวอย่าง E-Commerce Schema Markup

// ตัวอย่าง Schema สำหรับร้านค้าออนไลน์
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "เสื้อยืดคอกลม",
  "image": "https://example.com/tshirt.jpg",
  "description": "เสื้อยืดคอกลมผ้าฝ้าย 100%",
  "sku": "T001",
  "brand": {
    "@type": "Brand",
    "name": "แบรนด์ตัวอย่าง"
  },
  "offers": {
    "@type": "Offer",
    "url": "https://example.com/tshirt",
    "priceCurrency": "THB",
    "price": "590.00",
    "availability": "https://schema.org/InStock"
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.5",
    "reviewCount": "89"
  }
}


การใช้ Schema Markup สำหรับเว็บข่าวและบทความ

Schema สำหรับบทความข่าว

สำหรับเว็บข่าว การใช้ NewsArticle Schema เป็นสิ่งสำคัญมาก ต้องระบุข้อมูลเช่น หัวข้อข่าว ผู้เขียน วันที่เผยแพร่ และหมวดหมู่ของข่าว การใช้ Schema นี้จะช่วยให้บทความมีโอกาสปรากฏใน Google News และผลการค้นหาข่าว ซึ่งจะช่วยเพิ่มการเข้าถึงเนื้อหาจากผู้อ่าน นอกจากนี้ควรใช้ Organization Schema เพื่อเชื่อมโยงบทความกับสำนักข่าวหรือองค์กรที่เผยแพร่

Schema สำหรับบทความทั่วไป

บทความทั่วไปควรใช้ Article Schema พร้อมระบุข้อมูลเพิ่มเติมเช่น คำสำคัญ รูปภาพประกอบ และเวลาที่ใช้ในการอ่าน การใช้ Schema อย่างถูกต้องจะช่วยให้บทความปรากฏในผลการค้นหาพร้อมข้อมูลที่เป็นประโยชน์ต่อผู้อ่าน เช่น วันที่เผยแพร่ ผู้เขียน และเวลาที่ใช้ในการอ่าน ซึ่งจะช่วยเพิ่มอัตราการคลิกและการมีส่วนร่วมกับเนื้อหา

ตัวอย่าง News / Article Schema Markup

// ตัวอย่าง Schema สำหรับบทความข่าว
{
  "@context": "https://schema.org",
  "@type": "NewsArticle",
  "headline": "ข่าวล่าสุดเกี่ยวกับเทคโนโลยี",
  "image": "https://example.com/news-image.jpg",
  "datePublished": "2024-03-20T08:00:00+07:00",
  "dateModified": "2024-03-20T09:30:00+07:00",
  "author": {
    "@type": "Person",
    "name": "สมชาย ใจดี"
  },
  "publisher": {
    "@type": "Organization",
    "name": "สำนักข่าวตัวอย่าง",
    "logo": {
      "@type": "ImageObject",
      "url": "https://example.com/news-logo.jpg"
    }
  },
  "description": "รายละเอียดข่าวเทคโนโลยีล่าสุด",
  "articleBody": "เนื้อหาข่าวโดยละเอียด..."
}


การใช้ Schema Markup สำหรับธุรกิจท้องถิ่น

Schema สำหรับข้อมูลธุรกิจ

ธุรกิจท้องถิ่นควรใช้ LocalBusiness Schema เพื่อระบุข้อมูลสำคัญเช่น ที่อยู่ เบอร์โทรศัพท์ เวลาทำการ และพิกัด GPS การใช้ Schema นี้จะช่วยให้ธุรกิจปรากฏใน Google Maps และผลการค้นหาท้องถิ่น นอกจากนี้ยังควรเพิ่ม Review Schema เพื่อแสดงรีวิวและคะแนนจากลูกค้า ซึ่งจะช่วยสร้างความน่าเชื่อถือให้กับธุรกิจ

Schema สำหรับเมนูและบริการ

ร้านอาหารและธุรกิจบริการควรใช้ Menu และ Service Schema เพื่อแสดงรายละเอียดเมนูอาหารหรือบริการที่มีให้ การระบุราคา รายละเอียด และรูปภาพประกอบจะช่วยให้ลูกค้าเห็นข้อมูลที่สำคัญก่อนตัดสินใจใช้บริการ นอกจากนี้ควรใช้ OpeningHoursSpecification Schema เพื่อระบุเวลาทำการในวันพิเศษหรือวันหยุด

ตัวอย่าง Local Schema Markup

// ตัวอย่าง Schema สำหรับธุรกิจท้องถิ่น
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "ร้านอาหารตัวอย่าง",
  "image": "https://example.com/restaurant.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 ถนนสุขุมวิท",
    "addressLocality": "กรุงเทพ",
    "postalCode": "10110",
    "addressCountry": "TH"
  },
  "geo": {
    "@type": "GeoCoordinates",
    "latitude": "13.7563",
    "longitude": "100.5018"
  },
  "openingHoursSpecification": [
    {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "10:00",
      "closes": "22:00"
    }
  ],
  "menu": {
    "@type": "Menu",
    "hasMenuSection": [
      {
        "@type": "MenuSection",
        "name": "อาหารจานเดียว",
        "hasMenuItem": [
          {
            "@type": "MenuItem",
            "name": "ข้าวผัดกะเพรา",
            "price": "60.00",
            "priceCurrency": "THB"
          }
        ]
      }
    ]
  }
}

ทีนี้มาดูการรวม Schema หลายตัวเข้าด้วยกันบ้าง เราจะยกตัวอย่าง Schema ที่เกี่ยวข้องกับ Financial กองทุนต่าง ๆ ที่จะมี WebPage, Organization, ImageObject, ContactPoint, Article, Person, Product, Brand, FinancialProduct, BreadcrumbList ทั้งหมดนี้เข้าด้ว

{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebPage",
      "@id": "https://example.com/product/investment-fund",
      "url": "https://example.com/product/investment-fund",
      "name": "กองทุนเปิดตัวอย่าง - บริษัทหลักทรัพย์จัดการกองทุน ABC",
      "description": "กองทุนเปิดที่ลงทุนในตราสารทุนทั่วโลก เหมาะสำหรับผู้ที่ต้องการลงทุนระยะยาว",
      "isPartOf": {
        "@type": "WebSite",
        "@id": "https://example.com/#website",
        "url": "https://example.com",
        "name": "บริษัทหลักทรัพย์จัดการกองทุน ABC"
      }
    },
    {
      "@type": "Organization",
      "@id": "https://example.com/#organization",
      "name": "บริษัทหลักทรัพย์จัดการกองทุน ABC",
      "url": "https://example.com",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png",
        "width": "180",
        "height": "60"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+66-2-123-4567",
        "contactType": "customer service",
        "areaServed": "TH",
        "availableLanguage": ["Thai", "English"]
      },
      "sameAs": [
        "https://facebook.com/abcasset",
        "https://twitter.com/abcasset",
        "https://linkedin.com/company/abcasset"
      ]
    },
    {
      "@type": "Article",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://example.com/product/investment-fund"
      },
      "headline": "กองทุนเปิดตัวอย่าง - โอกาสการลงทุนระดับโลก",
      "description": "ศึกษารายละเอียดเกี่ยวกับกองทุนเปิดตัวอย่างและกลยุทธ์การลงทุน",
      "image": "https://example.com/fund-image.jpg",
      "datePublished": "2024-03-20T08:00:00+07:00",
      "dateModified": "2024-03-21T10:30:00+07:00",
      "author": {
        "@type": "Person",
        "name": "ฝ่ายการตลาด ABC Asset"
      },
      "publisher": {
        "@type": "Organization",
        "@id": "https://example.com/#organization"
      }
    },
    {
      "@type": "Product",
      "name": "กองทุนเปิดตัวอย่าง",
      "description": "กองทุนเปิดที่ลงทุนในตราสารทุนทั่วโลก",
      "sku": "FUND001",
      "brand": {
        "@type": "Brand",
        "name": "ABC Asset Management"
      },
      "offers": {
        "@type": "Offer",
        "price": "10000.00",
        "priceCurrency": "THB",
        "priceValidUntil": "2024-12-31",
        "availability": "https://schema.org/InStock",
        "url": "https://example.com/product/investment-fund"
      }
    },
    {
      "@type": "FinancialProduct",
      "name": "กองทุนเปิดตัวอย่าง",
      "category": "Mutual Fund",
      "annualPercentageRate": {
        "@type": "QuantitativeValue",
        "value": "12.5",
        "minValue": "-10",
        "maxValue": "25"
      },
      "feesAndCommissionsSpecification": "ค่าธรรมเนียมการจัดการ 1.5% ต่อปี, ค่าธรรมเนียมการขาย 1%",
      "termsOfService": "https://example.com/terms",
      "provider": {
        "@type": "Organization",
        "@id": "https://example.com/#organization"
      }
    },
    {
      "@type": "BreadcrumbList",
      "itemListElement": [
        {
          "@type": "ListItem",
          "position": 1,
          "item": {
            "@id": "https://example.com",
            "name": "หน้าแรก"
          }
        },
        {
          "@type": "ListItem",
          "position": 2,
          "item": {
            "@id": "https://example.com/products",
            "name": "ผลิตภัณฑ์"
          }
        },
        {
          "@type": "ListItem",
          "position": 3,
          "item": {
            "@id": "https://example.com/product/investment-fund",
            "name": "กองทุนเปิดตัวอย่าง"
          }
        }
      ]
    }
  ]
}


สำหรับการรวม Schema หลาย type เข้าด้วยกัน มีหลักการสำคัญดังนี้

  1. การใช้ @graph
  • ใช้ @graph เพื่อรวม Schema หลาย type ในไฟล์ JSON-LD เดียว
  • แต่ละ Schema จะอยู่ในอาร์เรย์ของ @graph
  • ช่วยให้สามารถอ้างอิงถึงกันได้ระหว่าง Schema
  1. การเชื่อมโยงระหว่าง Schema
  • ใช้ @id เพื่อสร้าง ID อ้างอิง
  • อ้างอิงถึง Schema อื่นผ่าน @id เดียวกัน
  • ช่วยลดความซ้ำซ้อนของข้อมูล
  1. การจัดลำดับความสำคัญ
  • วาง WebPage หรือ WebSite ไว้ต้นๆ
  • ตามด้วย Organization หรือ Business
  • Schema ที่เกี่ยวกับเนื้อหาหลักวางถัดมา
  • BreadcrumbList มักวางไว้ท้ายสุด
  1. ข้อควรระวัง
  • ข้อมูลต้องไม่ขัดแย้งกันระหว่าง Schema
  • ใช้เฉพาะ Schema ที่เกี่ยวข้องจริงๆ
  • ตรวจสอบความถูกต้องด้วย Schema Validator
  • อัปเดตข้อมูลให้ตรงกันทุก Schema


การวัดผลและการปรับปรุง Schema Markup

การติดตามประสิทธิภาพ

การวัดผลการใช้ Schema Markup เป็นสิ่งสำคัญที่จะช่วยให้เราทราบว่าการติดตั้งประสบความสำเร็จหรือไม่ ควรใช้ Google Search Console เพื่อติดตามจำนวนการแสดงผล Rich Snippets และอัตราการคลิก นอกจากนี้ควรติดตามการเปลี่ยนแปลงของอันดับการค้นหาและการมีส่วนร่วมของผู้ใช้หลังจากติดตั้ง Schema การวิเคราะห์ข้อมูลเหล่านี้จะช่วยให้เราปรับปรุงการใช้ Schema ได้อย่างมีประสิทธิภาพ

การแก้ไขปัญหาและการอัปเดต

การตรวจสอบและแก้ไขปัญหา Schema Markup อย่างสม่ำเสมอเป็นสิ่งจำเป็น ควรใช้เครื่องมือตรวจสอบของ Google เพื่อค้นหาข้อผิดพลาดและแก้ไขทันที นอกจากนี้ควรติดตามการอัปเดตมาตรฐาน Schema จาก Schema.org และปรับปรุง Schema ให้ทันสมัยอยู่เสมอ การดูแลรักษา Schema อย่างต่อเนื่องจะช่วยให้เว็บไซต์ได้รับประโยชน์สูงสุดจากการใช้งาน


สรุปและแนวทางการพัฒนาในอนาคต

Schema Markup เป็นเครื่องมือสำคัญในการเพิ่มประสิทธิภาพ SEO สำหรับเว็บไซต์ไทย การเลือกใช้ Schema ที่เหมาะสมและการติดตั้งอย่างถูกต้องจะช่วยให้เว็บไซต์มีความโดดเด่นในผลการค้นหา การติดตามและปรับปรุงอย่างต่อเนื่องเป็นสิ่งสำคัญที่จะช่วยให้เว็บไซต์รักษาความได้เปรียบในการแข่งขัน นอกจากนี้ การเตรียมพร้อมสำหรับการพัฒนาใหม่ๆ ของ Schema Markup จะช่วยให้เว็บไซต์สามารถปรับตัวและเติบโตได้อย่างยั่งยืนในอนาคต

อ่านบทความอื่นที่คุณอาจสนใจ

วิธีสร้าง Topic Clusters สำหรับ SEO แบบครบวงจร

Contact us

สอบถาม / สังซื้อบริการ / จองคอร์สเรียน