تصویر لینک (OG) چیست و چرا لینک سایت شما در تلگرام زشت دیده می‌شود؟

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

این پیش‌نمایش اولین چیزی است که خیلی‌ها از سایت شما می‌بینند، پیش از آن‌که کلیک کنند. خبر خوب این است که درست کردنش ساده است.

#پیش‌نمایش از کجا می‌آید؟

وقتی لینکی را در تلگرام، واتس‌اپ، لینکدین یا ایکس می‌فرستید، آن سرویس صفحه را باز می‌کند و دنبال چند تگ در بخش می‌گردد. این تگ‌ها با استاندارد Open Graph نوشته می‌شوند (برای همین به تصویرش «تصویر OG» می‌گویند):

<meta property="og:title" content="اسکیل چیست؟ راهنمای کامل">
<meta property="og:description" content="اسکیل یک پوشه با فایل SKILL.md است…">
<meta property="og:image" content="https://example.com/og/skills.jpg">
<meta property="og:url" content="https://example.com/articles/skills">
<meta name="twitter:card" content="summary_large_image">

اگر این تگ‌ها نباشند، هر سرویس خودش حدس می‌زند، و حدسش معمولاً همان پیش‌نمایش زشت است.

#اندازه و قالب تصویر

• اندازه: ۱۲۰۰ × ۶۳۰ پیکسل (نسبت حدوداً ۱٫۹ به ۱) استاندارد رایج است و در بیشتر سرویس‌ها خوب نمایش داده می‌شود.
• قالب: JPG یا PNG. بعضی سرویس‌ها و اپ‌ها هنوز WebP را برای پیش‌نمایش درست نشان نمی‌دهند؛ برای همین در این سایت، تصویرهای داخل صفحه WebP‌اند ولی تصویر OG هر صفحه JPG است.
• حجم: زیر چند صد کیلوبایت. تصویر سنگین ممکن است اصلاً بارگذاری نشود.
• آدرس کامل: آدرس تصویر باید با https:// و دامنه شروع شود، نه آدرس نسبی.

#چه چیزی روی تصویر بگذاریم؟

تصویر OG یک پوستر کوچک است و همان قواعد پوستر را دارد: یک پیام که در اندازه‌ی کوچک پیش‌نمایش خوانده شود. چند نکته‌ی مخصوص OG:

• تیتر بزرگ و کوتاه. پیش‌نمایش در گوشی گاهی کمتر از ۳۰۰ پیکسل عرض دارد.
• حاشیه‌ی امن. بعضی سرویس‌ها لبه‌ها را می‌برند یا گوشه‌ها را گرد می‌کنند؛ متن را از لبه دور نگه دارید.
• هر صفحه، تصویر خودش. یک تصویر عمومی برای کل سایت بهتر از هیچ است، ولی صفحه‌ی هر محصول یا مقاله با تصویر خودش خیلی بیشتر کلیک می‌گیرد.
• عنوان روی تصویر تکرار عنوان متنی نباشد. تصویر می‌تواند پیام کوتاه‌تر یا زاویه‌ی دیگری بدهد.

#پیش‌نمایش قدیمی را چطور به‌روز کنیم؟

سرویس‌ها پیش‌نمایش را ذخیره می‌کنند. اگر تصویر را عوض کردید ولی تلگرام هنوز تصویر قدیمی را نشان می‌دهد:

• تلگرام: لینک را برای ربات رسمی @WebpageBot بفرستید تا پیش‌نمایش را دوباره بخواند.
• لینکدین: ابزار Post Inspector خود لینکدین.
• همه: اگر راه دیگری نبود، یک پارامتر به آخر آدرس تصویر اضافه کنید (مثلاً ?v=2) تا سرویس آن را تصویر تازه بداند.

#برای سئو هم مهم است؟

تصویر OG مستقیماً رتبه‌ی گوگل را بالا نمی‌برد، ولی روی چیزی اثر دارد که برای رشد سایت مهم است: نرخ کلیک وقتی لینک شما در شبکه‌های اجتماعی و پیام‌رسان‌ها دست‌به‌دست می‌شود. لینکی که پیش‌نمایش حرفه‌ای دارد، بیشتر کلیک و بیشتر بازنشر می‌شود. کنارش، داده‌ی ساخت‌یافته‌ی صفحه (مثل اطلاعات مقاله و محصول) به گوگل کمک می‌کند صفحه را درست بفهمد؛ همان کاری که برای همین سایت انجام شده است.

#روش سریع و قابل‌تکرار

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

#چک‌لیست

• تگ‌های og:title، og:description، og:image و og:url روی هر صفحه.
• twitter:card با مقدار summary_large_image.
• تصویر ۱۲۰۰ × ۶۳۰، JPG یا PNG، با آدرس کامل.
• یک پیام کوتاه و خوانا در اندازه‌ی کوچک.
• بعد از تغییر، پیش‌نمایش را در تلگرام با @WebpageBot به‌روز کنید.