ماهي بطاقات تويتر Twitter Cards؟

Twitter Cards

كيف أصبح حالك الان مع 140 حرف الذين سمحت بهم تويتر مؤخرا, لتوضح لجمهورك بشكل جيد محتوى موقعك ؟!

أظنك إن إستطعت تجاوز مشكلة ما ترغب في توضيحه فأنت بلا شك تعاني من مشكلة وضع رابط موقعك في محتوى تغريدتك, إضافة الى رابط صورة أو فديو.

تويتر قدمت منذ ما يقارب اربعة أشهر حل لتلك المشكلة عن طريق إضافة بعض الاكواد لصفحة HTML الخاصة بموقعك تمكن متابعيك من إضافة رابط الموقع الى تغريداتهم بشكل جذاب يتيح لمتابعيهم التعرف على محتوى موقعك بشكل أفضل و بالتالي زيادة الترافيك الخاص بموقعك, دون أن يؤثر ذلك على المساحة المتاحة لك في 140 حرف , ويطلق على تلك الخدمة:

بطاقات تويتر Twitter Cards

ولكن كيف تستخدم بطاقات تويتر ؟

تتكون بطاقات تويتر من أربع أنواع من البطاقات كلها تسمح لك بالضغط عليها للانتقال الى موقعك بسهولة, و لكل بطاقة الكود الخاص بها , سنستعرضهم بالترتيب كالأتي:

1- بطاقة تويتر للمحتوى النصي Summary Card:

في تلك البطاقة سيظهر ما يلي في البطاقة :

- عنوان البطاقة

- الملخص

- صوره صغيره "إذا أردت ذلك"

و الكود الخاص بها كما في الصوره التالية:

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />

و لتوضيح الكود:

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@مكان الصوره او اسم الموقع و بامكانك تجاهله " />

<meta name="twitter:title" content="ضع عنوان جذاب لمحتوى المقاله" />

<meta name="twitter:description" content="الوصف الذي تريد أن يراه متابعيك" />

<meta name="twitter:image"content="رابط الصوره التي ترغب بظهورها " />

لتوضيح الصوره سأستخدم مقال المقالات الفوريه للفيس بوك كمثال على هذا النوع من البطاقات:

عند كتابتي لتغريده على تويتر و أضفت رابط المقال لمدونتي , تجاوزت ال 140 حرفا, و ليس بإمكاني نشر التغريده, كما تلاحظون :

لذا أحتاج الى بطاقة تويتر و سأختار النوع الخاص بالملخص Summary card, لأتجاوز تلك المشكلة.

<meta name="twitter:card" content="summary" />

<meta name="twitter:site" content="@Globalmarketingonline" />

<meta name="twitter:title" content="كيف تستخدم المقالات الفورية للفيس بوك؟" />

<meta name="twitter:description" content="الهدف من المقالات الفورية هو زيادة عدد الزيارات للمواقع الإلكترونية, بدلا من عزوف مستخدمي الأجهزة اللوحية فتح روابط تنقلهم لمتصفح خارج تطبيق الفيس, كما أنها خفضت الوقت فتح صفحة من الموقع." />

<meta name="twitter:image" content="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_xtuEIBtQIdra6Y_XWH48akVIBByS4l4ACb-2qmD7VJ8KMcME1ofYJHDZMudQi1KmFuePhKRiWuCjc3GGNXEJPNT9Qm3MIO3NqJmnrDi__a-CGJV-uAHIQT48pf8w85NixgsLIkuSRg1E/s640/Facebook.jpg " />

لاحظ أن الوصف الذي قمت بإضافته تجاوز الـ180 حرفا , الان بعد إضافة رابط المقالات الفوريه الى التغريده أنظر كيف أصبح بأمكاني إما إضافة الرابط و سيكون كافيا لتوضيح الفكرة, أو بامكاني إضافة تعليق يشمل مع الرابط الذي وضعته الـ140 حرفا, اليكم الحالتين لنفس الرابط:

2- بطاقات تويتر تحتوي على ملخص مع صورة كبيرة الحجم Summary Card with Large Image

أذا أردت صورة واضحة و كبيره لمحتوى المقال, أختر تلك البطاقة, و الكود الخاص بها كما يلي:

<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:site" content="@Globalmarketingonline"/>
<meta name="twitter:creator" content="@Fatema Farag"/>
<meta name="twitter:title" content="10 قوانين لتسويق ناجح عبر منصات التواصل الإجتماعي"/>
<meta name="twitter:description" content="يعتمد التسويق عبر وسائل التواصل الإجتماعي على قوة المحتوى و الذي يمكنك من بناء قاعدة تزداد إتساعا من العملاء المستهدفين و المحتملين المهتمين بمنتجك."/>
<meta name="twitter:image" content="htthttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXb5NFL5eLcq568x4XGiw95K0OyrO434I35DFSc5l2TaiSYIIuz2Wu00Ir4jIT5teBvhgOOPUychQldu3Dx6jgO-dgjfkz4xSxct-7qZM4VvWbXc_A4hdWil3ww9gJt0f1T_UxJHnPpNB9/s640/social-media-image.jpg"/>

ستكون النتيجة بهذا الشكل :

3- بطاقات تويتر الخاصة بتطبيقات المحمول App cards:

و الكود الخاص بها هو :

<meta name="twitter:card" content="app"/>
<meta name="twitter:site" content="@TwitterDev"/>
<meta name="twitter:description" content="Cannonball is the fun way to create and share stories and poems on your phone. Start with a beautiful image from the gallery, then choose words to complete the story and share it with friends."/>
<meta name="twitter:app:country" content="US"/>
<meta name="twitter:app:name:iphone" content="Cannonball"/>
<meta name="twitter:app:id:iphone" content="929750075"/>
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef"/>
<meta name="twitter:app:name:ipad" content="Cannonball"/>
<meta name="twitter:app:id:ipad" content="929750075"/>
<meta name="twitter:app:url:ipad" content="cannonball://poem/5149e249222f9e600a7540ef"/>
<meta name="twitter:app:name:googleplay" content="Cannonball"/>
<meta name="twitter:app:id:googleplay" content="io.fabric.samples.cannonball"/>
<meta name="twitter:app:url:googleplay" content="http://cannonball.fabric.io/poem/5149e249222f9e600a7540ef">

**Note**

Platform-specific URLs are deep links into your app. If you do not support a particular platform, omit tags for that platform from your website.

**Note**

If you have an iPhone app, but no iPad-optimized app, you may want to include the iPhone app id, name, and url for both iPhone and iPad-related tags. If no value is provided, the Cards will simply render a “View on web” link pointing to website of the card.

و اليك بعض النقاط الهامة الخاصة بتلك البطاقة:

1- بطاقة تويتر الخاصة بالتطبيقات بطاقة متاحة لتلك التطبيقات المتوفره في متجر Google Play او Apple iTunes, تأكد أن تطبيقك متاح على أحد المتجرين.

2- في حال أخترت التطبيق المتاح على أحد المتجرين فأن البطاقة تقوم بسحب باقي البيانات الخاصة بالتطبيق مثل التقييم الخاص بالتطبيق و غيرها.

3- بأمكانك أضافة موجز لوصف التطبيق إذا أردت

4- البطاقة تستخدم أتوماتيكيا الصوره الخاصة بتطبيقك في أحد المتجرين و لتظهر لصوره بشكل جيد يجب ان تكون أقل من 1MB

5- في حال وضعت رابط التطبيق من أحد المتجرين مباشرة فلست في حاجه لاستخدام البطاقه حيث يقوم تويتربمجرد وضع الرابط بتكوين البطاقة الخاصة بالتطبيق.

6- لإستكمال بيانات البطاقة ستحتاج الى إنشاء رابط سكيما التطبيق  و إنشاء الرابط المتعلق بالتطبيق

و لبطاقة التطبيقات App cards ميزتين للمستخدمين وهما:

- إتاحة تحميل التطبيق بسهوله

- سهولة الوصول للتطبيق و إستخدامه بعد تحميل التطبيق.

أنهينا شرحا اتمنى أن يكون واضحا لبطاقات تويتر الثلاث تبقت البطاقه الاخيره بطاقة الميديا  Player Card, سأفرد لها موضوعا مستقلا.

و اليك رابط التحقق من صحة البطاقات التى اعددتها Card validator

و أخيرا, لا تتردوا في أرسال تعليقاتكم و تجاربكم في تطبيق بطاقات تويتر الثلاث.