مولد پیش‌نمایش اشتراک‌گذاری در شبکه‌های اجتماعی
پیش از انتشار، ببینید کارت لینک شما در Facebook، Twitter/X، LinkedIn و Discord چگونه نمایش داده خواهد شد.
پیش‌نمایش زنده
کد HTML تگ متا
دربارهٔ این ابزار
این ابزار پیش‌نمایش اشتراک‌گذاری در شبکه‌های اجتماعی چه کاری انجام می‌دهد
وقتی لینکی در Facebook، X، LinkedIn یا Discord به اشتراک گذاشته می‌شود، پلتفرم کارت پیش‌نمایش را از متا‌تگ‌های Open Graph و Twitter Card صفحه شما می‌سازد، نه از محتوای خود صفحه. اگر این تگ‌ها وجود نداشته باشند، اشتباه باشند یا تصویری با نسبت ابعاد نامناسب داشته باشند، کارت ممکن است کاملاً خالی نمایش داده شود، به‌طور نامناسب برش بخورد یا عنوان کاملاً اشتباهی نشان دهد؛ و معمولاً تا زمانی که لینک را به اشتراک نگذاشته‌اید، متوجه این مشکل نمی‌شوید. این ابزار به شما امکان می‌دهد عنوان، توضیحات، تصویر و نام سایت را یک‌بار وارد کنید و دقیقاً ببینید کارت نهایی در چهار پلتفرم اصلی در کنار هم چگونه نمایش داده می‌شود؛ همچنین HTML متا‌تگ‌های نهایی را برای جای‌گذاری در بخش <head> صفحه در اختیارتان می‌گذارد.
نحوه استفاده
- نشانی صفحه، نام سایت، عنوان و توضیحاتتان را وارد کنید.
- یک نشانی اینترنتی تصویر اضافه کنید — ترجیحاً با اندازه 1200×630px و نسبت 1.91:1؛ این اندازه در هر چهار پلتفرم بدون برش نامناسب به‌خوبی نمایش داده می‌شود.
- نوع Twitter Card را انتخاب کنید: summary_large_image برای یک تصویر بنر بزرگ، یا summary برای یک تصویر کوچک مربعی در کنار متن.
- با تایپ کردن، به‌روزرسانی چهار پیش‌نمایش زنده را ببینید و شمارنده‌های کاراکتر را زیر نظر داشته باشید؛ عنوان‌های بیشتر از ~60 کاراکتر و توضیحات بیشتر از ~155 کاراکتر ممکن است در برخی پلتفرم‌ها کوتاه شوند.
- بلوک تگ <meta> تولیدشده را مستقیماً در HTML صفحه خود کپی کنید.
موارد استفاده در دنیای واقعی
بررسی اینکه کارت اشتراک‌گذاری یک پست وبلاگ پیش از انتشار درست نمایش داده می‌شود، به‌جای اینکه بعد از انتشار آن توسط شخص دیگری متوجه خراب بودنش شوید. نوشتن تگ‌های OG برای یک صفحه فرود جدید از ابتدا و مشاهده نتیجه واقعی، به‌جای حدس زدن بر اساس HTML خام. عیب‌یابی تفاوت نمایش Twitter Card یک صفحه با کارت Facebook آن؛ اغلب به این دلیل که یکی از پلتفرم‌ها به‌جای تگ‌های مورد انتظار، از تگ‌های دیگری استفاده می‌کند.
سؤالات متداول
تفاوت تگ‌های Open Graph و تگ‌های Twitter Card چیست؟
Open Graph (og:*) استانداردی است که فیس‌بوک ایجاد کرده و بیشتر پلتفرم‌ها، از جمله لینکدین و دیسکورد، به‌طور پیش‌فرض آن را می‌خوانند. توییتر/X از تگ‌های اختصاصی twitter:* استفاده می‌کند، اما اگر تگی را پیدا نکند، برای موارد ناقص به تگ‌های Open Graph برمی‌گردد. این ابزار هر دو را تولید می‌کند، چون یک راه‌اندازی کامل به هر دو در کنار هم نیاز دارد.
واقعاً از چه اندازه‌ای برای تصویر استفاده کنم؟
اندازه 1200×630 پیکسل (با نسبت 1.91:1) اندازه‌ای مطمئن و به‌طور گسترده توصیه‌شده است؛ تصویر در فیس‌بوک، لینکدین و دیسکورد به‌صورت بنری تمام‌عرض نمایش داده می‌شود و برای هر دو نوع Twitter Card، بدون کشیدگی یا برش نامناسب، مناسب است.
چرا حتی پس از به‌روزرسانی تگ‌های متا، کارت من عنوان نادرستی نشان می‌دهد؟
بیشتر پلتفرم‌ها نخستین‌بار که کارت پیش‌نمایش صفحه‌ای به اشتراک گذاشته می‌شود، آن را ذخیره می‌کنند و به‌طور خودکار دوباره دریافت نمی‌کنند. Facebook ابزار Sharing Debugger و LinkedIn ابزار Post Inspector را ارائه می‌دهند که پس از اصلاح تگ‌ها، امکان درخواست خزیدن دوباره را فراهم می‌کنند؛ این ابزار خودش عملیات خزیدن دوباره را انجام نمی‌دهد و فقط برای پیش‌نمایش و تولید تگ‌هاست.
آیا برای فیس‌بوک و توییتر به تصاویر جداگانه نیاز دارم؟
خیر، هنگام استفاده از summary_large_image یک تصویر 1200×630 برای هر دو کافی است؛ ساختار تگ‌ها دقیقاً به همین دلیل اجازه می‌دهد twitter:image در صورت مشخص کردن تنها یک تصویر، به og:image برگردد.
اگر توضیحات را خالی بگذارم چه اتفاقی می‌افتد؟
بیشتر پلتفرم‌ها در صورت نبود توضیحات مشخص، اولین خط متن قابل‌مشاهده صفحه را استخراج می‌کنند؛ متنی که اغلب نامرتب است (متن منو، بنر کوکی و موارد مشابه). این دقیقاً همان نتیجه غیرقابل‌پیش‌بینی‌ای است که این ابزار با نوشتن صریح توضیحات به شما کمک می‌کند از آن جلوگیری کنید.