اپن گراف (Open Graph) چیست و تاثیر آن در سئو سایت؟

آیا میدانید اپن گراف (Open Graph) چیست؟ یا تابه‌حال از آن استفاده کرده‌اید؟ به‌صورت کلی با رشد روزافزون دنیای فنّاوری، نیازهای کاربران نیز دائماً گسترش می‌یابد و همین شرکت‌های مختلف را مجاب می‌کند تا به سمت ارائه ویژگی‌های جدید بروند.

وب‌سایت فیس‌بوک در سال 2010 که دارای کاربران زیادی بود، برای اینکه آنان بتوانند به‌راحتی محتوای وب‌سایت‌های موردنظرشان را منتشر کنند، متا تگ‌های اپن گراف را معرفی کرد؛ به کمک آنان، امروزه اگر شما محتوایی را در شبکه‌های اجتماعی به اشتراک بگذارید (صرفاً با آدرس آن صفحه)، به‌صورت خودکار عنوان و تصویر شاخص مطلب شناخته‌شده و به افراد نمایش داده می‌شود.

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

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

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

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

چرا باید از اپن گراف استفاده کنیم؟

همان‌طور که میدانید اصلی‌ترین چیزی که در دنیای اینترنت وجود دارد محتواها هستند و بدون آنان عملاً وب معنایی ندارد؛ بنابراین وب‌سایت‌های مختلف دائماً سعی می‌کنند با تولید محتواهای در سبک‌های مختلف و رفع نیاز کاربران، به خواسته‌های خودشان برسند.

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

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

اگر اپن گراف نداشته باشیم چه اتفاقی رخ می‌دهد؟

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

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

از طرفی دیگر، این به کاربران شما نشان می‌دهد که تا چه حدی برایشان اهمیت قائل هستید و افرادی که از این طریق با شما آشنا می‌شوند، در مدت‌زمان کمتری به مشتریان شما تبدیل خواهند شد.

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

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

برای هر صفحه، یکسری تگ‌های کلی وجود دارند که شامل og:title, og:type, og:image و og:url می‌شوند. در هر صفحه‌ای که تولید می‌کنید، باید این تگ‌ها را به‌صورت یونیک مورداستفاده قرار دهید؛ یعنی اگر محتوای صفحه شما راجع به آموزش سئو است، نباید اپن گراف عنوان را با موضوع دیگری پرکنید.

در زیر معنی هرکدام از تگ‌ها بالا را برایتان آورده‌ایم:

• Og:title: همان عنوان صفحه شماست که معمولاً با تگ تایتل یکسان است. بهتر است در این بخش متن جذابی بنویسید تا کاربرانی که آن را مشاهده می‌کنند ترغیب به کلیک شوند.
• Og:type: طبیعتاً تمامی ما یک نوع محتوا نداریم و سبک‌کاری هرکدام دارای تفاوت‌هایی است. در این بخش شما باید مشخص کنید که وب‌سایتتان در چه زمینه‌ای در حال فعالیت است.
• Og:image: یکی از مهم‌ترین بخش‌هایی که هنگام اشتراک‌گذاری یک مطلب در شبکه‌های اجتماعی به کاربران نمایش داده می‌شود، تصویر شاخص آن است. شما در این تگ اپن گراف باید تصویری که دوست دارید در محتوایتان نمایش داده شود را تعیین کنید.
• Og:url: همان‌طور که از نام آن نیز مشخص است، در این قسمت آدرس صفحه موردنظر را قرار می‌دهید تا در شرایط لزوم به کاربران نمایش داده شود.

مشخص‌کننده نوع سایت

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

در بسیاری از موارد ممکن است شما تمایلی به انتخاب دسته‌بندی نداشته باشید؛ در چنین شرایطی کافی است صرفاً از نوع محتوا وب‌سایت استفاده کنید.

توجه داشته باشید که این انتخاب برای هر صفحه کاملاً منحصربه‌فرد است و حتماً نباید اگر صفحه اصلیتان دارای دسته‌بندی «وب‌سایت» است، بقیه صفحات نیز به همین صورت باشند.

دیگر اپن گراف‌های کاربردی و مهم

حالا که با اپن گراف‌های اصلی آشنا شدید و فهمیدید که چه تأثیری روی وب‌سایت ما می‌گذارند، باید به سراغ بقیه تگ‌ها برویم تا با کمک آنان بتوانید ظاهر بهتری در شبکه‌های اجتماعی برای خودتان به وجود آورید.

• Og:description: شبیه همان تگ متا دیسکریپشن است که در نتایج جستجو نمایش داده می‌شود و در آن‌یک شرح کوتاه از صفحه شما قرار می‌گیرد.
• Og:locale: در بسیاری از موارد ممکن است ما به چند زبان مختلف در وب‌سایت خودمان مقاله داشته باشیم و به همین منظور باید از این اپن گراف استفاده کنیم تا زبان صفحه را تعیین نماییم.
• Og:site_name: طبیعتاً سایت که در آن به تولید محتوا می‌پردازید دارای نام مشخصی است؛ ازاین‌رو در این تگ باید این نام را لحاظ کنید تا درجاهایی که لازم است به کاربران نمایش داده شود.
• Og:video: این قسمت برای افرادی است که لینک ویدیوهایی رادارند که با محتوایشان مرتبط است؛ به‌عنوان‌مثال فرض کنید در یوتوب به تولید محتوا می‌پردازید و حالا قصد دارید لینکی به آن بدهید.

کدام شبکه‌های اجتماعی از اپن گراف مخصوص خود استفاده می‌کنند؟

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

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

شما می‌توانید به کمک تگ‌های twitter:card اطالاعات موردنظرتان را در این شبکه اجتماعی نمایش دهید. در زیر این انواع این تگ‌ها را برایتان آورده‌ایم:

• Summary
• summary_large_image
• app
• player

به کمک تگ‌های بالا شما می‌توانید نمایش نوشته‌هایتان در توییتر را بسیار چشم‌نواز کنید؛ به‌عنوان‌مثال اگر در summary_large_image تصویری انتخاب کنید، آنان در این شبکه اجتماعی با بالاترین رزولوشن ممکن نمایش داده می‌شوند که برای کاربران جذابیت‌های زیادی را ایجاد می‌کند.

تصاویر در اپن گراف

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

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

چطور اپن گراف‌های خودمان را تست کنیم؟

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

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

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

جمع‌بندی و نتیجه گیری

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

در این مقاله از سایت مهدی عراقی سعی کردیم بگوییم اپن گراف چیست و در ادامه فواید استفاده از آنان را برایتان آورده‌ایم.

نظر شما چیست؟ آیا تابه‌حال از تگ‌های اپن گراف استفاده کرده‌اید؟ تأثیرات آن برایتان چه بوده است؟ خیلی خوشحال می‌شویم نظراتتان را در بخش کامنت‌ها بنویسید.