Open Graph چیست و چه کاربردی دارد؟
ساخت محتوا و نگهداری وب سایت زمان زیادی می برد. چگونه می توانیم مطمئن شویم که محتوایمان در هنگام اشتراک گذاری در فیدهای اجتماعی در سراسر اینترنت برجسته است؟
Open Graph یک پروتکل اینترنتی است که در ابتدا توسط فیس بوک برای استاندارد کردن استفاده از ابرداده در یک صفحه وب برای نمایش محتوای یک صفحه ایجاد شد. در داخل آن، می توانید جزئیاتی به سادگی عنوان یک صفحه یا به اندازه مدت زمان یک ویدیو مشخص کنید. این قطعات همه در کنار هم قرار می گیرند تا نمایشی از هر صفحه جداگانه از اینترنت را تشکیل دهند.
متادیتا در وب سایت درج می شود تا یک قالب استاندارد برای کانال های مختلف رسانه های اجتماعی ایجاد کند. Open Graph در ابتدا توسط فیس بوک توسعه داده شد. با این حال، از آن زمان به بعد، توسط سایر کانال های رسانه های اجتماعی مانند توییتر، پینترست و لینکدین نیز پذیرفته شده است.
چرا به Open Graph نیاز داریم؟
محتوا در اینترنت معمولا با حداقل یک هدف در ذهن ایجاد می شود و آن اشتراک گذاری آن با دیگران است. اگر فقط آن را برای یکی از دوستانتان ارسال می کنید، ممکن است لزوما مهم نباشد، اما اگر می خواهید آن را به اشتراک بگذارید یا می خواهید در هر شبکه اجتماعی به اشتراک گذاشته شود، می خواهید این پیش نمایش به همان اندازه مؤثر باشد. این ویژگی به تشویق مردم کمک می کند تا محتوای شما را بررسی کنند و به ناچار روی محتوای شما کلیک کنند.
اگر از Open Graph استفاده نکنیم چه اتفاقی می افتد؟
اکثر شبکه های اجتماعی به طور پیش فرض سعی می کنند بهترین تلاش خود را برای ایجاد پیش نمایش محتوای شما انجام دهند. این امر اغلب اوقات به خوبی پیش نمی رود. اگر شما Open Graph را نداشته باشید، از برخی از ویژگی هایی که به متمایز شدن محتوای شما در کنار تعداد زیادی محتوای دیگر در اینترنت کمک می کنند، بهره مند نخواهید شد.
اصول استفاده از تگ Open Graph
متا تگ های Open Graph کدهایی هستند که در صفحات وب برای کنترل نحوه نمایش آن ها در شبکه های اجتماعی قرار می گیرند. متا تگ های Open Graph معمولا در بخش <head> صفحه وب قرار می گیرند. آن ها را می توان با علامت اختصاری “og:” در ابتدا تشخیص داد.
هنگام قرار دادن برچسب در وب سایت خود، باید آن را همراه با سایر متادیتاها در <head> قرار دهید. تگ استفاده شده یک تگ <meta> خواهد بود و باید شبیه الگوی زیر باشد:
|
1 |
<meta property="[NAME]" content="[VALUE]" /> |
بنابراین اگر بخواهیم یک مجموعه چهار تگ Open Graph اصلی برای وب سایت خود ایجاد کنیم، ممکن است به صورت زیر باشد:
|
1 2 3 4 |
<meta property="og:title" content="Colby Fayock - A UX Designer & Front-end Developer Blog" /> <meta property="og:type" content="website" /> <meta milk="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" /> <meta milk="og:url" content="https://www.namewebsite.com" /> |
چهار تگ گراف باز اصلی که برای هر صفحه لازم است عبارتند از:
- og:title
- og:type
- og:image
- og:url
این برچسب ها باید برای هر صفحه ای که ارائه می کنید منحصر به فرد باشد، به این معنی که برچسب های صفحه اصلی شما باید با صفحه مقاله سایت شما متفاوت باشد. در ادامه معنای هر یک از برچسب ها آورده شده است:
- og:title: عنوان صفحه شما است. معمولاً مانند تگ <title> صفحه وب شما است، مگر اینکه بخواهید آن را به شکل دیگری ارائه دهید.
- og:type: “نوع” وب سایتی که دارید.
- og:image: این برچسب، باید پیوندی به تصویری باشد که می خواهید محتوای شما را نشان دهد. باید تصویری با وضوح بالا باشد که شبکه های اجتماعی در فیدهای خود از آن استفاده کنند.
- og:url: این برچسب باید آدرس صفحه فعلی شما باشد.
پروتکل Open Graph دارای چند تغییر از نوع وب سایتی است که پشتیبانی می کند. این تغییرات شامل انواعی مانند وب سایت، مقاله یا ویدیو می شود. هنگام تنظیم تگ های گراف باز خود، باید ایده ای داشته باشید که کدام نوع، برای وب سایت شما منطقی تر است. اگر صفحه شما بر روی یک ویدیو متمرکز است، احتمالا استفاده از نوع “ویدیو” منطقی تر است. گراف باز برای هر صفحه منحصر به فرد است. بنابراین اگر بخواهیم یک نوع Open Graph برای وب سایت خود ایجاد کنیم، ممکن است در صفحه اصلی به شکل زیر باشد:
|
1 2 3 |
<!-- آدرس وب سایت --> <meta property=“og:type” content=”profile” /> |
شما می توانید رایج ترین انواع گراف باز را در صفحه وب 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 نیاز دارد.
تست تگ های Open Graph
خوشبختانه، شبکه های اجتماعی مورد علاقه، ابزارهایی را برای کمک به رفع اشکال برچسب های خود ارائه می دهند. هنگامی که مطمئن شدید که برچسب های شما واقعا در کد منبع وب سایت شما نشان داده می شوند، می توانید پیش نمایش اینکه وب سایت شما در فید چگونه به نظر می رسد را مشاهده کنید.
- توییتر: https://cards-dev.twitter.com/validator
- فیس بوک: https://developers.facebook.com/tools/debug
- پینترست: https://developers.pinterest.com/tools/url-debugger
Open Graph برای چه مواردی استفاده می شود؟
Open Graph عمدتا برای بهینه سازی اشتراک گذاری صفحات در یک وب سایت استفاده می شود. به جای نمایش تصویری که به طور خودکار تولید می شود با توضیحات، می توان از فراداده Open Graph استفاده کرد تا به پلتفرم رسانه های اجتماعی دقیقا نحوه نمایش یک صفحه وب مشترک را بگوید. بهینه سازی نمایش در رسانه های اجتماعی به نوبه خود می تواند تاثیر مثبتی بر ترافیک وب سایت داشته باشد.
اگر محتوا به وضوح توسط کاربر طبقه بندی شود و تصویر یا ویدیوی جذابی ارائه شود، می توان تعامل کاربر با محتوا را بهبود بخشید و CTR بالاتری به دست آورد. همچنین، با پیاده سازی متا تگ های Open Graph، کانال های رسانه های اجتماعی می توانند محتوای یک صفحه وب را بهتر درک کنند. بنابراین با استفاده از گراف باز پردازش محتوا برای موتورهای جستجو آسان تر می شود. این ویژگی به کانال های رسانه های اجتماعی اجازه می دهد تا محتوا را برای مخاطبان مرتبط تر تبلیغ کنند.
پشتیبانی شبکه های رسانه های اجتماعی از Open Graph
پلتفرم های رسانه های اجتماعی متعددی Open Graph را پیاده سازی کرده اند که به صاحبان سایت اجازه می دهد بر نحوه نمایش صفحات وب خود در هنگام اشتراک گذاری تاثیر بگذارند. آن ها به طور کلی از یک دستور اصلی پیروی می کنند. با این حال، برخی از کانال های رسانه های اجتماعی از برچسب های اضافی برای عملکردهای خاص کانال استفاده می کنند.
بزرگترین شبکه های اجتماعی که در حال حاضر با این پروتکل کار می کنند، فیسبوک، لینکدین، پینترست و توییتر هستند. بنابراین، درک مفهوم Open Graph برای سئو و بازاریابی بسیار مهم است.
ارتباط Open Graph با سئو
Open Graph مستقیما بر سئوی وب سایت تاثیر نمی گذارد، اما می تواند بر نتایج بهینه سازی خارج از صفحه تاثیر بگذارد. با موثرتر کردن پست های رسانه های اجتماعی که به یک وب سایت پیوند دارند، می توان نرخ کلیک را بهبود دهید و تعداد اشتراک گذاری ها را افزایش داد. علاوه بر این، Open Graph پلتفرم های رسانه های اجتماعی را قادر می سازد تا محتوای یک صفحه را بهتر درک کنند و در نتیجه پست را به گروه هدف مناسب نمایش دهند. می توان به راحتی تگ های گراف باز را در وردپرس با استفاده از افزونه Yoast اضافه کرد.
چنانچه قصد یادگیری و آموزش افزونه یواست سئو را دارید، می توانید از آموزش های رایگان آکادمی کلیک اول استفاده کنید.
