الربح عبر أدسنس

تسريع المواقع الالكترونية عن طريق صفحات (AMP)

تسريع المواقع

ما هي صفحات الجوال المسرعة () صور بلوجر

أحد أهم معايير SEO الداخلي هو او  سرعة تحميل الموقع. كمستخدم ، إذا  دخلت موقعًا وكانت سرعة التحميل بطيئة جدًا ، فإما أن تغلق هذا الموقع أو او تجاهله ، لذا فإن أحد الأشياء التي تجعل الموقع شائعًا هو سرعة تحميل صفحاته.

تم تحديد معيار سرعة التحميل ، وهو متوسط ​​3 ثوانٍ ، وإذا كان موقعك بحاجة إلى التحميل أكثر من هذا الوقت ، فقد يتعب المستخدم.

تحقق من سرعة الموقع عبر  GTmetrix

GTmetrix هي أداة عبر الإنترنت للتحقق من سرعة تحميل الموقع ، وسيتم عرض أي مشاكل تواجهك مع السرعة على هذا الموقع.

عدة طرق لتسريع موقع  WordPress الخاص بك

  • قم بتثبيت البرنامج المساعد Cache

إذا كنت تستخدم WordPress cms ، يجب عليك استخدام مكون إضافي لذاكرة التخزين المؤقت عليه. تتمثل وظيفة المكونات الإضافية لذاكرة التخزين المؤقت في أنه عندما يزور المستخدم الموقع ، فإنه يحفظ بعض الملفات في متصفح المستخدم ، وعند فتح صفحات أخرى ، لا يتم إرسال هذه المعلومات إلى المستخدم من الخادم مرة أخرى ، ومحليًا على متصفحه إلى العرض قادم. 3 مكونات إضافية لذاكرة التخزين المؤقت الشائعة في WordPress هي W3 إجمالي ذاكرة التخزين المؤقت و wp super cache وأسرع ذاكرة التخزين المؤقت. من السهل العمل مع هذاplugin كما أنهم يدعمون اللغة العربية.

إقرأ أيضا:تحميل كورس udemy سيو الصور مجانا SEO for Images Search Engine Growth
  • ضغط ملفات html ، js ، css

كلما صغر حجم ملفات الموقع ، زادت سرعة تحميلها. لذلك ، يجب عليك ضغط جميع ملفات الموقع. في WordPress ، تقوم إضافات ذاكرة التخزين المؤقت أيضًا بضغط الملف ، ولكن أحد أفضل المكونات الإضافية لهذا هو التحسين التلقائي. بتثبيت هذا المكون الإضافي ، ستضغط جميع ملفات الموقع ، ولكن إذا تعطل قالب الموقع بعد الضغط ، فيجب عليك المتابعة مع مصمم الموقع لمزامنة قالب الموقع مع هذا البرنامج المساعد.

  • تحسين صور الموقع

تمامًا كما يلزم تقليل حجم الملفات ، يجب تحسين الصور. يجب تحسين الصور الأولية ، ويمكنك تقليل حجمها في وضع عدم الاتصال باستخدام أدوات مثل Photoshop. ولكن هناك العديد من المكونات الإضافية في WordPress التي يمكنها تحسين صورك عبر الإنترنت. Wp smush و ewww image و imigify هي الإضافات الأكثر شيوعًا لتحسين الموقع.

  •  استخدام cdn

Cdn أو شبكة توزيع المحتوى عبارة عن مجموعة من الخوادم في أجزاء مختلفة من العالم يمكن لكل مستخدم عرض الموقع بناءً على الموقع الجغرافي لأقرب خادم. أشهر cdn مجاني هو cloudflare.  ،

إقرأ أيضا:السيو كمايجب ان تكون 2020 كورس يمكنك من تحقيق الاف الدولارات والربح بدون راس مال

رفع سرعة موقعك بلوجر او ووردبريس و متجرك الالكتروني الحل النهائي 2020

لتسريع المواقع انا شخصيا استعملت كل الطرق المتاحة والمقترحة.. انطلاقا من ضغط الصور مرورا بالاضافات وصولا الى ضغط الأكواد … وغيرها من الحلول التي قد تكون ناجحة في حدود مستوى معين, لكنها لن تكون عند تطلعاتك نهائيا, قد لا اتمادى اذا قلت انها غالبا ماتعطي نتائج عكس المتوقع. ولكن وبعد بحث جئناكم بالحل النهائي والذي قد يحقق طفرة نوعية من حيث النتائج ومدة بقاء الزائر في الموقع نظرا لسرعته وسلاسة استعماله. كل هذا اعتمادا على تقنية AMP سنضع بين ايديكم كل الادوات المطلوبة لبناء مواقع الكترونية تدعم AMP بشكل كامل. لكن وقبل ان نشرع في التطبيق علينا اولا ان نعرف ماهو مشروع AMP.

ماهو مشروع AMP او صفحات الجوال المسرعة (Accelerated Mobile Page)

صفحات الجوال المسرعة (Accelerated Mobile Page) او AMP

مشروع AMP بشكل عام مبني على مجموعة من تقنيات التخزين المؤقت Cache لتسريع تحميل الصفحات والمواقع عند استخدام ، حيث تستخدم AMP-HTML كود خاص لتحميل صفحات الويب على الفور عند النقر عليها من قبل المستخدمين

تم اطلاق صفحات الجوال المسرعة (Accelerated Mobile Page) اختصاراً (AMP) من قبل شركة جوجل سنة 2015 كـ مشروع مفتوح المصدر مخصص لتسريع وقت تحميل صفحات الإنترنت عند التصفح باستخدام الهواتف المحمولة, وبعد سنة من إطلاق المشروع أعلنت Microsoft دعم AMP في تطبيقات Bing لنظامي التشغيل iOS و Android, بعد سنتين من بداية العمل بصفحات AMP اعلنت Adobe وتحديدا في فبراير 2017 أن تمثل معدل 7٪ من إجمالي حركة مرور الويب لكبار الناشرين في الولايات المتحدة, وفي مايو من نفس السنة صرحت جوجل بوجود اكثر من 900000 نطاق ويب تنشر وبلغ عدد الصفحات اكثر من مليار صفحة AMP منشورة على مستوى العالم. في يونيو 2017 ، بدأ Twitter في الارتباط بصفحات AMP من تطبيقات iOS و Android. وتعتبر Pinterest من اكثر الداعمين لـ مشروع AMP.

إقرأ أيضا:الربح من الانترنت عبر السيو وهذه قصتي مع الالف دولار و3 طرق

اليوم وبعد مرور خمس سنوات على اطلاق مشروع صفحات الجوال المسرعة (AMP) لم تعد التسمية بحجم المشروع لأن تطوير تقنية AMP جعل منها تصلح لكل شيء, وبعد ان كانت حكرا على HTML و CSS, اصبح من الممكن تشغيل JS الخاصة بك داخل المستند. بناءً على تقنية ثورية تسمى WorkerDOM. يمكنن القول ان مشروع AMP يسابق الزمن.

كيفية بناء موقع يعتمد على تقنية AMP بشكل كامل.

لبناء موقع يعتمد على صفحات الجوال المسرعة (AMP) اولا يجب ان تكون البنية الاساسية للموقع هي HTML ثم نعمل على تحويلها الى AMP-HTML. اذا كنت مبرمج هذا الموقع اهم من اي موضوع قد نكتبه في هذا الصدد. وبدلا عن ذلك اقدم لكم مجموعة من القوالب المبنية على نمط AMP.

كيف اعرف هل الموقع يدعم نمط AMP

لمعرفة هذا الأمر خصص جوجل صفحة خاصة لفحص المواقع ومعرف ما اذا كانت متوافقة مع نسق AMP اضغط هنا للوصول الى صفحة الوصف.

صورة لنتيجة الاختبار الايجابية

test amp blogger wordpress

قوالب ووردبريس AMP

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

قالب ووردبريس AMP

هنا ستجد ستة قوالب ووردبريس AMP مجانية مدعومة من جوجل ويتم تحديثها باستمرار .

لتحميل القوالب اضغط هنا

وهذه مجموعة من قوالب ووردبريس للمتاجر الالكترونية وتدعم نسق AMP متوفرة في متجر ووردبريس ويمكنك تحميلها بشكل مجانا . لتحميل القوالب اضغط هنا

قالب ووردبريس “Neve

قالب ووردبريس amp "Neve"

قالب ووردبريس “Zakra

قالب ووردبريس AMP

قالب ووردبريس “Astra

قالب ووردبريس 2020 AMP

بعد تركيب وتثبيت القالب قم بتنصيب الاضافة الرسمية  (Official AMP Plugin for WordPress) متوفرة مجانا بمتجر ووردبريس.

اعدادات اضافة اداة صفحات الجوال المسرعة (Official AMP Plugin for WordPress)

amp project

استخدم اعدادات مثل التي في الصورة اسفله لكن يجب ان يكون الموقع يدعم نمط AMP كما سبق الذكر .

صورة توضيحية

plugin amp

قوالب بلوجر AMP

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

قالب بلوجر AMP اللغة : العربية

مميزات القالب

 Responsive
High CTR
Related Posts
Mobile FriendlDis
Disqus Comments
Breadcrumbs
SEO Friendly
Dynamic Heading
Social Share Button
Valid Schema.org
Menu Navigation
Shortcodes
Search Box
Subscription Widget
معاينة تحميل

قالب بلوجر AMP اجنبي

مميزات القالب

 Responsive
High CTR
Mobile FriendlDis
Disqus Comments
Breadcrumbs
SEO Friendly
Dynamic Heading
Social Share Button
Valid Schema.org
Menu Navigation
Related Posts
Shortcodes
Search Box
معاينة   تحميل

الرمز السري لفك الضغط arebh.com

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

قالب التنظيف.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[/*
-----------------------------------------------
Name : CNMU Cleaning Template
Designer URL  : http://cnmu.blogspot.com
year          : 2015
----------------------------------------------- */
]]></b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id="Blog1" locked="true" type="Blog" />
</b:section>
</body>
</html>

كتابة تدوينة على مدونة بلوجر

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

اول كود هو كود الصور المتواجدة داخل المقال, قم بالدخول الى مدونة بلوجر واختر مشاركة جديدة ثم قم باختيار HTML وضع الكود المتواجد اسفله وغير عبارة “url imag” برابط الصورة وعبارة عنوان الصورة بالكلمة المفتاحية المناسبة للموضوع, ستلاحظ ان الصورة لا تظهر في وضع التأليف هذا امر عادي ستظهر عند عرض الصفحة في الموقع.

<div class="img-center">
<amp-img src="url imag"
      width="750"
      height="462"
      layout="responsive"
      alt="عنوان لصورة"></amp-img>
</div>

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

<amp-carousel width="400"
      height="300"
      layout="responsive"
      type="slides">
    <amp-img src="https://4.bp.blogspot.com/-v-y2hJEU49E/V-zSdVlbYRI/AAAAAAAAoAw/Gy0SGRDo6jAYOzFrWa7tb_L_uCGRftZWwCLcB/s1600/image1.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://2.bp.blogspot.com/-Am-eNX5IZWw/V-zSdUZ9NrI/AAAAAAAAoA0/4u1Q4tMiPpcuFHeSDbLbHJA8wEa8zOrngCLcB/s1600/image2.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
    <amp-img src="https://4.bp.blogspot.com/-rxREfSseAik/V-zSdgi92wI/AAAAAAAAoA4/80A0ZH_nEXAMe5jgjFtqDmZ5LFISzW4fQCLcB/s1600/image3.jpg"
        width="400"
        height="300"
        layout="responsive"></amp-img>
  </amp-carousel>

اما هذه فهي اكواد اضافة المشاركات المضمنة من مواقع خارجية مثل يوتيوب وتويتر وفيس بوك .

هذا كود تضمين فيديو من موقع تويتر فقط غير الاصفار بالرقم التعريفي للفيديو و ستجده في نهاية رابط مقطع تويتر.

<amp-twitter
width="375"
height="472"
layout="responsive"
data-tweetid="0000000000000"
>
</amp-twitter>

هذا كود لتضمين فيديو من موقع فيس بوك بنسق AMP فقط غير الرابط الموجود برابط الفيديو الذي ترغب في نشره.

<amp-facebook width="476" height="316"

    layout="responsive"

    data-embed-as="video"

    data-href="https://www.facebook.com/khafayaads/videos/778802805871926/">

</amp-facebook>

هذا كود لتضمين فيديو من موقع يوتيوب بنسق AMP فقط غير الرابط الموجود برابط الفيديو الذي ترغب في نشره.

<amp-youtube

data-videoid="sucs6oaAnXg"

layout="responsive"

width="480"

height="270"

></amp-youtube>

 

اما هذا الكود فهو كود الصورة لتظهر في الصفحة الرئيسية.

 

<noscript><img alt='gambar' src='https://arebh.com/wp-content/uploads/2020/02/DOMANE-NAME.png?w=1142&strip=all'/></noscript>

 

قبل ان تقوم بنشر التدوينة قم بحذف عبارة (trbidi=”on) من المقالة ستجدها في اول سطر HTML لأن تلك العبارة كافية لجعل صفحة المقال لا تدعم صفحات الجوال المسرع AMP.

ختاما كل منشئي المواقع والمدونين يعلمون جيدا أهمية سرعة الموقع ومشروع AMP جاء لهذا الغرض.

يمكنكم طرح اي سؤال في التعليقات على الموضوع او كتابته في منتدى خفايا وسنكون سعداء بالاجاب على تساؤلاتكم.
خفايا يحييكم

                       
السابق
FRP HUAWEI HONOR EMUI 9.1.0 FREE SOLUTIONS
التالي
مواصفات المحتوى الجيد والربحي ، وماهي معايير كتابة محتوى للربح من الانترنت

اترك تعليقاً