اوپن گراف چیست؟ (راهنمای کامل OGP)

سرفصل‌های مقاله

اوپن گراف چیست؟
چرا به آن نیاز داریم؟
متادیتای پایه
متادیتای اختیاری
ویژگی‌های ساختاریافته
آرایه‌ها
انواع آبجکت‌ها
انواع داده‌ها
مزایای استفاده از پروتکل اوپن گراف
سوالات متداول
جمع‌بندی

نمایش بیشتر بستن

ساختن محتوا و مدیریت یه سایت می‌تونه خیلی وقت‌گیر و چالش‌برانگیز باشه. تولید محتوای خوب فقط یه بخش ماجراست؛ بخش مهم‌تر اینه که مطمئن بشی محتوای سایتت دیده می‌شه و بین این‌همه پست و لینک توی شبکه‌های اجتماعی گم نمی‌شه. تو دنیای پر از سر و صدای امروز، وقتی لینک سایتت به اشتراک گذاشته می‌شه، باید به قدری جذاب و حرفه‌ای به نظر برسه که بتونه توجه مخاطب رو به خودش جلب کنه. سوال اصلی اینه: چطوری می‌تونیم این کار رو انجام بدیم و مطمئن بشیم که محتوای ما به بهترین شکل نمایش داده می‌شه و نرخ کلیک بیشتری می‌گیره؟ راه‌حل این مشکل، استفاده از پروتکل اوپن گرافه! در ادامه این مقاله به معرفی این پروتکل می‌پردازیم.

اوپن گراف چیست؟

اوپن گراف (Open Graph) یه پروتکل اینترنتیه که در اصل توسط فیس‌بوک ساخته شد تا یه استانداردی برای استفاده از متادیتا (اطلاعات اضافی در مورد محتوای یه صفحه) داخل وب‌سایت‌ها ایجاد کنه. به کمک اوپن گراف می‌تونی اطلاعاتی مثل عنوان صفحه یا حتی جزئیات دقیق‌تر مثل مدت زمان یک ویدیو رو به اشتراک بذاری. این اطلاعات کنار هم قرار می‌گیرن تا هر صفحه وب به بهترین شکل ممکن در اینترنت نمایش داده بشه.

چرا به آن نیاز داریم؟

معمولاً وقتی محتوایی رو توی اینترنت منتشر می‌کنی، می‌خوای که با بقیه به اشتراک بذاری. حالا شاید برای یک نفر این مهم نباشه، اما اگه می‌خوای محتوات توی شبکه‌های اجتماعی یا اپلیکیشن‌هایی که پیش‌نمایش جذاب از لینک‌ها نشون می‌دن، به اشتراک گذاشته بشه، قطعاً دوست داری که اون پیش‌نمایش تا جایی که می‌شه حرفه‌ای و جذاب باشه. و اینجا اوپن گراف به کار میاد!

متادیتای پایه

برای اینکه صفحات وبت رو به آبجکت‌های گرافی تبدیل کنی، باید یه سری متادیتای ساده به صفحاتت اضافه کنی. اولین نسخه از این پروتکل بر پایه RDFa ساخته شده، به این معنی که باید تگ‌های <meta> اضافی رو توی بخش <head> صفحه وب قرار بدی. هر صفحه نیاز به چهار ویژگی اصلی داره:

og:title: عنوان آبجکتت همون‌طور که باید داخل گراف نمایش داده بشه، مثل: "The Rock".
og:type: نوع آبجکتت رو مشخص می‌کنه، مثلاً: "video.movie". بسته به نوعی که انتخاب می‌کنی، ممکنه به ویژگی‌های دیگه‌ای هم نیاز داشته باشی.
og:image: یک URL برای تصویر که باید نماینده آبجکتت توی گراف باشه.
og:url: یوآرال (URL) اصلی صفحه که به عنوان شناسه دائمی اون توی گراف استفاده می‌شه، مثل: "https://www.imdb.com/title/tt0117500/".

مثال: کد زیر یه نمونه از متادیتای اوپن گراف برای فیلم "The Rock" در IMDb هست:

<html prefix="og: https://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="https://www.imdb.com/title/tt0117500/" />
  <meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />
</head>
</html>

متادیتای اختیاری

این ویژگی‌ها اختیاری هستن، اما به طور کلی توصیه می‌شن که استفاده بشن:

og:audio: یه URL به یه فایل صوتی که با این آبجکت مرتبط باشه.
og:description: یک یا دو جمله توضیح در مورد آبجکت.
og:determiner: کلمه‌ای که قبل از عنوان آبجکت توی یه جمله میاد (مثل a، an، the یا auto).
og:locale: زبانی که این تگ‌ها براش نشانه‌گذاری شدن، مثل en_US.
og:locale:alternate: یه آرایه از زبان‌های دیگه‌ای که این صفحه توش موجوده.
og:site_name: اگه آبجکتت بخشی از یه سایت بزرگ‌تره، اسم اون سایت که باید نمایش داده بشه، مثل "IMDb".
og:video: یه URL به یه فایل ویدیو که با این آبجکت مرتبط باشه.

مثال از متادیتای اختیاری:

<meta property="og:audio" content="https://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="https://example.com/bond/trailer.swf" />

ویژگی‌های ساختاریافته

بعضی از ویژگی‌ها می‌تونن متادیتای بیشتری همراه خودشون داشته باشن. اینا هم مثل بقیه با property و content مشخص می‌شن، ولی این بار با جزئیات بیشتری:

og:image:url: همون آدرس og:image.
og:image:secure_url: یه آدرس جایگزین اگه صفحه نیاز به HTTPS داشته باشه.
og:image:type: نوع MIME این تصویر.
og:image:width: تعداد پیکسل‌های عرض.
og:image:height: تعداد پیکسل‌های ارتفاع.
og:image:alt: توضیحی از محتوای تصویر (نه کپشن).

نمونه‌ای از کد تصویر:

<meta property="og:image" content="https://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
<meta property="og:image:alt" content="A shiny red apple with a bite taken out" />

تگ og:video دارای تگ‌های مشابه og:image هست. مقال:

<meta property="og:video" content="https://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

برای فایل‌های صوتی (og:audio) هم مشابه تصویر و ویدیو، ولی بدون ابعاد. مثالی از کد:

<meta property="og:audio" content="https://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

آرایه‌ها

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

مثال:

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image" content="https://example.com/rock2.jpg" />

حالا، وقتی می‌خوای ویژگی‌های ساختاریافته مثل عرض و ارتفاع یه تصویر رو اضافه کنی، باید بعد از تگ اصلی اون ویژگی‌ها رو قرار بدی. هر وقت یه تگ جدید با همون ویژگی اصلی شروع بشه، یعنی کار ویژگی‌های قبلی تموم شده و ویژگی‌های جدید از اونجا شروع می‌شن.

مثال:

<meta property="og:image" content="https://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="https://example.com/rock2.jpg" />
<meta property="og:image" content="https://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

تو این مثال، ۳ تا تصویر داریم:

تصویر اول ۳۰۰x۳۰۰ پیکسل داره،
تصویر دوم اندازش مشخص نشده،
و تصویر آخر ارتفاعش ۱۰۰۰ پیکسل هست.

انواع آبجکت‌ها

وقتی می‌خوای اطلاعات یه صفحه وب رو به شبکه‌های اجتماعی ارسال کنی (مثلاً وقتی لینک صفحه‌ای رو به اشتراک می‌ذاری)، باید مشخص کنی که نوع اون صفحه چی هست. این نوع رو با استفاده از ویژگی og:type تعیین می‌کنی. مثلاً:

<meta property="og:type" content="website" />

این یعنی داری به شبکه‌های اجتماعی می‌گی که این صفحه یه سایت هست.

حالا فرض کن یه نوع جدید به وجود اومده (مثلاً یه نوع خاص از ویدیو یا موزیک)، وقتی افراد زیادی توافق کنن که این نوع جدید لازمه، اون نوع به لیست "انواع جهانی" اضافه می‌شه، یعنی انواعی که همه ازشون استفاده می‌کنن.

بقیه انواعی که ممکنه توسط افراد یا سایت‌های مختلف ساخته بشن، به شکل CURIE نوشته می‌شن. ساختار CURIE به این شکله که اول اسم فضای کاری (namespace) میاد، بعد یه دو نقطه، و بعد نوع آبجکت. مثلاً:

<head prefix="my_namespace: https://example.com/ns#">
<meta property="og:type" content="my_namespace:my_type" />

تو این مثال، my_namespace فضاییه که تو براش تعریف کردی و my_type نوعی که تو تعریف کردی.

انواع جهانی و دسته‌بندی‌ها

این انواع جهانی توی دسته‌های مختلف (بهشون می‌گن ورتیكال) قرار می‌گیرن. هر ورتیکال یا دسته‌بندی یه فضای کاری خاص داره. برای اینکه این نوع‌های جهانی با نوع‌هایی که خود کاربران ممکنه تعریف کنن قاطی نشن، برای انواع جهانی از یه پیشوند استفاده می‌کنیم. مثلاً:

توی دسته "موزیک"، نوع آبجکت‌ها به این صورت هست: music.song
ولی اگه یه کاربر نوع خودش رو تعریف کنه، باید از دونقطه (:) استفاده کنه، مثل: my_namespace
این کار باعث می‌شه که نوع‌هایی که از قبل تعیین شدن (مثل موزیک، فیلم، مقاله و غیره) با چیزایی که خودت تعریف می‌کنی، اشتباه گرفته نشن.

موزیک

Namespace URI: https://ogp.me/ns/music#

مقادیر og:type برای موزیک:

music.song

music:duration: مدت زمان آهنگ به ثانیه. (باید عددی بزرگتر از ۱ باشه)
music:album: آلبومی که این آهنگ توش هست.
music:album:disc : شماره دیسکی که این آهنگ توش قرار داره.
music:album:track: شماره ترک این آهنگ توی آلبوم.
music:musician: هنرمندی که این آهنگ رو ساخته.

music.album

music:song: آهنگ‌هایی که توی این آلبوم هستن.
music:song:disc: همون شماره دیسک مثل music:album:disc، اما برعکس.
music:song:track: همون شماره ترک، ولی برعکس.
music:musician: هنرمندی که این آهنگ رو ساخته.
music:release_date: تاریخ انتشار آلبوم.

music.playlist

music:song: همون آهنگ‌هایی که توی آلبوم هستن.
music:song:disc
music:song:track
music: کسی که این پلی‌لیست رو ساخته.

music.radio_station

music:creator: کسی که این ایستگاه رادیویی رو ساخته.

ویدیو

Namespace URI: https://ogp.me/ns/video#

مقادیر og:type برای ویدیو:

video.movie

video:actor: بازیگران فیلم.
video:actor:role: نقشی که بازی کردن.
video:director: کارگردانان فیلم.
video:writer: نویسندگان فیلم.
video:duration: مدت زمان فیلم به ثانیه.
video:release_date: تاریخ انتشار فیلم.
video:tag: تگ‌های مرتبط با فیلم.

video.episode

همون ویژگی‌های فیلم، ولی مربوط به اپیزودهای سریال.

video:actor:
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series: سریالی که این اپیزود بهش تعلق داره.

video.tv_show

یه سریال چند قسمتی. متادیتاش مشابه فیلم هست.

video.other

ویدیویی که تو هیچ دسته دیگه‌ای جا نمی‌گیره. متادیتاش مشابه فیلم هست.

بدون دسته

این‌ها آبجکت‌هایی هستن که توی هیچ دسته خاصی جا نمی‌گیرن ولی به طور گسترده استفاده می‌شن و توافق جهانی روشون وجود داره.

مقادیر og:type برای این دسته:

article

article - Namespace URI: https://ogp.me/ns/article#

article:published_time: زمانی که مقاله برای اولین بار منتشر شده.
article:modified_time: زمانی که آخرین تغییرات مقاله اعمال شده.
article:expiration_time: زمانی که مقاله منقضی می‌شه.
article:author: نویسندگان مقاله.
article:section: بخش کلی مقاله (مثل تکنولوژی).
article:tag: تگ‌های مرتبط با مقاله.

book

book - Namespace URI: https://ogp.me/ns/book#

book:author: نویسنده کتاب.
book:isbn: شماره ISBN کتاب.
book:release_date: تاریخ انتشار کتاب.
book:tag: تگ‌های مرتبط با کتاب.

profile

profile - Namespace URI: https://ogp.me/ns/profile#

profile:first_name: نام فرد.
profile:last_name: نام خانوادگی فرد.
profile:username: نام کاربری منحصر به فرد.
profile:gender: جنسیت (مرد، زن).

website

website - Namespace URI: https://ogp.me/ns/website#

هیچ ویژگی اضافی نداره جز اون‌هایی که توی متادیتای پایه استفاده شدن. هر صفحه‌ای که نشانه‌گذاری نشده باشه، باید به عنوان og:type با مقدار website در نظر گرفته بشه.

انواع داده‌ها

تو پروتکل Open Graph، برای تعریف ویژگی‌ها از چند نوع داده استفاده می‌شه. بیایید اینا رو با هم مرور کنیم:

نوع داده	توضیح	مقادیر (Literals)
Boolean	نوع داده بولین که فقط می‌تونه "درست" یا "غلط" باشه	true، false، 1، 0
DateTime	تاریخ و زمان که شامل تاریخ (سال، ماه، روز) و به صورت اختیاری زمان (ساعت، دقیقه) هست	استاندارد ISO 8601
Enum	نوع داده‌ای که از بین مقادیر ثابت انتخاب می‌شه	یه رشته که عضو مجموعه ثابت باشه
Float	عدد اعشاری ۶۴ بیتی	1.234، -1.234، 1.2e3، -1.2e3، 7E-10
Integer	عدد صحیح ۳۲ بیتی. اعداد بزرگتر از ۳۲ بیت توی بعضی زبان‌ها به Float تبدیل می‌شن	1234، -123
String	رشته‌ای از کاراکترهای یونیکد (حروف، اعداد و نمادها)	هر رشته‌ای از کاراکترهای یونیکد بدون کاراکترهای کنترلی
URL	آدرس اینترنتی که منابع آنلاین رو مشخص می‌کنه	هر URL معتبری که از پروتکل https:// یا http:// استفاده کنه

مزایای استفاده از پروتکل اوپن گراف

پروتکل اوپن گراف (OGP) نقش مهمی توی دنیای دیجیتال داره، مخصوصاً برای صاحبان سایت‌ها و تولیدکننده‌های محتوا. استفاده از OGP فقط یه کار فنی نیست؛ بلکه یه تصمیم استراتژیکه که می‌تونه تاثیر زیادی روی دیده شدن محتوای شما توی شبکه‌های اجتماعی و جلب توجه مخاطبات داشته باشه. بیایید با هم نگاهی بندازیم به مزایایی که این پروتکل به همراه داره:

نمایش بهتر محتوا

وقتی تگ‌های اوپن گراف رو توی کدهای HTML سایتت جا می‌دی، کمک می‌کنی که شبکه‌های اجتماعی مثل فیس‌بوک، توییتر و لینکدین محتوای سایتت رو بهتر بفهمن و نمایش بدن. یعنی وقتی کاربرا صفحاتت رو به اشتراک می‌ذارن، همراه با پیش‌نمایش‌های جذاب و بصری نشون داده می‌شن که توجه بیشتری رو جلب می‌کنه و احتمال کلیک کردن رو بالا می‌بره.

افزایش نرخ کلیک (CTR)

این پیش‌نمایش‌های جذاب فقط خوشگل نیستن؛ بلکه به‌شدت روی افزایش تعاملات تاثیر دارن. وقتی که عنوان‌ها، توضیحات و تصاویر جذابی توی پست‌های شبکه‌های اجتماعی نمایش داده می‌شن، کاربرا احتمالاً بیشتر روی لینک‌ها کلیک می‌کنن.

تعامل بیشتر در شبکه‌های اجتماعی

امروزه شبکه‌های اجتماعی به مرکز مهمی برای کشف و به اشتراک گذاشتن محتوا تبدیل شدن. با استفاده از قدرت اوپن گراف، مطمئن می‌شی که محتوای تو از بین همه‌ی سر و صداهای دیجیتال دیده می‌شه و توجهات رو جلب می‌کنه. فرقی نداره که یه مقاله جذاب باشه، یه تصویر خفن از محصولت یا یه ویدیو سرگرم‌کننده؛ OGP به تقویت صدای برندت کمک می‌کنه و تعاملات با مخاطب رو افزایش می‌ده.

تاثیر مثبت روی سئو و ترافیک ارگانیک

موتورهای جستجو به معیارهایی مثل نرخ کلیک، اشتراک‌گذاری‌های اجتماعی و زمانی که کاربر روی صفحه می‌مونه اهمیت زیادی می‌دن. با بهینه‌سازی محتوای سایتت برای اشتراک‌گذاری در شبکه‌های اجتماعی از طریق OGP، به‌صورت غیرمستقیم به سئوی سایتت هم کمک می‌کنی. افزایش دیده شدن و تعاملات در شبکه‌های اجتماعی باعث می‌شه که لینک‌های ورودی بیشتری داشته باشی، آگاهی از برندت بیشتر بشه و در نهایت، ترافیک ارگانیک سایتت از موتورهای جستجو بالاتر بره.

اگه می‌خوای سئو رو حرفه‌ای یاد بگیری و به راحتی سایتت رو توی نتایج جستجوی گوگل بالا بیاری، دوره متخصص سئو سون‌لرن رو از دست نده! این دوره بهت یاد می‌ده چطور بهترین کلمات کلیدی رو پیدا کنی و سایتت رو به صدر نتایج برسونی.

سوالات متداول

1. آیا اوپن گراف برای همه سایت‌ها ضروریه؟

نه لزوماً، اما اگه برات مهمه که وقتی محتوای سایتت توی شبکه‌های اجتماعی به اشتراک گذاشته می‌شه، جذاب و حرفه‌ای به نظر بیاد و شانس کلیک بالاتری داشته باشه، اوپن گراف می‌تونه این کار رو برات انجام بده.

2. چطور می‌تونم اوپن گراف رو به سایت اضافه کنم؟

می‌تونی با اضافه کردن متاتگ‌های اوپن گراف به بخش <head> صفحات HTML سایتت این کار رو انجام بدی. ابزارهایی مثل افزونه‌های وردپرس هم این کار رو راحت‌تر می‌کنن.

3. آیا اوپن گراف روی سئو تاثیر داره؟

به‌صورت غیرمستقیم بله! وقتی محتوای سایتت در شبکه‌های اجتماعی بهتر نمایش داده بشه و تعامل بیشتری ایجاد کنه، احتمال اینکه ترافیک ارگانیک و لینک‌های ورودی بیشتری به دست بیاری، بالاتر می‌ره.

4. آیا همه شبکه‌های اجتماعی از اوپن گراف پشتیبانی می‌کنن؟

بیشتر شبکه‌های اجتماعی معروف مثل فیس‌بوک، توییتر، لینکدین و پینترست از اوپن گراف پشتیبانی می‌کنن و اطلاعاتی مثل عنوان، تصویر و توضیحات رو از طریق این پروتکل دریافت می‌کنن.

5. چطور می‌تونم مطمئن بشم اوپن گراف درست کار می‌کنه؟

ابزارهایی مثل Facebook Object Debugger یا Google Rich Snippets Testing Tool وجود دارن که می‌تونی ازشون استفاده کنی تا بررسی کنی که تگ‌های اوپن گراف به درستی تنظیم شدن و محتوای سایتت به خوبی نمایش داده می‌شه.

6. چه نوع داده‌هایی رو می‌تونم با اوپن گراف به اشتراک بذارم؟

می‌تونی اطلاعاتی مثل عنوان، تصویر، توضیحات، زمان انتشار محتوا، نوع محتوا (مثل مقاله، ویدیو، آهنگ) و موارد دیگه‌ای رو به اشتراک بذاری. اوپن گراف بهت امکان می‌ده که این داده‌ها رو به شکلی استاندارد و بهینه‌شده منتقل کنی.

جمع‌بندی

پروتکل اوپن گراف یه ابزار قدرتمنده که بهت کمک می‌کنه محتوای سایتت رو به شکل جذاب‌تری توی شبکه‌های اجتماعی به اشتراک بذاری. از افزایش نرخ کلیک گرفته تا تعاملات بیشتر و حتی کمک به سئوی سایت، استفاده از اوپن گراف می‌تونه تاثیر مثبتی روی رشد آنلاین و دیده شدن محتوات داشته باشه. اگه به دنبال این هستی که سایتت بیشتر دیده بشه و مخاطب بیشتری جذب کنه، به‌کارگیری اوپن گراف قطعاً یکی از بهترین قدم‌هاست.