مهدی همیلی
در دنیای دیجیتال امروز، نحوه نمایش محتوا در شبکه‌های اجتماعی تأثیر زیادی در نرخ کلیک و تعامل کاربران دارد. یکی از ابزارهای مهم برای کنترل این نمایش، Open Graph است. این پروتکل که توسط فیسبوک معرفی شد، به وب‌سایت‌ها اجازه می‌دهد تا هنگام اشتراک‌گذاری لینک در شبکه‌های اجتماعی، نمایی بهینه‌شده از محتوا ارائه دهند.
استفاده از Open Graph نه تنها باعث حرفه‌ای‌تر شدن ظاهر لینک‌ها می‌شود، بلکه سئوی خارجی (off-page SEO) را نیز بهبود می‌بخشد. من مهدی همیلی هستم و در این مقاله از استک تیم، ارائه‌دهنده خدمات Team as a Service (TaaS)، به صورت جامع و با کد نمونه HTML، تمامی تگ‌های Open Graph را بررسی می‌کنیم.
مزایای استفاده از Open Graph
- کنترل کامل بر ظاهر لینک در شبکه‌های اجتماعی
- افزایش نرخ کلیک (
CTR) - انتقال بهتر پیام و برند شما
- افزایش اعتماد کاربران به لینک شما
- بهبود سئوی خارجی از طریق اشتراک‌گذاری‌های هدفمند
لیست کامل تگ‌های Open Graph و توضیحات
1. og:title
کاربر: عنوان محتوایی که کاربر در شبکه‌های اجتماعی می‌بیند.
توضیح: عنوانی است که هنگام اشتراک‌گذاری صفحه شما نمایش داده می‌شود. بهتر است جذاب، کوتاه و حاوی کلیدواژه باشد.
<meta property="og:title" content="آشنایی با زبان PHP - قدرت پنهان وب" />
2. og:description
کاربر: خلاصه‌ای از محتوای صفحه.
توضیح: این تگ مانند meta description عمل می‌کند، اما برای شبکه‌های اجتماعی. باید واضح، قانع‌کننده و دعوت‌کننده باشد.
<meta property="og:description" content="در این مقاله، با زبان PHP و کاربردهای قدرتمند آن در توسعه وب آشنا می‌شوید." />
3. og:type
کاربر: تعیین نوع محتوای صفحه.
توضیح: تعیین می‌کند که صفحه شما چیست: مقاله، ویدیو، محصول و غیره. رایج‌ترین مقدار آن "article" است.
<meta property="og:type" content="article" />
4. og:url
کاربر: لینک دقیق صفحه.
توضیح: آدرس دقیق صفحه‌ای که در حال اشتراک‌گذاری است. از canonical URL استفاده شود.
<meta property="og:url" content="https://stackteam.org/blog/php-intro" />
5. og:image
کاربر: تصویر بندانگشتی (thumbnail) هنگام اشتراک‌گذاری.
توضیح: مهم‌ترین تگ از نظر بصری. ابعاد توصیه‌شده 1200×630 پیکسل است.
<meta property="og:image" content="https://stackteam.org/assets/images/php-banner.jpg" />
6. og:image:alt
کاربر: توضیح متنی برای تصویر.
توضیح: به درک بهتر تصویر توسط موتورهای جستجو و دسترس‌پذیری کمک می‌کند.
<meta property="og:image:alt" content="تصویری از زبان برنامه‌نویسی PHP در محیط کدنویسی" />
7. og:site_name
کاربر: نام برند یا وب‌سایت.
توضیح: نام سایت شما که در کنار عنوان نمایش داده می‌شود. به افزایش اعتماد کمک می‌کند.
<meta property="og:site_name" content="Stackteam" />
8. og:locale
کاربر: زبان و منطقه صفحه.
توضیح: به پلتفرم‌ها کمک می‌کند تا نسخه درست محتوا را به کاربران نشان دهند. برای فارسی: fa_IR
<meta property="og:locale" content="fa_IR" />
چگونه Open Graph را در پروژه خود پیاده‌سازی کنیم؟
بهترین مکان برای قرار دادن تگ‌های Open Graph، داخل <head> سند HTML است. می‌توانید از قالب‌های HTML یا CMS هایی مثل WordPress برای افزودن این تگ‌ها استفاده کنید. همچنین توصیه می‌شود از ابزار Meta Tag Debugger فیسبوک برای بررسی نمایش نهایی استفاده کنید.
سخن آخر
اگر به دنبال حرفه‌ای‌تر کردن ظاهر سایت خود در شبکه‌های اجتماعی هستید و می‌خواهید نرخ کلیک و تعامل کاربران را افزایش دهید، استفاده از Open Graph ضروری است. در استک تیم، ما هنگام طراحی و توسعه پروژه‌های تحت وب، همیشه Open Graph را به عنوان بخشی از استانداردهای فنی لحاظ می‌کنیم تا تجربه کاربری و برندینگ شما تقویت شود.
