كيفية كتابة مقال متوافق مع صفحات الجوال المسرعة لبلوجر
19779792034227590
recent
أخبار ساخنة

كيفية كتابة مقال متوافق مع صفحات الجوال المسرعة لبلوجر

الخط


بعد بحث من خلال الانترنت لم اجد احد من المدونين قد قام بشرح كيفية كتابة مقال متوافق مع صفحات الجوال المسرعة لبلوجر بالنسبه الى مدونات Amp Blogger  ببساطه للمبتدء أمثالى مثلا ،حيث أن كل من يبحث يريد أن يتعلم عبر خطوات بسيطه لتحقيق غايته فى انشاء مدونته التى تحمل تلك السمه وكيفية كتابة مقاله خاليه من الأخطاء وخلافه.
فهذا المشروع الذى اطلقته جوجل فى عام 2015 تحت اسم  Accelerated Mobile Page واختصاره AMP، وهو مفتوح المصدر.
ويهدف المشروع الى التخلص من مشكلة بطء تصفح صفحات الويب على الجوال او الموبايل وجعلها سريعة في تحميل النصوص والصور ومقاطع الفيديو والقوائم والخيارات ومختلف المحتويات التي تشكل الصفحة.
وجاءت هذه المبادرة من جوجل بعد أن اكتشفت أن معظم الباحثين على محرك بحثها من الموبايل يتذمرون جدا من بطء الصفحات التي تظهر على نتائج بحثها لما بها من بطء فى التصفح .

    مميزات الصفحات المسرعة AMP

    تتميز هذه الصفحات مقارنة بصفحات الجوال العادية بأنها أسرع ويتم تحميلها في أجزاء من الثانية عادة على الهواتف الذكية ولمختلف أنماط الإتصال بالإنترنت سواء من خلال الباقات الخاصه بالنت أو عبر الواي فاي.
    إضافة لما سبق فإن هذه الصفحات تتميز بكونها بسيطة وهي تركز على تقديم تجربة استخدام جيدة، ولا تعرض العناصر الغير المهمة حيث نلاحظ أنها لا تعرض القوائم الجانبية في العادة والتي تظهر في صفحات الجوال خصوصا أسفل المقالات والمواضيع.
    ومن مميزات هذه الصفحات  أيضا انها تعتمد على Google AMP Cache وهي ذاكرة التخزين المؤقت أو ما يعرف بالكاش، وهي التي توفر تحميل الصفحة التي قمت بزيارتها سابقا في أقل من الفترة الزمنية السابقة.
    ولم يتم تجاهل الجانب الأمني من هذا المشروع حيث تحرص جوجل على اغلاق الثغرات الأمنية التي يمكن أن تعاني منها ومنع حقن الصفحات المسرعة بالبرمجيات الخبيثة.
    ويمكنك تخصيص هذه الصفحات أيضا لعرض الإعلانات، وقد عملت جوجل على جعل اعلانات أدسنس أسرع تحميلا على هذه الصفحات وتواصل العمل على تحسين السرعة لتظهر الإعلانات في ذات الوقت لتحميل المحتوى وهذا كله في مدة أقل من ثانية.
    وتعد الصفحات المسرعة AMP أسرع 10 مرات مقارنة بصفحات الجوال العادية، كما أنه يمكن الولوج إليها من سطح المكتب فقط بإضافة amp/ على رابط الصفحة للمواقع التي تعتمد هذه التقنية.
    وبعد كل ماسبق سيتركز موضوعنا على عدة نقاط تبدأ كلها بالسؤال الذى يتبادر الى ذهن كل باحث عن شيء بأن يبدأ سؤال بكلم ( كيف ) ،فالشرح هنا سيكون على نقاط موضحه ومدعومه بالصور على قدر الامكان اذا تطلب الأمر ذلك.
    تعالى نبدأ الشرح العملى:-
    قبل أن تبدأ أخى الزائر لابد أن تقوم ببعض التحضيرات اللازمه والتهيئه لمدونتك لكى يخرج العمل بدون أخطاء أو لكى توجد الخطأ وتعمل على حله،وهذا يتطلب منك الاتى :
    أولا : مدونه على بلوجر عاديه أو مربوطه بدومين مدفوع ومكتملة الاركان من ناحية السيو،بمعنى تجهيز اسم ملائم ووصف مناسب وعنوان مناسب والأهم تفعيل الروابط الأمنه المحميه https:// والا كل الاضافات لن تعمل ،فلابد أن تتأكد من تفعيل الروابط قبل الشروع فى كتابة أى مشاركه.
    ثانيا: قالب مناسب لصفحات الجوال المسرعه Amp Blogger وتستطيع الحصول عليه من خلال الموضوع التالى :
    افضل قوالب AMP Blogger الاجنبيه لعام 2019
    ثالثا: الاضافه الرائعه AMP Validator وتستطيع الحصول عليها لمتصفح جوجل كروم من الرابط التالى :
    تأكد من أنك قد أضفت الكود النصي المطلوب في AMP إلى صفحاتك لإضافة البرنامج النصي، انسخ الرمز وهو شبيه التالى التالي والصقه بين العلامتين <head> و </head> في قالب مدونتك ثم احفظ العمل.
    وانا احضرت لكم بعض البرامج النصيه التى لابد من لصقها بالقالب قبل كتابة أى مقاله لكى تخرج صحيحه ،وهذا البرنامج النصى يشمل كافة الاشياء بمعنى لكل شىء تريد وضعه بالمقاله كوةد يناسبه وعلى سبيل المثال لو اردت وضع اعلان جوجل ادسنس بالمدونه ،فلابد من وجود البرنامج النصى التالى :
    <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
    
    ثم بعد ذلك تضع كود ادسنس المخصص لمدونات Amp فى مكانه الصحيح من التخطيط بلوحة تحكم مدونتك أو من داخل القالب.
    وقم بعمل حفظ من خلال الاضافه بالتخطيط أو القالب.
    اضع بين ايديكم مجموعة الأكواد النصيه والتى يجب لصقها فى قالبك بين العلامتين <head> و </head> في شفرة HTML للقالب ،وهى منوعه تشمل تويتر وفيس بوك وانستجرام بالاضافه الى تنسيق المواضيع العاديه.... انسخ الكود التالى والصقه داخل قالب مدونتك.
    <script async='async' src='https://cdn.ampproject.org/v0.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-form' src='https://cdn.ampproject.org/v0/amp-form-0.1.js'/>
    <script async='async' custom-element='amp-accordion' src='https://cdn.ampproject.org/v0/amp-accordion-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-lightbox' src='https://cdn.ampproject.org/v0/amp-lightbox-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-instagram' src='https://cdn.ampproject.org/v0/amp-instagram-0.1.js'/>
    <script async='async' custom-element='amp-twitter' src='https://cdn.ampproject.org/v0/amp-twitter-0.1.js'/>
    <script async='async' custom-element='amp-facebook' src='https://cdn.ampproject.org/v0/amp-facebook-0.1.js'/>
    <script async='async' custom-element='amp-facebook-comments' src='https://cdn.ampproject.org/v0/amp-facebook-comments-0.1.js'/>
    <script async='async' custom-element='amp-anim' src='https://cdn.ampproject.org/v0/amp-anim-0.1.js'/>
    <script async='async' custom-element='amp-sticky-ad' src='https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js'/>
    <script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-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-sidebar' src='https://cdn.ampproject.org/v0/amp-sidebar-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-fx-flying-carpet' src='https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js'/>
    <script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>
    
    وكافة الأكواد للبرامج النصيه تجدها فى الرابط التالى وتستطيع نسخ الكود المطلوب
    من هنا 
    والان أصبح كل شيىء جاهز تقريبا لكتابة أول مقاله لك بدون أخطاء إن شاء الله.

    كيف أكتب نصا سليما خاليا من الأخطاء عبر مدونات  AMP؟

    بعد فتح مشاركه جديده يجب عليك التعامل مع الصفحه من خلال HTML فى الغالب للأكواد ويجب حذف كل الاكواد من الصفحه فى البدايه وقبل الكتابه مثل هذا الكود دائما تجده فى بداية الصفحه
    <div dir="rtl" style="text-align: right;" trbidi="on">
    <br /></div>
    أما الكتابه فتتم بالطريقه العاديه كأى موضوع على مدونات بلوجر

     كيف اضع صوره بالمقاله وتظهر الصوره المصغره بالصفحه الرئيسيه فى AMP؟

    تستخدم الكود التالى وتضعه فى أى مكان بالمقاله من خلال HTML للصفحه وهو الكود الرئيسى الذى سيظهر صورة المقاله فى بداية الموضوع مثلا ويظهرها أيضا فى واجهة المدونه الرئيسيه وهو مايعرف باسم الصوره المصغره للموضوع أو Thumbnails.
    <br />
    <amp-img
        width="500"
        height="320"
        alt="هنا تضع عنوان المقاله كتعريف للصوره"
        src="هنا تضع رابط الصوره بعد رفعها على مدونتك أو موقع رفع خارجى"
        layout="responsive">
    </amp-img><br />
    <noscript><img alt=' هنا تضع عنوان المقاله كتعريف للصوره' src='هنا تضع رابط الصوره بعد رفعها على مدونتك أو موقع رفع خارجى'/></noscript>
    <br /> 

    كيف اضع صوره داخل المقاله او مجموعة صور؟

    يتم من خلال الكود التالى كلما اردت وضع صوره تضع الكود فى المكان الذى تريد وضع الصوره به من خلال ايضا HTML للصفحه ثم تكمل مابداخل الكود كالسابق.
    <br /> <amp-img width="500" height="320" alt="هنا تضع عنوان المقاله كتعريف للصوره" src="هنا تضع رابط الصوره بعد رفعها على مدونتك أو موقع رفع خارجى" layout="responsive"> </amp-img><br />

    كيف اضع صوره متحركه داخل المقاله؟

    اولا يجب أن تتأكد أن القالب لمدونتك به الكود النصى التالى من خلال البحث داخل قالبك :
    <script async='async' custom-element='amp-anim' src='https://cdn.ampproject.org/v0/amp-anim-0.1.js'/>
    ان وجدته ننتقل لمابعده ،اما ان لم يوجد بالقالب فضيفه للأكواد النصيه بالقالب ثم حفظ
    ثم فى أى مكان تري أن تظهر الصوره المتحركه ضع الكود التالى بعد أن تستوفى مابه طبقا للمطلوب الموضح به
    <br /> <amp-anim width="245" height="300" src="هنا تضع رابط الصوره بعد رفعها على مدونتك أو موقع رفع خارجى" alt="هنا تضع عنوان المقاله كتعريف للصوره" attribution="هنا تضع عنوان المقاله كتعريف للصوره"> </amp-anim> <br />

    كيف أضع فيديوهات اليوتيوب في مدونة AMP؟

    تستطيع من خلال الكود التالى وتغيير مايلزم ،حيث تقوم بالدخول الى اليوتيوب والفيديو الذى تريد أن يظهر ماعليك سوى نسخ جزء من رابط الفيديو مابعد v= ولصقه بالكود
    <br /> <amp-youtube width="480" height="270" layout="responsive" data-videoid="هنا تضع باقى رابط فيديو اليوتيوب مابعد v="> </amp-youtube> <br />

     كيف اجعل أول حرف من المقاله كبير كمثل المواقع الاخباريه الاجنبيه؟

    يمكنك فعل ذلك عبر وضع الحرف المراد بأول المقاله داخل الكود التالى:
    <span class="first-letter">هنا يكون مكان الحرف</span>
    7- يظهر لى خطأ بالقالب عند تركيب اضافه جديده عبر التخطيط بلوحة تحكم المدونه
    عند اضافة اداة كما بالصوره التاليه :


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


    ولحل هذه المشكله ادخل لقالب مدونتك وابحث عن الكود التالى :
    <b:include name='quickedit'/>
    داخل قالب المدونه ثم قم بحذفه واحفظ العمل

    ستشاهد أن القالب اصبح خالى من الأخطاء كما بالصوره التاليه:

    سيتكرر هذا الخطأ عند اضافة أى اضافه بالمدونه عبر التخطيط ،وكل ماعليك هو اتباع الخطوات السابقه وحذف الكود...وهكذا.

    ملاحظه مهمه:-
    الكود التالى :
    <div dir="rtl" style="text-align: right;" trbidi="on">
    <br />
    
    وجوده يسبب خطأ بإختبارات القالب للمدونه ويظهر عند تحرير المشاركه فلابد قبل حفظ العمل أن تتأكد أن المشاركه فى وضعية HTML خاليه من هذا الكود
    تأكد أيضا من حذف هذا الكود
    </div>
    من أخر القالب
    أتمنى أن أكون وفقت فى الشرح .... ومايستجد سأضيفه بالمشاركه
    تحياتى لك

    قد يعجبك أيضا
    ليست هناك تعليقات
    إرسال تعليق

    إرسال تعليق

    نموذج الاتصال
    الاسمبريد إلكترونيرسالة