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

Ewa Gasperowicz

องค์ประกอบที่กําหนดเองกลายเป็นวิธีที่น่าสนใจในการสร้างฟีเจอร์ 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 ประมวลผลได้หรือไม่

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

การลิงก์คอมโพเนนต์กับแหล่งข้อมูล 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 เพื่อแสดงเอลิเมนต์ที่กําหนดเองที่คุณสร้างขึ้น