‏تصویر کارت شبکه‌های اجتماعی؛ چی روش بذاریم؟

منظور نویسنده از کارت «داینامیک» (یعنی تصویری که برای هر صفحه خودکار ساخته می‌شه، نه دستی) مال سایت‌هاییه که هزاران صفحه دارن، مثل محتوای کاربرها یا محصولات یه فروشگاه. نمونهٔ معروفش GitHubه که برای هر ریپو یه تصویر اختصاصی می‌سازه. این تصویر با تگ‌های Open Graph تو HTML معرفی می‌شه:

<meta property="og:image" content="https://example.com/images/social/1.jpg">
<meta name="twitter:image" content="https://example.com/images/social/1.jpg">
<meta name="twitter:card" content="summary_large_image">

وقتی این تگ‌ها باشن، اپ‌ها لینک رو unfurl می‌کنن، یعنی به‌جای یه آدرس خالی، یه پیش‌نمایش با عنوان و تصویر نشون می‌دن. نویسنده این رفتار رو تو Discord، Mastodon، Slack، Bluesky، iMessage، LinkedIn، Threads، WhatsApp و X مقایسه کرده. تقریباً همه‌شون عنوان صفحه رو نشون می‌دن، ولی Slack تصویر رو کوچیک و مربعی می‌کنه، LinkedIn توضیح رو نمی‌آره و X عنوان رو روی خود تصویر می‌ندازه. کنترلی هم روی این رفتار نداری؛ مثلاً ادمین Slack می‌تونه unfurl یه دامنه رو برای همیشه خاموش کنه.

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

جای جذاب‌تر، داده‌های خاص همون صفحه‌ست. GitHub آمار ریپو رو نشون می‌ده و نویسنده ایده‌هایی مثل اسم و آواتار نویسنده، تعداد لایک و بازدید، نمودار سهام، موج صدای یه آهنگ، امتیاز محصول یا تخفیف رو مطرح می‌کنه. نکته‌ش اینه که چون تصویر داینامیکه، می‌شه داده رو فقط وقتی جالبه نشون داد؛ مثلاً اگه تعداد لایک صفره، نذاریش. راه دیگه اینه که خود محتوا حرف بزنه، مثل Steam که همون تصویر بازی رو نشون می‌ده، یا CodePen که بیش از ده ساله از اسکرین‌شات هر Pen استفاده می‌کنه.

اندازهٔ رایج این تصویرها ۱۲۰۰×۶۳۰ هست، ولی رو موبایل کوچیک دیده می‌شن و متن زیاد عملاً خونده نمی‌شه. برای ساختشون هم ابزار کم نیست: سیستم داخلی Next.js، پلاگین‌های 11ty و WordPress (مثل Jetpack Social) و Cloudinary که فقط با پارامترهای URL تصویر می‌سازه.

نکات کلیدی:

• تگ‌های og:image و twitter:card با مقدار summary_large_image تصویر کارت رو مشخص می‌کنن.
• X مستند روشنی دربارهٔ تگ‌های og:* نداره و تگ‌های twitter:* هنوز به کار میان.
• با og:image:alt می‌شه برای تصویر کارت متن جایگزین گذاشت.
• Slack تصویر رو کوچیک و مربعی نشون می‌ده و ادمینش می‌تونه unfurl یه دامنه رو کامل ببنده.
• اندازهٔ رایج تصویر ۱۲۰۰×۶۳۰ هست ولی رو موبایل کوچیک نمایش داده می‌شه.
• Next.js، Cloudinary و پلاگین‌های 11ty و WordPress برای ساخت خودکار این تصویرها ابزار دارن.