การเขียน Google Structured บนเว็บไซต์

หมวดสำหรับแบ่งบันความ รู้ต่างๆ จะมีหมวดย่อยๆ ในหมวดนี้ เช่น php, SQL, XML, CSS

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21911
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

การเขียน Google Structured บนเว็บไซต์

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

บทความนี้จะเป็นการแนะนำการเขียน Google Structured ลงบนหน้าเว็บไซต์ ซึ่งตัว Google Structured เป็นมาตรฐานที่กำหนดโดย Google สำหรับเว็บไซต์ที่ต้องการให้ตัว Search Engine ของ Google เข้าใจเนื้อหาได้มากขึ้น และส่งผลดีต่อการจัดอับดับการค้นหาของ Google อีกด้วย โดยก่อนจะเริ่มเขียนสามารถเข้าไปอ่านทำความเข้าใจเบื้องต้นได้จากบทความนี้ "Google Structure (กูเกิล สทรัค เชอะ) คือ เพิ่มคุณลักษณะการค้นหา ให้กับเว็บไซต์"

ขั้นตอนการเขียน Google Structured

1. เริ่มต้นต้องรู้ก่อนว่าเนื้อหาในหน้านั้นๆ เป็นเนื้อหาในหมวดหมู่ใด เพื่อให้สามารถเลือกใช้ Structure ได้ถูกต้อง เพราะทาง Google ได้แบ่งหมวดหมู่ของ Structure ไว้ ตรวจสอบได้ที่ https://developers.google.com/search/do ... ch-gallery

2. ในบทความนี้จะเลือกใช้ตัวอย่างเป็น Structure ของ Product ให้เราคลิกเข้าไปดูรูปแบบการเขียน Structure ได้จาก link ในข้อ 1

3. เลือกรูปแบบการเขียน Structure ซึ่งปกตินิยมเขียน 2 แบบ คือ JSON-LD กับ Microdata โดยเลือกใช้ตามความเหมาะสมของเว็บไซต์ได้
  • JSON-LD เป็นการเขียนข้อมูลในรูปแบบ JSON อยู่ภายใน tag ของ script

    โค้ด: เลือกทั้งหมด

    <script type="application/ld+json">
        {
          "@context": "https://schema.org/",
          "@type": "Product",
          "name": "Executive Anvil",
          "image": [
            "https://example.com/photos/1x1/photo.jpg",
            "https://example.com/photos/4x3/photo.jpg",
            "https://example.com/photos/16x9/photo.jpg"
           ],
          "description": "Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height.",
          "sku": "0446310786",
          "mpn": "925872",
          "brand": {
            "@type": "Brand",
            "name": "ACME"
          },
          "review": {
            "@type": "Review",
            "reviewRating": {
              "@type": "Rating",
              "ratingValue": "4",
              "bestRating": "5"
            },
            "author": {
              "@type": "Person",
              "name": "Fred Benson"
            }
          },
          "aggregateRating": {
            "@type": "AggregateRating",
            "ratingValue": "4.4",
            "reviewCount": "89"
          },
          "offers": {
            "@type": "Offer",
            "url": "https://example.com/anvil",
            "priceCurrency": "USD",
            "price": "119.99",
            "priceValidUntil": "2020-11-20",
            "itemCondition": "https://schema.org/UsedCondition",
            "availability": "https://schema.org/InStock"
          }
        }
        </script>
  • Microdata เป็นการเขียน tag คล้ายกับ html แต่เพิ่ม attribute ต่างๆ เข้าไป

    โค้ด: เลือกทั้งหมด

    <div itemtype="https://schema.org/Product" itemscope>
          <meta itemprop="mpn" content="925872" />
          <meta itemprop="name" content="Executive Anvil" />
          <link itemprop="image" href="https://example.com/photos/16x9/photo.jpg" />
          <link itemprop="image" href="https://example.com/photos/4x3/photo.jpg" />
          <link itemprop="image" href="https://example.com/photos/1x1/photo.jpg" />
          <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
          <div itemprop="offers" itemtype="https://schema.org/Offer" itemscope>
            <link itemprop="url" href="https://example.com/anvil" />
            <meta itemprop="availability" content="https://schema.org/InStock" />
            <meta itemprop="priceCurrency" content="USD" />
            <meta itemprop="itemCondition" content="https://schema.org/UsedCondition" />
            <meta itemprop="price" content="119.99" />
            <meta itemprop="priceValidUntil" content="2020-11-20" />
          </div>
          <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
            <meta itemprop="reviewCount" content="89" />
            <meta itemprop="ratingValue" content="4.4" />
          </div>
          <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
            <div itemprop="author" itemtype="https://schema.org/Person" itemscope>
              <meta itemprop="name" content="Fred Benson" />
            </div>
            <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
              <meta itemprop="ratingValue" content="4" />
              <meta itemprop="bestRating" content="5" />
            </div>
          </div>
          <meta itemprop="sku" content="0446310786" />
          <div itemprop="brand" itemtype="https://schema.org/Brand" itemscope>
            <meta itemprop="name" content="ACME" />
          </div>
        </div>
    

4. ดึงข้อมูลในหน้าเว็บไซต์มาใส่ในตัว Structure ซึ่งแต่ละหมวดหมู่จะมีการแจ้งว่า field ไหนเป็นค่าที่จำเป็นบ้าง อย่างในกรณีตัวอย่าง หมวดหมู่ Product ให้เข้าไปดูที่ https://developers.google.com/search/do ... efinitions มันจะเป็นตารางแจ้งรายละเอียดของ field ต่างๆ ไว้ ซึ่งต้องเราระบุ field ให้ถูกต้องตามที่กำหนด
Share Knowledge-1.png
Share Knowledge-1.png (125.23 KiB) Viewed 1450 times

5. หลังที่เราเขียน Google Structured ลงในเนื้อหาเสร็จแล้ว สามารถนำไปทดสอบความถูกต้องก่อน เข้าไปที่ https://search.google.com/test/rich-results โดยสามารถตรวจสอบได้ ทั้งวิธีการแปะ URL ของหน้าเว็บ หรือ แปะโค้ดของหน้าเว็บก็ได้
Share Knowledge-1.png
Share Knowledge-1.png (47.32 KiB) Viewed 1450 times

6. ถ้าตรวจสอบแล้วไม่พบปัญหา ก็ถือว่า Google Structured ของเราถูกต้องและสามารถใช้งานได้แล้ว
Share Knowledge-1.png
Share Knowledge-1.png (171.85 KiB) Viewed 1450 times

ตอนนี้เราได้ทราบถึงขั้นตอนการเขียน Google Structured บนเว็บไซต์เรียบร้อยแล้ว โดยการนำไปใช้ในระบบเว็บไซต์ต่างๆ อาจจะมีวิธีการหรือเงื่อนไขในการแสดงผลต่างกัน ทั้งนี้เราก็ต้องเลือกใช้รูปแบบที่เหมาะสมที่สุด และใน 1 หน้าเว็บไซต์อาจจะใส่ Structured ได้มากกว่า 1 ด้วย ซึ่งการใส่แต่ละส่วนก็มีผลดีต่อการทำ SEO ทำให้เว็บไซต์ของเรามีการจัดอันดับที่ดีขึ้นด้วย

ที่มา
https://developers.google.com/search/do ... tured-data
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 43