Open Graph: پروتکلی برای تبدیل صفحات وب به آبجکت‌های قابل پشتیبانی در شبکه‌های اجتماعی

Open Graph پروتکلی است که در شبکه‌هایی اجتماعی همچون فیسبوک مورد استفاده قرار می‌گیرد تا این امکان را برای صفحات وب ایجاد کند تا قابلیتی همچون دیگر آبجکت‌های به کار رفته در شبکه‌های اجتماعی داشته باشد (لازم به ذکر است که سورس‌کد سایت Open Graph اپن‌سورس است که برای دستیابی به آن می‌توانید به ریپازیتوری گیت‌هاب OGP مراجعه نمایید.)

تکنولوژی‌ها و زیرساخت‌های مختلف بسیاری وجود دارند که دولوپرها می‌توانند آن‌ها را با هم ترکیب کرده و برای نمایش محتوای صفحات وب در #شبکه‌های اجتماعی به کار گیرند؛ اما تا پیش از عرضهٔ Open Graph، یک تکنولوژی مستقل برای این منظور وجود نداشت.

پس از عرضهٔ پروتکل Open Graph Protocol یا به اختصار OGP توسط کمپانی #فیسبوک، قابلیت‌های مورد نیاز دولوپرها در اختیارشان قرار گرفت با استفاده از تنها یک پروتکل مستقل بتوانند محتوای تحت وب مد نظر خود را در شبکه‌های اجتماعی به اشتراک بگذارند. یک ویژگی کلیدی فریمورک OGP سادگی کار با آن برای دولوپرها است که با استفاده از آن می‌توانند تصمیمات فنی بسیاری را در مورد نوع طراحی و چگونگی نمایش محتوا بگیرند.

نحوهٔ استفاده از OGP
برای تبدیل صفحات وب به آبجکتی که در شبکۀ اجتماعی ساپورت شود، دولوپرها بایستی متاتگ‌های اصلی این پروتکل را به صفحۀ وب خود اضافه کنند. در حقیقت، این دست متاتگ‌ها این امکان را برای دولوپرها فراهم می‌کنند تا بتوانند چگونگی نمایش محتوا را در صورت اشتراک‌گذاری آن صفحۀ وب در یک شبکۀ اجتماعی، کنترل کنند.

نسخۀ اولیه این پروتکل با استفاده از RDFa طراحی شده است؛ بدین معنا که دولوپرها بایستی تگ‌های <meta> مد نظر را داخل تگ <head> صفحۀ وب قرار دهند و به جای ذکر نامی برای یک اتربیوت، یک پراپرتی با ذکر پیشوند :og برای هر کدام از پراپرتی‌ها تعریف می‌کنند.

آشنایی با پراپرتی‌های کاربردی در OGP
چهار مورد از مهم‌ترین پراپرتی‌های مورد نیاز برای هر صفحۀ وب عبارتند از:

- og:title: عنوان آبجکت، محتوا یا صفحۀ وب که با آن عنوان در شبکۀ اجتماعی نمایش داده می‌شود (برای مثال SokanAcademy)

- og:type: نوع آبجکت مورد نظر را مشخص می‌کند. البته لازم به ذکر است بسته به نوع آبجکتی که مشخص می‌کنید، ممکن است پراپرتی‌های دیگر نیز مورد نیاز باشد (مثلاً فیلم، ویدئو، پست وبلاگی یا مقاله)

- og:image: یوآرال تصویری که در گراف شبکۀ اجتماعی نشان‌دهندۀ آبجکت شما خواهد بود.

- og:url: یوآرال اصلی آبجکت شما که به عنوان شناسۀ دائمی آن در شبکۀ اجتماعی استفاده می‌شود (مثلاً https://sokanacademy.com/blog/6761/post)

به عنوان مثال داریم:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>
...
</html>

معرفی پلاگین وردپرس OGP
Open Graph Protocol Framework یک پلاگین اختصاصی سیستم مدیریت محتوای #وردپرس است و برای این منظور طراحی شده تا به عنوان یک فریمورک برای دیگر پلاگین‌ها عمل کند به طوری که این فریمورک صفحات وب را به صورت یک آبجکت کاربردی در شبکه‌های اجتماعی مد نظر دولوپرها نمایش خواهد داد.