Open Graph پیش منظر

استعمال کا طریقہ 3 مراحل
  1. سوشل عنوان، سوشل تفصیل اور سوشل تصویر URL لکھیں۔
  2. سوشل پیش منظر بنائیں دبائیں۔
  3. شائع کرنے سے پہلے دیکھیں کہ ہر نیٹ ورک پر لنک کارڈ کیسا لگتا ہے۔
Facebook اور Twitter Card پیش منظر

یہ ٹول کیسے کام کرتا ہے

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

خاکہ اُس شکل کے قریب ہے جو فیس بک اور LinkedIn بڑی تصویر والے کارڈ کے لیے دکھاتے ہیں: اوپر تصویر، پھر ڈومین، سرخی اور مختصر تفصیل۔ ہر پلیٹ فارم اسے ذرا مختلف انداز میں بناتا ہے اور بغیر اطلاع بدل دیتا ہے، اس لیے یہ پیش منظر تناسب اور لمبائی کا اندازہ ہے، کسی ایک پلیٹ فارم کی پکسل کے حساب سے درست نقل نہیں۔

قابلِ اعتماد پیش منظر حاصل کرنا

  • 1200 × 630 محفوظ تصویری سائز ہے: یعنی تقریباً 1.91 بہ 1۔ لگ بھگ 600 × 315 سے نیچے زیادہ تر پلیٹ فارم متن کے ساتھ چھوٹی چوکور تھمب نیل پر آ جاتے ہیں، جو فیڈ میں کہیں کم نمایاں ہوتی ہے۔
  • سرخی مختصر رکھیں: تقریباً ساٹھ حروف کے بعد کٹ جاتی ہے۔ کارڈ آپ کو تلاش کے نتیجے سے کم جگہ دیتا ہے۔
  • تصویر کا عوامی طور پر قابلِ رسائی ہونا ضروری ہے: مطلق URL، کوئی لاگ اِن نہیں، robots.txt میں روکی ہوئی نہ ہو۔ پلیٹ فارم اسے اپنے سرورز سے لاتا ہے، آپ کے براؤزر سے نہیں۔
  • توقع رکھیں کہ تصویر کے اندر کا متن کٹ جائے گا: ہر پلیٹ فارم اپنے تناسب کے مطابق کاٹتا ہے، اس لیے کنارے کے قریب لکھے الفاظ کم از کم کسی ایک پر غائب ہو جاتے ہیں۔

What happens when someone pastes your link

The platform fetches your page from its own servers, reads a handful of tags out of the head, downloads the image those tags point at, and builds a card. Then it stores the result. Everything that goes wrong with link previews goes wrong in one of those four steps, and knowing which one narrows the fix considerably.

Note that the fetch comes from the platform, not from the person sharing. Their browser session, their login and their cookies are irrelevant. If the platform's crawler cannot reach the page or the image anonymously, there is no card.

The tags that are read

og:title, og:description, og:image, og:url and og:type do the work. Facebook, LinkedIn, WhatsApp, Slack, Discord and most messaging apps read them. X reads them too when Twitter-specific tags are absent, so the only Twitter tag genuinely worth adding is twitter:card, which selects the large image layout rather than the small thumbnail.

When Open Graph tags are missing entirely, platforms fall back to the title tag and the meta description, which is why a page with no Open Graph markup at all still produces a card — usually a poor one with no image.

The five reasons it is wrong

  1. It is cached. The most common by far. The platform scraped your page once, kept what it found, and is still showing that. Updating the tags changes nothing until the cache is cleared.
  2. The image is unreachable. A relative path, a URL behind a login, an image blocked in robots.txt, or a file on a host that refuses the platform's crawler. The card renders without it.
  3. The image is too small. Below roughly 600 by 315 pixels most platforms drop to a small square thumbnail beside the text, which is a fraction as visible in a feed.
  4. The tags are written by JavaScript. Social crawlers do not run scripts. A head assembled client-side is, to them, an empty head.
  5. Two plugins are both emitting tags. Duplicate og:image tags mean the platform picks one, and it will not consult you about which.

Clearing a cached preview

This is the fix people cannot find, so it is worth stating plainly: you cannot clear it from your own site. Each platform caches independently, sometimes for weeks, and each provides its own re-scrape tool. Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's card validator all take a URL and fetch it again on demand.

Run the debugger, look at what it reports it found, and fix that rather than what you believe is on the page. The two differ more often than you would expect, usually because of caching at your own end — a CDN or a page cache serving the crawler an older copy of your HTML.

Sizing the image

1200 by 630 pixels, close to a 1.91 to 1 ratio, is the size that works everywhere. PNG or JPEG, comfortably under five megabytes, because very large files time out during scraping and the card falls back to no image at all.

Expect cropping. Each platform trims to its own ratio, and several crop differently on mobile than on desktop, so any wording near an edge will disappear on at least one of them. Keep text away from the margins and away from the exact centre-bottom, where a play button or a duration badge is sometimes overlaid.

Also give the image an absolute URL. A path beginning with a slash resolves against the platform's own domain, not yours, which is why the tag looks correct in your template and produces nothing in the feed.

Drafting the card before you publish

The useful moment to look at a card is before the link exists, while the headline and the image are still editable and before any platform has cached anything. That is what the [msm_tool slug="open-graph-checker"] is for: type the values you are considering and see the shape they make.

What you are judging is proportion and length. Does the headline survive at around sixty characters, which is less room than a search result gives you? Does the description add something rather than repeating the headline? Does the image still read at feed size, which on a phone is roughly the width of a thumb?

What you are not judging is alignment or exact pixels. Platforms redraw their cards without notice and render differently across devices, so no preview anywhere can promise a match. Treat a composed card as a proof of the copy, then verify the real thing with the platform's own debugger once the page is live.

A short checklist before sharing

Absolute image URL, at least 1200 by 630, publicly reachable without a login. A headline that fits. A description that is not a duplicate of the headline. One of each tag rather than two. Tags present in the server-rendered HTML, not built on load. And a re-scrape run through the platform debugger if the page has ever been shared before, because otherwise you are looking at whatever it saw the first time.

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

خاص طور پر Open Graph پیش منظر کے بارے میں۔ اس زمرے سے متعلق عمومی سوالات کے جواب زمرے کے صفحے پر موجود ہیں۔

نہیں۔ یہ آپ کی لکھی ہوئی باتوں سے پیش منظر بناتا ہے۔ یہ دیکھنے کے لیے کہ کوئی پلیٹ فارم زندہ URL سے دراصل کیا پڑھتا ہے، اُسی پلیٹ فارم کا اپنا ڈیبگر استعمال کریں — فیس بک کا Sharing Debugger، LinkedIn کا Post Inspector، یا اس جیسا کوئی اور۔
پلیٹ فارم وہی محفوظ رکھتے ہیں جو انہوں نے کسی URL کے پہلی بار شیئر ہونے پر پڑھا تھا، کبھی کبھی ہفتوں تک۔ ان کے ڈیبگنگ اوزار میں دوبارہ پڑھنے کا اختیار ہوتا ہے، اور اسے صاف کرنے کا صرف یہی قابلِ بھروسا طریقہ ہے۔
ٹوئٹر ٹیگ نہ ہوں تو X خود Open Graph پڑھ لیتا ہے، چنانچہ کارڈ پھر بھی کام کرے گا۔ جو ایک ٹیگ لگانے کے قابل ہے وہ twitter:card ہے، جو بڑی تصویر والے اور چھوٹی تصویر والے خاکے میں سے ایک چنتا ہے۔
1200 × 630 پکسل، PNG یا JPEG کی صورت میں، اور آرام سے پانچ میگا بائٹ سے کم۔ بہت بڑی فائلیں پڑھے جانے کے دوران وقت پورا کر جاتی ہیں اور کارڈ بغیر تصویر کے رہ جاتا ہے۔
نہیں، اور اس کا وعدہ کوئی نہیں کر سکتا۔ پلیٹ فارم اپنے کارڈ کے خاکے اکثر بدلتے رہتے ہیں اور موبائل و ڈیسک ٹاپ پر مختلف انداز میں دکھاتے ہیں۔ اسے یہ پرکھنے کے لیے استعمال کریں کہ آپ کا متن اور تصویر سما رہے ہیں یا نہیں، ترتیب کی جانچ کے لیے نہیں۔

نئے ٹولز، خصوصیات اور کارکردگی بڑھانے کے مشوروں کی اطلاع پانے کے لیے سبسکرائب کریں۔