ব্লগে Facebook Open Graph Meta Data যুক্ত করার নিয়ম

ব্লগের কোন একটি লিংক Facebook এ শেয়ার করার সময় Facebook ঐ পোষ্টের Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display না করার কারনে অনেকে বিব্রত হন। বিষয়টি ব্লগ সম্পর্কিত না হওয়ায় বেশীরভাগ ব্লগার এই সমস্যার কারন সহজে বুঝতে পারেন না। সম্প্রতি অনেকে আমাকে এর কারন সম্পর্কে জিজ্ঞেস করেন। আজ আমি আপনাদের সাথে এর কারন এবং প্রতিকার দুটি বিষয়ে বিস্তারিত আলোচনা করব।
কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করতে হয়?




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

ফেইসবুক Open Graph কি?

ফেইসবুক কর্তৃপক্ষ সর্বপ্রথম ২০১০ সালে ওয়েবমাষ্টারদের কথা চিন্তা করে সকল ধরনের ওয়েবসাইট/ব্লগের কনটেন্ট সঠিকভাবে পাঠকদের সামনে উপস্থাপনের জন্য Open Graph পদ্ধতি চালু করে।




এই ধরনের Open Graph যুক্ত করে রাখার ফলে ফেইসবুকে ব্লগের কোন লিংক শেয়ার করার সময় ফেইসবুক Crawler সঠিকভাবে পোষ্টের Snipest শো করবে। এতেকরে আপনার ব্লগ পোষ্টের Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display হবে।

কিভাবে ব্লগে যুক্ত করতে হবে?

  • প্রথমে ব্লগে লগইন করুন।
  • তারপর Template > Edit Html এ ক্লিক করুন।
  • এখন কিবোর্ড হতে Ctrl+F চেপে <head> অংশটি সার্চ করুন।
  • নিচের Meta কোডগুলি <head> ট্যাগের নিচে পেষ্ট করুন।
<meta content='967352119943562' property='fb:app_id'/>
<meta content='https://www.facebook.com/harunzokii' property='article:author'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='blog' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta content='article' property='og:type'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta content='1200' property='og:image:width'/>
<meta content='630' property='og:image:height'/>
<b:else/>
<meta content='Your Blog Logo' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
  • উপরের কোডটির লাল কালারের নাম্বারটি হচ্ছে Facebook এর App ID. এখানে আপনার Facebook এর App ID ব্যবহার করতে হবে। কিভাবে Facebook App ID তৈরি করতে হয় সে সম্পর্কে এই লিংক থেকে বিস্তারিত দেখে নিতে পারেন।
  • আপনার ব্লগে Facebook Authorship হওয়ার জন্য নীল কালারের harunzokii এর জায়গায় আপনার Facebook প্রোফাইল Name টি বসিয়ে দিতে হবে।
  • তারপর পিংক কালারের Your Blog Logo এর জায়গায় আপনার ব্লগের Logo এর Url দেন।
  • সবশেষে Template Save করুন। That's all.

কিভাবে যাচাই করবেন?

  • প্রথমে আপনার Facebook ID তে লগইন করুন।
  • তারপর এই লিংকে ক্লিক করে Facebook Debugger পেজে যান।
  • এখন আপনার ব্লগ পোষ্টের যে কোন একটি Url পেষ্ট করে Debug বাটনে ক্লিক করুন।
  • সবকিছু ঠিকঠাক থাকলে সঠিকভাবে শো করবে অথবা কোন সমস্যা থাকলে সেটি Solve করার জন্য পরামর্শ দেবে।

কি কি কারনে সমস্যা হতে পারে?

উপরের কোডটি সঠিকভাবে সেট করার পরও যদি কোন সমস্যা থাকে তাহলে সেটি আপনার ব্লগ থেকেই সমাধান করতে হবে। ফেইসবুক বলছে সবকিছু ঠিকঠাক সেট করার পরও নিম্নলিখিত কারনে ফেইসবুক Crawler সঠিকভাবে সব কিছু উপস্থাপন করতে পারে না।
  • পোষ্টের Title Clear হওয়া বা Title এর সাথে Branding যুক্ত করা।
  • পোষ্টের Url অর্থবহুল না হলে বা হিজিবিজি থাকলে।
  • Meta Descriptions Clear ভাবে না দেয়া।
  • ব্লগ Identifies করার জন্য Facebook App ID না থাকলে।
  • ব্লগ পোষ্টের Image কমপক্ষে 200x200 Px না হলে। (নোটঃ ব্লগের প্রথম Image 600x315 Px হওয়াটা সবচেয়ে ভাল)
সাহায্য জিজ্ঞাসাঃ উপরের কোডটিতে আমরা একটি ব্লগের জন্য প্রয়োজনীয় সকল ধরনের Facebook Meta Data ট্যাগ যুক্ত করে দিয়েছে। তারপরও নিশ্চিত হওয়ার জন্য অবশ্যই ফেইসবুক Debugger থেকে যাচাই করে নেবেন। এরপর যদি কোথাও কোন সমস্যা হয় তাহলে আমাদের জানাতে পারেন। আমরা তার সঠিক সমাধান দেয়ার চেষ্টা করব, ইনশাআল্লাহ্।

COMMENTS

BLOGGER: 8
  1. খুব গুরুত্বপূর্ণ একটা বিষয় জানতে পারলাম।

    ReplyDelete
  2. কত যে খোজছি এইটা থাঙ্কস ভাই। ইউটিউবের ভিডিও ফেসবুকে এইভাবে শেয়ার করার কোন সিস্টেম আছে কি।এউটিউবের ভিদিও ফেসবুকে শেয়ার করলে ছুট আকারে আসে

    ReplyDelete
    Replies
    1. আপনি হয়ত মোবাইল কিংবা কোন ছোট ডিভাইস থেকে দেখছেন এ জন্য ইউটিউব ভিডিও শেয়ার করার সময় ছোট দেখাচ্ছে। ইউটিউব ভিডিও এর লিংক নরমালি শেয়ার করলে ফেইসবুকে সব কিছু ঠিক ঠাক মত দেখা যায়।

      Delete
  3. Replies
    1. ওয়ার্ডপ্রেস প্লাগইন আছে, এটার প্রয়োজন নাই।

      Delete
  4. ১। এই পোস্টে আপনি উপরোক্ত কোডে উল্লেখ করেছেন আপনার ব্লগে Facebook Authorship এর জন্য আপনার Facebook প্রোফাইল Name টি বসিয়ে দিতে হবে। এখানে একটি বিষয় জানার ছিলো যথারুপঃ ফেসবুক প্রোফাইলের জায়গায় আমি ফেসবুক পেজ ব্যবহার করতে চাই। যেহেতু ফেসবুক প্রোফাইলের অধীনে আমার ২ টি ফেসবুক পেইজ দেওয়া আছে। এটা সংযুক্ত করা যাবে কি??
    ২। ব্লগের প্রথম Image 600x315 Px হওয়াটা সবচেয়ে ভাল) । এখানে আমি যদি Image 650x400 Px প্রদান করি তাহলে কোন সমস্যা আছে কিনা। মূলত জানতে চাচ্ছি ব্লগার সাইটে ইমেজ সাইজ সর্বোচ্চ কত মাপের হলে ভালো হয়??

    ReplyDelete
    Replies
    1. আপনার নামের পরিবর্তে পেজ ব্যবহার করতে পারবেন। ইমেজ 600x315 ব্যবহার করা ভালো।

      Delete
কমেন্ট করার নিয়মঃ
ব্যাকলিংক পাওয়ার উদ্দেশ্য নিয়ে কোন কারণ ছাড়া লিংকিং কমেন্ট করা হলে সেই সকল কমেন্ট অনুমোদন করা হবে না। তবে যুক্তিসঙ্গত কারনে লিংলিংক কমেন্ট করলে সেগুলো যাচাই বাছাই করার পর অনুমোদন করা হবে। তাছাড়া আমরা সবসময় জিরো স্প্যামিং নীতি অনুসরণ করি। সো বি কেয়ারফুল...

Name

Adsense,5,Affiliate,4,Android,10,Android Tricks,10,Banglalink,3,Banking,6,Biography,1,Blog Design,11,Blogger Theme,1,Blogger Widgets,4,Blogspot SEO,7,Computer,8,Create Blog,5,Digital Marketing,1,Earnings,33,Education,10,Facebook,11,Freelance,2,GP SIM,5,How To,20,Islamic,15,Job Circular,3,Mim,1,Movie,5,Pined,2,Prayer,1,Pro News,7,Quran,3,Robi SIM,8,SEO,24,SEO Tips,17,Social Media,60,Tech,5,Telecom,28,Windows Tricks,5,WordPress,2,YouTube,9,
ltr
item
ব্লগার বাংলাদেশ: ব্লগে Facebook Open Graph Meta Data যুক্ত করার নিয়ম
ব্লগে Facebook Open Graph Meta Data যুক্ত করার নিয়ম
কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করে পোষ্টের Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display করতে হয়?
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfgybSmVxbOjcB4Gf_WFV1eIb3RqiIaibPhylJO3RnMM8EV9MVEnzJSJNMiTs5_7ovEOQOWqoedYfgI4GzwGjS5oC6YFf0y4Md_t3aGrzoe48snJV96iPxYGh2L_2msflDeY2pmMVCTXL/s400/Facebook-Open-Graph-Meta-Data.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAfgybSmVxbOjcB4Gf_WFV1eIb3RqiIaibPhylJO3RnMM8EV9MVEnzJSJNMiTs5_7ovEOQOWqoedYfgI4GzwGjS5oC6YFf0y4Md_t3aGrzoe48snJV96iPxYGh2L_2msflDeY2pmMVCTXL/s72-c/Facebook-Open-Graph-Meta-Data.png
ব্লগার বাংলাদেশ
https://www.bloggerbangladesh.com/2016/02/add-facebook-open-graph-to-blogger-blog.html
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/
https://www.bloggerbangladesh.com/2016/02/add-facebook-open-graph-to-blogger-blog.html
true
1297988252866731047
UTF-8
Loaded All Posts Not found any posts VIEW ALL বিস্তারিত পড়ুন Reply Cancel reply Delete By Home PAGES POSTS View All জনপ্রিয় পোস্ট পড়ুন LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content