معرفی متاتگ اپن گراف یا open graph

معرفی متاتگ اپن گراف یا open graph

Open graph protocol tutorial

متاتگ Open Graph

 

کنترل چگونگی به نمایش درآمدن صفحات وب سایت در شبکه های اجتماعی توسط متاتگ og

 

پروتکل اپن گراف (Open graph protocol) چیست؟

کدها و محتوای هیچ دو وب سایتی شبیه هم نیست. بنابراین برای شبکه های اجتماعی مانند فیسبوک می تواند مشکل باشد که بخش صحیح از مطالب یک صفحه وب را برای نمایش انتخاب کند. اینجا جایی است که پروتکل گراف باز (Open Graph Protocol و یا OGP) وارد بازی می شود! ابتکار عمل این پروتکل بدست شرکت فیسبوک می باشد. فیسبوک برای نمایش صحیح تکه ای از صفحه که مناسب می باشد، متاتگ opengraph را تولید نمود. تصویر زیر را در نظر بگیرید:

 

متاتگ opengraph

 

لزوم تعریف متاتگ og:

در تصویر فوق، یک صفحه وب بدون استفاده از متاتگ های opengraph در شبکه اجتماعی فیسبوک (facebook) به اشتراک گذاشته شده است. مشاهده می کنید که هیچ فرمت خاصی ندارد و چند خط اول مقاله را بعنوان متاتگ description در نظر گرفته است. همانطور که در صفحه وب نمونه مشاهده می کنید، با اینکه دارای تصویر و نام نویسنده (author) و سایر المان ها می باشد، فیسبوک و سایر شبکه های اجتماعی، بصورت پیش فرض، هیچیک از آنها را نمایش نمی دهد و باید توسط متاتگ های opengraph و یا بطور مختصر تگ های og آنها را برای فیسبوک بصورت دستی تعریف کنیم. برای کسب اطلاعات بیشتر درباره تگ های og، به وب سایت مرجع opengraph مراجعه شود.

 

تعریف متاتگ های og (OpenGraph Meta Tags):

متاتگ های og همانند متاتگ هایی که برای سئو تعریف می شوند (مانند title و description و keywords) تعریف خواهند شد.

 

تعریف  Namespace های تگ og:

قبل از افزودن متا تگ های og، ابتدا بهتر است بصورت زیر XML Namespace های تگ og را در تگ html تعریف کنیم:

<!DOCTYPE html>
<html xmlns:og="http://ogp.me/ns#"
      xmlns:fb="http://ogp.me/ns/fb#">
<head>
</head>
<body>
</body>
</html>

Namespace در HTML به چه معناست؟

مفهوم Namespace در زبان HTML شبیه سایر زبان های تحت وب می باشد. از ابهام (Ambiguity) در ساختار داده ها جلوگیری می کند. در مثال زیر، فضای نام (namespace) og به پروتکل Open Graph اشاره دارد و فضای نام fb به مالکیت فیسبوک بر این متاتگ رجوع دارد. این namespace ها را در اتریبیوتی بنام prefix تعریف می کنیم:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<head>
</head>
<body>
</body>
</html>

 

انواع متاتگ های اپن گراف یا og Metatags

 

۱- تگ های متای og در فیسبوک:

شبکه اجتماعی فیسبوک، به چند متاتگ نیاز دارد:

  • متاتگ Content Type (og:type):

کد زیر را برای تعریف متاتگ Content Type در نظر بگیرید:

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

نحوه تعریف تگ og:type:

مشاهده می کنید که متاتگ های og از دو اتریبیوت مهم بنام های property و content تشکیل شده اند. برای تعریف متاتگ Content Type باید اتریبیوت property را برابر og:type قرار دهیم. معمولا برای صفحه اصلی وب سایت، اتریبیوت content برابر website می باشد. و برای صفحات محتوا مانند اخبار و مقالات، مقدار content برابر article خواهد شد:

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

 

البته انواع دیگری را نیز می توانید تعریف کنید مانند product,place, video.movie,books.book و…

لطفا به کد زیر توجه کنید:

<!– Product Type: may be used in e-commerce product sites. –>

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

<!– Place Type: may be used in travel websites. –>

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

<!– Movie Type: may be used in movie review websites like iMDB or movie streaming website like Netflix. –>

<meta property="og:type" content="video.movie" />

  • متاتگ Url (og:url):

متاتگ Url با property برابر og:url تعریف می شود. اتریبیوت content این متاتگ باید برابر آدرس مطلق یک صفحه وب باشد (مانند تگ canonical). کد زیر نمونه ای از متا تگ url در صفحه اصلی یک سایت می باشد:

<meta property="og:url" content="https://tutsplus.github.io/" />

و متا تگ url در یک صفحه داخلی یک وب سایت نیز به شکل زیر می تواند تعریف شود:

<meta property="og:url" content="https://tutsplus.github.io/open-graph-protocol/" />

  • متاتگ Title (og:title):

متاتگ title بیان کننده عنوان صفحه برای نمایش در پست های شبکه های اجتماعی می باشد. مقدار آن ممکن است گاهی برابر title (<title></title>) صفحه نباشد و می تواند متفاوت باشد. بعنوان مثال، در صفحه نمونه وب، مقدار og:title برابر “Learn CSS: The complete guide” می باشد در حالیکه عنوان صفحه (title) برابر “Open Graph Protocol – Tuts+” می باشد. تصویر زیر را در این زمینه در نظر بگیرید:

 

متاتگ og:title

 

نمونه متا تگ عنوان:

کد زیر را برای تعریف og:title می نویسیم:

<meta property="og:title" content="Learn CSS: The Complete Guide" />

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

 

تعداد کاراکترهای og:title

 

۲- متا تگ های og کاربردی:

  • متاتگ توضیحات (og:description):

برای تعریف خلاصه ای از یک صفحه وب که می خواهید با دیگران به اشتراک بگذارید باید از متاتگ توضیحات (og:description) استفاده کنید. کد زیر را در این رابطه ملاحظه کنید:

<meta property="og:description" content="A comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS.">

مجددا فیسبوک برای متاتگ og:description محدودیت کاراکتر قائل نشده است. با اینحال ممکن است بعضی جاها بدلیل کمبود فضا، مقداری از انتهای این متاتگ را نمایش ندهد.

 

  • متاتگ تصویر (og:image):

متاتگ og:image برای تعریف کردن تصویری که بعنوان تصویر مطلب در نظر داریم بکار می رود. این تصویر می تواند در آن صفحه وب وجود نداشته باشد و از صفحه دیگر و یا وب سایت دیگر آنرا نمایش دهیم. کد زیر را در نظر بگیرید:

<meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" />

تعیین طول و عرض و نوع تصاویر:

علاوه بر متا تگ og:image می توانید از متا تگ های og:image:width برای تعیین طول تصویر، از og:image:height برای تعیین ارتفاع تصویر و از og:image:type برای تعریف MIME type استفاده کنید. تعریف کردن این سه متاتگ الزامی نمی باشد اما برای فیسبوک کار را راحتتر می کنید. کدهای زیر را برای متاتگ های image:width و image:height و image:type در نظر بگیرید:

<meta property="og:image:width" content="850">
<meta property="og:image:height" content="450">
<meta property="og:image:type" content="image/png" />

کوچکترین سایزی که برای تصاویر در نظر می گیرید، ۲۰۰*۲۰۰ پیکسل باید باشد. پیشنهاد خود فیسبوک برای بهترین خروجی، ۶۳۰*۱۲۰۰ پیکسل می باشد. در تصویر زیر، می توانید نحوه نمایش تصاویر مربعی و کوچک و نیز نمایش تصاویر با اندازه پیشنهادی فیسبوک (۶۳۰*۱۲۰۰ پیکسل) را مشاهده کنید:

متاتگ og:image

 

  • شناسه اپلیکیشن فیسبوک (The Facebook App ID):

این متاتگ با fb:app_id تعریف می شود. با استفاده از این متاتگ، فیسبوک می تواند به وب سایت شما متصل شود و اطلاعات آماری خوبی را در اختیارتان قرار دهد. بصورت زیر تعریف می شود:

<meta property="fb:app_id" content="1494084460xxxxxx">

تعریف متاتگ fb:app_id الزامی نمی باشد.

 

۳- متا تگ های جانبی (Subsidiary Meta Tags):

تعدادی از متاتگ های og وجود دارند که تعریف کردن آنها الزامی نمی باشد اما در موارد خاصی می توانند مفید باشند.

  • متاتگ نام سایت (The Site Name Meta Tag):

متاتگ نام سایت، با og:site_name تعریف می شود که برابر نام وب سایت شما و یا بطور مشخص، نام برند شماست. ممکن است دامین وب سایت شما نیز باشد. مانند متاتگ وب سایت TutsPlus که بصورت زیر تعریف شده است:

<meta name="og:site_name" content="Tuts+">

فیسبوک و سایر شبکه های اجتماعی، نام سایت (og:site_name) را به کاربران نمایش نمی دهد. اما هنگامی که پلاگین شبکه اجتماعی فیسبوک را روی وب سایت خود نصب می کنید، نام وب سایت (site_name) مانند تصویر زیر، در نوتیفیکیشن (notification) نمایش داده می شود.

 

-	متاتگ نام سایت (The Site Name Meta Tag)

 

  • متاتگ های وابسته به نوع (The Type-Related Meta Tags):

متاتگ های متعددی وجود دارند که به نوع content type تعریف شده در متاتگ og:type بستگی دارند. بعنوان مثال اگر نوع محتوا را در متاتگ og:type برابر article تعریف کرده باشید، متاتگ های زیر را شامل خواهد شد و og:article:published_time و og:article:publisher و article:section و article:tag . قبل از استفاده از متاتگ های فوق، باید ابتدا یک فضای نام (namespace) جدید بطور اختصاصی برای Article تعریف کنید. بنابراین ما تابحال سه فضای نام (namespace) خواهیم داشت: og و fb و article:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<head>
</head>
<body>
</body>
</html>

  • متا تگ نویسنده مقاله (The Article Author):

    بنابر مستندات فیسبوک در مورد متاتگ نویسنده (Author)، مقدار این متاتگ (اتریبیوت content) باید برابر آدرس پروفایل کاربر درفیسبوک و یا ID کاربر در فیسبوک باشد. به کد زیر دقت کنید:

<meta name="article:author" content="https://www.facebook.com/johndoe"> 

تعریف چندین نویسنده توسط تگ article:author:

تعریف بیش از یک نویسنده نیز ممکن است. بصورتی که مانند کد زیر، آدرس ها و یا ID نویسندگان مقاله، با یک ویرگول (,) از هم جدا شوند:

<meta name="article:author" content="https://www.facebook.com/johndoe, https://www.facebook.com/janedoe">

نکته: اگر نویسنده مقاله، در شبکه اجتماعی فیسبوک، حساب کاربری (ACCOUNT) نداشته باشد، می توانید به شکل زیر، متا تگ author را تعریف کنید:

<meta name='author' content='Ehsan Safari' />

شبکه اجتماعی فیسبوک، نام نویسنده مقاله را مانند تصویر زیر نمایش خواهد داد:

 

متا تگ نویسنده مقاله (The Article Author)

 

نتیجه گیری:

همانطور که بیان کردیم، این متاتگ ها به نوع مطالب صفحه (content type) بستگی دارد و بعنوان مثال اگر نوع صفحه video.movie باشد، استفاده از متا تگ های زیر بسیار می تواند سودمند باشد:

Og:video:actor و og:video:director و og:video:duration .

متاتگ های Open Graph در شبکه های اجتماعی دیگر نظیر LinkedIn و GooglePlus و… نیز مورد استفاده قرا می گیرد. اما همانطور که در مقالات قبل عرض کردیم، موسس و مبدع متا تگ های Open Graph شرکت فیسبوک می باشد و اولین بار در این شبکه اجتماعی مورداستفاده قرار گرفت.

در نهایت اگر مطالب وب سایت شما به شکل دلخواه تان به اشتراک گذاشته نمی شوند، می توانید از پلاگین Facebook Sharing Debugger برای یافتن و رفع خطای موجود استفاده کنید.

منابع:
https://developers.facebook.com/docs/reference/opengraph
https://www.w3.org/TR/rdfa-lite/

https://webdesign.tutsplus.com/
http://ogp.me/


برچسب‌ها:

استفاده از متاتگ ogتگ اپن گرافمتا تگ ogمتا تگ opengraphمتا تگ اپن گرافمتا تگ شبکه اجتماعیمتا تگ فیسبوکمتاتگ ogمتاتگ open graph

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

چهارده − چهار =