طريقة وضع معلومات بطاقة ميتا twitter:card لتحسين موقعك في تويتر

هل أعجبك شكل بعض التغريدات عند مشاركة روابط مواقع وتظهر الصورة كبيرة أو حتى معرض صور أو صورة ونص على شكل مقال مجلة؟

وأنا أعمل على هذا الموقع، قمت باستخدام خواص الميتا (Twitter Cards)التي يقدمها تويتر للمواقع. يمكنك مشاركة رابط هذه المقالة على تويتر لتشاهد مثالا حيا:

http://essamsaad.com/twitter-card-meta-for-websites/

الهدف من هذه الخواص هو عند مشاركة رابط الموقع أو صفحة من صفحاته تظهر بشكل متناسق ومهيئ للتغريد. هذا تجده واضحا في تغريدات الشركات العالمية. الخبر السار هو أن هذه الخاصية ليست حصرا عليهم!

خطوات كيفية تضمين بطاقات تويتر للمواقع twitter:card في موقعك

كل ما عليك هو نسخ الكود التالي ووضعه قبل قفل </head>

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary"> <!-- نوع البطاقة -->
<meta name="twitter:site" content="@username"> <!-- معرف تويتر -->
<meta name="twitter:title" content="عنوان الصفحة">
<meta name="twitter:description" content="مختصر أو مقتطف">
<meta name="twitter:creator" content="@username"> <!-- معرف تويتر للكاتب -->
<!-- رابط للصورة -->
<meta name="twitter:image" content="http://www.example.com/image.jpg"> 

ليعمل الكود بشكل صحيح قم بتغيير القيم كالتالي:

– هناك أكثر من نوع لشكل البطاقة فيمكنك تغيير الكلمة “summary” حسب مايناسب محتوى موقعك أو الصفحة المعنية. يمكنك الاطلاع عليها جميعا وأمثلة متنوعة في دليل مطوري تويتر dev.twitter.com
– هناك مكانين لوضع المعرف الخاص بتويتر، الأول عادة لحساب الموقع أو صاحب الموقع، على سبيل المثال حساب الشركة. والثاني هو حساب كاتب المقال أو الصفحة. هناك حالات مثل مدونتي وهي أنني نفس الشخص :) عندها لا مانع من التكرار.
– خانتي العنوان والمختصر واضحة.
– الخانة الأخيرة هو رابط للصورة ومقاس الصورة مهم؛ فلو استخدمت نوع البطاقة “summary” فلابد أن لا يقل عرض وارتفاع الصورة عن 120 بكسل. كل نوع له مقاسات تناسبه يمكنك مراجعة الرابط أعلاه.

وأخيرا اختبر شكل بطاقة موقعك باستخدام الأداة التي يوفرها تويتر:
https://dev.twitter.com/docs/cards/validation/validator

لاتنس مشاركة المقالة على تويتر : )

هل لديك إضافات؟