هل أعجبك شكل بعض التغريدات عند مشاركة روابط مواقع وتظهر الصورة كبيرة أو حتى معرض صور أو صورة ونص على شكل مقال مجلة؟
وأنا أعمل على هذا الموقع، قمت باستخدام خواص الميتا (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
لاتنس مشاركة المقالة على تويتر : )
هل لديك إضافات؟
شكرا لك على هذا الطرح الرائع
استفسارى :
هل يتم اضافة هذا الكود بداخل HTML الموقع ام بإضافته بداخل اكواد كل مقالة مع التعديل؟
مع العلم انى قمت بإضافة هذا الكود فى HTML الموقع ولكن فى كل مقالة اقوم بنشرها على تويتر يظهر لى الصورة والعنوان والوصف الذى حددتهم فى الكود وليس صورة وعنوان ووصف المقالة التى نشرتها
أخي عصام السلام عليكم ورحمة الله وبركاته,
جربت الكود على وورد بريس ونجح من خلال اضافة Seo Social ، لكن كيف استطيع وضع الكود في Hed الموقع غير وورد بريس بحيث يسحب لي الصورة من الخبر والمختصر وتايتل الخبر؟
الموقع ليس وورد بريس وانما نظام آخر “Dimofinf”