طراحی سایت پایدار

متا تگ شبکه های اجتماعی Open Graph و Twitter Cards

متا تگ چیست؟

برای آشنایی با meta tag و کاربرد متا تگ ها و اینکه چگونه کار می کنند و به چه دردی می خورند قبلا در مقاله ای آموزشی توضیح دادیم. اگر تعریف متا تگ و مفهوم meta tag  را نمی دانید پیشنهاد می کنیم این مقاله را موقتا کنار بگذارید و مقاله آموزشی در بخش سئو و بهینه سازی سایت با عنوان متا تگ چیست و تائیر آن در سئو چیست را مطالعه بفرمائید و بعد به این مقاله برگردید و ادامه دهید.

فزض را بر این می گذاریم که با meta tag آشنایی دارید و می دانید که از متا تگ ها در کجای سایت و چگونه استفاده می کنید.

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

متا تگ های شبکه های اجتماعی

جالب است بدانید که سایت هایی مثل فیسبوک و توییتر برای خود متا تگ های بخصوصی معرفی کرده اند که برنامه نویس یا طراح سایت می تواند این متا تک ها را در سایت خود استفاده کند تا تا در شبکه های اجتماعی با دیگر سایت ها متفاوت شوند.

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

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

شما پست خود را بدین صورت در فیسبوک کپی یا تایپ می کنید:

قل از استفاده از متا تگ open graph
قل از استفاده از متا تگ open graph

و در انتها پست شما بدین شکل به نمایش گذاشته می شود، فیسبوک با خواندن تگ های Open Graph می تواند پست شما را ترجمه و پیش نمایش آن را نمایش دهد:

بعد از استفاده open graph meta tag
بعد از استفاده open graph meta tag

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

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

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

هدفمان از این مطلب آشنایی کلی با این فرا داده ها بود و حتما در مورد جزئیات تگ های Open Graph  و همچنین متا های Twitter Cards باید مطلبی تهیه کنیم و تمامی تگ هی آن ها را بررسی نمائیم، همچنین در مورد نحوه اعتبار سنجی و اینکه آیا متا های شما درست نوشته اند هم ابزاری وجو دارد که در آینده به آن ها می پردازیم.

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

این مطلب را به اشتراک بگذارید:

پایدار سامانه

ارائه دهنده خدمات طراحی سایت، طراحی فروشگاه اینترنتی، بهینه سازی سایت و سئو، سامانه های تحت وب، توسعه و تولید نرم افزار، پورتال و اتوماسیون و نرم افزارهای مالی و حسابداری

۱۱ نظر