আপনার ওয়েবসাইটের পোস্ট ফেসবুকে শেয়ার করলে Thumbnail Image, Page Title এবং Descriptions সটিকভাবে Display না হওয়ার কারন এবং সমাধান

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

যে কোন পন্যের বা ব্লগের প্রচার, প্রসার ও ভিজিটর বাড়ীয়ে নেয়ার জন্য 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://ift.tt/8hQZYvydevelopsbd‘ property=’article:author’/><b:if cond=’data:blog.pageType == "index"’><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>

উপরের কোডটির ‘967352119943562′ নাম্বারটি হচ্ছে Facebook এর App ID. এখানে আপনার Facebook এর App ID ব্যবহার করতে হবে। কিভাবে Facebook App ID তৈরি করতে হয় সে সম্পর্কে এই লিংক থেকে বিস্তারিত দেখে নিতে পারেন।
আপনার ব্লগে Facebook Authorship হওয়ার জন্য developsbd এর জায়গায় আপনার 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 কমপক্ষে 200×200 Px না হলে। (নোটঃ ব্লগের প্রথম Image 600×315 Px হওয়াটা সবচেয়ে ভাল)

পরিশেষে

আপনার যদি এই আর্টিকেল টি ভালো লেগে থাকে তাহলে আমার ওয়েবসাইট টি ভিজিট করবেন নিয়মিত এরকম ওয়েব ডেভেলপমেন্ট , অনলাইন আর্নিং, টেক সম্পর্কিত লেটেস্ট আপডেট পেতে.

My website – developsbd.com