Open graph چیست و چه کاربردی دارد؟

تیم تحریریه مجید حسینی

سه‌شنبه 6 دی 1401
مدت زمان مطالعه: 6 دقیقه

ساخت محتوا و نگهداری وب سایت زمان زیادی می برد. چگونه می توانیم مطمئن شویم که محتوایمان در هنگام اشتراک گذاری در فیدهای اجتماعی در سراسر اینترنت برجسته است؟

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

چرا به Open graph نیاز داریم؟

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

اگر Open graph را نداشته باشم چه اتفاقی می افتد؟

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

گراف باز را با اصول اولیه شروع کنید:

چهار تگ گراف باز اصلی که برای هر صفحه لازم است عبارتند از:

og:title،
og:type
og:image
og:url

این برچسب ها باید برای هر صفحه ای که ارائه می کنید منحصر به فرد باشد، به این معنی که برچسب های صفحه اصلی شما باید با صفحه مقاله سایت شما متفاوت باشد. در ادامه معنای هر یک از برچسب ها آورده شده است:

og:title: عنوان صفحه شما است. معمولاً مانند تگ <title> صفحه وب شما است، مگر اینکه بخواهید آن را به شکل دیگری ارائه دهید.
og:type: “نوع” وب سایتی که دارید.
og:image: این برچسب، باید پیوندی به تصویری باشد که می‌خواهید محتوای شما را نشان دهد. باید تصویری با وضوح بالا باشد که شبکه های اجتماعی در فیدهای خود از آن استفاده کنند.
og:url: این برچسب باید آدرس صفحه فعلی شما باشد.

هنگام قرار دادن برچسب در وب سایت خود، باید آن را همراه با سایر متادیتاها در <head> قرار دهید. تگ استفاده شده یک تگ <meta> خواهد بود و باید شبیه الگوی زیر باشد:

1	<meta property=“[NAME]” content=“[VALUE]” />

بنابراین اگر بخواهیم یک مجموعه چهار تگ Open graph اصلی برای وب سایت خود ایجاد کنیم، ممکن است به صورت زیر باشد:

1

2

3

4

پروتکل Open graph دارای چند تغییر از نوع وب سایتی است که پشتیبانی می کند. این تغییرات شامل انواعی مانند وب سایت، مقاله یا ویدیو می شود. هنگام تنظیم تگ های گراف باز خود، باید ایده ای داشته باشید که کدام نوع، برای وب سایت شما منطقی تر است. اگر صفحه شما بر روی یک ویدیو متمرکز است، احتمالاً استفاده از نوع “ویدیو” منطقی تر است. گراف باز برای هر صفحه منحصر به فرد است. بنابراین اگر بخواهیم یک نوع Open graph برای وب سایت خود ایجاد کنیم، ممکن است در صفحه اصلی به شکل زیر باشد:

1

2

3

<!—آدرس وب سایت —>

شما می توانید رایج ترین انواع گراف باز را در صفحه وب Open graph به آدرس زیر، پیدا کنید: https://ogp.me/#types

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

og:description: شرحی از صفحه شما و مشابه og:title است. ممکن است این تگ <meta type=“description”> وب سایت شما باشد، مگر اینکه بخواهید آن را به شکل دیگری ارائه دهید.
og:locale: اگر می‌خواهید تگ‌های خود را بومی‌سازی کنید، احتمالاً منطقی است که محلی را نیز لحاظ کنید. قالب زبان_TERRITORY است که پیش‌فرض en_US است.
og:site_name: نام کلی وب سایتی که محتوای شما در آن قرار دارد. اگر در یک صفحه وبلاگ هستید، ممکن است عنوانی با عنوان آن پست وبلاگ داشته باشید، جایی که site_name نام وبلاگ شما خواهد بود.
og:video: ویدیویی دارید که از محتوای شما پشتیبانی کند؟ در این قسمت، فرصتی برای گنجاندن آن ویدئو وجود دارد. با استفاده از این برچسب پیوندی به ویدیوی خود اضافه کنید.

توییتر و سایر شبکه های اجتماعی با استفاده از Open graph:

اکثر شبکه‌های اجتماعی از اصول استانداردهای گراف باز پیروی می‌کنند، اما تعداد کمی از آن‌ها افزونه خود را نیز برای کمک به شخصی‌سازی ظاهر خود دارند. به عنوان مثال، توییتر به شما اجازه می دهد تا twitter:card را مشخص کنید. نوعی کارت است که می توانید هنگام نمایش وب سایت خود از آن استفاده کنید. این به شما کمک می کند تا نحوه استفاده از پیوندهای خود را در فید آنها انتخاب کنید. برای مثال ummary_large_image را انتخاب کنید، توییتر پیوندهای شما را با تصاویری با وضوح بالا نشان می‌دهد تا زمانی که آن را در تگ og:image ارائه دهید. در ادامه برخی از ارجاعات سریع و نحوه استفاده از برچسب های نمودار باز در برخی از سایت های رسانه های اجتماعی آورده شده است:

توییتر: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
فیس بوک: https://developers.facebook.com/docs/sharing/webmasters/
پینترست: https://developers.pinterest.com/docs/rich-pins/overview/؟
لینکدین: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

تصاویر در Open graph:

در حالی که افزودن تصویر خود به‌عنوان og:image اغلب باید به اندازه کافی باشد، گاهی اوقات نمایش صحیح تصویر شما می‌تواند چالش برانگیز باشد. اگر به نظر می رسد که با مشکل مواجه شده اید، استاندارد نمودار باز شامل چند برچسب تصویر مانند og:image:url در مقابل og:image:secure_url و همچنین og:image:width و og:image:height است. مطمئن شوید که تمام یادداشت‌ها و مثال‌های موجود در اسناد نمودار باز را دنبال می‌کنید. علاوه بر این، برخی از شبکه‌های اجتماعی نیازمند تصویر هستند. برای مثال توییتر به نسبت 2:1 با حداقل اندازه 300×157 و حداکثر اندازه 4096×4096 که کمتر از 5 مگابایت است و فرمت های JPG، PNG، WEBP یا GIF نیاز دارد.

تست تگ های نمودار باز:

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

توییتر: https://cards-dev.twitter.com/validator
فیس بوک: https://developers.facebook.com/tools/debug/
پینترست: https://developers.pinterest.com/tools/url-debugger/

گراف باز برای چه مواردی استفاده می شود؟

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

اگر محتوا به وضوح توسط کاربر طبقه بندی شود و تصویر یا ویدیوی جذابی ارائه شود، می توان تعامل کاربر با محتوا را بهبود بخشید و CTR بالاتری به دست آورد. همچنین، با پیاده‌سازی متا تگ‌های Open graph، کانال‌های رسانه‌های اجتماعی می‌توانند محتوای یک صفحه وب را بهتر درک کنند. بنابراین با استفاده از گراف باز پردازش محتوا برای موتورهای جستجو آسان تر می شود. این ویژگی به کانال های رسانه های اجتماعی اجازه می دهد تا محتوا را برای مخاطبان مرتبط تر تبلیغ کنند.

متا تگ های Open graph:

متاتگ های Open graph کدهایی هستند که در صفحات وب برای کنترل نحوه نمایش آنها در شبکه های اجتماعی قرار می گیرند. متا تگ های Open graph معمولاً در سر صفحه وب قرار می گیرند. آنها را می توان با علامت اختصاری “og:” در ابتدا تشخیص داد.

شبکه های رسانه های اجتماعی که از Open graph پشتیبانی می کنند:

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

ارتباط Open graph با سئو:

Open graph مستقیماً بر سئوی وب سایت تأثیر نمی گذارد، اما می تواند بر نتایج بهینه سازی خارج از صفحه تأثیر بگذارد. با مؤثرتر کردن پست‌های رسانه‌های اجتماعی که به یک وب‌سایت پیوند دارند، می‌توان نرخ کلیک را بهبود بخشید و تعداد اشتراک‌گذاری‌ها را افزایش داد. علاوه بر این، Open graph پلتفرم‌های رسانه‌های اجتماعی را قادر می‌سازد تا محتوای یک صفحه را بهتر درک کنند و در نتیجه پست را به گروه هدف مناسب نمایش دهند. می توان به راحتی تگ های گراف باز را در وردپرس با استفاده از افزونه Yoast اضافه کرد.