وقتی لینکی را در یک پیام، یک توییت، یک پست لینکدین یا یک کانال Slack میچسبانید، پلتفرم یک کارت پیشنمایش بیرون میکشد — یک تصویر بزرگ، یک عنوان، یک بریده متن. آن تصویر همان تصویر Open Graph (OG) است و بیشتر از تیتر شما دارد کار میکند. در فیدی که با سرعت اسکرول میشود، همین تصویر است که انگشت را متوقف میکند. یک پیشنمایش خالی یا خراب، بیدقتی را نشان میدهد و رد میشود.
در ادامه میبینید که چطور یکی بسازید که کلیک را به دست بیاورد، با اندازهٔ درست و متنی که واقعاً خوانا باشد.
اندازه: ۱۲۰۰×۶۳۰
تصویر OG استاندارد ۱۲۰۰×۶۳۰ پیکسل است، با نسبت ۱٫۹۱:۱. Facebook، LinkedIn، Slack، Discord و بیشتر سامانههای پیشنمایش لینک بر همین اساس ساخته شدهاند. اگر این یکی را درست انجام دهید، تقریباً همهجا پوشش دادهاید.
بسته به اینکه لینک کجا فرود بیاید، چند اندازهٔ مرتبط هم مطرح میشود:
| پلتفرم / کاربرد | اندازه | نسبت |
|---|---|---|
| Open Graph (پیشفرض) | 1200×630 | 1.91:1 |
| کارت بزرگ Twitter/X | 1200×628 | ~1.91:1 |
| بندانگشتی YouTube | 1280×720 | 16:9 |
| مربع (فید/IG) | 1080×1080 | 1:1 |
| استوری / عمودی | 1080×1920 | 9:16 |
برای یک پست وبلاگ به همهٔ اینها نیاز ندارید — ۱۲۰۰×۶۳۰ اسبِ کاری است. اما اگر یک بندانگشتی ویدیو یا یک پست مربعیِ شبکهٔ اجتماعی هم میسازید، بهتر است شکلِ درست را تولید کنید تا اینکه یک تصویر را بد بُرش بزنید که جا شود.
قواعد متن: خوانا در اندازهٔ بندانگشتی
اشتباهی که تصاویر OG را از بین میبرد این است که با آنها مثل پوستری رفتار کنید که تمامصفحه تماشا خواهد شد. تماشا نخواهد شد. بیشتر مردم کارت را شاید در یکسومِ اندازهٔ واقعیاش میبینند، روی گوشی، وسطِ اسکرول. برای همان طراحی کنید.
- متن بزرگ، کلمات کم. یک عنوان کوتاه — پنج تا هشت کلمه — که وقتی کارت کوچک میشود خوانا بماند. اگر باید در اندازهٔ کامل چشمهایتان را ریز کنید، در فید ناخواناست.
- کنتراست قوی. متن روشن روی پسزمینهٔ تیره یا پُررنگ، یا برعکس. متنی که روی یک عکس شلوغ و بدون پشتِ رنگی بنشیند، ناپدید میشود.
- چیزهای مهم را در مرکز نگه دارید. پلتفرمهای مختلف لبهها را کمی متفاوت بُرش میزنند. متن و لوگو را از حاشیههای بیرونی دور نگه دارید تا چیزی قیچی نشود.
- هر تصویر، یک ایده. تصویر OG یک قلاب است، نه یک خلاصه. عنوان، شاید یک زیرعنوان، تمام.
پسزمینههایی که متن را برجسته میکنند
یک گرادیانِ ساده انتخابِ مطمئنی است. به متن چیزی تمیز میدهد که روی آن بنشیند، مدرن به نظر میرسد و هیچوقت مثل یک عکس شلوغ با کلمات نمیجنگد. یک گرادیانِ تیره به کمیتیرهتر با متن روشن، تقریباً بیخطاست.
ابزار تصویر OG دقیقاً حول همین ساخته شده است: یک اندازهٔ آماده انتخاب کنید (OG با ۱۲۰۰×۶۳۰، Twitter، YouTube، مربع یا استوری)، یک پسزمینهٔ گرادیانی برگزینید و عنوان و زیرعنوانتان را اضافه کنید. یک کارت اشتراکگذاری میگیرید که در هر اندازهای واضح خوانده میشود، بدون باز کردن یک برنامهٔ کاملِ طراحی.
کدِ HTML که آن را نمایان میکند
ساختن تصویر نیمی از کار است. پلتفرم باید بداند کجا آن را پیدا کند. این تگها را به بخش <head> صفحهتان اضافه کنید:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
خط twitter:card که روی summary_large_image تنظیم شده، همان چیزی است که بهجای یک بندانگشتیِ ریز، کارت بزرگ را در X به شما میدهد. آدرسهای مطلق (با https://) اهمیت دارند — مسیرهای نسبی هنگام واکشیِ صفحه توسط یک خزنده اغلب حل نمیشوند.
پس از انتشار، آن را آزمایش کنید. آدرستان را در ابزار اشکالزدایی پیشنمایش لینکِ یک پلتفرم بچسبانید (Sharing Debugger فیسبوک، Post Inspector لینکدین) تا از بارگذاری تصویر مطمئن شوید و هر نسخهٔ قدیمیِ کششده را پاک کنید. پلتفرمها پیشنمایشها را با پشتکار کش میکنند، پس اگر تصویر را بهروز کردید و هنوز نسخهٔ قدیمی را میبینید، دکمهٔ خزشِ دوبارهٔ همان ابزار، راهحل است.
بسازید، آپلود نکنید
کلِ کار در مرورگر شما اجرا میشود — تصویر بهصورت محلی با Canvas ترکیب میشود و هیچوقت به سروری آپلود نمیشود. رایگان است، بدون ثبتنام، بدون واترمارکی که روی کارت اشتراکگذاریتان کوبیده شود، و پس از نخستین بازدید آفلاین هم کار میکند. تصویر ۱۲۰۰×۶۳۰ را بسازید، تگهای متا را وصل کنید، یکبار از یک ابزار اشکالزدایی عبورش دهید، و لینکهایتان شروع میکنند به کشیدنِ بارِ خودشان.