آموزش سئو

آنچه شما باید در مورد Open Graph Meta Tags برای تسلط کامل بر فیس بوک و توییتر بدانید

ژوئن 24, 2021

بازاریاب ها محتوای زیادی ایجاد می کنند. بله ، محتوا پادشاه است ، اما آن پادشاه بدون پیروان ناتوان است.

بنابراین ، اولین چیزی که به ذهن شما خطور می کند وقتی می خواهید با ارسال جدید و جذاب وبلاگ خود به مخاطبان گسترده تری دسترسی پیدا کنید؟

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

متا تگ های نمودار باز برای انجام این کار طراحی شده اند. اما آنها چه هستند ، چرا اهمیت دارند و – مهمتر از همه – چگونه از آنها استفاده می کنید؟

نمودار باز چیست و چرا ایجاد شده است؟

فیس بوک معرفی کرد Open Graph در سال 2010 برای ایجاد ادغام بین فیس بوک و سایر وب سایت ها با اجازه دادن به پست ها برای تبدیل شدن به اشیا غنی با عملکرد مشابه سایر اشیا objects فیس بوک

به زبان ساده ، با کنترل بیشتر بر نحوه انتقال اطلاعات از وب سایت شخص ثالث به فیس بوک هنگام به اشتراک گذاری صفحه (یا پسندیدن و غیره) ، به بهینه سازی پست های فیس بوک کمک می کند.

برای امکان پذیر ساختن این اطلاعات ، اطلاعات از طریق برچسب های متا Open Graph در اینجا ارسال می شود بخشی از کد وب سایت

سر HTML برای برچسب های متا نمودار باز

در حال حاضر ، سایر سایت های رسانه های اجتماعی نیز از مزیت برچسب های اجتماعی استفاده می کنند.

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

چرا بازاریابان باید به Open Graf اهمیت دهند

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

از همه مهمتر: برچسب های متا نمودار باز می توانند تأثیر زیادی در تبدیل و نرخ کلیک داشته باشند.

آیا تاکنون پیوندی را در فیس بوک به اشتراک گذاشته اید تا دریابید که این تصویر کوچک وجود ندارد یا تصویری کاملاً متفاوت از آنچه انتظار داشتید وجود دارد؟

دانستن کمی در مورد برچسب های Open Graph می تواند به شما کمک کند تا با این مشکلات کنار بیایید و بازاریابی شبکه های اجتماعی خود را بهبود ببخشید.

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

درک برچسب های متا نمودار افتتاحیه Facebook

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

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

og: عنوان

همانطور که حدس می زنید ، عنوان محتوای خود را اینگونه تعریف می کنید. این کار با هدفی مشابه برچسب عنوان متای سنتی در کد شما انجام می شود. در حقیقت ، اگر فیس بوک برچسب og: title را در صفحه شما پیدا نکرد ، به جای آن از عنوان متا استفاده می کند.

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

محدودیتی در تعداد کاراکترها وجود ندارد ، اما بهتر است بین 60 تا 90 نویسه باقی بمانید. اگر عنوان شما بیش از 100 نویسه باشد ، فیس بوک آن را فقط به 88 کاهش می دهد!

مثال:

og: آدرس

این روش شما را تنظیم می کند ابتدایی URL صفحه ای که به اشتراک می گذارید. این بدان معنی است که شما یک صفحه را تعریف می کنید که تمام اشتراک های شما به آن می روند. اگر اتفاقاً بیش از یک URL برای همان محتوا داشته باشید (مثلاً با استفاده از پارامترها) مفید است. نکته مهم: URL ارائه شده در خبرخوان فیس بوک نشان داده نمی شود ، فقط دامنه قابل مشاهده است.

مقاله مرتبط  چه مواردی ، مثال ها ، نکات و بهترین روش ها است

مثال:

og: نوع

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

مبتنی بر وب:

سرگرمی:

محل:

مردم:

کسب و کار:

می توانید لیست کاملی از انواع آن را مشاهده کنید اینجا.

این برچسب در صورتی مهم است که صفحه شما دکمه “پسندیدن” داشته باشد و یک شی object واقعی را نشان دهد (مانند کتاب یا فیلم). این تعیین می کند که محتوای شما در مورد علاقه کاربر به نمایه وی در صورت “پسندیدن” از آن نمایش داده شود.

در بیشتر موارد ، شما از مقدار “وب سایت” استفاده خواهید کرد ، زیرا آنچه به اشتراک می گذارید پیوندی به یک وب سایت است. در واقع ، اگر یک نوع را تعریف نکنید ، Facebook به طور پیش فرض آن را به عنوان “وب سایت” می خواند.

مثال:

og: شرح

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

برخلاف برچسب متای توصیف معمولی ، بر SEO شما تأثیر نمی گذارد. (بنابراین ، وقت زیادی را صرف این نكنید كه چطور می توانید در كلمات كلیدی كلاهبرداری كنید.) با این حال ، بهتر است آن را جذاب كنید زیرا می خواهید افراد روی آن كلیك كنند

شما به تعداد کاراکتر محدود نمی شوید ، اما بهتر است از حدود 200 حرف استفاده کنید. در برخی موارد ، بسته به یک پیوند / عنوان / دامنه ، فیس بوک می تواند حداکثر 300 حرف را نمایش دهد ، اما من پیشنهاد می کنم هر چیزی بالاتر از 200 را به عنوان چیز اضافی در نظر بگیرید.

مثال:

og: تصویر

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

مطمئن شوید که تصویر og: تصویری را انتخاب کرده اید ، در غیر این صورت فیس بوک احمقانه ای مانند یک بنر تبلیغاتی ناخواسته که از صفحه خراشیده شده است نشان می دهد یا هیچ چیز دیگر (مانند شکل زیر). ما قطعاً چنین چیزی را نمی خواهیم!

FB بدون تصویر بند انگشتی دارای برچسب های متا گرافیکی باز است

لازم به یادآوری است که اگر صفحه شما ساکن است و از هیچ نوع سیستم مدیریت محتوا (CMS) (مانند وردپرس) استفاده نمی کنید ، باید og: image را به صورت دستی برای هر یک از صفحات خود تغییر دهید.

اگر وب سایت شما با CMS کنترل می شود و افزونه مربوطه را نصب کرده اید ، برچسب های og: image به طور خودکار برای هر صفحه اختصاص می یابد. پایین لیست لیست ها را جستجو کنید.

بیشترین وضوح تصویر توصیه شده برای تصویر OG 1200 پیکسل در 627 پیکسل (نسبت 1.91 به 1) است. در این اندازه ، تصویر بند انگشتی شما بزرگ خواهد بود و از جمعیت متمایز می شود. فقط از حد مجاز 5 مگابایت بیشتر نکنید.

مثال FB نمودار کامل باز من را نشان دهید

اگر از تصویری استفاده کنید که کوچکتر از 400 پیکسل در 209 پیکسل است ، به عنوان یک تصویر کوچک بسیار کوچک ارائه می شود. در هیچ کجا به این اندازه چشم نواز نیست.

تصویر کوچک کوچک FB برای برچسب های متا نمودار باز

بخاطر داشته باشید که تصویری که به عنوان تصویر Open Graph استفاده می کنید می تواند با آنچه در صفحه خود دارید متفاوت باشد.

چرا از این فرصت استفاده نمی کنید و حتی بیشتر برجسته می شوید؟

به عنوان مثال ، اگر عنوان شما خوب است ، اما تصویری که از آن استفاده می کنید خیلی هیجان انگیز نیست (اینفوگرافیک یا خوش چهره و غیره نیست) ، استفاده از یک تصویر با یک خط یا دو نسخه خوب را در نظر بگیرید (به مثال مراجعه کنید در زیر)

مقاله مرتبط  21 نمونه شگفت انگیز طراحی وبلاگ برای الهام بخشیدن به شما

اگر این کار را انجام دهید باید یک نکته را به خاطر بسپارید: متن خود را ببندید ، یا مهمترین قسمت آن را در وسط تصویر قرار دهید. این مهم است زیرا فیس بوک طرف عکسهای کوچک را کوتاه می کند.

تصویر کوچک FB با محوریت متن متن گراف باز متمرکز شده است

مثال:

برچسب های نمودار باز پیشرفته فیس بوک

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

  • og: locale – زبان را تعریف می کند ، انگلیسی آمریکایی به طور پیش فرض است
  • og: site_name – اگر صفحه (شی) شما به اشتراک می گذارید بخشی از یک شبکه بزرگتر است
  • og: audio or og: video – برای افزودن فایلهای صوتی یا تصویری اضافی به شی your شما
  • fb: app_id – برای پیوند دادن به یک برنامه فیس بوک (به عنوان مثال ، نظرات FB) با شی

برچسب های نمودار باز خود را بررسی کنید

برای سهولت زندگی ، فیس بوک ابزاری را ایجاد کرده است به نام اشتراک اشکال زدایی. این دو ویژگی بسیار مفید دارد.

اول ، وقتی پیوندی را که می خواهید بررسی کنید تایپ می کنید ، در صورت وجود هرگونه خطا و پیشنهادی برای برچسب های OG ، آن را برمی گرداند. همچنین می توانید بررسی کنید که تصویر og چگونه است ، توصیف شما چیست و غیره.

دوم ، حافظه پنهان فیس بوک را پاک می کند. این را تصور کنید: شما پیوندی به فیس بوک ارسال می کنید ، اما بعد از آن یک اشتباه در تصویر بند انگشتی مشاهده می کنید ، بنابراین به سایت خود باز می گردید و برچسب های OG را تنظیم می کنید ، و دوباره آن را در فیس بوک ارسال می کنید.

احتمالاً هیچ اتفاقی نمی افتد. تصویر کوچک ثابت خواهد ماند. این به دلیل حافظه نهان است. Facebook Shab Debugger حافظه پنهان را در پیوندهای شما تازه می کند ، بنابراین به یاد داشته باشید که هر بار از آن استفاده کنید.

اشکال زدایی شی Facebook فیس بوک با باز کردن برچسب های متا نمودار

نمودارهای متا نمودار را برای توییتر باز کنید: کارتهای توییتر

مانند برچسب های Open Graph Facebook ، کارت های Twitter به شما امکان می دهد از میان توییت ها متمایز شوید. آنها اجازه می دهد برخی از مطالب اضافی از توییت شما با 140 کاراکتر تولید شود.

این به صورت خودکار در فیدهای افراد نشان داده نمی شود ، اما کمی دکمه “مشاهده خلاصه” را در زیر توییت اضافه می کند.

مثالهای متا تگ نمودار باز Evolero 2 twitter

وقتی روی آن کلیک می کنید:

برچسب های کارت Twitter به عنوان مثال برچسب های متا نمودار باز است
برچسب های کارت Twitter به عنوان مثال برچسب های متا نمودار باز است

کلیک کردن امری وسوسه انگیز است و خلاصه مفیدی از صفحه به اشتراک گذاشته شده – Twitter Card را ارائه می دهد. جای تعجب است که بسیاری از سایت ها از این برچسب ها استفاده نمی کنند. این یک فرصت بزرگ برای برجسته کردن توییت های شما در خبرهای شلوغ توییتر است.

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

توییتر: کارت

این برچسب مورد نیاز به روشی مشابه og: type کار می کند. این نوع محتوایی را که به اشتراک می گذارید توصیف می کند. 7 گزینه برای انتخاب وجود دارد: خلاصه ، عکس ، فیلم ، محصول ، برنامه ، گالری و خلاصه “نسخه بزرگ”.

بسته به نوع محتوایی که انتخاب می کنید ، پیوند موجود در پایین توییت شما تغییر می کند. اگر این برچسب تنظیم نشده باشد ، Twitter به طور پیش فرض پیوند شما را به عنوان “خلاصه” می خواند ، “خلاصه نمایش” را برای خلاصه ها دریافت کنید.

مثال:

توییتر: عنوان

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

مقاله مرتبط  نحوه خرید نام دامنه در 4 مرحله آسان

مثال:

توییتر: توضیحات

با استفاده از این برچسب ، یک صفحه توصیفی برای صفحه ای که به اشتراک می گذارید بنویسید. مانند برچسب های Open Graph ، روی کلمات کلیدی تمرکز نکنید زیرا برای SEO شما مهم نیستند. یک نسخه جذاب ایجاد کنید که به راحتی توئیت و عنوان شما را تکمیل کند. توییتر این قسمت را به 200 حرف محدود می کند.

مثال:

توییتر: url

این مجموعه URL متعارف برای محتوایی که به اشتراک می گذارید. (برای اطلاعات بیشتر ، توضیحات مربوط به برچسب معادل نمودار Open Facebook در بالا را مرور کنید.)

مثال:

توییتر: تصویر

بله ، حدس زدید اینگونه شما می توانید تصویر را با توییت خود تنظیم کنید. توییتر دو گزینه را اجازه می دهد ، کارت با تصویر کوچکتر یا بزرگتر.

شما تصمیم می گیرید کدام یک را در برچسب نوع بخواهید. اگر به دنبال گزینه large هستید ، مطمئن شوید که وضوح آن حداقل 280x150px باشد و اندازه پرونده بیش از 1 مگابایت نباشد. می توانید از همان ترفند مورد استفاده در تصویر کوچک فیس بوک استفاده کنید: برای تقویت پیام ، برخی از متن ها را به تصویر اضافه کنید.

مثال:

درخواست تایید از توییتر

به خاطر داشته باشید که ، قبل از اینکه بتوانید از کارتهای توییتر کاملاً بهره مند شوید ، باید از صفحه توییتر درخواست تأیید صفحه خود را بگیرید. خوشبختانه ، این زمان زیادی نمی برد و با استفاده از آنها می توان به راحتی انجام داد اعتبارسنج کارت. به محض دریافت تأیید ، اعتبار سنج کارت دقیقاً همان هدف Facebook Debugger Sharing را دارد ، به شما این امکان را می دهد قبل از تعهد خود پیوندهای خود را بررسی کنید.

پلاگین های توییتر کارت

درست مانند Facebook ، افزونه های زیادی برای پیاده سازی کارت های Twitter در دسترس است. چندتایی این جاست:

نحوه پیاده سازی Open Graph Meta Tag ها

چگونه برچسب های OG را پیاده سازی می کنید؟ در واقع ، آنها متعلق به بخشی از HTML صفحه شما. اگر کد را مدیریت نمی کنید ، باید از توسعه دهنده وب خود کمک بخواهید. با استفاده از نکات بالا می توانید کل بسته را خودتان تهیه کنید تا در وقت ارزشمند او صرفه جویی کند.

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

WordPress SEO توسط Yoast برای برچسب های متا نمودار باز

در اینجا سایر پلاگین ها / افزونه ها / افزودنیهای OG برای:

نتیجه گیری متا تگ های نمودار آزاد

کد نهایی هم برای فیس بوک و هم برای توییتر باید کم و بیش به این شکل باشد:

صفحه کد نهایی نتیجه گشودن نمودارهای متا

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

تعجب آور است که چگونه تعداد کمی از افراد این برچسب ها را بهینه می کنند. ارزش آن را دارد که انجام دهید زیرا به شما کمک می کند تا از دیگران متمایز شوید و کلیک ها و نمایش های بیشتری را ترسیم کنید و حتی می تواند به بهبود SEO شما – همه مواردی که منجر به سود بیشتر می شود – کمک کند.

آیا برچسب های متا نمودار باز را پیاده سازی کرده اید؟ چگونه بر سایت شما تأثیر گذاشته است؟

مشاوره با نیل پاتل

ببینید آژانس من چگونه می تواند رانندگی کند عظیم مقدار ترافیک به وب سایت شما

  • سئو – باز کردن مقدار زیادی از ترافیک SEO. نتایج واقعی را مشاهده کنید.
  • بازاریابی محتوا – تیم ما محتوای حماسی ایجاد می کند که به اشتراک گذاشته می شود ، پیوند می گیرد و ترافیک را جذب می کند.
  • رسانه پرداخت شده – استراتژی های موثر پرداخت شده با بازگشت سرمایه روشن.

تماس بگیرید