কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করতে হয়?

কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করে পোষ্টের Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display করতে হয়?

ব্লগের কোন একটি লিংক 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: 4
  1. খুব গুরুত্বপূর্ণ একটা বিষয় জানতে পারলাম।

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

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

      Delete

Name

Adsense,16,Affiliate,1,Android Tricks,1,Blog Design,35,Blogger Theme,9,Blogger Widgets,25,Create Blog,3,Earnings,19,Mim,5,Pro News,8,Responsive,5,SEO,55,Social Media,2,Tech,1,WordPress,3,YouTube,3,
ltr
item
ব্লগার বাংলাদেশ: কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করতে হয়?
কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করতে হয়?
কিভাবে ব্লগার ব্লগে Facebook Open Graph Meta Data যুক্ত করে পোষ্টের Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display করতে হয়?
https://1.bp.blogspot.com/-xhDiDhk-5cI/VsmYilbw9SI/AAAAAAAAG-k/pwgJcRv6wl0/s400/Facebook-Open-Graph-Meta-Data.png
https://1.bp.blogspot.com/-xhDiDhk-5cI/VsmYilbw9SI/AAAAAAAAG-k/pwgJcRv6wl0/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 RECOMMENDED FOR YOU 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