Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO
Webdesign

সেম্যান্টিক মার্কআপ দিয়ে ওয়েবসাইটের ভিজিবিলিটি বৃদ্ধি করা

by
Difficulty:BeginnerLength:LongLanguages:

Bengali (বাংলা) translation by Arnab Wahid (you can also view the original English article)

এই আর্টিকেলে আমরা দেখবো ওপেন গ্রাফ, টুইটার কার্ড ও মাইক্রোডাটা নিয়ে কিভাবে কাজ করতে হয়। এতে সাইটের ডিসকভারেবিলিটি বাড়ে।

গুগল, ফেসবুক, টুইটারে আমাদের সাইট শেয়ার করার সময় ওগুলো বুঝতে পারেনা যে আসলে সাইটের কন্টেন্ট কি। তাই সাইট মেশিন ফ্রেন্ডলি করে তৈরি করতে হবে। তাই আমরা আলোচনা করব কিভাবে মেশিন ডিসকভারেবল কন্টেন্ট তৈরি করতে হয়।

ডিসকভারেবিলিটি কি?

কেউ বা কোন মেশিন কত সহজে একটা সাইট খুঁজে পাচ্ছে, এটা হচ্ছে ডিসকভারেবিলিটি।

কোন সাইটটা বেশি দৃষ্টি কাড়ে?

কোন টুইটটা দেখতে বেশি ভালো?

কোন গুগল সার্চে মানুষ বেশি ক্লিক করবে?

Google search result with and without microdata

পার্থক্য পরিষ্কার। আপনি ফেসবুকের ওপেন গ্রাফ, টুইটার কার্ডমাইক্রোডাটা ব্যবহার না করে থাকলে, আপনার সাইটের ডিসকভারেবিলিটি কমাচ্ছেন। এই আর্টিকেলে আমরা দেখবো কিভাবে এসব ব্যবহারে সেম্যান্টিক মার্কআপ ইমপ্রুভ করা যায়।

মার্কআপ

মার্কআপ  কি?

ডকুমেন্ট মার্কআপ হচ্ছে স্ক্রিনে ডকুমেন্টের টেক্সট ডিসপ্লে করার নিয়ম। - উইকিপিডিয়া

সহজ ভাষায়, এটা হচ্ছে টেক্সট এনোটেট করার একটা উপায়। মার্কআপ টার্মটি এসেছে প্রুফরিডিং জারগন থেকে।

Proofreaders Marks from the Chicago Manual of Style
Chicago Manual of Style

প্রুফরিডিং এর মার্কিং এক ধরনের মার্কআপ স্কুলে ইংলিশ ক্লাসে হয়ত পড়েছেন।

ডিজিটাল ডকুমেন্ট ৩ উপায়ে মার্কআপ করা যায়।

HTML:

Markdown

LaTeX

একটি বেসিক HTML5 ডকুমেন্ট।  এটা দিয়ে আমরা মার্কআপের বিভিন্ন দিক আলোচনা করব।

HTML

পছন্দের টেক্সট এডিটর ওপেন করে বেসিক HTMLবসান।

আগের সময়ের তুলনায় এখন এটা করা অনেক সহজ। এরপর কন্টেন্ট!

কন্টেন্ট

একটি বিড়ালের ইমেজ ডকুমেন্ট বডিতে দেয়ার জন্য।

Cheer up mate
বাহ...

টাইটেল

পেজ কনটেক্সট। <head> সেকশনে <title> ট্যাগটি দেখুন।

এরপর আমরা দেখবো ফেসবুকের ওপেন গ্রাফ প্রোটোকল!

ফেসবুক ওপেন গ্রাফ প্রোটোকল

ওপেন গ্রাফ প্রোটোকল একটা ওয়েবপেজকে সোশ্যাল গ্রাফের উপযোগী কন্টেন্ট হিসেবে তৈরি করতে সহায়তা করে। এটা কন্টেন্টকে ফেসবুকের সিমিলার ফাংশনালিটি দেয়।

ফেসবুক ওপেন গ্রাফের ডাটা <head> সেকশনে থাকবে। . একই যায়গা, যেখানে <title> থাকে। এইখানে গ্রাফ প্রোটোকলের ৪টা প্রপার্টি আমাদের লাগবে।

প্রয়োজনীয় ওপেন গ্রাফ মার্কআপ

মার্কআপগুলো হলঃ

  1. Title
  2. Type
  3. Image
  4. URL

Title

এই title ট্যাগটি ফেসবুকে দেখা যাবে।

ফেসবুকে শেয়ার করার পরে টাইটেলটি এভাবে দেখা যাবে।

নোটঃ আসল টাইটের বদলে ফেসবুকের জন্য অন্য টাইটেল ব্যবহার করলে ফেসবুক একটি এরর দেখাবে। ফেসবুক এটা এলাও করে, কিন্তু ১০০% ভ্যালিডেট করে না। এটা ফেসবুকের পলিসি!

Type

সেকেন্ড প্রপার্টি type of object.

আমাদের কন্টেন্টে মিউজিক বা ভিডিও নেই। আর্টিকেল, বই, প্রোফাইলও না। কন্টেন্ট সার্ভারের মাধ্যমে সার্ভ করার পর সেটাই ওয়েবসাইট হয়।

ইমেজ

৩য় যেটা দরকার সেটা হচ্ছে একটা ইমেজ। এটা সোজাই বলতে গেলে।

URL

শেষ প্রপার্টি যেটা লাগে সেটা হচ্ছে URL.

ইমেজের মত এটাও সহজবোধ্য।

শেষ। আর কিছু লাগবে না। এখন দেখবো এগুলা কি কাজে আসে।

টার্গেট অডিয়েন্স

কিভাবে টার্গেট অডিয়েন্স পেতে হয়, সেটা নিয়ে এই টিউটোরিয়াল আলোচনা করবে না। কিন্তু এটা করতে জানা জরুরী। কন্টেন্টের কন্টেক্সট তৈরি করার সময় টার্গেট অডিয়েন্সের কথা মাথায় রাখতে হবে।

উদাহরণস্বরূপ  এই আর্টিকেলটি চেক করে দেখতে পারেন। আসুন দেখি এটার মার্কআপ কেমন।

অপশনাল অ্যাবস্ট্রাক্ট মার্কআপ

যদিও বাধ্যকামুলক নয়, ডেস্ক্রিপশনের মত এক্সট্রা মার্কআপ অ্যাড করা সম্ভব।

ডেস্ক্রিপশন কেমন হবে? টার্গেট অডিয়েন্সের জন্য যথাযথ ডেস্ক্রিপশন লিখুন।

গ্রেট! টুইটারও ফেসবুক ওপেন গ্রাফের মতই কাজ করে। আসুন এবার সেটা দেখি।

টুইটার

টুইটার কার্ড টাইপের জন্য ভিন্ন রকম কিছু প্রপার্টি দরকার হয়। এখানে আমরা সামারি কার্ডের জন্য ৪টি প্রপার্টি ব্যবহার করব।

  1. কার্ড টাইপ
  2. অ্যাট্রিবিউশন
  3. টাইটেল
  4. ডেসক্রিপশন

বেশিরভাগ প্রপার্টির জন্যই অতিরিক্ত কোন কাজের দরকার হয়না। কেন?

টুইটার কার্ড নিজে থেকেই উপস্থিত প্রপার্টি সিলেক্ট করে নেয়। This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience. - Twitter

মিনিমাইজ ডুপ্লিকেট মার্কআপ

গ্রেট! কিছু ট্যাগ আমাদের ডুপ্লিকেট করা দরকার নেই।

  1. og:title
  2. og:description
  3. og:image

আর দুটা বাকি!

Card Type

প্রথমে টুইটারকে জানাতে হবে এটা কি টাইপের কন্টেন্ট। আমরা যেটা করছি সেটা ডিফল্ট সামারি কার্ড

এই ধাপ শেষ। এর পর?

অ্যাট্রিবিউশন

কন্টেন্টের সাথে একটা টুইটার একাউন্ট অ্যাট্রিবিউটেড হতে হবে। কন্টেন্ট কোণ কোম্পানি পেজের হলে আপনি সেই কোম্পানি সাইটের সাথে মিলিয়ে স্টাইলিং করতে পারেন।

আমার নিজের পার্সোনাল সাইটে এটা যেমন দেখায়ঃ

Tuts+ Web Design এ স্টা যেমন দেখায়ঃ

টুইটার কার্ড ব্যবহারের আগে ডোমেইন অথেন্টিকেশন করতে হবে। এটা একটা অটোম্যাটিক প্রসেস। টুইটার চেক করে দেখে শেয়ার করা ডোমেইন হোয়াইট লিস্টেড কিনা।

এটাই টুইটার কার্ড ব্যবহারের রিকোওয়ারমেন্ট ! ভালো হয়েছে আমরা আগে ওপেন গ্রাফ করে নিয়েছি। এর পর টুইটার কার্ড করতে সময় বাঁচে। থ্যাংক্স টুইটার!

এখন আমরা সার্চ ইঞ্জিনে ফিরে যাবো।

মাইক্রোডাটা ও এসইও অপটিমাইজেশন

Google SEO Microdata Rich Text Snippet Example

মাইক্রোসফটের একটি উক্তিঃ

“On June 2nd [2011] we [Microsoft] announced a collaboration between Bing, Google and Yahoo to create and support a standard set of schemas for structured data markup on web pages. Although our companies compete in many ways, it was evident to us that collaboration in this space would be good for each search engine individually and for the industry as a whole. - Michael O'Connor

মাইক্রোডাটা ভিন্ন রকমের একটা মার্কআপ যেটা ডকুমেন্ট হেডারে থাকে।

এটা দিয়ে ডকুমেন্টের কনটেক্সট প্রপার্টি সেট করা হয়। এতে ডিসকভারেবিলিটি বাড়ে

এটা দিয়ে মেশিনকে কন্টেন্ট বুঝতে সহায়তা করা হয়। অন্তত...

দরকারি মাইক্রোডাটা মার্কআপ

এই ট্যাগগুলো কন্টেক্সট বসাতে কাজে লাগে।

  1. Item Scope
  2. Item Type

প্রথমে যা বর্ননা করছি তার আইডেন্টিটি সেট করতে হবে। প্রথমে আসবে সেম্যান্টিক্স ও কন্টেক্সট।

মনে রাখতে হবে, আমাদের কন্টেন্ট কিন্তু একটাই! ইমেজ বাদে, তাতে কি কমন আছে?

 gato

বিড়াল। গুড, ইন্টারনেটে সবাই বিড়াল পছন্দ করে! স্কিমা মার্কআপে কি একটা বিড়াল রেপ্রেসেন্ট করে?

এই ইমেজের অর্থ কোন action, broadcast service, event medical entity, অথবা place না। এটা একটা ক্রিয়েটিভ আর্ট, ভিজুয়াল আর্টের উদাহরণ।


itemtype ডিক্লেয়ার করুনঃ

এখনও আমাদের কন্টেন্ট প্রায় মিনিংলেস। সব সার্চ ইঞ্জিন শুধু বুঝতে পারবে যে আমাদের  কন্টেন্ট ক্রিয়েটিভ ওয়ার্ক। আর কিছু না। আসুন আরও কিছু মিনিংফুল কন্টেক্সট তৈরি করি।

অপশনাল মাইক্রোডাটা প্রপার্টি 

সব প্রপার্টি সম্পর্কে ধারনা নিতে সব প্রপার্টির লিস্ট দেখে নিন।

এরপর দরকারি প্রপার্টি ডিক্লেয়ার শুরু করুন।

ইমেজ

প্রথমে (src) লোকেশন সহ একটা ইমেজ

অথর

এরপর অথরের নাম।

অডিয়েন্স

সব ঠিকঠাক হচ্ছে! আসুন এবার অডিয়েন্স টার্গেট করি।

এডুকেশনাল ইউজ

এবার এক্সাম্পল কেসের একটা এডুকেশনাল ইউজ দেখবো।

ফ্যামিলি ফ্রেন্ডলি

এটা এডাল্ট কন্টেন্ট নয়, তাই সকলকে সেটা জানানো হল।

ক্যারেক্টার

আমরা আময়াদের বিড়ালের নামকরণ কি করেছি?

হুম। এটা একটা ভালো নাম। এবার about.

About

এবার about কন্টেক্সট অ্যাড করব।

কিছু কিওয়ার্ড ফ্যাক্টর অ্যাড করব।

Validate

এখন গুগল, ফেসবুক টুইটারে কোড ভ্যালিডেট করতে হবে। যেমন দেখাবেঃ

ফেসবুক

Validating facebook open graph markup

টুইটার

Twitter validation

গুগল

Google Structured Data Testing Tool Validation

সারমর্ম

সবশেষে এখন কোড কেমন দেখাচ্ছে?

এখন আমাদের কন্টেন্ট শেয়ার যোগ্য হয়ে উঠেছে। এখন এমনটি আপনি আপনার ওয়েবসাইটেও করতে পারেন!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.