OpenGraph پروتکلی است که به صفحات وب اجازه می دهد تا به اشیا غنی در پلتفرم های رسانه های اجتماعی تبدیل شوند. در سال 2010 توسط فیس بوک به عنوان راهی برای استانداردسازی نمایش صفحات وب هنگام اشتراک گذاری در شبکه های رسانه های اجتماعی معرفی شد. پروتکل OpenGraph از تگ های متا OpenGraph برای تعریف ویژگی های یک صفحه وب مانند عنوان، توضیحات، تصویر، URL، نوع و موارد دیگر استفاده می کند.
هنگامی که یک صفحه وب شامل متا تگ های OpenGraph می شود، به پلتفرم های رسانه های اجتماعی داده های ساختاری در مورد محتوای صفحه ارائه می دهد. این به پلتفرمهای رسانههای اجتماعی امکان میدهد پیشنمایشهای دقیقتر و جذابتری از پیوندهای به اشتراک گذاشته شده را نمایش دهند. اطلاعات ارائه شده توسط متا تگ های OpenGraph را می توان برای ایجاد یک کارت پیش نمایش یا قطعه ای استفاده کرد که شامل عنوان، توضیحات و تصویر صفحه وب در هنگام اشتراک گذاری آن در پلتفرم هایی مانند فیس بوک، توییتر، لینکدین و موارد دیگر است.
پروتکل OpenGraph به طور گسترده ای پذیرفته شده است و توسط پلتفرم ها و وب سایت های رسانه های اجتماعی مختلف پشتیبانی می شود. با پیادهسازی متا تگهای OpenGraph در صفحات وب، صاحبان وبسایت میتوانند کنترل بیشتری بر نحوه نمایش محتوای خود در هنگام اشتراکگذاری در رسانههای اجتماعی داشته باشند. این کمک می کند تا اطمینان حاصل شود که پیوند به اشتراک گذاشته شده به طور دقیق و جذاب نمایش داده می شود، که می تواند نرخ کلیک و تعامل را افزایش دهد.
در اینجا 37 نکته در مورد متا تگ های OpenGraph آمده است:
- شامل نشانهگذاری ضروری HTML: برای استفاده از متا تگهای OpenGraph، باید آنها را در بخش
کد HTML صفحه وب خود قرار دهید. li>
- با برچسبهای ضروری اولیه شروع کنید: حداقل باید
og:title
،og: متا تگ
،og:url
وog:image
را تایپ کنید. - عنوان را مشخص کنید: تگ
og:title
عنوان صفحه وب شما را همانطور که باید هنگام اشتراک گذاری ظاهر شود، مشخص می کند. - تنظیم نوع: برچسب
og:type
نوع صفحه وب شما (مانند مقاله، وب سایت، ویدئو) را مشخص می کند. - ارائه URL: تگ
og:url
باید حاوی URL متعارف صفحه وب شما باشد. - تعریف تصویر: تگ
og:image
تصویری را مشخص میکند که هنگام اشتراکگذاری صفحه وب شما باید نمایش داده شود. - ابعاد تصویر را بهینه کنید: اطمینان حاصل کنید که تصویر شما با ابعاد توصیه شده برای هر پلتفرم رسانه اجتماعی مطابقت دارد تا از مشکلات برش یا مقیاس بندی جلوگیری شود.
- استفاده از تصاویر با کیفیت بالا: برای افزایش تعامل، تصاویر بصری جذاب و مرتبط انتخاب کنید.
- شامل متن جایگزین: یک برچسب
og:image:alt
اضافه کنید تا متن جایگزین برای افراد کم بینا ارائه کنید یا اگر تصویر بارگیری نشد. - افزودن توضیحات: تگ
og:description
خلاصه ای مختصر از محتوای صفحه وب شما ارائه می دهد. - از توصیفات دقیق استفاده کنید: مطمئن شوید که توضیحات بهطور دقیق محتوای صفحه وب شما را نشان میدهد تا انتظارات مناسبی داشته باشید.
- از طولانی شدن بیش از حد خودداری کنید: توضیحات را مختصر نگه دارید، زیرا ممکن است برخی از پلتفرمها پس از محدودیت کاراکتر معین، آنها را کوتاه کنند.
- محلیسازی پیادهسازی: برای تعیین از تگهای
og:locale
وog:locale:alternate
استفاده کنید زبان و زبان های جایگزین محتوای صفحه وب شما. - نام سایت را مشخص کنید: برچسب
og:site_name
را برای نمایش وبسایت یا نام تجاری خود در کنار پیوند مشترک وارد کنید. - قطعات غنی را فعال کنید: نشانهگذاری دادههای ساختیافته (مانند JSON-LD) را علاوه بر متا تگهای OpenGraph برای افزایش دید و ظاهر موتور جستجو در نتایج جستجو، پیادهسازی کنید.
- پیشنمایش با فیسبوک دیباگر: از ابزار OpenGraph Object Debugger فیسبوک برای پیشنمایش نحوه نمایش صفحه وب شما هنگام اشتراکگذاری در Facebook استفاده کنید.
- تأیید با اعتبارسنجی کارت توییتر: توییتر ابزار اعتبارسنجی کارت را برای اطمینان از اینکه متا تگهای OpenGraph شما برای اشتراکگذاری در پلتفرم خود به درستی پیادهسازی میشوند، ارائه میکند.
- از متا تگ های پویا استفاده کنید: متا تگ های OpenGraph پویا را بر اساس محتوای خاصی که در هر صفحه وب سایت شما به اشتراک گذاشته می شود، ایجاد کنید.
- انواع رسانه های مختلف را در نظر بگیرید: بسته به محتوای صفحه وب خود، می توانید از متا تگ های OpenGraph اضافی برای صدا، ویدیو، محصولات، کتاب و موارد دیگر استفاده کنید.
- پشتیبانی از چندین تصویر: از
og:image
به همراه تصاویر اضافی استفاده کنیدog:image:width
،og:image:height
، وog:image:alt تگ های
برای ارائه چندین گزینه تصویر برای پلتفرم های مختلف. - استفاده از URL های امن: اطمینان حاصل کنید که همه URL های ارائه شده در متا تگ های OpenGraph ایمن هستند (https://) برای جلوگیری از هشدارها یا مشکلات امنیتی.
- به روز رسانی پویا: اگر محتوای صفحه وب شما مرتباً تغییر می کند، متا تگ های OpenGraph را به صورت پویا ایجاد و به روز کنید تا وضعیت فعلی را منعکس کند.
- بهینه سازی موبایل را در نظر بگیرید: متا تگ های OpenGraph صفحه وب خود را برای دستگاه های تلفن همراه بهینه کنید تا از تجربه اشتراک گذاری سازگار و جذاب اطمینان حاصل کنید.
- تست بر روی پلتفرمهای مختلف: بررسی کنید که صفحه وب شما هنگام اشتراکگذاری در پلتفرمهای مختلف رسانههای اجتماعی چگونه نمایش داده میشود تا از ثبات در بین شبکهها اطمینان حاصل کنید.
- جلوگیری از تگ های تکراری: هر متا تگ OpenGraph باید در یک صفحه وب منحصر به فرد باشد. از تکرار یا تضاد برچسب ها اجتناب کنید.
- اضافه کردن متا تگهای Twitter Card: اگر میخواهید اشتراکگذاری در توییتر را بهینه کنید، متا تگهای Twitter Card را در کنار متا تگهای OpenGraph قرار دهید.
- از مقادیر نوع مناسب استفاده کنید: تگ
og:type
باید به طور دقیق محتوای صفحه وب شما (به عنوان مثال، مقاله، وبلاگ، وب سایت، ویدیو) را نشان دهد. ). - از طرحوارههای داده ساختاریافته استفاده کنید: متا تگهای OpenGraph را با سایر طرحوارههای داده ساختاریافته مانند Schema.org ترکیب کنید تا اطلاعات جامعی درباره محتوای صفحه وب خود ارائه دهید.
- متا تگ های خاص رسانه های اجتماعی را در نظر بگیرید: برخی از پلتفرم های رسانه های اجتماعی متا تگ های خاص خود را دارند (به عنوان مثال،
og:rich_pin
Pinterest،LinkedIn code class="inline">li:article
)، که میتواند در کنار برچسبهای OpenGraph برای تجارب اشتراکگذاری پیشرفته استفاده شود. - بهینه سازی برای Pinterest: از متا تگ های OpenGraph مخصوص Pinterest استفاده کنید (
og:pin_id
,og:pin_description< /code>) اگر میخواهید اشتراکگذاری را در پلتفرم Pinterest تقویت کنید.
- پیادهسازی شناسه برنامه فیسبوک: گنجاندن شناسه برنامه فیسبوک (
fb:app_id
) در متا تگهای OpenGraph به شما امکان میدهد به ویژگیها و اطلاعات بیشتری دسترسی داشته باشید. از طریق پلتفرم توسعه دهنده فیس بوک. - برچسبهای خاص ویدیو را در نظر بگیرید: اگر صفحه وب شما حاوی محتوای ویدیویی است، از
og:video
و برچسبهای مرتبط برای ارائه اطلاعات درباره منبع ویدیو استفاده کنید. مدت، و بیشتر. - استفاده از داده های ساختاریافته برای مقالات: برای مقالات خبری، علاوه بر متا تگ های OpenGraph، از نشانه گذاری داده های ساختار یافته مقاله استفاده کنید تا اطلاعات دقیق تری درباره نویسنده مقاله، تاریخ انتشار و موارد دیگر ارائه دهید. li>
- اجرای اشتراکگذاری محتوای پویا: اگر وبسایت شما دارای محتوای تولید شده توسط کاربر یا تولید پویا است، اطمینان حاصل کنید که متا تگهای OpenGraph بر این اساس تولید میشوند تا هر قسمت منحصر به فرد از محتوای اشتراکگذاری شده را به طور دقیق نشان دهند.
- پایش تجزیه و تحلیل: با نظارت بر تجزیه و تحلیل ارائه شده توسط پلتفرم های رسانه های اجتماعی یا با استفاده از ابزارهای شخص ثالث، عملکرد پیوندهای مشترک را ردیابی کنید.
- بهروز بمانید: مراقب بهروزرسانیها و تغییرات پروتکل OpenGraph باشید و پیادهسازی خود را بر این اساس تطبیق دهید.
- آزمایش و تکرار: به طور مداوم پیادهسازی متا تگ OpenGraph خود را آزمایش و اصلاح کنید تا ظاهر و تعامل پیوندهای مشترک را بهینه کنید.
3 انتشارات مرجع معتبر یا نام دامنه:
- توسعهدهنده فیسبوک - اسناد و منابع رسمی ارائهشده توسط Facebook برای پیادهسازی متا تگهای OpenGraph و درک استفاده از آنها در پلتفرم فیسبوک.
- توسعهدهنده توییتر - اسناد و منابع رسمی ارائهشده توسط Twitter برای پیادهسازی متا تگهای OpenGraph در کنار متا تگهای Twitter Card برای تجارب اشتراکگذاری پیشرفته در توییتر.
- Schema.org - یک پروژه مشترک بین موتورهای جستجوی اصلی (گوگل، بینگ، یاهو) با هدف ایجاد واژگان استاندارد برای نشانهگذاری دادههای ساختاریافته، از جمله طرحوارههای مرتبط با اجرای OpenGraph.
این منابع اطلاعات دقیق، دستورالعملها و بهترین روشها را برای پیادهسازی موثر متا تگهای OpenGraph ارائه میکنند.