اوپن گراف (Open Graph) چیست؟
پروتکل Open Graph مجموعهای از تگهای متا (Meta Tags) است که در سال ۲۰۱۰ توسط فیسبوک معرفی شد. این تگها به شما اجازه میدهند تا هر صفحه وب را به یک شیء گرافیکی غنی در شبکههای اجتماعی تبدیل کنید. بدون این تگها، رباتهای تلگرام، واتساپ یا توییتر سعی میکنند به صورت تصادفی یک عکس و متنی از صفحه شما انتخاب کنند که اغلب نتیجه نامناسبی دارد.
تگهای ضروری و کاربرد آنها
og:titleعنوان اصلی لینک. باید جذاب و کوتاه (زیر ۶۰ کاراکتر) باشد. برخلاف title سئو، نیازی به نام سایت در اینجا نیست.
og:imageمهمترین تگ. تصویری که کاربر را جذب میکند. استاندارد طلایی ۱۲۰۰ در ۶۳۰ پیکسل است.
og:descriptionتوضیحاتی که زیر عنوان میآید. حدود ۲ تا ۴ جمله برای تشریح محتوا.
og:urlلینک کانونیکال صفحه. کمک میکند تا لایکها و اشتراکگذاریها روی یک آدرس واحد تجمیع شوند.
اشتباهات رایج در پیادهسازی
- تصاویر کوچک یا مربعی: استفاده از تصاویر زیر ۶۰۰ پیکسل باعث میشود پلتفرمها تصویر را به صورت یک بندانگشتی کوچک (Thumbnail) در کنار متن نشان دهند، نه به صورت تمام عرض (Full Width).
- عدم استفاده از کش (Cache): تلگرام و لینکدین اطلاعات لینک شما را کش میکنند. اگر بعد از تغییر تگها، پیشنمایش تغییر نکرد، باید از باتهای Debugger استفاده کنید.
- URL نسبی: همیشه در og:image و og:url از آدرس کامل (Absolute URL) با https استفاده کنید. آدرسهای نسبی مثل /img/logo.png کار نمیکنند.
سوالات متداول
چرا تصویر لینک من در تلگرام نشان داده نمیشود؟▼
چند دلیل وجود دارد: ۱. حجم عکس بالای ۵ مگابایت است. ۲. ابعاد عکس خیلی کوچک است. ۳. سرور شما دسترسی ربات تلگرام را مسدود کرده است. ۴. نیاز به آپدیت کش تلگرام دارید (با استفاده از @WebpageBot).
تفاوت twitter:card با og:tags چیست؟▼
توییتر از تگهای اختصاصی خودش (با پیشوند twitter:) استفاده میکند اما اگر این تگها موجود نباشند، از تگهای og: استفاده میکند. با این حال، برای داشتن کارتهای بزرگ در توییتر، استفاده از twitter:card = summary_large_image ضروری است.