ওয়েবসাইটের লোগো সাইজ কত? ফেসবুকে লিংকের ছবি আর কাটবে না যেভাবে

ওয়েবসাইটের লোগো সাইজের সোজা উত্তরটা আগে দিই। দোকানের ওপরের সারিতে, মানে হেডারে, লোগো সাধারণত ৩০ থেকে ৬০ পিক্সেলের মতো উঁচু হয়ে দেখায়। কিন্তু ফাইলটা দেবেন তার চেয়ে অনেক বড়, অন্তত ৫০০ পিক্সেল চওড়া, ট্রান্সপারেন্ট ব্যাকগ্রাউন্ডের PNG-তে, আর সাইজে কয়েকশো KB-র মধ্যে। ব্রাউজারের ট্যাবের ছোট আইকনটা, যাকে ফেভিকন বলে, হবে চারকোনা, ৫১২ × ৫১২ পিক্সেলে বানিয়ে রাখলে সব জায়গায় চলে। আর ফেসবুকে লিংক দিলে যে বড় ছবিটা আসে, তার মাপ ১২০০ × ৬৩০ পিক্সেল। এই মাপটা Meta নিজেই তাদের ডেভেলপার পেজে বলে দিয়েছে।

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

ওয়েবসাইটের লোগো সাইজ কত, কোন ফাইলে দেবেন?

প্রথমে একটা জিনিস পরিষ্কার করে নিই। স্ক্রিনে লোগো কত বড় দেখায় আর ফাইলটা কত বড়, এই দুটো আলাদা কথা। হেডারে লোগো বসে একটা নির্দিষ্ট উচ্চতায়, ধরুন ৪০ পিক্সেল। আপনার ফাইল ২,০০০ পিক্সেলের হোক বা ২০০ পিক্সেলের, ওয়েবসাইট সেটাকে ছোট করে ওই ৪০ পিক্সেলেই বসাবে।

তাহলে ফাইল বড় দেওয়ার দরকার কী? কারণ এখনকার বেশিরভাগ স্মার্টফোনের স্ক্রিন খুব ঘন। সেখানে স্ক্রিনের এক পিক্সেলের জায়গায় আসলে দুই-তিনটা ছোট বিন্দু জ্বলে। ফাইল ছোট হলে ফোনকে সেই ফাঁক নিজে আন্দাজে ভরতে হয়, আর লোগোর কিনারা ঝাপসা হয়ে যায়। দামি ফোনে কাস্টমার এটা আরও বেশি টের পান।

হিসাবটা একটা উদাহরণে দেখুন। নিচের সংখ্যাগুলো উদাহরণ, কোনো নিয়মের বই থেকে নেওয়া না। ধরুন আপনার লোগোতে চিহ্ন আর দোকানের নাম পাশাপাশি বসানো, তাই লোগোটা উচ্চতার চার গুণ চওড়া। হেডারে ৪০ পিক্সেল উঁচু হলে স্ক্রিনে সেটা ১৬০ পিক্সেল চওড়া দেখাবে। যে ফোনে এক পিক্সেলে তিনটা বিন্দু, সেখানে ঝকঝকে দেখাতে ফাইল লাগবে ১৬০ × ৩ = ৪৮০ পিক্সেল চওড়া। এজন্যই অন্তত ৫০০ পিক্সেল চওড়ার কথা বলা হয়। এটা নিচের সীমা। শপের লোগো বানানোর লেখায় মূল PNG-টা ১,০০০ পিক্সেল চওড়া রাখতে বলেছি, ওয়েবসাইটে সেই ফাইলটাই দিন। এর চেয়ে বড় দিয়ে লাভ নেই, শুধু ফাইল ভারী হয়।

ফাইলের ধরন নিয়ে ছোট করে বলি। PNG সবচেয়ে ভালো, কারণ PNG-তে ট্রান্সপারেন্ট ব্যাকগ্রাউন্ড রাখা যায়, তখন লোগো যেকোনো রঙের হেডারে মানিয়ে যায়। লোগোর নিজের একটা ব্যাকগ্রাউন্ড বা বক্স থাকলে JPG-ও চলে। WebP হলো কম সাইজের নতুন ধরনের ছবি, সেটাও চলে। GIF দেবেন না, কারণ GIF-এ রং কম থাকে আর লোগোর কিনারা খাঁজকাটা দেখায়। আর SVG অনেক ওয়েবসাইট বিল্ডার নেয়ই না, কারণ SVG ফাইলের ভেতরে কোড লুকিয়ে রাখা যায়। SVG রেখে দিন প্রেসে স্টিকার ছাপানোর জন্য।

এবার বলি যে ভুলটা সবচেয়ে বেশি হয়। অনেকে ডিজাইনারের পাঠানো ফাইল সরাসরি আপলোড করেন, অথবা ছাপানো লোগোর ছবি ফোনে তুলে দিয়ে দেন। তাতে ফাইলের সাইজ দাঁড়ায় ৫-৬ MB। একটা ৬ MB-র লোগো মানে অ্যাড থেকে আসা প্রতিটা নতুন কাস্টমারের ফোনকে আগে ৬ MB নামাতে হচ্ছে, শুধু আপনার নামটা দেখানোর জন্য। মোবাইল ডেটায় পেজ খুলতে দেরি হয়, আর সেই অপেক্ষার মধ্যে অনেকে ব্যাক করে চলে যান। অথচ ওই একটা ক্লিকের জন্য আপনি অ্যাডে ডলার স্পেন্ড করেছেন। একটা ঝকঝকে লোগো সাধারণত ২০০ KB-র কম হয়। যে অ্যাপে লোগো বানিয়েছেন, সেখান থেকে ১,০০০ পিক্সেলের মতো চওড়া করে PNG আবার ডাউনলোড করুন, অথবা ডিজাইনারের কাছে এই মাপে চেয়ে নিন। তাতেই সাইজ অনেক কমে যায়।

লোগো এখনো বানানো না থাকলে, বা কোন অ্যাপে বানাবেন ঠিক করতে না পারলে, আগে ওপরে বলা লোগো বানানোর লেখাটা পড়ে নিন। এই লেখা শুরু হচ্ছে লোগো হাতে আসার পর থেকে।

WinningSeller-এ স্টোর বানালে লোগোর এই নিয়মগুলো আপলোডের আগেই মেনুর "ডিজাইন" পেজে লেখা থাকে, "বিস্তারিত দেখুন" চাপলে প্রতিটার কারণসহ। PNG, JPG বা WebP নেয়, ২ MB পর্যন্ত। SVG আর GIF নেয় না, আর ১৫০ পিক্সেলের চেয়ে ছোট লোগোও নেয় না। কম্পিউটারে আর মোবাইলে লোগো কত উঁচু দেখাবে, দুটো আলাদা করে বেছে নেওয়া যায়, আর পাশেই দেখায় হেডারে লোগোটা কেমন দেখাবে।

লোগো হেডারে ছোট বা সাদা বক্সের মতো দেখায় কেন?

অনেক লোগো ফাইলে আসল লোগোর চারপাশে অনেকখানি ফাঁকা জায়গা থাকে। Canva-তে চারকোনা ডিজাইন খুলে মাঝখানে নাম লিখে ডাউনলোড করলে এমনটাই হয়। সমস্যা হলো, হেডার পুরো ফাইলটাকে ৪০ পিক্সেলে বসায়, ফাঁকা জায়গাসহ। ফাইলের অর্ধেক যদি ফাঁকা থাকে, আপনার লোগো দেখাবে অর্ধেক ছোট। তখন মনে হয় লোগোটা হেডারে কোথাও হারিয়ে গেছে। তাই আপলোডের আগে লোগোর একদম কিনারা ঘেঁষে ছবিটা ক্রপ করে নিন।

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

আপনার PNG আসলেই ট্রান্সপারেন্ট কি না, কীভাবে বুঝবেন? ফোনের গ্যালারিতে পেছনটা সাদা দেখায় বলে ধোঁকা খাওয়া সহজ। Canva-তে একটা গাঢ় রঙের খালি ডিজাইন খুলে লোগোটা তার ওপর বসান। চারপাশে সাদা বক্স দেখা গেলে ফাইলটা ট্রান্সপারেন্ট না।

রঙের মিলও দেখে নিন। গাঢ় নীল লোগো গাঢ় নীল হেডারে বসালে কাস্টমার লোগোটা দেখতেই পাবেন না। হয় হেডারের রং হালকা করুন, নয়তো লোগোর একটা সাদা কপি দিন। কোন রঙের ওপর কোন রং পড়া যায়, সেটা মাপার সহজ নিয়ম আছে ওয়েবসাইটের কালার কম্বিনেশনের লেখায়। মোবাইলের কথাও মাথায় রাখুন। ফোনের হেডারে লোগোর পাশে মেনু আর কার্টের আইকনও বসে, জায়গা কম। চওড়া লোগো সেখানে কম্পিউটারের চেয়ে একটু ছোট রাখলে চাপাচাপি লাগে না।

ফেভিকন বা দোকানের আইকন কী, সাইজ কত?

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

সাইজের নিয়মটা Google-এর গাইডে পরিষ্কার লেখা আছে। ফেভিকন হতে হবে চারকোনা, মানে চওড়া আর লম্বা সমান, আর অন্তত ৮ × ৮ পিক্সেল। তবে Google নিজেই ৪৮ × ৪৮ পিক্সেলের চেয়ে বড় দিতে বলে, যেন সব জায়গায় ভালো দেখায়। কাজের কথা হলো, ৫১২ × ৫১২ পিক্সেলে একটা আইকন বানিয়ে রাখুন। ওয়েবসাইট সেখান থেকে ট্যাবের জন্য ৩২ পিক্সেল আর হোম স্ক্রিনের জন্য ১৮০ বা ১৯২ পিক্সেলের কপি বানিয়ে নিতে পারে। বড় থেকে ছোট করলে ছবি ঝকঝকে থাকে, ছোট থেকে বড় করলে ঝাপসা হয়।

আইকনে কী রাখবেন, সেটাই আসল প্রশ্ন। ট্যাবে আইকন দেখায় মাত্র ১৬ থেকে ৩২ পিক্সেলে, নখের চেয়েও ছোট। আপনার পুরো চওড়া লোগো ওইটুকু জায়গায় পড়াই যাবে না, একটা রঙিন দাগের মতো লাগবে। আইকনে রাখুন শুধু লোগোর চিহ্নটা, অথবা দোকানের নামের প্রথম অক্ষর, পরিষ্কার একটা রঙের ওপর। "মধুবন" নামের দোকান হলে একটা হলুদ চারকোনার মধ্যে মোটা করে "ম", এটুকুই যথেষ্ট। বানানোর পর ছবিটা ফোনে একদম ছোট করে দেখুন। ওই মাপে চিনতে পারলে আইকন ঠিক আছে।

WinningSeller-এ নিজে আইকন না দিলেও ট্যাব ফাঁকা থাকে না। লোগো গোল বা চারকোনা হলে লোগো থেকেই আইকন বানিয়ে নেয়, আর লোগো চওড়া হলে দোকানের নামের প্রথম অক্ষর দোকানের রঙে বসিয়ে দেয়।

ফেসবুকে লিংক দিলে ছবি কেটে যায় বা আসে না কেন?

আগে বুঝে নিন ফেসবুক ছবিটা পায় কোথা থেকে। আপনি লিংক পেস্ট করলে ফেসবুক আপনার ওয়েবসাইটের পেজটা একবার পড়ে দেখে। পেজের ভেতরে og:image নামের একটা লুকানো ট্যাগ থাকে, যেটা বলে দেয় "এই লিংক শেয়ার হলে এই ছবিটা দেখাও"। কাস্টমার এই ট্যাগ দেখতে পান না, কিন্তু ফেসবুক, WhatsApp আর Messenger এটাই খোঁজে। ছবি কাটা পড়া বা না আসার পেছনে সাধারণত এই কয়টা কারণ থাকে।

• og:image ট্যাগ নেই। তখন ফেসবুক পেজের কোনো একটা ছবি নিজে বেছে নেয়, প্রায়ই সেটা আপনার চওড়া লোগো। চওড়া লোগোকে শেয়ারের মাপে আনতে গিয়ে দুই পাশ কেটে যায়।
• ছবির আকার ভুল। Meta-র ডেভেলপার পেজে বলা আছে, ছবি কাটা না পড়ার জন্য চওড়া যতটা সম্ভব উচ্চতার ১.৯১ গুণ রাখতে, মানে প্রায় দুই গুণ। চারকোনা বা লম্বা ছবি দিলে ফেসবুক ওপর-নিচ কেটে নেয়।
• ছবি খুব ছোট। একই পেজে লেখা আছে, ২০০ × ২০০ পিক্সেলের চেয়ে ছোট ছবি নেওয়াই হয় না। আর বড় ছবিওয়ালা পোস্টের জন্য অন্তত ৬০০ × ৩১৫ পিক্সেল লাগে, এর চেয়ে ছোট হলে ছবি এক কোণে ছোট হয়ে বসে।
• ফাইল খুব ভারী। Meta-র নিয়মে শেয়ার ছবি ৮ MB-র বেশি হতে পারবে না।
• লিংকটা একদম নতুন। Meta লিখেছে, কোনো লিংক প্রথম যিনি শেয়ার করেন, তিনি অনেক সময় ছবি দেখতে পান না। কারণ ফেসবুক তখনো ছবিটা নামিয়ে নিজের কাছে রাখেনি।
• ছবি চেঞ্জ করেছেন, কিন্তু ফেসবুক পুরনোটা মনে রেখেছে। এটার ঠিক করার নিয়ম একটু পরে আলাদা করে বলছি।

এখানে একটা জিনিস খেয়াল করুন। লোগো আর শেয়ার ছবি দুটো আলাদা জিনিস, আলাদা মাপের। হেডারের জন্য বানানো চওড়া লোগোকে শেয়ার ছবি বানালে সেটা কাটা পড়বেই। তাই শেয়ারের জন্য আলাদা একটা ছবি বানিয়ে নেওয়াই সবচেয়ে সহজ সমাধান।

শেয়ার ছবির সাইজ ১২০০ × ৬৩০, ছবিতে কী রাখবেন?

Meta-র ডেভেলপার পেজে বড় ফোন আর কম্পিউটারে ভালো দেখানোর জন্য অন্তত ১২০০ × ৬৩০ পিক্সেলের ছবি দিতে বলা আছে। এই মাপে চওড়া উচ্চতার প্রায় ১.৯১ গুণ, তাই ফেসবুকের ফিডে ছবিটা পুরোটা দেখায়। Canva-তে কাস্টম সাইজে চওড়া ১২০০ আর উচ্চতা ৬৩০ দিয়ে একটা খালি ডিজাইন খুলুন, কাজ শুরু সেখান থেকেই।

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

যে লেখাই দেন, সব রাখুন ছবির মাঝখানের দিকে। কিছু অ্যাপ ছবির কিনারা থেকে একটু কেটে দেখায়, তখন কোণের লেখা হারিয়ে যায়। লেখা বড় রাখুন, কারণ ফোনের ফিডে পুরো ছবিটাই দেখায় হাতের তালুর চেয়েও ছোট। ছোট অক্ষরে পাঁচ লাইনের বদলে বড় অক্ষরে এক লাইন অনেক বেশি কাজ করে।

শেয়ার ছবিতে দাম আর ছাড়ের কথা লিখবেন না। দোকানের লিংক মাসের পর মাস গ্রুপে, ইনবক্সে আর কমেন্টে ঘোরে। ঈদের "৩০% ছাড়" লেখা ছবি তিন মাস পরেও দেখালে কাস্টমার সেই ছাড়ই চাইবেন, না পেলে মন খারাপ করে অর্ডার না দিয়েই চলে যেতে পারেন। অফারের জন্য পোস্টের ছবি আলাদা বানান, শেয়ার ছবিটা রাখুন সবসময়ের জন্য।

মনে রাখবেন, এই ছবি দোকানের হোমপেজ আর ক্যাটাগরির লিংকের জন্য। প্রোডাক্টের লিংক শেয়ার হলে সেখানে প্রোডাক্টের নিজের ছবি দেখানোই ভালো, কারণ কাস্টমার তখন ওই জিনিসটাই দেখতে চান। ছবিটা JPG-তে সেভ করুন। Meta ৮ MB পর্যন্ত নেয়, কিন্তু কয়েকশো KB-র ছবি সব জায়গায় তাড়াতাড়ি আসে।

পুরনো ছবি দেখালে Sharing Debugger দিয়ে ঠিক করবেন যেভাবে

রাত জেগে নতুন শেয়ার ছবি বসালেন, অথচ ফেসবুকে লিংক দিলে এখনো সেই কাটা লোগোই আসছে। এই বিরক্তিটা প্রায় সব সেলারের চেনা। কারণ হলো, ফেসবুক একবার কোনো লিংকের ছবি নিয়ে নিলে সেটা কিছুদিন মনে রাখে, প্রতিবার আপনার পেজ আবার পড়ে না। Meta এর জন্য একটা ফ্রি টুল রেখেছে, নাম Sharing Debugger। কাজটা পাঁচ মিনিটের।

1. কম্পিউটার বা ফোনের ব্রাউজারে developers.facebook.com/tools/debug/ খুলুন, আর নিজের ফেসবুক অ্যাকাউন্টে লগইন করুন।
2. ঘরে আপনার দোকানের পুরো লিংকটা বসিয়ে Debug চাপুন।
3. নিচে দেখাবে ফেসবুক আপনার লিংকটাকে কীভাবে দেখছে, কোন ছবি আর কোন টাইটেল। কোনো ট্যাগ না থাকলে বা ছবি ছোট হলে সেখানে ওয়ার্নিংও আসে, সেগুলো পড়ে নিন।
4. পুরনো ছবি দেখালে "Scrape Again" চাপুন। ফেসবুক তখন আপনার পেজটা নতুন করে পড়ে নতুন ছবি নেয়।
5. এবার ফেসবুকে নতুন করে লিংকটা পোস্ট করে দেখুন।

এরপরও পুরনো ছবি থেকে গেলে একটা কারণ প্রায়ই থাকে। Meta-র পেজে লেখা আছে, ছবি তার নিজের লিংক ধরে মনে রাখা হয়, আর সেই লিংক চেঞ্জ না হলে ছবিও চেঞ্জ হয় না। মানে আপনি যদি একই নামের ফাইলে নতুন ছবি বসিয়ে থাকেন, ফেসবুক ধরে নেয় কিছুই চেঞ্জ হয়নি। সমাধান হলো নতুন নামে ছবিটা আপলোড করা, যেমন share-v2.jpg। আর আগে যে পোস্টগুলো হয়ে গেছে, সেগুলোর ছবি অনেক সময় আর চেঞ্জ হয় না। নতুন পোস্টে নতুন ছবি আসে।

WhatsApp আর Messenger-এ লিংক পাঠালে ছবি আসে না কেন?

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

Messenger Meta-রই অ্যাপ, তাই ফেসবুকের মতো সেখানেও সাধারণত og:image ট্যাগের ছবিটাই দেখায়। WhatsApp-ও সাধারণত একই ট্যাগ পড়ে। তবে শেয়ার ছবির মাপ নিয়ে WhatsApp-এর কোনো অফিসিয়াল পেজ আমরা খুঁজে পাইনি, আর ফেসবুকের Sharing Debugger-এর মতো কোনো টুলও পাইনি। তাই এখানে আলাদা কোনো মাপের সংখ্যা দিচ্ছি না। সাধারণত দেখা যায়, WhatsApp কখনো ছবিটা বড় করে ওপরে দেখায়, কখনো ছোট করে পাশে। এজন্যই ছবির জরুরি জিনিস মাঝখানে রাখার নিয়মটা এখানে আরও বেশি কাজে লাগে।

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

এক নজরে সব মাপ, কোন ছবি কোন ফাইলে দেবেন?

এতক্ষণ যা বললাম, নিচের টেবিলে সব এক জায়গায় রাখলাম। এই মাপগুলো একবার ঠিক করে ফাইলগুলো একটা ফোল্ডারে রেখে দিন। পরে দোকান নতুন করে সাজালেও আর খুঁজতে হবে না।

ছবিগুলোর বাইরেও কিছু ছোট জিনিস দোকানকে আসল দেখায়। দোকানের রং লোগোর সাথে মিলিয়ে নিন। ফুটারে ফেসবুক পেজের লিংক দিন, আর ফোন নম্বর ও WhatsApp নম্বর রাখুন। কাস্টমার নিচে নেমে যখন দেখেন আপনার পেজের লিংক আর ফোন নম্বর আছে, তখন তাঁর ভরসা বাড়ে। ফেসবুক পেজের নিজের প্রোফাইল আর কভার ছবির সাইজ আলাদা, সেটা আছে ফেসবুক বিজনেস পেজ সেটআপের লেখায়।

WinningSeller-এ এই ছয়টা জিনিস ডিজাইন পেজের "ব্র্যান্ড সেটআপ" চেকলিস্টে একসাথে থাকে। লোগো, শপের আইকন, ব্র্যান্ডের কালার, শেয়ার ছবি, সোশ্যাল লিংক আর যোগাযোগের তথ্য, প্রতিটার পাশে "ঠিক করুন" চাপলে সোজা সেই জায়গায় নিয়ে যায়। শেয়ার ছবি না দিলে লোগো দিয়ে ১২০০ × ৬৩০-এর একটা ছবি নিজেই বানিয়ে রাখে, আর অন্য মাপের ছবি দিলে কাটে না, হেডারের রঙের ওপর মাঝখানে বসায়। ছয়টা হয়ে গেলে চেকলিস্টটা ভাঁজ হয়ে সরে যায়। বাকি ফিচারগুলো এখানে দেখে নিন।

আজকের কাজটা পনেরো মিনিটের। দোকানের লিংকটা Sharing Debugger-এ দিয়ে দেখুন কী ছবি আসে। তারপর ব্রাউজারে দোকানটা খুলে ট্যাবের আইকনটা দেখুন, আর ফোনে হেডারের লোগোটা ঝাপসা কি না খেয়াল করুন। যেটা ঠিক নেই, সেটা দিয়েই শুরু করুন। পরের বার কেউ গ্রুপে আপনার লিংক দেখবেন পুরো লোগোসহ, আর সেই প্রথম এক সেকেন্ডেই দোকানটাকে আসল বলে মনে হবে।

সাধারণ প্রশ্ন

ওয়েবসাইটের লোগো কত পিক্সেল হওয়া উচিত?

হেডারে লোগো সাধারণত ৩০ থেকে ৬০ পিক্সেলের মতো উঁচু দেখায়, কিন্তু ফাইলটা দেবেন অনেক বড়, অন্তত ৫০০ পিক্সেল চওড়া। কারণ এখনকার বেশিরভাগ ফোনের স্ক্রিনে এক পিক্সেলের জায়গায় দুই-তিনটা আসল বিন্দু থাকে, ছোট ফাইল সেখানে ঝাপসা দেখায়। ট্রান্সপারেন্ট ব্যাকগ্রাউন্ডের PNG দিন, আর ফাইলের সাইজ রাখুন কয়েকশো KB-র মধ্যে।

ফেভিকনের সাইজ কত হবে?

ফেভিকন হবে চারকোনা, মানে সমান চওড়া আর লম্বা। Google Search Central-এর গাইডে অন্তত ৮ × ৮ পিক্সেলের কথা আছে, তবে তারা ৪৮ × ৪৮-এর চেয়ে বড় দিতে বলে। নিরাপদ হলো ৫১২ × ৫১২ পিক্সেলে একটা বানিয়ে রাখা, সেখান থেকে ছোট মাপগুলো বানানো যায়।

ফেসবুকে ওয়েবসাইটের লিংক দিলে ছবি আসে না কেন?

বেশিরভাগ সময় পেজে og:image নামের ট্যাগটা থাকে না, অথবা ছবিটা খুব ছোট। Meta-র ডেভেলপার পেজে লেখা আছে, ২০০ × ২০০ পিক্সেলের চেয়ে ছোট ছবি নেওয়াই হয় না। আরেকটা কারণ হলো, নতুন লিংক প্রথমবার শেয়ারের সময় ফেসবুক ছবিটা তখনো নামিয়ে রাখেনি।

og image বা শেয়ার ছবির সাইজ কত?

Meta বলে অন্তত ১২০০ × ৬৩০ পিক্সেল, আর ছবির চওড়া যতটা সম্ভব উচ্চতার ১.৯১ গুণ রাখতে, তাহলে ছবি কাটা পড়ে না। ফাইল ৮ MB-র বেশি হলে চলবে না। ওয়েবসাইটের শেয়ার ছবির জন্য এই এক মাপই WhatsApp আর Messenger-এ সাধারণত ঠিকঠাক দেখায়।

ছবি চেঞ্জ করার পরও ফেসবুকে পুরনো ছবি দেখায়, কী করব?

Meta-র Sharing Debugger-এ লিংকটা দিয়ে "Scrape Again" চাপুন। ফেসবুক তখন পেজটা আবার পড়ে নতুন ছবি নেয়। তাতেও কাজ না হলে নতুন নামে ছবিটা আপলোড করুন, কারণ Meta জানিয়েছে ছবি তার লিংক ধরে মনে রাখা হয়।

লোগো কি SVG ফাইলে দেওয়া যায়?

অনেক ওয়েবসাইট বিল্ডারে যায় না। SVG ফাইলের ভেতরে কোড লুকিয়ে রাখা যায়, তাই নিরাপত্তার জন্য অনেকে এটা বন্ধ রাখে। SVG রেখে দিন প্রেস আর ডিজাইনারের জন্য, ওয়েবসাইটে দিন PNG।