Open Graph ছবি: সাইজ, গাইডলাইন ও কোড উদাহরণ
যখন কেউ আপনার পেজ ফেসবুক, টুইটার বা লিঙ্কডইনে শেয়ার করে, তখন ওপেন গ্রাফ ইমেজগুলো নির্ধারণ করে কী দেখানো হবে। ভুল ছবি বা ছবি না থাকলে ক্লিক-থ্রু হার কমে যায়।
এই গাইডে সঠিক সাইজ, ডিজাইন নীতি, HTML প্রয়োগ এবং টেস্টিং টুলস নিয়ে আলোচনা করা হয়েছে — প্রতিটি প্ল্যাটফর্মে সঠিক সোশ্যাল প্রিভিউ পেতে যা যা দরকার।
বিষয়বস্তু সূচি
ওপেন গ্রাফ ইমেজ কী এবং কেন তা গুরুত্বপূর্ণ
ওপেন গ্রাফ হলো ফেসবুকের একটি প্রোটোকল যা আপনার ওয়েব পেজগুলো সোশ্যাল নেটওয়ার্কে শেয়ার করার সময় কিভাবে প্রদর্শিত হবে তা নিয়ন্ত্রণ করতে দেয়। og:image মেটা ট্যাগ প্ল্যাটফর্মকে বলে কোন ছবি প্রিভিউ থাম্বনেইল হিসেবে ব্যবহার করতে হবে।
যখন কেউ ফেসবুক, টুইটার বা লিঙ্কডইনে একটি লিঙ্ক শেয়ার করে, প্ল্যাটফর্ম ওপেন গ্রাফ মেটাডেটা নিয়ে প্রিভিউ কার্ড তৈরি করে। সেই কার্ডের ছবি, শিরোনাম ও বর্ণনা প্রায়ই ক্লিক করার আগে দর্শকের একমাত্র দৃষ্টিগোচর হয়।
সুপরিকল্পিত ওপেন গ্রাফ ইমেজ ক্লিক-থ্রু হার উল্লেখযোগ্যভাবে বাড়াতে পারে। অনুপস্থিত বা ভুল সাইজের ছবি ভাঙা প্রিভিউ, ক্রপ করা থাম্বনেইল বা অপ্রফেশনাল প্লেসহোল্ডার তৈরি করে।
ক্লিক-থ্রু হার
যেসব পেজে সঠিক সাইজের, উচ্চ কনট্রাস্টের OG ইমেজ থাকে, সেগুলো ছবি না থাকা বা নিম্নমানের বিকল্পের চেয়ে ভালো পারফর্ম করে।
প্রতিটি শেয়ার থেকে বেশি ক্লিক
ব্র্যান্ড স্বীকৃতি
প্রতিটি শেয়ার করা লিঙ্কে সঙ্গতিপূর্ণ ভিজ্যুয়াল পরিচিতি দর্শকদের মধ্যে পেজে আসার আগেই পরিচিতি ও বিশ্বাস গড়ে তোলে।
নেটওয়ার্ক জুড়ে সঙ্গতিপূর্ণ
এসইও সংকেত
আকর্ষণীয় প্রিভিউ দ্বারা চালিত সোশ্যাল এনগেজমেন্ট ব্যাকলিঙ্ক ও ট্রাফিক সংকেত তৈরি করে যা সময়ের সাথে অর্গানিক সার্চ র্যাঙ্কিং উন্নত করে।
পরোক্ষ র্যাঙ্কিং সুবিধা
প্ল্যাটফর্ম-নির্দিষ্ট ছবি প্রয়োজনীয়তা
প্রতিটি সোশ্যাল প্ল্যাটফর্মের নিজস্ব সুপারিশকৃত মাত্রা, অনুপাত এবং ফাইল সাইজ সীমা থাকে। সঠিকভাবে এগুলো মানলে ক্রপিং, বিকৃতি ও প্লেসহোল্ডার এড়ানো যায়।
| প্ল্যাটফর্ম | সুপারিশকৃত সাইজ | অ্যাসপেক্ট রেশিও | সর্বোচ্চ ফাইল সাইজ | ফরম্যাট |
|---|---|---|---|---|
| 1200 × 630 px | 1.91 : 1 | 8 MB | JPG, PNG | |
| Twitter / X | 1200 × 675 px | 16 : 9 | 5 MB | JPG, PNG, WebP, GIF |
| 1200 × 627 px | 1.91 : 1 | 5 MB | JPG, PNG | |
| 1200 × 630 px | 1.91 : 1 | 300 KB | JPG, PNG | |
| Slack | 1200 × 630 px | 1.91 : 1 | 1 MB | JPG, PNG |
সর্বজনীন নিরাপদ সাইজ: ১২০০ × ৬৩০ পিক্সেল
১.৯১:১ অনুপাতের ১২০০ × ৬৩০ পিক্সেল ছবি ফেসবুক, লিঙ্কডইন, হোয়াটসঅ্যাপ, স্ল্যাক এবং অধিকাংশ প্ল্যাটফর্মে কাজ করে। টুইটারে ১৬:৯ ক্রপ ব্যবহার হলেও ছবি ভালো দেখায় — গুরুত্বপূর্ণ বিষয়বস্তু কেন্দ্রে রাখুন যাতে ক্রপিং না হয়।
কার্যকর ওপেন গ্রাফ ইমেজের ডিজাইন নীতি
ছবিটি সোশ্যাল ফিডে ছোট সাইজে প্রদর্শিত হয়। প্রথমে থাম্বনেইলের জন্য ডিজাইন করুন, পুরো সাইজের জন্য নয়।
সবচেয়ে গুরুত্বপূর্ণ ভিজ্যুয়াল উপাদান — আপনার লোগো, শক্তিশালী শিরোনাম বা মূল চিত্র — ছবির কেন্দ্রীয় ৮০% এর মধ্যে রাখুন। প্ল্যাটফর্মগুলো প্রায়ই প্রান্ত ক্রপ করে। সীমানার কাছে কিছু থাকলে তা কিছু ডিসপ্লেতে কাটা পড়তে পারে।
উচ্চ কনট্রাস্ট
টেক্সট, সামনের উপাদান এবং পটভূমির মধ্যে শক্তিশালী কনট্রাস্ট ব্যবহার করুন। কম কনট্রাস্টের ছবি ব্যস্ত সোশ্যাল ফিডে উজ্জ্বল প্রতিযোগীদের পাশে অদৃশ্য হয়ে যায়।
যেকোনো সাইজে পড়তে সহজ
টাইপোগ্রাফির স্পষ্টতা
আপনার ছবিতে যদি টেক্সট থাকে, বড় ও মোটা ফন্ট ব্যবহার করুন — কমপক্ষে ৩৬ পিক্সেল সমতুল্য — এবং দুই লাইনের বেশি ব্যবহার এড়িয়ে চলুন। ছোট টেক্সট থাম্বনেইল স্কেলে পড়া কঠিন হয়।
ছোট সাইজেও পড়তে সহজ রাখুন
ব্র্যান্ডের সঙ্গতি
প্রতিটি OG ছবিতে আপনার লোগো বা ব্র্যান্ডের রঙের প্যালেট অন্তর্ভুক্ত করুন। প্রতিটি শেয়ার করা পোস্ট ব্র্যান্ডের ছাপ, যদিও কেউ ক্লিক না করলেও।
প্রতিটি শেয়ার = ব্র্যান্ড স্পর্শবিন্দু
সঠিক ছবি ফরম্যাট নির্বাচন
ফটোগ্রাফিক OG ছবির জন্য JPEG এবং টেক্সট, লোগো বা ট্রান্সপারেন্সি সহ গ্রাফিক্সের জন্য PNG ব্যবহার করুন। WebP এর সমর্থন বাড়ছে, তবে সব সোশ্যাল ক্রলার এখনও এটি সমর্থন করে না।
| ফরম্যাট | সেরা ব্যবহার | সোশ্যাল সমর্থন | সাধারণ ফাইল সাইজ | সুপারিশ |
|---|---|---|---|---|
| JPEG | ছবি, গ্রেডিয়েন্ট | সর্বজনীন | 60 – 150 KB | ছবির জন্য ডিফল্ট |
| PNG | টেক্সট, লোগো, ট্রান্সপারেন্সি | সর্বজনীন | 100 – 300 KB | গ্রাফিক্সের জন্য ডিফল্ট |
| WebP | উভয়ই, ছোট ফাইল | টুইটার, স্ল্যাক (সব নয়) | 40 – 120 KB | শুধুমাত্র সম্পূরক |
আপনার OG ছবির জন্য ১০০–২০০ KB লক্ষ্য করুন। ছোট হওয়াই ভালো, তবে এত বেশি কম্প্রেস করবেন না যে ছবি সোশ্যাল ফিডে পিক্সেলেটেড দেখায়। হোয়াটসঅ্যাপ ৩০০ KB এর কঠোর সীমা দেয় — যদি হোয়াটসঅ্যাপ শেয়ারিং গুরুত্বপূর্ণ হয়, সব OG ছবি এই সীমার নিচে রাখুন।
ছবি ফরম্যাটের সুবিধা-অসুবিধা সম্পর্কে আরও জানতে, দেখুন ওয়েবসাইট ইমেজ অপটিমাইজেশন গাইড । বিদ্যমান ছবি রূপান্তরের জন্য, JPG থেকে WebP গাইড দৈনন্দিন ওয়ার্কফ্লো কভার করে।
HTML প্রয়োগ ও মেটা ট্যাগ
আপনার HTML এর <head> উপাদানের মধ্যে ওপেন গ্রাফ মেটা ট্যাগ রাখুন। og:image ট্যাগ অবশ্যই সম্পূর্ণ URL ব্যবহার করবে — আপেক্ষিক পথ সোশ্যাল ক্রলার সমর্থন করে না।
ন্যূনতম প্রয়োজনীয় ট্যাগ হলো og:title, og:description, og:image, এবং og:url। twitter:card ট্যাগ টুইটারের বড় ইমেজ কার্ড ফরম্যাট সক্রিয় করে।
<meta property="og:type" content="article">
<meta property="og:title" content="Your Article Title">
<meta property="og:description" content="Compelling description under 160 characters">
<meta property="og:image" content="https://yourdomain.com/og-image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://yourdomain.com/article">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yourdomain.com/og-image.jpg">সর্বদা og:image:width এবং og:image:height উল্লেখ করুন। এগুলো না থাকলে, প্ল্যাটফর্মগুলো প্রিভিউ দেখানোর আগে ছবি ডাউনলোড ও পরীক্ষা করে, যা প্রদর্শন ধীর করে এবং প্লেসহোল্ডার দেখানোর সম্ভাবনা বাড়ায়।
আপনি যদি Blazor ব্যবহার করেন, তাহলে Blazor SEO মেটাডেটা কম্পোনেন্ট স্বয়ংক্রিয়ভাবে সব ওপেন গ্রাফ ট্যাগ সংস্কৃতি-সচেতন URL সহ পরিচালনা করে।
ওপেন গ্রাফ ইমেজ টেস্টিং ও ডিবাগিং
সোশ্যাল প্ল্যাটফর্মগুলো ওপেন গ্রাফ মেটাডেটা তীব্রভাবে ক্যাশ করে। ট্যাগ বা ছবি আপডেট করার পর, অফিসিয়াল ডিবাগার টুল ব্যবহার করে নতুন ক্রল জোর করুন এবং শেয়ার করার আগে প্রিভিউ সঠিক কিনা যাচাই করুন।
ফেসবুক শেয়ারিং ডিবাগার
developers.facebook.com/tools/debug এ আপনার URL দিন নতুন মেটাডেটা আনতে, ফেসবুক কোন ছবি নির্বাচন করেছে দেখুন এবং যেকোনো ভ্যালিডেশন সতর্কতা বা ত্রুটি ডিবাগ করুন।
ক্যাশ রিফ্রেশ জোর করুন
টুইটার কার্ড ভ্যালিডেটর
cards-dev.twitter.com/validator ব্যবহার করে আপনার টুইটার কার্ড কেমন দেখাবে তা প্রিভিউ করুন। 'Preview card' ক্লিক করে থাম্বনেইল, শিরোনাম ও বর্ণনা আসল কার্ড ফরম্যাটে দেখুন।
পোস্ট করার আগে প্রিভিউ
লিঙ্কডইন পোস্ট ইন্সপেক্টর
linkedin.com/post-inspector এ লিঙ্কডইনের পোস্ট ইন্সপেক্টর আপনার URL এর ক্যাশ রিফ্রেশ করে এবং বর্তমান মেটাডেটা সহ পোস্ট প্রিভিউ কেমন দেখাবে তা দেখায়।
লিঙ্কডইন ক্যাশ রিফ্রেশ করুন
সাধারণ ভুল ও সেগুলো ঠিক করার উপায়
অধিকাংশ ওপেন গ্রাফ ইমেজ সমস্যা কয়েকটি পুনরাবৃত্ত ভুলের মধ্যে পড়ে। কী খুঁজতে হবে জানা থাকলে ডিবাগিং সময় বাঁচে।
- আপেক্ষিক URL। সোশ্যাল ক্রলার আপেক্ষিক পথ সমাধান করে না। og:image এর মান অবশ্যই প্রোটোকল ও ডোমেইনসহ সম্পূর্ণ অ্যাবসোলিউট URL হতে হবে (https://yourdomain.com/path/image.jpg)।
- প্রস্থ ও উচ্চতার ট্যাগ অনুপস্থিত। og:image:width ও og:image:height না থাকলে, প্ল্যাটফর্মগুলো প্রিভিউ তৈরির আগে ছবি ডাউনলোড ও পরীক্ষা করে। অতিরিক্ত এই ডাউনলোড এড়াতে উভয়ই যোগ করুন।
- প্রমাণীকরণের পেছনে থাকা ছবি। ক্রলারগুলো লগইন প্রয়োজন এমন বা robots.txt দ্বারা ব্লক করা ছবিতে প্রবেশ করতে পারে না। OG ছবিটি অবশ্যই প্রমাণীকরণ ছাড়া সবার জন্য উন্মুক্ত হতে হবে।
- ভুল অ্যাসপেক্ট রেশিও। ১.৯১:১ থেকে অনেক ভিন্ন অনুপাতের ছবি ক্রপ হবে বা বিরক্তিকর লেটারবক্সিং সহ দেখানো হবে। প্রকাশের আগে সর্বদা নির্ধারিত অনুপাত পরীক্ষা করুন।
- পুরানো প্ল্যাটফর্ম ক্যাশ। ফাইলনাম না বদলে বা কুয়েরি স্ট্রিং যোগ না করে ছবি আপডেট করলে প্ল্যাটফর্মগুলো পুরানো ক্যাশড ভার্সন দেখায়। ফাইলনাম পরিবর্তন করুন বা প্ল্যাটফর্ম ডিবাগার ব্যবহার করে রিফ্রেশ জোর করুন।
ওপেন গ্রাফ ইমেজ জেনারেশন স্বয়ংক্রিয়করণ
ছোট ওয়েবসাইট ও ব্লগের জন্য প্রতি পেজে একটি স্থির OG ছবি সবচেয়ে সহজ ও নির্ভরযোগ্য পদ্ধতি। বড় প্রকাশনা বা অ্যাপ্লিকেশনে যেখানে প্রতিটি পেজের জন্য আলাদা সোশ্যাল প্রিভিউ দরকার, সেখানে ডায়নামিক জেনারেশন কার্যকর।
ডায়নামিক OG ইমেজ জেনারেশন অনুরোধের সময় বা বিল্ড সময় পেজের শিরোনাম, বর্ণনা বা অন্যান্য বিষয়বস্তু অনুযায়ী একটি অনন্য ছবি তৈরি করে। ফলে প্রতিটি পেজের জন্য ম্যানুয়াল ছবি তৈরি ছাড়াই অনন্য ও ব্র্যান্ড উপযোগী প্রিভিউ পাওয়া যায়।
কখন স্বয়ংক্রিয় করবেন
যখন আপনার অনেক পেজ থাকে যেগুলোর আলাদা ছবি দরকার, বিষয়বস্তু ঘনঘন পরিবর্তিত হয়, বা ম্যানুয়াল ছবি তৈরি প্রকাশনার পরিমাণের সাথে মানায় না, তখন স্বয়ংক্রিয় করুন।
বেশি পরিমাণ বা ডায়নামিক বিষয়বস্তু
কখন স্থির ছবি ব্যবহার করবেন
অধিকাংশ পেজের জন্য — ল্যান্ডিং পেজ, গাইড এবং চিরসবুজ আর্টিকেল — মনোযোগ দিয়ে তৈরি স্থির ছবি গুণগত মান ও ব্র্যান্ড সঙ্গতিতে তৈরি ছবির চেয়ে ভালো।
গুণগত মান-প্রথম পদ্ধতি
ডায়নামিক জেনারেশনের জন্য জনপ্রিয় টুলস হলো Cloudinary (URL প্যারামিটার দ্বারা ট্রান্সফর্ম), Vercel OG (React/HTML থেকে এজে ছবি রেন্ডার), এবং Puppeteer বা Playwright ভিত্তিক স্ক্রিনশট পাইপলাইন যেকোনো টেক স্ট্যাকের জন্য।