اوپن گراف چیست؟ (راهنمای کامل 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. چه نوع داده هایی رو می‌تونم با اوپن گراف به اشتراک بذارم؟

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

جمع بندی

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