اپن گراف یا Open Graph تکنولوژی است که اولین بار توسط فیسبوک در سال 2010 معرفی شد این تکنولوژی پل میان فیسبوک ، اطلاعات کاربر با یک سایت میباشد . با ادغام تگ های اپن گراف در محتوی سایت ، تگ های اپن گراف کمک میکند زمانیکه وب سایت شما به اشتراک گذاشته میشود اطلاعات مفیدی مانند نوع مطلب ، تصویری از محتوی یا اینکه کدام بخش های یک مطلب در شبکه های اجتماعی به اشتراک گذاشته شوند در معرض دید کاربر قرار بگیرد و توضیحی کوتاه از آن محتوی به اشتراک گذاشته شود تا کاربرانی که مطلب شما را قصد دارند باز کنند بدانند با چه محتوایی روبرو خواهند شد .
بعنوان یک مثال ساده شما مطلبی دارید که قصد دارید این مطلب را در فیسبوک به اشتراک بگذارید و مطالب شما دارای چندین تصویر است با توجه به این موضوع فیسبوک به چه صورتی باید متوجه شود تصویر اصلی مطلب شما کدام تصویر میباشد که به کاربر در زمان اشتراک گذاری کمک کند و تصویر صحیح را نمایش دهد ؟ تکنولوژی اپن گراف این کمک را به کاربر میکند تا تصویر اصلی که باید به اشتراک گذاشته شود انتخاب شود . با این مثال مطمئنن بسیاری از شما از نحوه کاربرد این تکنولوژی بسیار مفید مطلع شدید و امیدواریم به خوبی در وب سایتهای خود از آن استفاده کنید تا یک محتوی غنی و مهم را در معرض دید کاربران اینترنتی قرار دهید .
در زیر یک مثال از کدهای اپن گراف برای شما آورده ایم :
<meta property="og:title" content="اپن گراف چیست ؟"/>
<meta property="og:description" content="در فرهنگ لغات کامپیوتری اپن گراف به معنای لینک های مرتبط ، اطلاعات کلی و شرایط میباشد "/>
<meta property="og:type" content="article"/>
<meta property="og:image" content="http://www.computerhope.com/comp/logos/facebook.gif"/>
به ترتیب کدها را برای شما توضیح خواهیم داد :
سطر اول شامل عنوان مطلب شما میباشد ، این عنوان در زمان اشتراک گذاری بسیار مهم است چون کاربری که قصد دارد محتوی شمارا مطالعه کند باید بداند با چه مبحثی روبرو خواهد شد .
سطر دوم شامل توضیحی از مطلب شما است : توضیح کوتاه و کاملی از محتوی شما میباشد که در زیر عنوان نمایش داده میشود
سطر سوم مشخص کننده نوع محتوی شما میباشد که در این مثال ما مطلب ( article ) را قرار داده ایم : این کد به شما کمک میکند تا محتوی خود را معرفی کنید مثلا محتوی شما یک محصول ، یک مطلب ، یک نظر یا ... میباشد
سطر چهارم تصویر اصلی محتوی شما است : همانطور که مشاهده میکنید آدرس تصویر مطلب را در این کد قرار داده ایم تا در زمان اشتراک گذاری این تصویر نمایش داده شود .
چگونه اپن گراف را در سایت خود استفاده کنیم :
سوال بسیاری از کاربران این سوال میباشد که تا اینجا متوجه شدیم اپن گراف چیست حالا نحوه کاربرد و استفاده از آن به چه صورت است ؟
برای پاسخ به این سوال باید ابتدا مشخص کنید طراحی وب سایت شما به چه صورت میباشد ؟ اگر از سیستم های محتوی برای طراحی استفاده کرده اید معمولا پلاگین هایی برای این منظور طراحی شده است و قابل نصب و استفاده میباشد .
برای وردپرس شما از لینک زیر میتوانید پلاگین های مرتبط با اپن گراف را دانلود و نصب و فعال بفرمایید
اپن گراف برای وردپرس
یا اگر جوملا میباشد از لینک زیر :
اپن گراف برای جوملا
یا اگر صفحه شما یک صفحه اچ تی ام ال میباشد کافیست کدهای اپن گراف را در
Head
وب سایت خود قرار دهید
معروفترین تگ های اپن گراف به شرح زیر است :
og:title - عنوان سایت
og:image - تصویر مطالب
og:description - توضیحات صفحه
og:type - نوع محتوی که شامل موارد زیر است
article, music.album, video.movie, and website.
og:url - آدرس منحصر بفرد صفحه
og:locale - اطلاعات منطقه ای صفحه. به صورت پیشفرض بروی زبان en_US میباشد . این گزینه نیاز به تغییر ندارد و تنها در صورتیکه در خارج از آمریکا و به زبان دیگری بجز انگلیسی میباشد میتوانید تگ زبان منطقه ای خود را درج کنید .
اگر کدهای بیشتر نیاز دارید میتوانید در سایت اپن گراف تمام کدها را مشاهده نمایید :
وب سایت اپن گراف
تا به اینجا ما با توجه به آموزش کدهای خود را تنظیم کرده ایم حالا باید به چه صورت تست و بررسی کنیم آیا این کدها را صحیح تنظیم کرده ایم یا نه ؟
برای این منظور وب سایت فیسبوک یک ابزار تست به توسعه دهندگان داده است که میتوانید لینک خود را در این ابزار تست نمایید
ابزار تست اپن گراف
با توجه به فیلتر بودن فیسبوک حتما روش دیگیری را برای ورود مستقیم به فیسبوک انتخاب نمایید ;)
نظرات (3)