راهنمای کامل تگ‌های متا Open Graph (og:) در HTML
اگه تا حالا خواستین لینک وب‌سایتتون در شبکه‌های اجتماعی مثل فیسبوک facebook، لینکدین linkedin یا توییتر twitter زیباتر و حرفه‌ای‌تر نمایش داده شود، حتما باید با تگ‌های Open Graph یا همون og: به طور کامل آشنا شوید. این تگ‌ها به سایت شما کمک می‌کند تا وقتی لینک مورد نظرتان را جایی به اشتراک گذاشتید، یک پیش‌نمایش کاربر پسند User Friendly شامل عنوان، توضیح و عکس درست شوند.
در این نوشته تگ‌های اصلی og: را به شما توضیح می‌دهیم.
راهنمای کامل تگ‌های متا Open Graph (og:) در HTML
Open Graph یا OG چی هست؟
Open Graph یک پروتکل protocol توسعه داده‌شده توسط شرکت فیسبوک facebook است که به صفحات وب این امکان رو می‌دهد که اطلاعات ساختاریافته در مورد اون صفحه را ارائه بدهند. این اطلاعات وقتی لینک یک صفحه در شبکه‌های اجتماعی منتشر می‌شود، باعث می‌شود محتوا به صورت گرافیکی و قابل فهم نمایش داده می‌شود.
مهم‌ترین تگ‌های OG و کاربردشون
تگ‌های OG معمولا در تگ <head> موجود در سند HTML قرار می‌گیرند. حالا بریم سراغ پرکاربردترین‌ها:
تگ og:title
این تگ عنوانی که در پیش‌نمایش آن صفحه نشون داده می‌شود را مشخص می‌کند.
<meta property="og:title" content="راهنمای کامل تگ‌های متا Open Graph">
تگ og:description
یک توضیح کوتاه از محتوا، معمولاً زیر عنوان نمایش داده می‌شود.
<meta property="og:description" content="همه چیز درباره تگ‌های og: و نحوه استفاده‌شون برای جذاب‌تر کردن لینک‌ها در شبکه‌های اجتماعی.">
تگ og:image
تصویر اصلی که موقع به اشتراک‌گذاری صفحه نشان داده می‌شود. این تصویر خیلی مهمه چون اولین چیزی که مخاطب می‌بیند همین تصویر است.
<meta property="og:image" content="https://example.com/images/og-image.jpg">
تگ og:url
آدرس دقیق صفحه‌ای که پیش‌نمایش برای آن ساخته می‌شود.
<meta property="og:url" content="https://example.com/meta-tags-open-graph-guide">
تگ og:type
نوع محتوا را مشخص می‌کند. برای صفحات وب معمولاً website استفاده می‌شود.
<meta property="og:type" content="website">
تگ og:site_name
نام وب‌سایت شما را نشون می‌دهد.
<meta property="og:site_name" content="وبلاگ من">
تگ og:locale
زبان و منطقه‌ی جغرافیایی آن صفحه. برای فارسی معمولاً از fa_IR استفاده می‌شود.
<meta property="og:locale" content="fa_IR">
اگر سوالی در ارتباط با متاتگ‌های بالا دارید در بخش نظرات همین نوشته برای ما بنویسید.