การสร้างเว็บไซต์เชิงความหมายด้วยคอมโพเนนต์เว็บและ JSON-LD

องค์ประกอบที่กําหนดเองกลายเป็นวิธีที่น่าสนใจในการสร้างฟีเจอร์ UI เนื่องจากคอมโพเนนต์เว็บและไลบรารีที่รองรับ เช่น Polymer ได้รับความนิยมมากขึ้น การห่อหุ้มองค์ประกอบที่กำหนดเองโดยค่าเริ่มต้นทำให้มีประโยชน์อย่างยิ่งสำหรับการสร้างวิดเจ็ตอิสระ

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

ใน Polymer องค์ประกอบที่กําหนดเองเป็นแบบประกาศ ซึ่งหมายความว่าเมื่อนําเข้าองค์ประกอบเหล่านี้ไปยังโปรเจ็กต์แล้ว คุณจะรวมและกำหนดค่าองค์ประกอบเหล่านั้นใน HTML ได้อย่างง่ายดาย เช่น โดยการผ่านข้อมูลเพื่อป้อนข้อมูลในวิดเจ็ตผ่านแอตทริบิวต์

เราควรหลีกเลี่ยงการซ้ำซ้อนและตรวจสอบความสอดคล้องของข้อมูลด้วยการใช้ข้อมูลโค้ดเดียวกันเพื่อป้อนข้อมูลในวิดเจ็ตต่างๆ รวมถึงแจ้งให้เครื่องมือค้นหาและผู้บริโภครายอื่นๆ ทราบเกี่ยวกับเนื้อหาของหน้าเว็บ ซึ่งทำได้โดยใช้มาตรฐาน schema.org และรูปแบบ JSON-LD สำหรับข้อมูล

การป้อนข้อมูลคอมโพเนนต์ด้วย Structured Data

โดยปกติแล้ว JSON เป็นวิธีที่สะดวกในการแทรกข้อมูลลงในวิดเจ็ตหนึ่งๆ การที่ผู้คนเริ่มรองรับ JSON-LD มากขึ้นทำให้เราใช้โครงสร้างข้อมูลเดียวกันซ้ำเพื่อแจ้งให้ UI รวมถึงเครื่องมือค้นหาและผู้ใช้งาน Structured Data รายอื่นๆ ทราบความหมายที่แน่นอนของเนื้อหาในหน้าเว็บได้

การรวมคอมโพเนนต์เว็บเข้ากับ JSON-LD ช่วยให้เรามีสถาปัตยกรรมที่ชัดเจนสําหรับแอปพลิเคชัน

• schema.org และ JSON-LD แสดงเลเยอร์ข้อมูล โดย schema.org ระบุคําศัพท์สําหรับข้อมูล และ JSON-LD จะเป็นรูปแบบและช่องทางสําหรับข้อมูล
• องค์ประกอบที่กําหนดเองแสดงถึงชั้นการแสดงผล ซึ่งกําหนดค่าได้และแยกออกจากข้อมูล

ตัวอย่าง

ลองดูตัวอย่างต่อไปนี้ ซึ่งเป็นหน้าที่แสดงสถานที่ตั้งสำนักงานของ Google 2 แห่ง https://github.com/googlearchive/structured-data-web-components/tree/master/demo

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

ในการแสดงตัวอย่างนี้ เราใช้เอนทิตี LocalBusiness เพื่อแสดงความหมายของข้อมูล ซึ่งเป็นสถานที่ตั้งทางภูมิศาสตร์ของสำนักงาน Google บางแห่ง

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

อ่านข้อมูลเพิ่มเติมเกี่ยวกับเครื่องมือนี้และการปรับปรุงที่เครื่องมือได้ในบล็อกโพสต์ของศูนย์กลางผู้ดูแลเว็บ

การลิงก์คอมโพเนนต์กับแหล่งข้อมูล Structured Data

โค้ดสำหรับเดโมและคอมโพเนนต์เว็บที่ใช้สร้างเดโมมีอยู่ใน GitHub มาดูซอร์สโค้ดของหน้า combined-demo.html

ขั้นตอนแรกคือเราจะฝังข้อมูลในหน้าเว็บโดยใช้สคริปต์ JSON-LD ดังนี้

<script type="application/ld+json">
{...}
</script>

วิธีนี้ช่วยให้ผู้บริโภครายอื่นๆ ที่รองรับมาตรฐาน schema.org และรูปแบบ JSON-LD เช่น เครื่องมือค้นหา สามารถเข้าถึงข้อมูลได้อย่างง่ายดาย

ขั้นตอนที่ 2 เราใช้คอมโพเนนต์เว็บ 2 รายการเพื่อแสดงข้อมูล

• address-dropdown-jsonld - องค์ประกอบนี้จะสร้างเมนูแบบเลื่อนลงที่มีสถานที่ตั้งทั้งหมดที่ส่งในแอตทริบิวต์ "jsonld"
• google-map-jsonld - องค์ประกอบนี้จะสร้างแผนที่ Google ที่มีหมุดสำหรับสถานที่ทุกแห่งที่ส่งในแอตทริบิวต์ "jsonld"

โดยเราจะนําเข้าข้อมูลดังกล่าวไปยังหน้าเว็บของเราโดยใช้การนําเข้า HTML

<link rel="import" href="bower_components/google-map-jsonld/google-map-jsonld.html">
<link rel="import" href="bower_components/address-dropdown-jsonld/address-dropdown-jsonld.html">

เมื่อนำเข้าแล้ว เราจะใช้ข้อมูลดังกล่าวในหน้าเว็บได้ ดังนี้

<address-dropdown-jsonld jsonld=""></address-dropdown-jsonld>
<google-map-jsonld jsonld=""></google-map-jsonld>

สุดท้าย เราจะเชื่อมโยงข้อมูล JSON-LD กับองค์ประกอบเข้าด้วยกัน เราทําในการเรียกกลับที่พร้อมใช้งาน Polymer (เป็นเหตุการณ์ที่ทริกเกอร์เมื่อคอมโพเนนต์พร้อมใช้งาน) เนื่องจากองค์ประกอบสามารถกำหนดค่าผ่านแอตทริบิวต์ได้ จึงเพียงพอที่จะกำหนดข้อมูล JSON-LD ของเราให้กับแอตทริบิวต์ที่เหมาะสมของคอมโพเนนต์ ดังนี้

document.addEventListener('polymer-ready', function() {
    var jsonld = JSON.parse(
        document.querySelector(
            'script[type="application/ld+json"]').innerText);
    document.querySelector('google-map-jsonld').jsonld = jsonld['@graph'];
    document.querySelector('address-dropdown-jsonld').jsonld = jsonld['@graph'];
    });

JSON-LD ซึ่งเป็นพี่น้องที่มีประสิทธิภาพของ JSON

ดังที่คุณอาจสังเกตเห็น การดำเนินการนี้ทํางานคล้ายกับการใช้ JSON แบบธรรมดาแบบเก่าเพื่อส่งข้อมูล อย่างไรก็ตาม JSON-LD มีข้อดีบางอย่างที่มาจากความสามารถในการใช้งานร่วมกันกับ schema.org โดยตรง ดังนี้

• ข้อมูลมีโครงสร้างที่ชัดเจนโดยใช้มาตรฐานของ schema.org ซึ่งถือเป็นข้อได้เปรียบที่สำคัญ เนื่องจากช่วยให้คุณระบุอินพุตที่มีความหมายและสอดคล้องกันให้กับคอมโพเนนต์เว็บที่เปิดใช้ JSON-LD ได้
• เครื่องมือค้นหาสามารถใช้ข้อมูลได้อย่างมีประสิทธิภาพ ซึ่งจะช่วยปรับปรุงการจัดทําดัชนีหน้าเว็บ และอาจส่งผลให้ริชมีเดียแสดงในผลการค้นหา
• หากคุณเขียนคอมโพเนนต์เว็บด้วยวิธีนี้ ก็ไม่จำเป็นต้องเรียนรู้หรือสร้างโครงสร้างใหม่ (และเอกสารประกอบ) สำหรับข้อมูลที่คอมโพเนนต์ต้องการ เนื่องจาก schema.org ทำงานหนักและสร้างฉันทามติให้คุณอยู่แล้ว นอกจากนี้ยังช่วยให้สร้างระบบนิเวศทั้งระบบของคอมโพเนนต์ที่เข้ากันได้ง่ายขึ้นด้วย

สรุปคือ JSON-LD และ schema.org รวมกับเทคโนโลยีคอมโพเนนต์ของเว็บ ทำให้สามารถสร้าง UI ที่ห่อหุ้มไว้และนํากลับมาใช้ซ้ำได้ ซึ่งเหมาะกับนักพัฒนาซอฟต์แวร์และเครื่องมือค้นหา

สร้างคอมโพเนนต์ของคุณเอง

คุณจะลองใช้ตัวอย่างใน GitHub หรืออ่านคู่มือของ Polymer เกี่ยวกับการสร้างคอมโพเนนต์ที่ใช้ซ้ำได้เพื่อเริ่มเขียนคอมโพเนนต์ของคุณเอง ดูเอกสารประกอบ Structured Data ใน developers.google.com เพื่อหาแรงบันดาลใจเกี่ยวกับเอนทิตีต่างๆ ที่คุณทํามาร์กอัปด้วย JSON-LD ได้

ลองแวะมาทักทายเราที่ @polymer เพื่อแสดงเอลิเมนต์ที่กําหนดเองที่คุณสร้างขึ้น