خانهوبلاگراه اندازی سایتمتا تگ شبکه های اجتماعی Open Graph و Twitter Cards
۱۴۰۰/۷/۶
6310
متا تگ شبکه های اجتماعی Open Graph و Twitter Cards

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

استفاده از متا تگ ها در عصر امروز با تغییرات فراوانی که در گوگل شکل داده شده است یک الزام محسوب می شود که باید حتما رعایت نمود.

متا تگ چیست؟

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

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

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

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

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

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

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

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

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

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

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

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

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

سخن آخر

تا چند سال گذشته شاید استفاده از متا تگ ها بسیار الزامی نبوده است و یک امتیاز مثبت برای وب سایت شما محسوب می شد اما با گذشت زمان و همچنین تغییرات زیاد گوگل این موضوع یک الزام می باشد تا شما در heading سایت خود از این متا تگ ها استفاده نمایید و سعی کنید با سوشیال ها ارتباط بهتر و موثر تری برقرار نمایید.

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

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

اشتراک گذاری در شبکه های اجتماعی
پایدار سامانه

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

نظرات کاربران

Omid.Developer

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

۱۳۹۹/۷/۱۲

Agahi

هوالرزاق بسیار عالی بود فقط در مورد opengraph برای مواردی که head سایت برای تمام صفحات تحت تاثیر head صفحه Master باشه کدها رو باید چگونه نوشت ؟ یعنی تمام صفحات سایت تحت یک head واحد باشه طراح قالب سایت برای افزایش سرعت سایت برای هر صفحه یک head مجزا ننوشته و تمام سایت تحت یک head واحد قرار داد ممنون

۱۳۹۹/۶/۱۶

vuarnet

سپاس از مقالات آموزنده و مفیدتون در طراحی وب سایت

۱۳۹۸/۷/۸

!

۱۳۹۷/۱۲/۱۲

Ali Nia

یعنی اگه متا تک های شبکه اجتماعی رو درست تعریف کنیم اینک هایی که توی فیس بوک و توییتر به اشتراک میذاریم خودش عکس و متن و اینارو درست نشون میده؟ ای کاش یه مقاله هم از آموزش تعریف متا تک شبکه اجتماعی بذارید توضیحات کامل بود و تقریبا فهمیدم چی شد اما آموزش هم اگه باشه ممنون میشم

۱۳۹۷/۸/۸

پرسشگر

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

۱۳۹۷/۷/۱

رضاییان

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

۱۳۹۷/۶/۲۸

زبرا

آموزش خیلی خوبی بود

۱۳۹۷/۶/۱۹

آموزشگاه زبان اکسیر

باز هم مطالب وبسایت شمارو پیگیری و استفاده خواهم کرد

۱۳۹۷/۵/۱۵

نیلینگ

محتوای سایتتون فوق العادس موفق باشید

۱۳۹۷/۵/۱

دیدگاه شما

ثبت