چرا پیش‌نمایش لینک شما اشتباه است و چطور با Open Graph درستش کنید

لینک صفحه فرود جدیدتان را به اشتراک می‌گذارید و پیش‌نمایش بدون تصویر می‌آید، یا با عنوان صفحه اصلی، یا با بنری از دو کمپین قبل. خود صفحه مشکلی ندارد. پیش‌نمایش از چیز دیگری ساخته می‌شود: چند خط کد در head صفحه که بیشتر آدم‌ها هرگز نمی‌بینند.

این پست شش علتی را پوشش می‌دهد که پشت بیشتر پیش‌نمایش‌های خراب هستند، به ترتیبی که ارزش بررسی دارد. اگر می‌خواهید تگ‌ها برایتان نوشته شوند، مولد رایگان Open Graph آن‌ها را می‌سازد، درست escape می‌کند و با محدودیت‌های زیر بررسی‌شان می‌کند.

پیش‌نمایش لینک چطور ساخته می‌شود

وقتی لینکی در یک پست یا پیام قرار می‌گیرد، اپلیکیشن یک کراولر را به سمت صفحه می‌فرستد. کراولر تگ‌های <meta> داخل <head> را می‌خواند و کارت را از روی آن‌ها می‌سازد. این تگ‌ها از پروتکل Open Graph می‌آیند که چهار تگ را الزامی می‌داند:

• og:title: عنوان صفحه، همان‌طور که باید در کارت دیده شود.
• og:type: نوع صفحه، معمولاً website یا article.
• og:image: تصویر.
• og:url: آدرس canonical صفحه، که پروتکل آن را شناسه دائمی آن می‌نامد.

اگر 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: آدرس تصویر نسبی است

این را به‌راحتی نمی‌بینید، چون صفحه در مرورگر خودتان درست به نظر می‌رسد. content="/images/og.jpg" برای مرورگری که از قبل روی سایت شماست کار می‌کند، اما کراولر بیرون از آن است. آدرس کامل را بنویسید، با https:// و دامنه‌تان شروع شود. همین قاعده برای og:url هم صادق است.

علت 3: اندازه یا شکل تصویر اشتباه است

هر پلتفرم می‌گوید چه می‌خواهد، و اتفاقاً همه روی تصویر عریض توافق دارند:

• LinkedIn در راهنمای قابل اشتراک‌گذاری کردن وب‌سایت خود می‌گوید تصویر باید حداقل 1200 × 627 پیکسل باشد، با نسبت پیشنهادی 1.91:1، و بزرگ‌تر از 5 MB نباشد.
• Meta در بهترین شیوه‌های اشتراک‌گذاری خود تصاویر را حداقل 1080 پیکسل عرض برای نمایشگرهای با وضوح بالا، و حداقل 600 عرض برای نمایش تبلیغات لینک تصویری پیشنهاد می‌کند.
• کارت تصویر بزرگ X از نسبت 2:1 پشتیبانی می‌کند، از 300 × 157 تا 4096 × 4096 پیکسل، کمتر از 5MB، در قالب‌های JPG، PNG، WEBP یا GIF، و SVG را پشتیبانی نمی‌کند، طبق مستندات توسعه‌دهنده آن (صفحه اصلی حالا به نشانی دیگری هدایت می‌شود، پس این لینک از Internet Archive رد می‌شود).

یک اندازه برای هر سه کافی است: 1200 × 630. این اندازه حداقل 1200 × 627 LinkedIn را برآورده می‌کند، از 1080 پیکسل متا عریض‌تر است، و نسبت آن یعنی 1200 ÷ 630 = 1.905 در حدود 5 درصدی نسبت 2:1 ایکس قرار دارد. تصویر مربعی یا بلند در کارت عریض برش می‌خورد، پس بخش مهم را وسط نگه دارید. ماشین‌حساب نسبت تصویر نشان می‌دهد برش مرکزی چه بخشی را نگه می‌دارد.

اندازه را در تگ‌ها هم بنویسید. متا برای og:image:width و og:image:height درخواست می‌کند تا کراولرش بتواند تصویر را فوراً رندر کند، به‌جای این‌که اول آن را دانلود و پردازش کند. راهنمای وب‌مستر متا این را ساده می‌گوید: ارتفاع و عرض را مشخص کنید تا تصویر در اولین اشتراک‌گذاری درست بارگذاری شود.

علت 4: تگ‌ها با JavaScript اضافه می‌شوند

برخی سازنده‌های سایت و اپ‌های single-page بعد از بارگذاری صفحه، در مرورگر، تگ‌های meta اضافه می‌کنند. کراولری که HTML ارسالی سرور شما را می‌خواند ممکن است هرگز آن کد را اجرا نکند، پس تگ‌ها را نمی‌بیند. سورس صفحه را بررسی کنید (View Source، نه inspector، چون inspector صفحه را بعد از اجرای اسکریپت‌ها نشان می‌دهد). اگر تگ‌ها در سورس نیستند، احتمالاً کراولر هم آن‌ها را نمی‌بیند. راه‌حل در تنظیمات سایت یا در قالب سمت سرورتان است.

علت 5: کاراکترهای خاص تگ را خراب کرده‌اند

عنوانی که در آن علامت نقل‌قول دوتایی باشد، مثل The "only" linen you need، صفت content="..." را زودتر می‌بندد و بقیه عنوان گم می‌شود. کاراکترهایی که داخل صفت اهمیت دارند باید escape شوند: " می‌شود "، & می‌شود & و < می‌شود <. مرورگرها و کراولرها هنگام خواندن تگ، آن‌ها را دوباره به کاراکترهای اصلی تبدیل می‌کنند. مولد این کار را برای شما انجام می‌دهد و بخشی از دلیل استفاده از آن همین است.

علت 6: اپلیکیشن نسخه قدیمی را به خاطر سپرده

تگ‌ها را درست کرده‌اید، دوباره اشتراک گذاشته‌اید، و کارت قدیمی هنوز هست. این همان کش است. اپ‌ها هر چه را خوانده‌اند ذخیره می‌کنند و دوباره استفاده می‌کنند، و هر دو شبکه بزرگ ابزاری دارند برای درخواست نگاه تازه:

• Facebook: آدرس را در Sharing Debugger متا جای‌گذاری کنید. راهنمای وب‌مستر متا می‌گوید این ابزار نشان می‌دهد کراولر کدام تگ‌ها را خوانده، همراه با هر خطا یا هشدار، و یک خواندن تازه را آغاز می‌کند. بهترین شیوه‌های متا اضافه می‌کند که محتوای خوانده‌شده در حالت عادی هر 24 ساعت به‌روز می‌شود.
• LinkedIn: آدرس را از Post Inspector عبور دهید. صفحه راهنمای LinkedIn درباره محدودیت شفاف است: بازخوانی فقط پیش‌نمایش پست‌های جدید را تغییر می‌دهد. پست‌هایی که از قبل آدرس را دارند، پیش‌نمایش قدیمی را نگه می‌دارند.

آن نکته LinkedIn را قبل از لانچ به خاطر بسپارید. پیش‌نمایش را قبل از رفتن اولین پست بررسی کنید، چون با درست کردن صفحه نمی‌توانید یک پست قدیمی را درست کنید.

تگ twitter:card: یک خط، نه چهار خط

X هم Open Graph را می‌خواند. مرجع کارت‌های مارک‌آپ آن برای هر تگ یک جایگزین فهرست می‌کند: twitter:title به og:title، twitter:description به og:description، twitter:image به og:image و twitter:image:alt به og:image:alt برمی‌گردد. پس لازم نیست همه چیز را تکرار کنید. تنها خطی که باید اضافه کنید twitter:card است: summary_large_image برای تصویر تمام‌عرض، یا summary برای یک مربع کوچک. اگر آن را نگذارید، همان مرجع می‌گوید X ممکن است به‌جایش کارت خلاصه کوچکی نشان دهد، و به همین دلیل گاهی یک تصویر بزرگ به‌صورت تصویر بندانگشتی می‌رسد. همان مرجع عنوان را به 70 کاراکتر، توضیح را به 200 کاراکتر و متن جایگزین را به 420 کاراکتر محدود می‌کند.

بررسی پنج‌دقیقه‌ای قبل از لانچ

1. سورس صفحه را ببینید و تگ‌های og: را پیدا کنید. هر چهار تگ الزامی، به‌علاوه توضیح.
2. بررسی کنید که og:image و og:url با https:// شروع شوند.
3. آدرس تصویر را جداگانه در مرورگر باز کنید. باید بارگذاری شود، با 1200 × 630 یا نزدیک به آن.
4. آدرس را در Sharing Debugger و Post Inspector جای‌گذاری کنید و کارت‌ها را بخوانید.
5. فقط بعد از آن به اشتراک بگذارید.

جایگاه Hermoso در این میان

Hermoso یک ایجنت بازاریابی هوش مصنوعی است: بازار شما را بررسی می‌کند تا ببیند کدام تبلیغات از قبل در آن کار می‌کنند، تبلیغات تصویری و ویدیویی هم‌راستا با برند می‌سازد، پست‌ها را برای حساب‌های خودتان زمان‌بندی می‌کند و کمپین‌های پولی را روی حساب‌های تبلیغاتی خودتان اجرا می‌کند. یک پیش‌نمایش لینک خوب باعث می‌شود این پست‌ها ارزش کلیک داشته باشند. Hermoso در اپ وب کار می‌کند، یا داخل Claude، ChatGPT و Cursor از طریق سرور MCP آن.

سؤالات متداول

چرا لینک من در Facebook یا LinkedIn تصویری نشان نمی‌دهد؟

معمولاً تگ og:image وجود ندارد، یا از مسیر نسبی به‌جای آدرس کامل https:// استفاده می‌کند، یا به تصویری اشاره می‌کند که خیلی کوچک است. LinkedIn حداقل 1200 × 627 پیکسل می‌خواهد. بعد از درست کردن آن، آدرس را در Sharing Debugger متا یا Post Inspector LinkedIn قرار دهید تا دوباره آن را بگیرند.

تصویر Open Graph چه اندازه‌ای باید باشد؟

1200 × 630 پیکسل در شبکه‌های بزرگ کار می‌کند. این اندازه حداقل 1200 × 627 LinkedIn را با نسبت حدود 1.91:1 برآورده می‌کند، از 1080 پیکسل پیشنهادی متا عریض‌تر است، و به نسبت 2:1 که X برای کارت‌های تصویر بزرگ پشتیبانی می‌کند نزدیک است.

چطور پیش‌نمایش لینک LinkedIn را به‌روز کنم؟

تگ‌های صفحه را درست کنید، بعد آدرس را در Post Inspector LinkedIn وارد کنید. پیش‌نمایش تازه فقط برای پست‌های جدید اعمال می‌شود. پست‌هایی که از قبل آدرس را دارند، پیش‌نمایش قدیمی را نگه می‌دارند.

اگر تگ‌های og: دارم، آیا به تگ‌های twitter: نیاز دارم؟

فقط twitter:card. وقتی نسخه‌های twitter: نباشند، X به og:title، og:description، og:image و og:image:alt برمی‌گردد.