أحبائنا الكرام أحببنا أن نقدم إليكم اليوم واحد من أهم الدروس لمدونين بلوجر في عام 2017 وهو عن طريقة كتابة المقالات لتعمل بميزة الصفحات المسرعة للجوال AMP مما يجعل تصدر نتائج البحث عملية بسيطة وسهلة لأي مدونة من مدونين بلوجر.
 |
| كتابة مقالات AMP لبلوجر |
سبق وأن وضعنا بين أيديكم عدة طرق لتحويل مدونات بلوجر إلى AMP في موضوعين منفصلين هما:
1 - طريقة تركيب AMP على بلوجر: وشرحنا فيها طريقة تحويل الإستايل الخاص بك أو الإستايل الحالي لبلوجر بشكل عام إلى إستايل AMP بدون تغيير الإستايل نفسه.
2 - أفضل قالب AMP معرب لبلوجر: ووضعنا في هذا المقال بين أيديكم أفضل قالب AMP بالصفحات المسرعة للجوال في العالم مما يسهل عليكم أن تقوموا بتنصيب القالب مباشرة بدون الحاجة لتعديلات قد تصعب على غير المحترفين لتحويل الإستايلات الحالية إلى إستايلات AMP.
كما وضعنا أيضاً مجموعة قوالب أجنبية لمن يرغب بتركيب AMP أجنبي لبلوجر في مقالنا: أفضل قوالب AMP 2019
لذا فأنتم تقريباً قد حصلتم بين أيديكم على المفاتيح الأساسية للدخول إلى عالم AMP من خلال منصة بلوجر , ولكن هناك العديد من المشكلات التي واجهت من بدأ بالعمل فعلياً بهذه الخدمة الجديدة لتسريع المواقع على الإنترنت وهي كتابة مقالات مسرعة للجوال , لذا سنبدأ اليوم بإعطائكم النصائح والطريقة السليمة لكتابة مقالة مسرعة للجوال لتعمل مع خدمات AMP الجديدة على بلوجر.
طريقة إنشاء صفحات أو كتابة مقالات AMP
* في البداية يجب أن تكون مدونتك بالفعل قد تم التأكد من أن الإستايل الخاص بها مدعم لتقنية AMP وذلك بإختيار أحد الطرق التي تحدثنا عنها في بداية هذا المقال بالأعلى , فإذا لم يكن ذلك قد حدث بعد برجاء البدء به أولاً حتى يمكنك إكمال العمل معنا.
* عليك أن تعلم جيداً أن تحويل مدونتك إلى AMP لا يتم بمجرد تركيبك للإستايل الجديد وينتهي الكلام , بل إنك في هذه الحالة عليك بالتعديل في جميع مقالات مدونتك من حيث الصور والإستايل كما سنشرح لاحقاً لتكون هذه المقالات فعلياً مدعمة من مشروع AMP , لذا فإذا كانت مدونتك تحتوي الكثير من المقالات فلا ننصحك بالإقدام على هذه الخطوة للأسف لأنها ستأخذ الكثير جداً من المجهود والوقت , أما إذا كانت مدونتك جديدة فإحرص على البدء بها الأن لأنها المستقبل.
1 - بعد تركيبك لنظام او إستايل AMP على مدونتك يجب عليك أن تتأكد تماماً من أن مدونتك أصبحت كذلك , لا يتم ذلك بإختبار أي صفحة منها بل بالصفحة الرئيسية فقط وذلك من خلال الدخول على رابط موقع الإختبار الرسمي من جوجل للصفحات المسرعة للجوال , فإذا كانت النتيجة إيجابية يمكنك التقدم للخطوة التالية.
طريقة إجراء إختبار AMP
قم بالدخول على رابط الإختبار الرسمي من هنا , وقم بوضع رابط الصفحة الرئيسية لمدونتك في المربع الفارغ وإضغط على Run Test , سيظهر لك كود كابتشا (صور عليك حل لغزها أو تنفيذ المطلوب منك) للتحق من كونك بشر , بعد حل اللغز ستظهر نتيجة الإختبار فإذا كانت إيجابية أكمل للخطوة التالية وإذا كانت سلبية إنتقل لنهاية هذا المقال لمعرفة ما يجب عليك فعله.
2 - هذه الخطوة تعتمد على مدونتك نفسها , هل ما تقوم بتحويله إلى AMP مدونة جديدة من البداية أم أنها مدونة قديمة بها مقالات فعلية ؟ بأي حال من الأحوال سنعمل على الجزئين بطريقة واحدة وهو كأنك لديك مدونة قديمة مليئة بالمقالات ولكنك ستقوم بإنشاء مقالة جديدة بها بنظام AMP.
3- بعد إنشائك لمقالة جديدة قم بوضع إسم المقالة بشكل عادي وكلماتها المفتاحية ووصف البحث والرابط المخصص Permalink وبعد ذلك قم بالبدء بكتابة مقالتك بشكل عادي للغاية ورفع جميع الصور (كل شئ بالظبط كما لو كنت تقوم بإنشاء مقالة عادية جداً على بلوجر).
4 - بعد الإنتهاء من كتابة المقالة ورفع الصور هنا سيبدأ العمل الحقيقي والجزء الصعب , فأنت الأن أمامك نموذج لمقالة بلوجر العادية سواء كانت جديدة أو قديمة وترغب بتحويل صفحة هذه المقالة إلى صفحة AMP مسرعة للجوال , عليك الأن أن تقوم بأخذ رابط أول صورة في المقالة وتضعها في هذا الكود:
5 - إذا كنت تعمل على قالب روميسيا للخدمات الإلكترونية الذي وضعنا رابط تحميله في موضوع بالأعلى فإنك ستحتاج إلى إضافة صورة رئيسية لمقال AMP الخاص بك , وهي صورة تظهر وحدها بالهيدر الخاص بالموقع وتظهر كالصورة الرئيسية للموضوع المقترح , لفعل ذلك قم أولاً برفع الصور إلى مدونة بلوجر الخاصة بك وأخذ رابط الصورة التي ترغب بأن تكون الصورة الرئيسية وضعها في الكود التالي مكان علامة الشباك #
<div class="thumb-post"><noscript><img alt="texxxxxxxxxt" width="250" height="300" src="#"/></noscript></div>
كما يجب عليك أن تقوم بوضع إسم للصورة مكان كلمة texxxxxxxxxt سواء بالعربية أو بالإنجليزية , ويمكنك تغيير الحجم الخاص بها أيضاً , سواء العرض Width أو الطول Height , ولكن أين تضع هذا الكود؟
وانت في صفحة كتابة المقال قم من الأعلى بالتحويل من وضع Compose إلى وضع HTML , ستجد أن المقال الخاص بك قد تم تحويله بالكامل إلى أكواد , فقم بنسخ الكود السابق بعد أن تقوم بوضع رابط الصورة وإسمها به في أعلى هذه الأكواد.
الأن وقد وضعت الصورة الإفتراضية بشكل ممتاز , ماذا عن باقي الصور؟
صور المواضيع المتبقية ستحتاج لها إلى كود منفصل , أو أكواد مختلفة ومنفصلة , فعليك في كل صورة بتحديد حجمها , تخيل مثلاً أنك ترغب بإضافة صورة طويلة مثل صورة مأخوذة كسكرين شوت من شاشة الهاتف الجوال , إذن فستحتاج إلى كود مثل ذلك:
<amp-img alt="texxxxxxxxxt" height="600" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
أما إذا كانت ترغب بوضع صورة عريضة فستحتاج إلى كود مثل ذلك:
<amp-img alt="texxxxxxxxxt" height="200" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
لفعل ذلك قم أولاً بأخذ رابط كل صورة من مقالك وحفظها في ملف تكست به الأكواد السابقة مكررة , وقم بتبديل كلمات texxxxxxxxxt ورمز الشباك الخاص بكل كود بالخاص بالصورة , كمثال أنا عن نفسي قمت بإنشاء ملف تكست خاص بالتعديل على روميسيا للخدمات الإلكترونية وهو كالتالي:
الصورة الأساسية
<div class="thumb-post"><noscript><img alt="texxxxxxxxxt" width="250" height="300" src="#"/></noscript></div>
----------------------------------------------------------------------------------------------
صور ة مربعة كبيرة
zzzzzzzzzzz1
<amp-img alt="texxxxxxxxxt" height="300" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz11
<amp-img alt="texxxxxxxxxt" height="300" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz111
<amp-img alt="texxxxxxxxxt" height="300" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
----------------------------------------------------------------------------------------------
صورة طويلة - سكرين شوت من فون
zzzzzzzzzzz2
<amp-img alt="texxxxxxxxxt" height="600" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz22
<amp-img alt="texxxxxxxxxt" height="600" width="350" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz222
<amp-img alt="texxxxxxxxxt" height="600" width="350" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
----------------------------------------------------------------------------------------------
صورة عريضة
zzzzzzzzzzz3
<amp-img alt="texxxxxxxxxt" height="200" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz33
<amp-img alt="texxxxxxxxxt" height="200" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz3333
<amp-img alt="texxxxxxxxxt" height="200" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
---------------------------------------------------------------------------------------------
صورة مربعة صغيرة
مثل مربع
QR Code
zzzzzzzzzzz4
<amp-img alt="texxxxxxxxxt" height="200" width="200" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz44
<amp-img alt="texxxxxxxxxt" height="200" width="200" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
zzzzzzzzzzz444
<amp-img alt="texxxxxxxxxt" height="200" width="200" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
----------------------------------------------------------------------------------------------
فيديو من اليوتيوب
vvvvvvvvvv1
<amp-youtube data-videoid="#" height="270" layout="fixed" width="480"></amp-youtube>
---------------------------------------------------------------------------------------------
رؤوس الموضوع
heading
subheading
minor heading
ملف غريب أليس كذلك؟ هذا الملف وظيفته مساعدتي عند إنشاء أي مقال AMP على بلوجر
ستلاحظ اني قمت بعمل العديد من هذه الصور ودائماً ما أقوم بفتح هذا الملف عند كتابتي لمقال AMP على بلوجر أمامي , وذلك حتى يمكنني إضافة روابط ومعلومات الميديا إليه مباشرة , ليس ذلك فقط بل إني أثناء مثلاً نسخي لرابط كل صورة ووضعها في كود وليكن مثلا من الملف اول صورة مربعة كبيرة والتي كودها:
zzzzzzzzzzz1
<amp-img alt="texxxxxxxxxt" height="300" width="300" layout="fixed" on="tap:lightbox1" role="button" src="#" tabindex="0"></amp-img>
ستلاحظ أني أضفت بأعلى الكود رمز خاص بي هو zzzzzzzzzzz1 وهذا الرمز أقوم بوضعه مكان الصورة عند نسخي لرابطها إلى الكود وحذفها فيما بعد , ذلك لأني عند لواجهة كتابة الموضوع من Compose إلى HTML سأجد الكثير من الأكواد أمامي ولن أعلم أين أضع هذه الصورة بالتحديد , من هنا أقوم بالبحث عن الكود zzzzzzzzzzz1 وعندما أجده أقوم بنسخ الكود الذي بأسفله من ملف التكست الذي حفظت به رابط الصورة وإسمها مكان هذا الرمز في HTML الخاص بالموضوع , وأكون بذلك قد إنتهيت من هذه الصورة فأبحث عن الصورة التالية او الفيديو وهكذا.
إعذروني إن لم تكن فكرة جيدة ولكنها بدت لي هي الأفضل حتى الأن في عالم AMP الجديد علينا جميعاً , فغن كان لدى أي منكم فكرة أفضل برجاء مشاركتها معنا على روميسيا للخدمات الإلكترونية من خلال نموذج التعليقات بالأسفل.
5 - الأن وقد إنتهيت من رفع جميع الصور المدعمة ل AMP نظراً وحذفت الصور العادية من المقالة والتي كنت قد رفعتها في البداية حتى يمكنك الحصول على رابطها ووضعه في كودها الخاص ب AMP , الخطوة التالية هي حذف أي إستايلات من داخل المقال كما سنذكر بالتفصيل الأن.
6 - قم بالتحويل إلى واجهة كتابة المقال العادية Compose , قم بتحديد كامل المقال من خلال الضغط على CTRL + A وبعدها إضغط على مفتاح إزالة التنسيق Remove Formatting والذي يشبه حرف T وعليه علامة X حمراء صغيرة وهو متاح بشريط أدوات التنسيق بالأعلى.
ستلاحظ أن إستايل المقال قد ضاع نهائياً , وهي نقطة مهمة للغاية , فقوالب AMP والتوافق مع هذه الخدمة لا يجب فيه إستخدام اي إستايلات , لا ألوان ولا محاذاة ولا غيرها , فقط ما يمكنك إستخدامه هو وسوم H1 , H2 وما شابه , لذا فعليك وكما رأيت في ملفي الشخصي الذي قمت بتحضيره ووضعته لكم بالأعلى أن تقوم بوضع الكلمات التي ترغب بوضعها كعناوين كبيرة أو متوسطة أو صغيرة في المقال في هذا الملف حتى يمكنك بعد حذف الإستايل أن تقوم بتحديد هذه الكلمات وتجعلها بالوسم المطلوب بسهولة.
وعليك في نفس هذه الخطوة أيضاً أن تقوم بحذف الأسطر الفارغة التي تظهر لك بعد إزالة التنسيق.
7 - الخطوة التالية هي الإنتقال إلى وضعية HTML وتحويل جهة الكتابة منها من اليمين إلى اليسار بدلاً من اليسار إلى اليمين , لتقوم بفعل ذلك قم بالدخول على HTML وإبحث عن أي كود به LTR وقم بتحويله إلى RTL.
ملحوظة: أسهل طريقة للبحث هي بالضغط على مفتاحي CTRL + F وسيظهر لك مربع بأعلى الجهة اليمنى من الشاشة يمكنك وضع به ما تبحث عنه وستجده قد تم تظليله بالشاشة , تأكد دائماً أنك قمت بالتعديل على كل الكلمات المظللة من خلال عمل سكرول أو الهبوط لاخر الشاشة والصعود لاقصاها حتى لا تضيع منك أي كلمة قد تؤثر على إختبار مقالتك في AMP.
8 - قم الأن بحذف جميع أكواد الإستايلات وذلك كما يلي:
عند دخولي أو دخولك على HTML ستجد أن السطر العلوي به يظهر بهذا الشكل أو شكل مشابه:
<div dir="ltr" style="text-align: left;" trbidi="on">
ما عليك فعله الأن أن تحذف الكود style="text-align: left;" trbidi="on"
فيتبقى أمامك فقط هذا الكود:
<div dir="rtl"">لاحظ أني أولاً: قمت بتعديل ltr إلى rtl وبعدها قمت بحذف كل الإستايل في هذا الكود من بداية المسافة التي قبل كلمة Style حتى نهاية الكود وتركت قوس الإغلاق فقط لهذا الكود , وحتى تكون العملية أسهل بكثير قمت بإستخدام عملية البحث من خلال الضغط على CTRL + F والبحث عن كل أكواد STYLE في اكواد هذا المقال ولم يظهر لي سوى كود إستايل واحد فقط قمت بحذفه نظراًَ لأني لم أضع رؤوس وعناوين H1,H2 ,وغيرها.
مبروك الأن يمكنك نشر مقالتك , وبعد عملية النشر يمكنك أخذ رابطها وإختباره على موقع إختبار AMP.
لاحظ أن مواقع AMP لا يشترط أن تكون جميع مقالاتها AMP ف, قد تكون الرئيسية AMP وبعض المقالات أيضاً ولكن ليس جميعها , لذا يمكنك أن تقوم بإنشاء مقالاتك الجديدة AMP وترك القديمة كما هي أو تعديل ما يمكنك منها كلما أصبحت متفرغاً.
بالنسبة لإضافة الفيديوهات فأنت لا تضع كامل رابط الفيديو من اليوتيوب , بل فقط الجزء الذي بعد الرابط المختصر , كمثال الرابط:
https://www.youtube.com/watch?v=1Y-hF0XATHk&t=322s
نقوم فقط بأخذ هذا الجزء منه:
1Y-hF0XATHk&t=322s
ونضعه بكود الفيديو
ما يجب فعله إذا فشل إختبار AMP لإستايل الجوال
1 - يجب تحديد أسباب المشكلة , وبشكل عام فإن أسباب المشكلة عند تركيب إستايل AMP جاهز على بلوجر والكشف عن الصفحة الرئيسية ووجدتها لا تعمل بشكل جيد أنك تركت ويدجات قديمة من الإستايل السابق , لذا قم بحذف أي ويدجات الأن وأترك ويدجات قالب AMP نفسه فقط , أو يمكنك إتباع الطريقة المثلى من خلال زيارة أي من الروابط التي تحدثنا فيها عن AMP في بداية مقالنا هذا بالأعلى.
2 - إذا لم يتم حل المشكلة بإتباعك للخطوة الأولى إذا قد يكون السبب إنك قمت أثناء تعديل القالب بوضع روابط خاطئة في هذا القالب وخاصة مع ويدجيت البحث , فكثيراً ما يكون الخطأ هو بوضع رابط HTTP بدلاً من HTTPS , لذا عليك أن تعلم عزيز أن وضعك الروابط في القالب نعم سيكون من خلال إضافة http قبلها ولكن ضلك في روابط التبويبات والفوتر فقط اما في روابط Form البحث يجب أن تكون بالشكل HTTPS حتى لو لم يكن الدومين الخاص بك يدعم هذه التقنية.
3 - يجب أن تتأكد أنه لا توجد صور إلا وتخم تحويلها من الصفحة الرئيسية إلى صور AMP وسنشرح لك ذلك في أثناء شرحنا لطريقة كتابة مقالة AMP.
4 - تأكد من وجود روابط مكتبات AMP في مدونتك والتي عادة تأخذ الشكل:
<script async='async' src='https://cdn.ampproject.org/v0.js'/><script async='async' custom-element='amp-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-0.1.js'/><script async='async' custom-element='amp-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/><script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/><script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/><script async='async' custom-element='amp-youtube' src='https://cdn.ampproject.org/v0/amp-youtube-0.1.js'/><script async='async' custom-element='amp-image-lightbox' src='https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js'/><script async='async' custom-element='amp-list' src='https://cdn.ampproject.org/v0/amp-list-0.1.js'/><script async='async' custom-template='amp-mustache' src='https://cdn.ampproject.org/v0/amp-mustache-0.1.js'/><script async='async' custom-element='amp-analytics' src='https://cdn.ampproject.org/v0/amp-analytics-0.1.js'/><script async='async' custom-element='amp-carousel' src='https://cdn.ampproject.org/v0/amp-carousel-0.1.js'/><script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>
بعد إتباعك لهذه الخطوات الأساسية فإذا وجدت أن إختبار AMP مازال فاشلاً إذن فأنت لم تكن بإتباع الخطوات المذكورة بدقة أو حصلت على إستايل غير كامل أو به مشاكل وننصحك بتغييره فوراً بأحد الإستايلات التي قمنا بتجربتها ووضعها لك بمواضيعنا على روميسيا للخدمات الإلكترونية.
دراسنا القادم بإذن الله سيكون عن طريقة إضافة إعلانات جوجل أدسنس على مدونات AMP Blogger.
يمكنك التأكد من أن هذه الصفحة مسرعة للجوال من خلال الكشف عنها من الموقع الرسمي لإختبار AMP من هنا.
نتمنى أن يكون مقالنا قد نال إعجابكم .. مع أطيب أمنياتنا للجميع بالتوفيق - روميسيا للخدمات الإلكترونية
تعليقات: 0
إرسال تعليق