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

Ewa Gasperowicz

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

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

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

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

การป้อนข้อมูลองค์ประกอบด้วย Structured Data

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

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

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

ตัวอย่าง

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

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

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

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

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

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

โค้ดสำหรับการสาธิตและคอมโพเนนต์ของเว็บที่ใช้ในการสร้างโค้ดจะอยู่ใน 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 ใน developer.google.com เพื่อค้นหาแรงบันดาลใจเกี่ยวกับเอนทิตีต่างๆ ที่คุณมาร์กอัปด้วย JSON-LD ได้

ลองเอ่ยถึงเราที่ @polymer เพื่ออวดองค์ประกอบที่กำหนดเองที่คุณสร้าง