পলিমারের মতো ওয়েব উপাদান এবং সহায়ক লাইব্রেরির ক্রমবর্ধমান জনপ্রিয়তার সাথে, কাস্টম উপাদানগুলি UI বৈশিষ্ট্যগুলি তৈরি করার একটি আকর্ষণীয় উপায় হয়ে উঠেছে৷ কাস্টম উপাদানগুলির ডিফল্ট এনক্যাপসুলেশন তাদের স্বাধীন উইজেট তৈরির জন্য বিশেষভাবে উপযোগী করে তোলে।
যদিও কিছু উইজেট স্বয়ংসম্পূর্ণ, তাদের মধ্যে অনেকগুলি ব্যবহারকারীর কাছে বিষয়বস্তু উপস্থাপন করতে বাহ্যিক ডেটার উপর নির্ভর করে - যেমন, আবহাওয়ার উইজেটের বর্তমান পূর্বাভাস বা মানচিত্র উইজেটের জন্য একটি কোম্পানির ঠিকানা।
পলিমারে, কাস্টম উপাদানগুলি ঘোষণামূলক হয়, যার অর্থ একবার সেগুলি একটি প্রকল্পে আমদানি করা হলে, 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
এটিতে দুটি উইজেট রয়েছে: প্রতিটি অফিসের জন্য একটি পিন সহ একটি মানচিত্র এবং অবস্থানের তালিকা সহ একটি ড্রপডাউন৷ এটি গুরুত্বপূর্ণ যে উভয় উইজেট ব্যবহারকারীর কাছে একই ডেটা উপস্থাপন করে এবং পৃষ্ঠাটি সার্চ ইঞ্জিনের জন্য পাঠযোগ্য।
এই ডেমোতে আমরা আমাদের ডেটার অর্থ প্রকাশ করতে স্থানীয় ব্যবসায়িক সত্তা ব্যবহার করছি, যা কিছু Google অফিসের ভৌগলিক অবস্থান।
Google কীভাবে এই পৃষ্ঠাটি পড়ছে এবং ইন্ডেক্স করছে তা পরীক্ষা করার সর্বোত্তম উপায় হল নতুন উন্নত স্ট্রাকচার্ড ডেটা টেস্টিং টুল । ফেচ ইউআরএল বিভাগে ডেমোর URL জমা দিন এবং আনুন এবং যাচাই করুন ক্লিক করুন। ডানদিকের বিভাগটি আপনাকে পৃষ্ঠা থেকে পুনরুদ্ধার করা পার্স করা ডেটা দেখাবে এবং যে কোনো ত্রুটি ঘটতে পারে। আপনার JSON-LD মার্কআপ সঠিক এবং Google দ্বারা প্রক্রিয়াযোগ্য কিনা তা পরীক্ষা করার এটি একটি খুব সুবিধাজনক উপায়।
আপনি ওয়েবমাস্টার সেন্ট্রাল ব্লগ পোস্টে টুলটি এবং এটির প্রবর্তিত উন্নতি সম্পর্কে আরও পড়তে পারেন।
স্ট্রাকচার্ড ডেটা সোর্সের সাথে কম্পোনেন্ট লিঙ্ক করা
ডেমো এবং এটি তৈরি করতে ব্যবহৃত ওয়েব উপাদানগুলির জন্য কোডটি GitHub- এ রয়েছে। চলুন combined-demo.html পৃষ্ঠার সোর্স কোড দেখি।
প্রথম ধাপ হিসেবে, আমরা একটি JSON-LD স্ক্রিপ্ট ব্যবহার করে পৃষ্ঠায় ডেটা এম্বেড করি:
<script type="application/ld+json">
{...}
</script>
এইভাবে আমরা নিশ্চিত করি যে ডেটা schema.org স্ট্যান্ডার্ড এবং JSON-LD ফর্ম্যাট, যেমন সার্চ ইঞ্জিন সমর্থনকারী অন্যান্য গ্রাহকদের কাছে সহজেই অ্যাক্সেসযোগ্য।
দ্বিতীয় ধাপ হিসাবে, আমরা ডেটা প্রদর্শন করতে দুটি ওয়েব উপাদান ব্যবহার করি:
- ঠিকানা-ড্রপডাউন-jsonld - এই উপাদানটি "jsonld" অ্যাট্রিবিউটে পাস করা সমস্ত অবস্থানের সাথে একটি ড্রপডাউন তৈরি করে।
- google-map-jsonld - এই উপাদানটি "jsonld" বৈশিষ্ট্যে পাস করা প্রতিটি অবস্থানের জন্য একটি পিন সহ একটি Google মানচিত্র তৈরি করে।
এটি করার জন্য, আমরা 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-এ স্ট্রাকচার্ড ডেটা ডকুমেন্টেশন দেখুন।
আপনার তৈরি করা কাস্টম উপাদানগুলি দেখাতে @ পলিমারে আমাদের চিৎকার করার কথা বিবেচনা করুন!