ایجاد سایت های معنایی با Web Components و JSON-LD

با افزایش محبوبیت اجزای وب و پشتیبانی از کتابخانه‌هایی مانند Polymer ، عناصر سفارشی به روشی جذاب برای ایجاد ویژگی‌های رابط کاربری تبدیل می‌شوند. کپسوله‌سازی پیش‌فرض عناصر سفارشی آن‌ها را به ویژه برای ایجاد ویجت‌های مستقل مفید می‌کند.

در حالی که برخی از ویجت ها مستقل هستند، بسیاری از آنها برای ارائه محتوا به کاربر به داده های خارجی متکی هستند - به عنوان مثال، پیش بینی فعلی یک ویجت آب و هوا یا آدرس یک شرکت برای ویجت نقشه.

در Polymer، عناصر سفارشی اعلانی هستند، به این معنی که پس از وارد شدن به یک پروژه، گنجاندن و پیکربندی آنها در HTML بسیار آسان است، به عنوان مثال با ارسال داده ها برای پر کردن ویجت از طریق یک ویژگی.

اگر بتوانیم با استفاده مجدد از همان قطعه داده‌ها برای پر کردن ویجت‌های مختلف و همچنین اطلاع‌رسانی به موتورهای جستجو و سایر مصرف‌کنندگان در مورد محتوای صفحه‌مان، از تکرار جلوگیری کنیم و از ثبات داده‌ها اطمینان حاصل کنیم. ما می توانیم با استفاده از استاندارد schema.org و فرمت JSON-LD برای داده های خود به این مهم دست یابیم.

پر کردن اجزا با داده های ساخت یافته

به طور معمول، JSON یک راه راحت برای تزریق داده به یک ویجت خاص است. با افزایش پشتیبانی از JSON-LD، می‌توانیم از همان ساختارهای داده برای اطلاع‌رسانی به UI و همچنین موتورهای جستجو و سایر مصرف‌کنندگان داده‌های ساختاریافته در مورد معنای دقیق محتوای صفحه استفاده مجدد کنیم.

با ترکیب اجزای وب با JSON-LD، یک معماری کاملاً تعریف شده برای یک برنامه ایجاد می کنیم:

• schema.org و JSON-LD لایه داده را نشان می دهند، با schema.org واژگان داده ها را ارائه می دهد و JSON-LD فرمت و انتقال داده ها را تشکیل می دهد.
• عناصر سفارشی نشان دهنده لایه ارائه، قابل تنظیم و جدا از خود داده ها هستند.

مثال

بیایید مثال زیر را در نظر بگیریم - صفحه ای که چند مکان دفتر Google را فهرست می کند: https://github.com/googlearchive/structured-data-web-components/tree/master/demo

این شامل دو ویجت است: یک نقشه با یک پین برای هر دفتر و یک کشویی با لیست مکان‌ها. مهم است که هر دو ویجت داده های یکسانی را به کاربر ارائه دهند و صفحه برای موتورهای جستجو قابل خواندن باشد.

در این نسخه نمایشی از نهادهای LocalBusiness برای بیان معنای داده‌های خود که موقعیت جغرافیایی برخی از دفاتر Google است استفاده می‌کنیم.

بهترین راه برای بررسی نحوه خواندن و نمایه سازی این صفحه توسط گوگل، ابزار جدید و بهبود یافته تست داده های ساختاری است. URL نسخه آزمایشی را در بخش Fetch URL ارسال کنید و روی Fetch and validate کلیک کنید. بخش سمت راست داده های تجزیه شده بازیابی شده از صفحه را به همراه هر گونه خطای احتمالی به شما نشان می دهد. این یک راه بسیار راحت برای بررسی اینکه آیا نشانه‌گذاری JSON-LD شما درست و قابل پردازش توسط Google است یا خیر است.

می‌توانید در پست وبلاگ Webmaster Central درباره ابزار و بهبودهایی که معرفی کرده است، اطلاعات بیشتری کسب کنید.

پیوند دادن مؤلفه ها به یک منبع داده ساخت یافته

کد نسخه ی نمایشی و اجزای وب مورد استفاده برای ساخت آن در GitHub است. بیایید به کد منبع صفحه combined-demo.html نگاه کنیم.

به عنوان اولین گام، داده ها را با استفاده از یک اسکریپت JSON-LD در صفحه جاسازی می کنیم:

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

به این ترتیب ما اطمینان حاصل می کنیم که داده ها به راحتی برای سایر مصرف کنندگانی که از استاندارد schema.org و فرمت JSON-LD پشتیبانی می کنند، به عنوان مثال موتورهای جستجو، قابل دسترسی است.

در مرحله دوم، ما از دو جزء وب برای نمایش داده ها استفاده می کنیم:

• address-dropdown-jsonld - این عنصر یک فهرست کرکره ای با تمام مکان های ارسال شده در یک ویژگی "jsonld" ایجاد می کند.
• google-map-jsonld - این عنصر یک نقشه گوگل با یک پین برای هر مکان ارسال شده در ویژگی "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 و عناصر را به هم متصل می‌کنیم. ما این کار را در یک فراخوان آماده پلیمری انجام می دهیم (این رویدادی است که وقتی اجزا آماده استفاده هستند شروع می شود). از آنجا که عناصر را می‌توان از طریق ویژگی‌ها پیکربندی کرد، کافی است داده‌های 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 امتحان کنید یا راهنمای پلیمر در مورد ایجاد اجزای قابل استفاده مجدد را بخوانید تا شروع به نوشتن خود کنید. برای دریافت الهام از موجودیت‌های مختلفی که می‌توانید با JSON-LD علامت‌گذاری کنید، مستندات داده‌های ساختاریافته را در developers.google.com بررسی کنید.

در نظر بگیرید که برای نشان دادن عناصر سفارشی که ساخته‌اید، به @polymer فریاد بزنید!