ساخت تگ Open Graph
تگ‌های اشتراک‌گذاری در شبکه‌های اجتماعی را بسازید.
<meta property="og:title" content="عنوان صفحه" /> <meta property="og:description" content="توضیح کوتاه صفحه برای شبکه‌های اجتماعی." /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://example.com/page" /> <meta property="og:image" content="https://example.com/cover.jpg" /> <meta property="og:site_name" content="ابزاریو" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="عنوان صفحه" /> <meta name="twitter:description" content="توضیح کوتاه صفحه برای شبکه‌های اجتماعی." /> <meta name="twitter:image" content="https://example.com/cover.jpg" />
درباره ساخت تگ Open Graph
وقتی لینک یک صفحه در تلگرام، واتساپ، توییتر یا لینکدین اشتراک‌گذاری می‌شود، آنچه به‌صورت کارت پیش‌نمایش با عکس و عنوان نمایش داده می‌شود، از تگ‌های Open Graph همان صفحه خوانده می‌شود. بدون این تگ‌ها، شبکه‌های اجتماعی معمولاً پیش‌نمایش نامرتب یا بدون تصویر نشان می‌دهند که نرخ کلیک را به‌شدت پایین می‌آورد. ابزار ساخت تگ Open Graph ابزاریو با گرفتن عنوان، توضیحات، آدرس صفحه، آدرس تصویر، نوع محتوا (وب‌سایت، مقاله یا محصول) و نام سایت، هم تگ‌های og و هم تگ‌های Twitter Card را همزمان تولید می‌کند. کافی است این کد را در بخش head صفحه قرار دهید تا هر بار لینک به اشتراک گذاشته شد، کارت زیبا و کامل نمایش داده شود. توجه به ابعاد استاندارد تصویر og:image، یعنی ۱۲۰۰ در ۶۳۰ پیکسل، باعث می‌شود تصویر در اکثر پلتفرم‌ها بدون بریدگی یا کشیدگی نمایش داده شود.
راهنمای استفاده
- 1عنوان، توضیحات و آدرس تصویر را وارد کنید.
- 2نوع محتوا را انتخاب کنید.
- 3کد را در بخش head صفحه قرار دهید.
چرا از این ابزار استفاده کنیم؟
- تولید همزمان تگ‌های og:title، og:description، og:image، og:url و og:type
- ساخت خودکار تگ‌های Twitter Card برای نمایش کارت بزرگ با تصویر در توییتر
- پشتیبانی از سه نوع محتوای رایج: وب‌سایت، مقاله و محصول
- افزودن og:site_name برای نمایش نام برند کنار عنوان در پیش‌نمایش
- خروجی آماده کپی مستقیم در head بدون نیاز به دانش برنامه‌نویسی
- افزایش نرخ کلیک روی لینک‌های به‌اشتراک‌گذاشته‌شده در شبکه‌های اجتماعی
مثال‌های کاربردی
اشتراک‌گذاری یک مقاله در تلگرام
با انتخاب نوع محتوا article و وارد کردن عنوان، توضیحات و آدرس تصویر ۱۲۰۰×۶۳۰، تلگرام هنگام فوروارد لینک، کارتی با عکس بزرگ و عنوان کامل نمایش می‌دهد.
معرفی محصول فروشگاهی
برای صفحه محصول، انتخاب type روی product و درج آدرس عکس محصول باعث می‌شود og:type روی «product» تنظیم شود و شبکه‌های اجتماعی متوجه ماهیت تجاری لینک شوند.
تگ Twitter Card خودکار
همزمان با ساخت تگ‌های og، خروجی شامل «<meta name="twitter:card" content="summary_large_image" />» هم می‌شود تا در توییتر (X) نیز همان تصویر و عنوان به‌صورت کارت بزرگ نمایش یابد.
درج نام سایت
با پر کردن فیلد نام سایت مثلاً «ابزاریو»، تگ «<meta property="og:site_name" content="ابزاریو" />» اضافه می‌شود که در برخی پلتفرم‌ها زیر عنوان لینک نمایش داده می‌شود.
پرسش‌های متداول
چرا تصویر لینک در تلگرام عوض نمی‌شود؟
شبکه‌های اجتماعی نتیجه را کش می‌کنند؛ باید از ابزار اعتبارسنجی همان شبکه، کش را تازه کنید.
آدرس تصویر باید کامل باشد؟
بله، og:image باید آدرس مطلق با https باشد.
چرا بعد از تغییر og:image عکس قبلی هنوز در تلگرام نشان داده می‌شود؟
شبکه‌های اجتماعی پیش‌نمایش لینک را کش می‌کنند؛ باید از ابزار رسمی هر پلتفرم مثل Facebook Sharing Debugger کش را دستی تازه کنید تا تصویر جدید بارگذاری شود.
آیا تگ og:image باید حتماً آدرس کامل باشد؟
بله، آدرس og:image باید مطلق و با https باشد نه مسیر نسبی، وگرنه بسیاری از پلتفرم‌ها نمی‌توانند تصویر را بارگذاری کنند.
تفاوت Open Graph و Twitter Card چیست؟
Open Graph استاندارد عمومی فیسبوک است که اکثر پلتفرم‌ها از جمله تلگرام و لینکدین آن را می‌خوانند، در حالی‌که Twitter Card تگ‌های اختصاصی توییتر (X) هستند؛ داشتن هر دو تضمین می‌کند لینک در همه‌جا درست نمایش یابد.
چه ابعادی برای og:image پیشنهاد می‌شود؟
ابعاد ۱۲۰۰ در ۶۳۰ پیکسل استاندارد رایج است که در بیشتر شبکه‌های اجتماعی بدون بریده‌شدن یا کشیده‌شدن نمایش داده می‌شود.