نحوه راه اندازی کارت های Open Graph و Twitter برای وردپرس

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

با Open Graph می‌توانید ظاهر عنوان، تصویر، توضیحات و موارد دیگر محتوای خود را هنگام اشتراک‌گذاری از طریق کانال‌های اجتماعی کنترل کنید. شاید قبلاً با متا تگ های رایج مانند تگ عنوان و تگ توضیحات آشنا باشید. اما بسیاری از وبلاگ نویسان نمی دانند که متا تگ های دیگر مخصوص سایت های شبکه های اجتماعی مانند Google+، Facebook، Twitter و Pinterest وجود دارد. دلیل اینکه این سایت‌های شبکه‌های اجتماعی شروع به استفاده از ابرداده کرده‌اند، نمایش درست محتوا همراه با تصاویر، توضیحات و لینک‌های مرتبط است. با تعریف این متا تگ‌ها می‌توانید مطمئن شوید که محتوای شما در یک نگاه در رسانه‌های اجتماعی به اشتراک گذاشته و درک می‌شود.

هر سایت شبکه اجتماعی ترجیحات متفاوتی دارد. Pinterest و Google+‎ تگ‌های Schema را ترجیح می‌دهند، اما از پروتکل Open Graph نیز پشتیبانی می‌کنند. برچسب‌های ، که توسط Facebook، Google+ و Pinterest ترجیح داده می‌شوند.

برچسب‌های Open Graph بین بخش

صفحه وب قرار می‌گیرند. متداول ترین تگ های مورد استفاده عبارتند از:

• og:title
• og:description
• og:url
• og:site_name
• og:image
• og:type

اینها احتمالاً چندان منطقی نیستند، بنابراین در اینجا برخی از نمودارهای اجتماعی به اشتراک گذاشته شده با برچسب های Open Graph که به وضوح برچسب گذاری شده اند، آمده است.

علاوه بر این، توییتر تگ های سفارشی خود را که به عنوان کارت های توییتر شناخته می شوند، تعریف کرده است. این برچسب‌ها به لینک‌های شما امکان می‌دهند هر زمان که توییت می‌شوند، اطلاعات بیشتری را ارائه دهند. مشابه تگ های Open Graph، تگ های کارت توییتر نیز بین بخش

یک صفحه وب قرار می گیرند. متداول ترین تگ های توییتر عبارتند از:

• twitter:card
• twitter:site
• twitter:creator

در حالی که می‌توانید تگ‌های Open Graph و Twitter Card را به‌صورت دستی اضافه کنید، افزونه‌های زیادی در WordPress.org موجود است که حتی کاربران مبتدی نیز اضافه کردن برچسب‌ها را بر روی پست‌ها و صفحات وردپرس بسیار آسان می‌کنند. تعدادی از موارد دلخواه ما عبارتند از:

1. SEO توسط Yoast
2. گراف باز برای Facebook، Google+ و Twitter برچسب‌های کارت
3. چارچوب SEO
4. JM Twitter Cards (فقط برای کارت های توییتر)
5. پروتکل باز کردن نمودار Framework (فقط برای برچسب های Open Graph و برای توسعه دهندگان توصیه می شود)

برای این آموزش، ما از گزینه‌های داخلی افزونه Yoast SEO برای تعریف متا تگ‌های ویژه استفاده می‌کنیم تا پست‌های خود را با رسانه‌های غنی تبدیل کنیم.

مرحله 1: آخرین نسخه Yoast SEO را نصب کنید

توصیه می کنیم آخرین نسخه Yoast SEO را نصب کنید. ساده ترین راه برای انجام این کار، از طریق داشبورد مدیریت وردپرس در زیر Plugins > Add New و جستجوی “Yoast SEO” است.

را نصب کنید

سپس افزونه را نصب و فعال کنید (فقط روی آن دکمه کلیک کنید).

پس از فعال شدن، باید یک برگه جدید “SEO” را در داشبورد مدیریت وردپرس خود مشاهده کنید. چندین ویژگی عالی در Yoast SEO وجود دارد (برای خرده‌های نان، تغییر مسیرها و غیره) اما چیزی که امروز به آن علاقه‌مندیم تب اجتماعی است.

مرحله 2: تنظیمات اجتماعی خود را پیکربندی کنید

برای پیکربندی Open Graph و کارت‌های Twitter از داشبورد مدیریت وردپرس به SEO > Social بروید. ابتدا پیوندهای نمایه اجتماعی خود را در اینجا اضافه کنید تا به موتورهای جستجو کمک کنید تا تأیید کنند که واقعاً به سایت شما متصل هستند. سپس به برگه های مختلف اجتماعی بروید.

فیس بوک

اولین گام شما این است که داده های متا Graph را برای پست های فیس بوک فعال کنید – به سادگی روی گزینه فعال شده کلیک کنید. با فرض اینکه قبلاً صفحه فیس بوک مرتبط سایت خود را در زیر برگه حساب ها اضافه کرده اید، می توانید وارد شوید. در صورت تمایل می‌توانید برای هر صفحه‌ای که رسانه ویژه ندارد، یک تصویر پیش‌فرض اضافه کنید، اما این به شما بستگی دارد.

تویتر

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

Pinterest

Pinterest کمی متفاوت است، زیرا این پلتفرم از تأیید متا تگ استفاده می کند. به حساب پینترست خود بروید، روی نماد کاربر خود نگه دارید و سپس روی برگه تنظیمات کلیک کنید. روی گزینه Claim Website کلیک کنید و گزینه Add HTML tag را انتخاب کنید.

متا تگ ایجاد شده را کپی کرده و در پنل Yoast SEO خود قرار دهید. تغییرات خود را ذخیره کنید، سپس برای ارسال به Pinterest برگردید. این به Pinterest می‌گوید که برچسب را بررسی کرده و سایت شما را تأیید کند. این برای Pinterest است!

Google+

آخرین حساب اجتماعی که باید تنظیم کنید Google+‎ است که فقط پیوندی به صفحه Google+‎ کسب و کار شماست. آن را جای‌گذاری کنید و آماده هستید.

تنظیم پیش فرض ها

آخرین مرحله این است که پیش فرض خود را ایجاد کنید. Yoast از جعبه‌های متا در محتوای شما برای تعریف داده‌های Open Graph استفاده می‌کند – بنابراین حتماً پیش‌فرض‌های خود را در SEO > ظاهر جستجو > انواع محتوا ویرایش کنید. از متغیرهای قطعه داخلی Yoast SEO برای ایجاد پیش فرض های پویا خود برای عنوان پست خود (که برای og:title استفاده می شود) و توضیحات متا (برای og:description استفاده می شود) استفاده کنید.

تصویر، عنوان و توضیحات سفارشی

Yoast SEO همچنین شامل گزینه ای در پست های جداگانه برای سفارشی کردن تصویر، عنوان و توضیحات مورد استفاده برای فیس بوک و توییتر است. هنگام ویرایش یک پست، به سادگی به بخش Yoast SEO بروید و روی نماد اشتراک‌گذاری کلیک کنید (به نظر می‌رسد کمتر از نماد <). سپس یک تصویر سفارشی آپلود کنید یا عنوان و توضیحات را در صورت نیاز ویرایش کنید.

اشکال‌زدایی و اعتبارسنجی

هر سایت اصلی شبکه اجتماعی دارای اعتبارسنجی یا اشکال‌زدای خاص خود است تا نحوه نمایش پیوندهای شما هنگام اشتراک‌گذاری در رسانه‌های اجتماعی را آزمایش و پیش‌نمایش کند.

داده های ساختاریافته Google ابزار تست: این ابزار پیش‌نمایش پست اشتراک‌گذاری شده در Google+‎ را به شما نشان نمی‌دهد، اما نشان می‌دهد که کدام ابرداده موجود و قابل خواندن توسط Google است. ویژگی های شما در زیر ویژگی های گره RDFA ظاهر می شود.

اشکال‌زدایی فیس‌بوک: پس از پیاده سازی تگ های Open Graph، به سادگی آدرس سایت خود را که حاوی تگ ها است، قرار دهید. ویژگی های شی را به شما نشان می دهد.

ابزار اعتبارسنجی توییتر: می‌توانید از این پیوند برای پیش نمایش کارت توییتر برای پست خود قبل از اشتراک گذاری در رسانه های اجتماعی استفاده کنید.

Pinterest Rich Pins Validator< /a>: مشابه دو اعتبار سنجی آخر، کافی است URL حاوی تگ های Open Graph را برای پیش نمایش وارد کنید و مطمئن شوید که محتوای شما همانطور که باید نمایش داده می شود. اگر کل آموزش را دنبال کرده باشید، به هیچ وجه مشکلی نخواهید داشت.

یادداشت نهایی

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

امیدواریم راهنمای ما به شما در تنظیم متا تگ‌های گراف باز و کارت‌های توییتر سایت خود کمک کرده باشد، اما اگر سؤالی دارید، بی‌راحتی بپرسید. خوشحال می شویم اگر بتوانیم کمک کنیم!

از کدام افزونه های وردپرس برای پیاده سازی این متا تگ ها استفاده می کنید؟ آیا نکته یا ترفند دیگری برای اضافه کردن دارید؟ می توانید نظرات خود را در نظرات زیر بیان کنید.