آپ کا لنک پریویو غلط کیوں دکھتا ہے، اور Open Graph سے اسے کیسے ٹھیک کریں

آپ اپنے نئے لینڈنگ پیج کا لنک شیئر کرتے ہیں اور پریویو میں نہ تصویر آتی ہے، نہ ہوم پیج کا عنوان، بلکہ دو مہم پہلے کا بینر آ جاتا ہے۔ صفحہ خود ٹھیک ہوتا ہے۔ پریویو کسی اور چیز سے بنتا ہے: صفحے کے head حصے میں کوڈ کی چند سطریں جو زیادہ تر لوگ کبھی نہیں دیکھتے۔

یہ پوسٹ زیادہ تر خراب پریویوز کے پیچھے موجود چھ وجوہات کا احاطہ کرتی ہے، اُس ترتیب سے جس میں انہیں چیک کرنا فائدہ مند ہے۔ اگر آپ چاہتے ہیں کہ ٹیگز آپ کے لیے لکھے جائیں تو مفت Open Graph جنریٹر انہیں بنا دیتا ہے، انہیں درست طریقے سے escape کرتا ہے اور نیچے دی گئی حدود کے مطابق جانچتا ہے۔

لنک پریویو کیسے بنتا ہے

جب کوئی لنک پوسٹ یا میسج میں پیسٹ کیا جاتا ہے تو ایپ صفحے کی طرف ایک کرالر بھیجتی ہے۔ کرالر صفحے کے <head> میں موجود <meta> ٹیگز پڑھتا ہے اور انہی سے کارڈ بناتا ہے۔ یہ ٹیگز Open Graph protocol سے آتے ہیں، جو چار کو لازمی قرار دیتا ہے:

• og:title: صفحے کا عنوان جیسا وہ کارڈ میں نظر آنا چاہیے۔
• og:type: صفحہ کیا ہے، عموماً website یا article۔
• og:image: تصویر۔
• og:url: صفحے کا canonical URL، جسے یہ پروٹوکول اپنی مستقل شناخت کہتا ہے۔

og:description بھی شامل کر دیں تو کارڈ مکمل ہو جاتا ہے۔ ایک مکمل اور کم سے کم سیٹ کچھ یوں دکھتا ہے:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

وجہ 1: ٹیگز موجود نہیں ہیں

og: ٹیگز کے بغیر ہر ایپ کو وہ کچھ اٹھانا پڑتا ہے جو صفحے پر اور ملتا ہے، جیسے <title> یا پہلی تصویر، اور وہ کیا چنے گی یہ ایپ پر منحصر ہے۔ اسی لیے ایک ہی لنک ایک جگہ ٹھیک دکھتا ہے اور اگلی جگہ خراب۔ حل یہ ہے کہ چاروں لازمی ٹیگز اور ایک ڈسکرپشن ہر اُس صفحے پر رکھیں جسے لوگ شیئر کریں گے، نہ کہ صرف ہوم پیج پر۔ پروڈکٹ پیج کو ہوم پیج کے ٹیگز کے ساتھ شیئر کیا جائے تو وہ ہوم پیج کا کارڈ دکھاتا ہے۔

وجہ 2: تصویر کا URL نامکمل (relative) ہے

یہ آسانی سے نظر سے چھوٹ جاتا ہے، کیونکہ صفحہ آپ کے اپنے براؤزر میں ٹھیک لگتا ہے۔ content="/images/og.jpg" اس براؤزر کے لیے کام کرتا ہے جو پہلے سے آپ کی سائٹ پر ہو، لیکن کرالر اس سائٹ سے باہر ہے۔ مکمل پتہ لکھیں، https:// اور اپنے ڈومین سے شروع ہوتا ہوا۔ یہی بات og:url پر بھی لاگو ہوتی ہے۔

وجہ 3: تصویر کا سائز یا شکل غلط ہے

ہر پلیٹ فارم خود بتاتا ہے کہ اسے کیا چاہیے، اور اتفاق سے یہ سب چوڑی تصویر پر متفق ہیں:

• LinkedIn اپنی ویب سائٹ کو قابلِ شیئر بنانے کی گائیڈ میں کہتا ہے کہ تصویر کم از کم 1200 × 627 پکسل ہو، تجویز کردہ 1.91:1 تناسب پر، اور 5 MB سے بڑی نہ ہو۔
• Meta کی sharing best practices ہائی ریزولوشن اسکرینز کے لیے کم از کم 1080 پکسل چوڑی تصاویر کی سفارش کرتی ہیں، اور image link ads دکھانے کے لیے کم از کم 600 چوڑی۔
• X کا large image card 2:1 تناسب سپورٹ کرتا ہے، 300 × 157 سے 4096 × 4096 پکسل تک، 5MB سے کم، JPG، PNG، WEBP یا GIF میں، اور SVG سپورٹ نہیں کرتا، اس کی developer documentation کے مطابق (اصل صفحہ اب ری ڈائریکٹ ہوتا ہے، اس لیے یہ لنک Internet Archive کے ذریعے جاتا ہے)۔

تینوں کے لیے ایک سائز کافی ہے: 1200 × 630۔ یہ LinkedIn کی کم از کم 1200 × 627 حد پر پورا اترتا ہے، Meta کے 1080 سے چوڑا ہے، اور اس کا تناسب 1200 ÷ 630 = 1.905 ہے، جو X کے 2:1 سے 5 فیصد کے اندر ہے۔ مربع یا لمبی تصویر ایک چوڑے کارڈ میں کاٹ دی جائے گی، اس لیے اہم حصہ درمیان میں رکھیں۔ aspect ratio calculator دکھاتا ہے کہ درمیانی کراپ کیا باقی رکھتا ہے۔

ٹیگز میں سائز بھی بتائیں۔ Meta og:image:width اور og:image:height مانگتا ہے تاکہ اس کا کرالر تصویر کو ڈاؤن لوڈ اور پروسیس کرنے سے پہلے فوراً رینڈر کر سکے۔ اس کی webmaster guide سادہ الفاظ میں کہتی ہے: ہائٹ اور وڈتھ بتائیں تاکہ شیئر ہوتے ہی پہلی بار تصویر ٹھیک لوڈ ہو۔

وجہ 4: ٹیگز JavaScript سے شامل کیے جاتے ہیں

کچھ سائٹ بلڈرز اور single-page apps میٹا ٹیگز صفحہ لوڈ ہونے کے بعد، براؤزر میں شامل کرتے ہیں۔ کرالر جو HTML آپ کا سرور بھیجتا ہے وہ پڑھتا ہے، اور شاید وہ کوڈ کبھی نہیں چلاتا، اس لیے ٹیگز اسے کبھی نظر نہیں آتے۔ صفحے کا source چیک کریں (View Source، inspector نہیں، جو اسکرپٹس چلنے کے بعد کا صفحہ دکھاتا ہے)۔ اگر ٹیگز source میں نہیں ہیں تو کرالر کو بھی شاید نظر نہیں آتے۔ حل آپ کی سائٹ کی سیٹنگز یا سرور سائیڈ ٹیمپلیٹ میں ہے۔

وجہ 5: خاص حروف نے ٹیگ توڑ دیا

عنوان میں ڈبل کوٹ ہو، جیسے The "only" linen you need، تو وہ content="..." attribute کو جلدی ختم کر دیتا ہے اور باقی عنوان ضائع ہو جاتا ہے۔ attribute کے اندر اہم حروف کو escape کرنا لازمی ہے: " بن جاتا ہے "، & بن جاتا ہے &، اور < بن جاتا ہے <۔ براؤزر اور کرالر ٹیگ پڑھتے وقت انہیں اصل حروف میں واپس بدل دیتے ہیں۔ جنریٹر یہ خود کرتا ہے، اور جنریٹر استعمال کرنے کی آدھی وجہ یہی ہے۔

وجہ 6: ایپ نے پرانا ورژن یاد رکھا ہوا ہے

آپ نے ٹیگز ٹھیک کیے، دوبارہ شیئر کیا، اور پرانا کارڈ اب بھی موجود ہے۔ یہ cache ہے۔ ایپس وہ چیزیں محفوظ رکھتی ہیں جو انہوں نے اسکریپ کی ہوں اور دوبارہ استعمال کرتی ہیں، اور دونوں بڑے نیٹ ورکس تازہ جائزہ مانگنے کا ٹول دیتے ہیں:

• Facebook: URL کو Meta کے Sharing Debugger میں پیسٹ کریں۔ Meta کی webmaster guide کہتی ہے کہ یہ دکھاتا ہے کہ کرالر نے کون سے ٹیگز اسکریپ کیے، ساتھ میں کوئی error یا warning، اور نیا scrape شروع کرتا ہے۔ Meta کی best practices مزید کہتی ہیں کہ اسکریپ شدہ مواد ورنہ ایک معیاری 24 گھنٹے کے وقفے پر اپ ڈیٹ ہوتا ہے۔
• LinkedIn: URL کو Post Inspector سے گزاریں۔ LinkedIn کا help page حد کے بارے میں واضح ہے: refresh صرف نئی پوسٹس کا پریویو بدلتا ہے۔ جن پوسٹس میں URL پہلے سے ہے وہ پرانا پریویو رکھتی ہیں۔

لانچ سے پہلے LinkedIn کا یہ نوٹ یاد رکھیں۔ پہلی پوسٹ جانے سے پہلے پریویو چیک کریں، کیونکہ صفحہ ٹھیک کرنے سے پرانی پوسٹ ٹھیک نہیں ہوتی۔

twitter:card ٹیگ: ایک لائن، چار نہیں

X بھی Open Graph پڑھتا ہے۔ اس کے cards markup reference میں ہر ٹیگ کا fallback درج ہے: twitter:title کا fallback og:title ہے، twitter:description کا og:description، twitter:image کا og:image، اور twitter:image:alt کا og:image:alt۔ اس لیے سب کچھ دہرانے کی ضرورت نہیں۔ جو ایک لائن شامل کرنی ہے وہ twitter:card ہے: پوری چوڑائی کی تصویر کے لیے summary_large_image، یا چھوٹے مربع کے لیے summary۔ اسے چھوڑ دیں تو یہی reference کہتا ہے کہ X ایک چھوٹا summary کارڈ دکھا سکتا ہے، اسی لیے بڑی تصویر کبھی کبھی تھمب نیل بن کر آتی ہے۔ یہی reference عنوان کو 70 حروف، ڈسکرپشن کو 200 اور alt text کو 420 حروف تک محدود کرتا ہے۔

شائع کرنے سے پہلے پانچ منٹ کی جانچ

1. صفحے کا source دیکھیں اور og: ٹیگز تلاش کریں۔ چاروں لازمی ٹیگز، اور ایک ڈسکرپشن۔
2. چیک کریں کہ og:image اور og:url https:// سے شروع ہوں۔
3. تصویر کا URL اکیلا براؤزر میں کھولیں۔ وہ لوڈ ہونا چاہیے، 1200 × 630 یا اس کے قریب۔
4. URL کو Sharing Debugger اور Post Inspector میں پیسٹ کریں اور کارڈز پڑھیں۔
5. پھر ہی شیئر کریں۔

Hermoso کہاں فٹ ہوتا ہے

Hermoso ایک AI marketing agent ہے: یہ آپ کے مارکیٹ میں پہلے سے کامیاب چلنے والے اشتہارات کی تحقیق کرتا ہے، آپ کے برانڈ کے مطابق image اور video اشتہارات بناتا ہے، پوسٹس آپ کے اپنے اکاؤنٹس پر شیڈول کرتا ہے، اور آپ کے اپنے ad accounts پر paid campaigns چلاتا ہے۔ اچھا لنک پریویو ہی وہ چیز ہے جو ان پوسٹس کو کلک کے قابل بناتی ہے۔ Hermoso web app میں کام کرتا ہے، یا Claude، ChatGPT اور Cursor کے اندر اپنے MCP server کے ذریعے۔

اکثر پوچھے گئے سوالات

Facebook یا LinkedIn پر میرے لنک پر تصویر کیوں نہیں آتی؟

عموماً og:image ٹیگ غائب ہوتا ہے، یا مکمل https:// پتے کے بجائے نسبتی راستہ استعمال ہوتا ہے، یا تصویر بہت چھوٹی ہے۔ LinkedIn کم از کم 1200 × 627 پکسل مانگتا ہے۔ درست کرنے کے بعد URL کو Meta کے Sharing Debugger یا LinkedIn کے Post Inspector میں ڈالیں تاکہ وہ دوبارہ fetch کریں۔

Open Graph تصویر کا سائز کیا ہونا چاہیے؟

1200 × 630 پکسل بڑے نیٹ ورکس پر کام کرتا ہے۔ یہ تقریباً 1.91:1 پر LinkedIn کی کم از کم 1200 × 627 حد پورا کرتا ہے، Meta کی تجویز کردہ 1080 پکسل سے چوڑا ہے، اور بڑے image cards کے لیے X کے سپورٹ کردہ 2:1 کے قریب ہے۔

LinkedIn کا link preview کیسے اپ ڈیٹ کروں؟

صفحے کے ٹیگز ٹھیک کریں، پھر LinkedIn کے Post Inspector میں URL ڈالیں۔ تازہ پریویو صرف نئی پوسٹس پر لاگو ہوتا ہے۔ جن پوسٹس میں URL پہلے سے ہے وہ پرانا پریویو رکھتی ہیں۔

اگر میرے پاس og: ٹیگز ہیں تو کیا مجھے twitter: ٹیگز چاہئیں؟

صرف twitter:card۔ twitter: ورژن غائب ہوں تو X og:title، og:description، og:image اور og:image:alt پر واپس جاتا ہے۔