সোশ্যাল প্রিভিউ গাইড
Open Graph ছবি: প্রকাশের আগে শেয়ার লিংক পরীক্ষা করুন
Open Graph ছবি নির্ধারণ করে আপনার পেজ কেমন দেখাবে যখন কেউ লিঙ্ক শেয়ার করে। এই গাইডে দেখানো হয়েছে ব্যবহারিক সাইজ, ট্যাগ, ডিজাইন চেক, ক্যাশ ফিক্স এবং প্রকাশের চেকলিস্ট যা প্রিভিউ কার্যকর রাখে।
সংক্ষিপ্ত উত্তর
একটি Open Graph ছবি বেছে নিন এবং শেয়ারের আগে লিংক পরীক্ষা করুন
অধিকাংশ পেজের জন্য 1200 x 630 ছবি দিয়ে শুরু করুন, গুরুত্বপূর্ণ টেক্সট ও লোগো প্রান্ত থেকে দূরে রাখুন, সম্পূর্ণ HTTPS ছবি URL ব্যবহার করুন, এবং প্ল্যাটফর্ম ডিবাগ টুলে চূড়ান্ত URL পরীক্ষা করুন। এই সহজ ওয়ার্কফ্লো বেশিরভাগ ভাঙা প্রিভিউ ধরবে।
প্রিভিউ ভূমিকা
Open Graph ছবিকে পেজের একটি সম্পদ হিসেবে বিবেচনা করুন
Open Graph ছবি কোনো সাজসজ্জা নয়। এটি সেই ছবি যা ক্রলাররা সোশ্যাল ফিড, চ্যাট অ্যাপ এবং ওয়ার্ক টুলের জন্য লিঙ্ক কার্ড তৈরি করার সময় পেজকে প্রতিনিধিত্ব করে। এটি শিরোনাম, বর্ণনা, দৃশ্যমান পেজ বিষয় এবং স্ট্রাকচার্ড ডেটা ছবির সাথে মেলানো উচিত।
এটি ক্লিক বিক্রি করে
ছবি, শিরোনাম, এবং বর্ণনা দর্শক আপনার পেজে আসার আগে প্রথম ছাপ তৈরি করে।
এটি কন্টেন্টের সাথে মেলানো উচিত
একটি ভালো প্রিভিউ ছবি পেজের শিরোনাম, দৃশ্যমান বিষয় এবং মূল ব্যবহারকারীর প্রতিশ্রুতির সাথে মেলে, সাধারণ ব্র্যান্ড গ্রাফিক ব্যবহার করার পরিবর্তে।
এটি SEO ডেটার সাথে সম্পর্কিত
Open Graph ছবি, Twitter কার্ড ছবি, canonical URL, এবং JSON-LD ছবি একই পেজ বর্ণনা করা উচিত।
এটির জন্য নামকরণের নিয়ম প্রয়োজন
একটি স্পষ্ট ফাইলনাম এবং আপডেট নিয়ম পুরানো ক্যাশ এবং পুরানো ক্যাম্পেইন ছবির পুনরাবৃত্তি রোধ করে।
সাইজ পরিকল্পনা
এমন মাত্রা নির্বাচন করুন যা বাস্তব প্রিভিউয়ে টিকে থাকে
বিভিন্ন প্ল্যাটফর্ম প্রিভিউ কেটে এবং ক্যাশ করে ভিন্নভাবে। Open Graph প্রিভিউয়ের জন্য 1200 x 630 ফাইল একটি শক্তিশালী ডিফল্ট, তবে নিরাপদ নিয়ম হলো কেন্দ্রীভূত সেফ এরিয়া ডিজাইন করা এবং গুরুত্বপূর্ণ প্ল্যাটফর্মে চূড়ান্ত URL পরীক্ষা করা।
| প্ল্যাটফর্ম বা ব্যবহার | বাস্তবসম্মত ছবি পরিকল্পনা | মনোযোগ দিন | প্রকাশের পরীক্ষা |
|---|---|---|---|
| সাধারণ Open Graph | বড় শেয়ার ছবির জন্য 1200 x 630 ব্যবহার করুন। | ছোট ছবি নরম দেখাতে পারে বা ছোট থাম্বনেইল হিসেবে প্রদর্শিত হতে পারে। | শেয়ার করার আগে প্ল্যাটফর্ম ডিবাগারে চূড়ান্ত URL প্রিভিউ করুন। |
| Facebook এবং LinkedIn | পেজ যদি প্ল্যাটফর্ম-নির্দিষ্ট সম্পদ না চায় তবে একই 1.91:1 স্টাইলের ছবি ব্যবহার করুন। | ফিড লেআউট এবং ডিভাইসে প্রান্তগুলো ভিন্নভাবে কাটা যেতে পারে। | গুরুত্বপূর্ণ টেক্সট ও লোগো কেন্দ্রীয় সেফ এরিয়ার ভিতরে রাখুন। |
| X বড় কার্ড | summary_large_image ব্যবহার করুন এবং ভিজ্যুয়াল কেন্দ্রীয় রাখুন; X একটি প্রশস্ত বড় কার্ড ছবি সমর্থন করে। | কার্ড কাটা বা রিসাইজ করলে ছোট টেক্সট ও প্রান্তের বিস্তারিত হারিয়ে যেতে পারে। | twitter:image সেট করুন এবং X কার্ড টুল দিয়ে পরীক্ষা করুন। |
| চ্যাট অ্যাপ এবং কাজের টুল | ফাইল ছোট এবং ডিজাইন সহজ রাখুন কারণ প্রিভিউ সাধারণত ছোট প্যানেলে দেখা যায়। | ব্যস্ত স্ক্রিনশট, দীর্ঘ শিরোনাম, এবং কম কনট্রাস্ট দ্রুত অপ্রচলিত হয়ে যায়। | আপনার দর্শক যে টুল ব্যবহার করে সেখানে চূড়ান্ত লিঙ্ক পেস্ট করুন। |
মূল বার্তাটি ছবির কেন্দ্রে রাখুন। প্রান্তগুলো ঝুঁকিপূর্ণ কারণ ফিড কার্ড, চ্যাট প্রিভিউ, এবং মোবাইল লেআউট ভিন্নভাবে কাটা হতে পারে।
HTML
পেজ প্রকাশের আগে ক্রলারদের প্রয়োজনীয় ট্যাগ সেট করুন
Open Graph ট্যাগ HTML হেডে থাকা উচিত। সম্পূর্ণ ছবি URL ব্যবহার করুন, প্রস্থ ও উচ্চতা ঘোষণা করুন, উপকারী অল্ট টেক্সট যোগ করুন, এবং canonical URL পেজের সাথে সামঞ্জস্যপূর্ণ রাখুন যা ব্যবহারকারীরা শেয়ার করবে।
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| ট্যাগ | কেন এটি গুরুত্বপূর্ণ | সাধারণ ভুল |
|---|---|---|
| og:image | ক্রলারদের সেই ছবির দিকে নির্দেশ করে যা পেজকে প্রতিনিধিত্ব করবে। | লগইন, রিডাইরেক্ট, বা রোবট নিয়মে ব্লক করা ছবি বা আপেক্ষিক পথ ব্যবহার করা। |
| og:image:width / og:image:height | প্ল্যাটফর্মকে ছবি ফেচ ও পরীক্ষা করার আগে সাইজ জানায়। | মাত্রা না দিয়ে প্রতিটি ক্রলারকে প্রিভিউ রেন্ডার অনুমান করতে দেওয়া। |
| og:image:alt | অ্যাক্সেসিবিলিটির জন্য প্রিভিউ ছবির বর্ণনা দেয় এবং ক্রলারদের আরও প্রেক্ষাপট দেয়। | ছবিতে যা দেখা যায় তা বর্ণনা না করে পেজ শিরোনাম পুনরাবৃত্তি করা। |
| og:url | প্রিভিউকে canonical পেজ URL এর সাথে সংযুক্ত করে যা শেয়ার করা উচিত। | ট্র্যাকিং, স্টেজিং, বা সংস্কৃতিগত ভুল URL স্থায়ী পেজ পরিচয় হিসেবে ব্যবহার করা। |
| twitter:card / twitter:image | X কে স্পষ্ট বড় কার্ড নির্দেশনা এবং ঐচ্ছিক প্ল্যাটফর্ম-নির্দিষ্ট ছবি দেয়। | ধরা হচ্ছে X সবসময় Open Graph ছবিকে অন্যান্য প্ল্যাটফর্মের মতোই রেন্ডার করবে। |
আপনি যদি Blazor ব্যবহার করেন, Blazor SEO মেটাডেটা কম্পোনেন্ট Open Graph ট্যাগ, Twitter কার্ড ট্যাগ, canonical URL, এবং JSON-LD মেটাডেটা একসাথে রাখে।
ডিজাইন নিয়মাবলী
প্রথমে ছোট ফিড কার্ডের জন্য ডিজাইন করুন
অধিকাংশ মানুষ পুরো ছবি দেখবে না। তারা ফিড, মেসেজ বা প্রিভিউ প্যানে সংকুচিত কার্ড দেখবে। সহজ লেআউটই সফল: একটি স্পষ্ট বিষয়, পড়ার যোগ্য কনট্রাস্ট, এবং ছোট টেক্সট যা শুধু ডিজাইন ফাইলে কাজ করে না।
ওয়ার্কফ্লো
প্রত্যেক গুরুত্বপূর্ণ পেজের জন্য সহজ ওয়ার্কফ্লো
- 1
প্রিভিউ প্রতিশ্রুতি লিখুন
এক নজরে কার্ডে কী বলা উচিত তা নির্ধারণ করুন: বিষয়, সুবিধা, পণ্য, বা প্রবন্ধের দিক।
- 2
পরিকল্পিত অনুপাতে ছবি তৈরি করুন
ডিফল্ট ফাইলের জন্য 1200 x 630 ব্যবহার করুন এবং গুরুত্বপূর্ণ কন্টেন্ট কেন্দ্রীয় রাখুন।
- 3
ফাইল অপ্টিমাইজ করুন
সোশ্যাল ছবির জন্য JPG বা PNG ব্যবহার করুন, ফাইল যথাযথ ছোট রাখুন, এবং দৃশ্যমান কম্প্রেশন ক্ষতি এড়িয়ে চলুন।
- 4
মেটাডেটা ও স্কিমা সেট করুন
Open Graph ট্যাগ, Twitter কার্ড ট্যাগ, canonical URL, এবং JSON-LD ছবি রেফারেন্স একসাথে আপডেট করুন।
- 5
স্থিতিশীল ফাইলনামে প্রকাশ করুন
অর্থবহ ফাইলনাম ব্যবহার করুন, এবং ছবি প্রতিস্থাপন করলে প্ল্যাটফর্ম ক্যাশ পুরানো রাখতে পারে এমন হলে ফাইলনাম পরিবর্তন করুন।
- 6
চূড়ান্ত URL পরীক্ষা করুন
পাবলিক পেজ URL ডিবাগার টুল দিয়ে চালান এবং শুধু সোর্স কোড নয়, আসল প্রিভিউ পরীক্ষা করুন।
টুল টিপ
প্রিভিউ সাইজ নির্ধারণের পর PixelPress ব্যবহার করুন
যখন ছবি পরিকল্পনা চূড়ান্ত ফাইলের নাম দেয়, PixelPress স্থানীয় WebP বা AVIF রূপান্তরে সাহায্য করতে পারে। মূল ফাইল অক্ষত রাখুন, আউটপুট পর্যালোচনা করুন, তারপর Open Graph URL আপডেট করুন।
ডিবাগিং
প্রিভিউ বিশ্বাস করার আগে প্ল্যাটফর্ম ক্যাশ রিফ্রেশ করুন
সোশ্যাল প্ল্যাটফর্ম প্রিভিউ ডেটা ক্যাশ করে। আপনি যদি ছবি পরিবর্তন করেন কিন্তু একই URL রাখেন, প্ল্যাটফর্ম পুরানো প্রিভিউ দেখাতে পারে। অফিসিয়াল টুল ব্যবহার করুন এবং প্রয়োজন হলে ছবি ফাইলনাম পরিবর্তন করুন বা সংস্করণযুক্ত URL যোগ করুন।
চেকলিস্ট
প্রকাশের আগে Open Graph ছবি চেকলিস্ট
একটি প্রবন্ধ, পণ্য পেজ, টুল পেজ, বা ল্যান্ডিং পেজ লাইভ হওয়ার আগে এই তালিকা ব্যবহার করুন। এটি প্রিভিউ সমস্যাগুলো ধরবে যা লিঙ্ক শেয়ার হওয়ার পর খরচসাপেক্ষে ধরা পড়ে।
সাধারণ প্রশ্ন
Open Graph ছবির সাইজ কত হওয়া উচিত?
অধিকাংশ Open Graph প্রিভিউয়ের জন্য 1200 x 630 ব্যবহার করুন। এটি উচ্চ-ঘনত্ব স্ক্রিনের জন্য যথেষ্ট বড় এবং সাধারণ 1.91:1 প্রিভিউ আকৃতির কাছাকাছি। তবে প্রতিটি প্ল্যাটফর্ম ভিন্নভাবে কেটে বা ক্যাশ করতে পারে, তাই চূড়ান্ত URL পরীক্ষা করুন।
আমি কি প্রতিটি পেজের জন্য একই Open Graph ছবি ব্যবহার করতে পারি?
আপনি পারেন, তবে এটি সাধারণত দুর্বল হয়। একটি সাধারণ ব্র্যান্ড ছবি না থাকার চেয়ে ভালো, কিন্তু গুরুত্বপূর্ণ প্রবন্ধ, পণ্য পেজ, এবং টুলের জন্য নির্দিষ্ট পেজের সাথে মেলানো প্রিভিউ ছবি থাকা উচিত।
আমার পুরানো Open Graph ছবি কেন এখনও দেখাচ্ছে?
সবচেয়ে সাধারণ কারণ হলো প্ল্যাটফর্ম ক্যাশিং। URL রিফ্রেশ করতে Facebook Sharing Debugger, LinkedIn Post Inspector, বা X কার্ড টুল ব্যবহার করুন। পুরানো ফাইল বারবার আসলে নতুন ফাইলনাম বা সংস্করণযুক্ত URL দিয়ে নতুন ছবি প্রকাশ করুন।
og:image এবং twitter:image এর মধ্যে পার্থক্য কী?
og:image হলো অনেক প্ল্যাটফর্মে ব্যবহৃত স্ট্যান্ডার্ড Open Graph ছবি। twitter:image X কার্ডের জন্য নির্দিষ্ট। আপনি যদি twitter:image দেন, X og:image এর পরিবর্তে সেই ছবি ব্যবহার করতে পারে।
JSON-LD ছবির Open Graph ছবির সাথে মেলা উচিত কি?
একই হতে হবে না, তবে একই পেজের গল্প বলা উচিত। সার্চ মেটাডেটা, Open Graph ট্যাগ, Twitter কার্ড, এবং JSON-LD অপ্রাসঙ্গিক বা পুরানো ছবির দিকে নির্দেশ করা উচিত নয়।
PixelPress Open Graph ছবিতে কোথায় ফিট করে?
ছবি সাইজ, ফাইলনাম, এবং ভূমিকা নির্ধারণের পর PixelPress ব্যবহার করুন। এটি মূল ফাইল অক্ষত রেখে স্থানীয়ভাবে ফাইনাল ফাইল রূপান্তর করতে সাহায্য করে। তারপরও পেজে সঠিক মেটাডেটা ও প্রিভিউ পরীক্ষা প্রয়োজন।