সোশ্যাল ডিসকভারি

সোশ্যাল মিডিয়ার মাধ্যমে শেয়ার করা হলে আপনার সাইট কীভাবে দেখানো হবে তা আপনি প্রভাবিত করতে পারবেন। এর জন্য প্রতিটি পৃষ্ঠায় কয়েক লাইন কোড যোগ করতে হবে। এটি আপনার সাইটে আরও বেশি লোক আনতে সাহায্য করতে পারে, কারণ এটি এমন প্রিভিউ প্রদান করে যা অন্যথায় উপলভ্য তথ্যের চেয়ে বেশি সমৃদ্ধ।

Eiji Kitamura

প্রতিটি পৃষ্ঠায় কয়েক লাইন কোড যোগ করে, সোশ্যাল মিডিয়ার মাধ্যমে শেয়ার করা হলে আপনার সাইট কীভাবে দেখানো হবে তা আপনি প্রভাবিত করতে পারবেন। এটি আপনার সাইটে আরও বেশি লোকজনকে নিয়ে আসতে সাহায্য করতে পারে। এটি করার জন্য, এটি এমন প্রিভিউ প্রদান করে যাতে আরও বেশি তথ্য থাকে যা অন্যথায় উপলভ্য থাকত না।

সারাংশ

  • Google+-এর জন্য পৃষ্ঠার শীর্ষক, বিবরণ এবং একটি ছবি প্রদান করতে schema.org মাইক্রো ডেটা ব্যবহার করুন৷
  • Facebook-এর জন্য পৃষ্ঠার শীর্ষক, বিবরণ এবং ছবি প্রদান করতে ওপেন গ্রাফ প্রোটোকল (OGP) ব্যবহার করুন।
  • Twitter-এর জন্য পৃষ্ঠার শীর্ষক, বিবরণ, ছবি ও Twitter আইডি দিতে Twitter কার্ড ব্যবহার করুন।

প্রতিটি পৃষ্ঠায় কয়েক লাইন কোড যোগ করে, সোশ্যাল মিডিয়ার মাধ্যমে শেয়ার করা হলে আপনার সাইট কীভাবে দেখানো হবে তা আপনি প্রভাবিত করতে পারবেন। এটি আরও বেশি তথ্য সহ প্রিভিউ প্রদান করে এনগেজমেন্ট বাড়াতে সাহায্য করতে পারে, যা অন্যথায় উপলভ্য হবে না। এটি না থাকলে, সোশ্যাল সাইটগুলি ছবি বা অন্যান্য সহায়ক তথ্য ছাড়াই শুধুমাত্র প্রাথমিক তথ্য প্রদান করবে।

কোনটিতে ক্লিক করার সম্ভাবনা বেশি বলে আপনি মনে করেন? মানুষ ছবির প্রতি আকৃষ্ট হয় এবং আগাম প্রিভিউ দেখলে, তারা যা খুঁজছে তা পছন্দ করবে বলে আরও বেশি আত্মবিশ্বাসী বোধ করে।

উপযুক্ত মার্ক-আপ সহ: সঠিক শীর্ষক, একটি সংক্ষিপ্ত বিবরণ এবং একটি ছবি অন্তর্ভুক্ত করা হয়েছে। এইসব আইটেম যোগ করলে, এনগেজমেন্ট বাড়াতে সাহায্য করতে পারে।
উপযুক্ত মার্কআপ সহ: সঠিক শীর্ষক, সংক্ষিপ্ত বিবরণ ও ছবি অন্তর্ভুক্ত করা হয়েছে। এইসব আইটেম যোগ করলে, এনগেজমেন্ট বাড়াতে সাহায্য করতে পারে।
সঠিক মার্ক-আপ না থাকলে, শুধু পৃষ্ঠার টাইটেল অন্তর্ভুক্ত করা হয়।
সঠিক মার্ক আপ না থাকলে, শুধু পৃষ্ঠার শীর্ষক অন্তর্ভুক্ত করা হয়।

সোশ্যাল নেটওয়ার্কে কেউ আপনার ওয়েবসাইট তার বন্ধুদের সাথে শেয়ার করতে চাইলে, তিনি সম্ভবত এটি কতটা অসাধারণ তা ব্যাখ্যা করে কিছু নোট যোগ করবেন এবং এটি শেয়ার করবেন। কিন্তু কোনও ওয়েবসাইটের বর্ণনা দেওয়াটা বেশ কষ্টকর এবং পৃষ্ঠার মালিকের দৃষ্টিভঙ্গি থেকে পয়েন্ট মিস হয়ে যেতে পারে। কিছু পরিষেবা ব্যবহারকারীদের নোটে লিখতে পারা অক্ষরের সংখ্যা সীমিত করে।

আপনার পৃষ্ঠায় উপযুক্ত মেটাডেটা যোগ করে, আপনি ব্যবহারকারীদের জন্য শেয়ার করার প্রসেস সহজ করতে পারেন। এর জন্য আপনাকে টাইটেল, বিবরণ ও আকর্ষণীয় ছবি দিতে হবে। এর অর্থ হল, লিঙ্কটি বর্ণনা করার জন্য তাদের মূল্যবান সময় (বা অক্ষর) ব্যয় করতে হবে না।

Google+-এ রিচ স্নিপেট প্রদান করতে schema.org + মাইক্রো ডেটা ব্যবহার করুন

ক্রলার কোনও পৃষ্ঠা পার্স করতে এবং এর কন্টেন্ট বুঝতে অনেক পদ্ধতি ব্যবহার করে। মাইক্রোডেটা এবং schema.org শব্দভাণ্ডার ব্যবহার করে, আপনি সোশ্যাল সাইট এবং সার্চ ইঞ্জিনকে পৃষ্ঠার কন্টেন্ট আরও ভালোভাবে বুঝতে সাহায্য করেন।

একটা উদাহরণ দেওয়া হল:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

বেশিরভাগ মেটাডেটা ওয়েব পৃষ্ঠার হেড বিভাগে এম্বেড করা থাকলেও, মাইক্রোডেটা প্রসঙ্গ যেখানে থাকে সেখানেই থাকে।

মাইক্রোডেটার স্কোপ নির্ধারণ করতে itemscope যোগ করুন

itemscope যোগ করে, আপনি কোনও নির্দিষ্ট আইটেম সম্পর্কে কন্টেন্টের ব্লক হিসেবে ট্যাগ নির্দিষ্ট করতে পারবেন।

আপনার ওয়েবসাইটের ধরন নির্ধারণ করতে itemtype যোগ করুন

আপনি itemtype অ্যাট্রিবিউট ব্যবহার করে আইটেমের ধরন নির্দিষ্ট করতে পারেন, এর সাথে itemscope ব্যবহার করতে হবে। আপনার ওয়েব পৃষ্ঠায় কন্টেন্টের ধরন অনুযায়ী itemtype-এর ভ্যালু নির্ধারণ করা যেতে পারে। আপনি এই পৃষ্ঠায় প্রাসঙ্গিক একটি খুঁজে পাবেন।

schema.org শব্দভাণ্ডার ব্যবহার করে প্রতিটি আইটেম বর্ণনা করতে itemprop যোগ করুন

itemprop, স্কোপে itemtype-এর জন্য প্রপার্টি নির্ধারণ করে। সোশ্যাল সাইটে মেটাডেটা প্রদান করার জন্য, সাধারণত itemprop-এর ভ্যালু হল name, description এবং image।

রিচ স্নিপেট যাচাই করুন

Google+-এ রিচ স্নিপেট যাচাই করতে, আপনি এই ধরনের টুল ব্যবহার করতে পারেন:

স্ট্রাকচার্ড ডেটা টেস্টিং টুল

Facebook-এ রিচ স্নিপেট প্রদান করতে ওপেন গ্রাফ প্রোটোকল (OGP) ব্যবহার করুন

ওপেন গ্রাফ প্রোটোকল (OGP) Facebook-কে সেই মেটাডেটা প্রদান করে যা ওয়েব পেজকে অন্যান্য Facebook অবজেক্টের মতো একই কার্যকারিতা প্রদান করার জন্য প্রয়োজনীয়।

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

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

মেটাডেটা বর্ণনা করতে og: নেমস্পেস করা meta ট্যাগ ব্যবহার করুন

meta ট্যাগে property অ্যাট্রিবিউট এবং content অ্যাট্রিবিউট থাকে। প্রপার্টি ও কন্টেন্টে নিম্নলিখিত ভ্যালু থাকতে পারে:

প্রপার্টি কন্টেন্ট
og:title ওয়েব পৃষ্ঠার শীর্ষক।
og:description ওয়েব পৃষ্ঠার বিবরণ।
og:url ওয়েব পৃষ্ঠার ক্যানোনিকাল URL।
og:image শেয়ার করা পোস্টে অ্যাটাচ করা ছবির URL।
og:type একটি স্ট্রিং যা ওয়েব পেজের ধরন নির্দেশ করে। আপনার ওয়েব পেজের জন্য উপযুক্ত একটি আপনি এখান থেকে খুঁজে নিতে পারবেন।

এই মেটা ট্যাগগুলি সোশ্যাল সাইট থেকে ক্রলারদের শব্দার্থিক তথ্য প্রদান করে, যেমন Facebook।

আরও জানুন

Facebook-এ পোস্টের সাথে আপনি কী কী অ্যাটাচ করতে পারবেন সেই সম্পর্কে আরও জানতে, অফিসিয়াল Open Graph Protocol সাইট দেখুন।

রিচ স্নিপেট যাচাই করুন

Facebook-এ আপনার মার্কআপ যাচাই করতে, আপনি এই ধরনের টুল ব্যবহার করতে পারেন:

Twitter-এ রিচ স্নিপেট প্রদান করতে Twitter কার্ড ব্যবহার করুন

Twitter কার্ড হল Twitter-এর জন্য প্রযোজ্য ওপেন গ্রাফ প্রোটোকল-এর এক্সটেনশন। এগুলি আপনাকে আপনার ওয়েব পেজের লিঙ্কের সাথে টুইটে ছবি ও ভিডিওর মতো মিডিয়া অ্যাটাচমেন্ট যোগ করার সুযোগ দেয়। উপযুক্ত মেটাডেটা যোগ করার মাধ্যমে, আপনার পৃষ্ঠার লিঙ্ক সহ টুইটে একটি কার্ড যোগ করা হবে, যেখানে আপনার যোগ করা বিস্তারিত তথ্য থাকবে।

মেটাডেটা বর্ণনা করতে twitter: নেমস্পেস করা মেটা ট্যাগ ব্যবহার করুন

Twitter কার্ড কাজ করানোর জন্য, আপনার ডোমেন অবশ্যই অনুমোদিত হতে হবে এবং এতে অবশ্যই একটি মেটা ট্যাগ থাকতে হবে যাতে property অ্যাট্রিবিউটের পরিবর্তে name অ্যাট্রিবিউট হিসেবে twitter:card থাকে।

এখানে একটি সংক্ষিপ্ত উদাহরণ দেওয়া হল:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

twitter:site-এর ভ্যালুতে Twitter আইডি অ্যাসাইন করার মাধ্যমে, Twitter এই তথ্য শেয়ার করা পোস্টে এম্বেড করে যাতে লোকজন সহজেই পৃষ্ঠার মালিকের সাথে এনগেজ হতে পারেন।

Twitter কার্ড।

আরও জানুন

Twitter কার্ড সম্পর্কে আরও জানতে, এখানে যান:

রিচ স্নিপেট যাচাই করুন

আপনার মার্কআপ যাচাই করতে, Twitter এগুলি প্রদান করে:

পেশাদার পদ্ধতি

তিনটি বিকল্পের মধ্যে, আপনার ওয়েব পৃষ্ঠায় সবকটি অন্তর্ভুক্ত করাই সবচেয়ে ভাল হবে। একটা উদাহরণ দেওয়া হল:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

লক্ষ্য করুন যে মাইক্রোডেটা এবং OGP কিছু মার্কআপ শেয়ার করে:

  • itemscope, head ট্যাগে অবস্থিত
  • title এবং description মাইক্রোডেটা এবং OGP-এর মধ্যে শেয়ার করা হয়
  • itemprop="image", property="og:image" সহ meta ট্যাগ আবার ব্যবহার করার পরিবর্তে href অ্যাট্রিবিউট সহ link ট্যাগ ব্যবহার করছে

সবশেষে, প্রকাশ করার আগে প্রতিটি সোশ্যাল সাইটে আপনার ওয়েব পেজ প্রত্যাশা অনুযায়ী দেখা যাচ্ছে কিনা তা যাচাই করে নিন।