كيفية تنفيذ AMP على موقع الويب الخاص بك والحصول على سرعة تحميل فائقة السرعة

قد ترغب في تنفيذ AMP لزيادة سرعة الصفحة. إليكم السبب

موقع التحميل السريع لا غنى عنه. فترة انتباه الإنسان في دوامة هبوطية - لا أحد يريد الانتظار ، خاصةً إذا كان على جهاز محمول.

ما هي السرعة التي نحتاجها؟ توصي Google بوقت تحميل الصفحة أقل من ثانيتين.

هناك العديد من الإجراءات الشائعة عبر المجالات التقنية لتحسين محركات البحث على الصفحة والتي تساعدك على تحقيق الهدف.

ومع ذلك ، يتم استخدام أحد هذه التدابير - إعداد Accelerated Mobile Pages (AMP) لإصدار الجوال من موقع ويب - بشكل مقتصد.

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

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

نفِّذ خطوة AMP 1: اختر المكوِّن الإضافي الصحيح

خيارات البرنامج المساعد

يقدم WordPress العديد من المكونات الإضافية لـ AMP. لقد جربت القليل منهم بنجاح وبدرجات متفاوتة. قدم أحدهم نتائج رائعة في Google Pagespeed Insights لفترة من الوقت. لكنها كسرت جميع صفحات AMP الخاصة بي على الهاتف المحمول!

توصيتي

أوصي بـ AMP لـ WP - Accelerated Mobile Pages - المكون الإضافي WordPress. يوفر هذا المكون الإضافي الكثير من الخيارات لتخصيص صفحات الويب للجوال. سيتعلق باقي المنشور بإعداد AMP لموقع الويب الخاص بك باستخدام هذا المكون الإضافي.

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

كما في الصورة أعلاه ، سترى مجموعة من الخيارات ، سنغطي كل منها واحدًا تلو الآخر.

لننتقل إلى الإعدادات.

تنفيذ الخطوة 2 من AMP: الإعداد الأساسي للمكوِّن الإضافي

نوع الموقع

حدد الخيار الذي يمثل أفضل تمثيل لعملك. حدد "أخرى" إذا لم يتطابق أي شيء آخر ، فستحصل على خيار لكتابة نوع موقع الويب الخاص بك بعد ذلك.

أين تريد تنفيذ AMP؟

حدد المكان الذي تريد تنفيذ AMP فيه. عندما تذهب إلى AMP ، فإنك تقرر الاحتفاظ بصفحات الويب للجوال بالكامل تقريبًا بتنسيق HTML. تحتاج إلى التخلي عن أكواد CSS / JS التي تقلل من سرعة التحميل.

الجانب السلبي لذلك هو أن تجربة المستخدم (UX) تتأثر. على سبيل المثال ، لم يعد بإمكانك امتلاك زر الحث على اتخاذ إجراء (CTA) الذي يدور لجذب انتباه الزائر. تقطع AMP هذا الرمز ، وبالتالي توفر وقت تحميل الصفحة. قد يؤدي هذا في النهاية إلى انخفاض معدل المشاركة.

في القائمة أعلاه ، قد ترغب في اختيار وضع AMP على صفحاتك أو منشوراتك أو كليهما.

التصميم والعرض

هنا ، يمكنك إعداد شعارك ، الحجم الموصى به هو 120 × 90 بكسل. أوصي بعدم استخدام الشعار لأنه يضيف إلى وقت تحميل الصفحة. إذا لم يتم تحديث أي شعار في هذه اللوحة ، فستحتوي صفحة AMP على اسم موقع الويب فقط بدلاً من الشعار.

سيساعدك خيار Global Color Scheme على اختيار لون لصفحات AMP الخاصة بك التي تظهر على روابط CTA على الصفحة وعلى رابط التذييل.

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

تتبع التحليلات

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

وبالمثل ، يمكنك إضافة عدة أدوات تتبع أخرى كما هو مذكور في الصورة أعلاه.

إعدادات الخصوصية

يمكّنك شريط إشعار ملفات تعريف الارتباط من الحصول على موافقة الزائرين لملفات تعريف الارتباط التي تستخدمها على موقع الويب. في الصورة أدناه ، مربع الحوار باللون الأسود هو شريط إشعار ملف تعريف الارتباط.

مصدر الصورة - Monster Insights

إذا كنت أنت أو قاعدة جمهورك من إحدى دول القانون العام لحماية البيانات (GDPR) ، فأنت بحاجة إلى تشغيل إعدادات GDPR - General Data Protection Regulation.

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

الإعلانات

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

يمكنك اختيار نوع الإعلان وحجم الإعلان وعميل إعلان البيانات والشريحة الإعلانية للبيانات من شفرة إعلان Adsense.

توافق الطرف الثالث

يلتقط الكيان الأخير قائمة المكونات الإضافية التي تحتاج إلى توافق AMP لها.

يتطلب منك نموذج Gravity و Elementor لـ AMP الدفع مقابل الإضافات. تعد البيانات المهيكلة وإعلانات WP و PWA لـ WP مكونات إضافية مجانية. ستتم تغطية الثلاثة الأخيرة بمزيد من التفاصيل لاحقًا في المنشور.

نفِّذ الخطوة 3 من AMP: المزيد من إعدادات AMP

الاعدادات العامة

تغطي علامة التبويب "عام" الخيارات التي تناولناها في الإعداد الأساسي. بالإضافة إلى ذلك ، يمكنك اختيار ما إذا كنت تريد الحصول على AMP في صفحات الأرشيف والفئات والعلامات.

سيؤدي تمكين الخيار الأخير - AMP Takeover (تجريبي) - إلى أن يكون إصدار سطح المكتب وإصدار الهاتف المحمول متماثلين. هذا يعني أن إصدار سطح المكتب لديك سيحتوي أيضًا على صفحات AMP.

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

الإعلانات

يحتوي هذا القسم على نفس خيارات قسم الإعلان في الإعداد الأساسي.

SEO

إذا اخترت تشغيل Meta Description ، فستلتقط Google النص الذي تملأه في قسم الرأس . سيكون هذا مختلفًا عن النص الذي ملأته لإصدار سطح المكتب. أوصي بإبقاء الإعداد متوقفًا ، والحفاظ على تناسق Meta Description عبر النسختين.

علامات OpenGraph Metadata هي أجزاء من التعليمات البرمجية التي تتحكم في كيفية عرض عناوين URL عند مشاركتها على وسائل التواصل الاجتماعي. يكون هذا القسم مرئيًا لإصدار سطح المكتب عند إعداد العنوان والبيانات الوصفية في المكوّن الإضافي لتحسين محركات البحث. يوجد أدناه مثال على المكون الإضافي Yoast SEO.

يمكنك العثور عليه بالانتقال إلى قسم المحرر في أي منشور أو صفحة ، ثم قم بالتمرير لأسفل. بمجرد رؤية قسم Yoast ، انقر فوق علامة التبويب "اجتماعي" ، ثم يمكنك اختيار منصة الوسائط الاجتماعية التي تختارها.

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

سترى خيار إزالة فهرسة الصفحات المرقمة وتوافق أداة فحص عناوين URL.

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

يعمل توافق أداة فحص عناوين URL على تعزيز عملية البحث الأكثر شفافية بالنسبة لك. يوفر تقارير مفصلة عن معلومات الزحف والفهرسة والعرض في حسابك على Google Search Console. أود أن أوصي بإبقائه قيد التشغيل.

دعم العنصر

يتيح لك خيار AMPforWP PageBuilder إنشاء صفحات فردية لإصدار AMP يختلف عن إصدار سطح المكتب. يكون مفيدًا عندما تريد الحصول على نص مختلف قليلاً أو CTA لصفحات AMP.

على سبيل المثال ، إذا كان لديك عبارة "اتصل بنا" CTA لسطح المكتب ولكنك تفضل أن يتصل بك زوار الهاتف المحمول ، يمكنك تنشيط هذا الخيار وإنشاء صفحة منفصلة.

PWA

وفقًا لوصف AMP الخاص بـ WP Plugin - تعمل تطبيقات الويب التقدمية (PWA) على تحويل موقع الويب الخاص بك إلى تطبيق ويب وتمنح الزائرين تجربة شبيهة بتطبيقات الجوال الأصلية.

إنه تحسين التصميم. تنشيط الوحدة هو مسألة اختيار.

أداء

تتعمق لوحة الأداء بشكل أعمق في تحسين سرعة الصفحة.

يمكّنك من تصغير CSS / JS لتقليل استخدام النطاق الترددي دون التأثير على UX أو الوظيفة. تتيح لك الاستفادة من ذاكرة التخزين المؤقت للمتصفح تسريع وقت التحميل للزائرين العائدين. أوصي بإبقاء كلا الخيارين قيد التشغيل.

سيؤدي تمكين Optimize CSS إلى تشغيل ميزة اهتزاز الشجرة لتحسين CSS. يمكنك الاستمرار في تشغيله في حالة عدم وجود مكون إضافي مختلف يقوم بهذه المهمة بالفعل.

التحليلات والبيانات المنظمة وشريط الإشعارات واللائحة العامة لحماية البيانات

هذه الأقسام لها نفس الخيارات التي تم تناولها في الإعداد الأساسي.

دفع الإخطارات

في حالة رغبتك في إعداد إشعارات الدفع ، يمكنك اختيار واحد من بين OneSignal و iZooto و Truepush .

في المثال أعلاه ، قمت بتحديد OneSignal. ومع ذلك ، بالنسبة لأي اختيار ، سترى قسمًا لإدخال معرف التطبيق ، وهو خيار لتمكين دفع الإشعارات للصفحات. بالإضافة إلى ذلك ، تحتاج إلى اختيار المكان الذي تريد وضع الإشعار فيه (أسفل الصفحة على سبيل المثال) ، والنص الذي تريد عرضه.

نماذج الاتصال

يمكّنك هذا من اختيار أحد المكونات الإضافية الثلاثة لتحسين AMP من أجل - نموذج الاتصال 7 ونماذج Gravity و Ninja Forms.

الثلاثة يطلبون منك أن تدفع مقابل التمديد. في حالة تركيز CTA بشكل أساسي على النماذج ، فمن الحكمة الاستثمار في الامتداد.

تعليقات

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

اختر الإعدادات التي تناسبك بشكل أفضل.

مقالات فورية

المقالات الفورية هي ميزة في تطبيق Facebook لمستخدمي الأجهزة المحمولة تتيح لك استضافة مقالات موقع الويب الخاص بك.

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

ومع ذلك ، نظرًا لأن المحتوى يبقى على Facebook ، فقد تخسر بعض حركة المرور على موقع الويب. إنها مقايضة بين سرعة الصفحة وحركة مرور الموقع. أود أن أوصي بإبقائها مغلقة.

إذا اخترت الاستمرار في تشغيله ، فسترى الإعدادات أدناه.

بعد إدخال معرف صفحتك على Facebook ، يمكنك تخصيص إعدادات المقالة. الإعداد الذي يتطلب مزيدًا من التوضيح - ابتلاع الزاحف .

عندما تتم مشاركة رابط مقالتك المستضافة على موقع الويب الخاص بك على Facebook ، تبحث برامج الزحف على Facebook عن علامة ia: markup_url . إذا كان موجودًا ، فإن Facebook يستوعب مقالتك وينشئ مقالة فورية على صفحتك على Facebook.

أدوات

يتيح لك خيار صفحة AMP الفردية اختيار ما إذا كنت تريد عرض صفحات AMP افتراضيًا أم لا. عندما تختار "إظهار حسب الافتراضي " ، ستعرض جميع صفحاتك إصدار AMP. ومع ذلك ، يمكنك اختيار إخفاء AMP لمشاركات أو صفحات فردية.

للقيام بذلك ، انتقل إلى أي صفحة وانقر فوق تحرير الصفحة . في علامة التبويب " الإعدادات " باتجاه اليمين ، يمكنك العثور على خيار إيقاف تشغيله.

وبالمثل ، يمكنك اختيار إخفاء إصدارات AMP للفئات والمشاركات المحددة.

Query Monitor هي لوحة أدوات المطور لـ WordPress. إذا كنت مطورًا وتحتاج إلى رؤية الاستعلامات على الصفحة ، فيجب أن تستمر في تشغيل الإعداد.

إعدادات متقدمة

تحتوي لوحة خيارات الإعدادات المتقدمة على مجموعة من الإعدادات معظمها تشرح نفسها بنفسها.

أوصي بإبقاء الإعدادات الافتراضية قيد التشغيل ما لم تكن مطور WP أو قمت بتعيين خبير لتصميم موقع الويب الخاص بك.

التجارة الإلكترونية

إذا كنت تمتلك متجرًا عبر الإنترنت ، فيمكنك تخصيص إصدار AMP الخاص بك لـ WooCommerce . إذا كنت تبيع الأصول الرقمية بشكل أساسي ، فيمكنك تشغيل خيار Easy Digital Downloads Support . كلا الخيارين يتطلب منك تمكين تمديد مدفوع.

لوحة الترجمة

تتيح لك هذه اللوحة تحديد الترجمات الصحيحة لمجموعة كلمات شائعة الاستخدام إلى اللغة التي تختارها.

على سبيل المثال ، تحتاج إلى كتابة الترجمة الخاصة بإصدار "عرض غير AMP" المناسب لجمهورك.

للترجمات متعددة اللغات ، يمكنك تشغيل طريقة استخدام ملف POT للترجمة . ملف POT (Portable Object Template) هو قالب لملفات PO. إنها ملفات نصية عادية تحتوي على الترجمات. كل لغة لها امتداد الملف الخاص بها. على سبيل المثال الفرنسية لديها po.fr.

نفِّذ الخطوة 4 من AMP: التصميم

ثيمات

تمامًا مثل إصدار سطح المكتب لموقعك على الويب ، يمكنك اختيار سمة لإصدار AMP.

هناك أربعة خيارات مجانية للاختيار من بينها.

• سويفت
• تصميم واحد
• تصميم اثنان
• والتصميم الثالث

بالإضافة إلى ذلك ، تحتوي كل صفحة ومنشور على قسم يمكّنك من إنشاء التصميم الخاص بك.

إليك كيف يمكنك العثور عليها. انتقل إلى الصفحة أو المنشور ، وانقر فوق "تحرير الصفحة" في شريط الأدوات العلوي. قم بالتمرير لأسفل لرؤية الشاشة أدناه.

إذا قمت بتحديد خانة الاختيار Use Builder ، فسيتم عرض القالب الذي تقوم بإنشائه ، وإذا لم يكن كذلك ، فسيتم عرض القالب المجاني الذي حددته.

إذا كنت تقوم ببناء القالب الخاص بك ، فلديك الوحدات أدناه للاختيار من بينها.

تذكر أن AMP هي في الأساس صفحة HTML. لا يمكنك الحصول على الكثير من أزرار التخصيص أو الهوى.

يرجى ملاحظة: عليك تحديد موضوع. يحتاج البرنامج المساعد إلى اختيار الرموز والبنية - حتى عند إنشاء التصميم الخاص بك. يمكنك الدخول في مزيد من التفاصيل في هذه الخطوة عند تنفيذ AMP.

عالمي

تتيح لك لوحة الخيارات هذه تخصيص إصدار AMP الخاص بك.

يمكنك تحديد الألوان التي تختارها على النحو الوارد أعلاه. بالإضافة إلى ذلك ، يمكنك تحديد خطوط Google . ومع ذلك ، أوصي بإيقاف تشغيله لأن خطوط Google تزيد من وقت التحميل ، مما يهزم الغرض من AMP.

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

ستكون Font Icon Library هي نفسها السمة التي اخترتها في بداية لوحة Design.

رأس

تتيح لك لوحة خيارات الرأس تحديد تخطيط الرأس وكيف يجب أن تبدو قائمة التنقل الخاصة بك.

كما يتيح لك إضافة زر الاتصال الآن. إنه زر مفيد لمستخدمي الهواتف المحمولة.

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

يمكنك أيضًا تمكين شريط البحث . من المفيد أن يكون لديك موقع تدوين.

يمكّنك خيار العنوان المتقدم من الحصول على مزيد من التحديد باستخدام إعدادات قسم الرأس. إنها مسألة اختيار. ومع ذلك ، ضع في اعتبارك عدم الإضافة إلى الشفرة ، حيث ستؤثر سلبًا على سرعة تحميل الصفحة.

الصفحة الرئيسية ، مفرد ، تذييل ، صفحة ، مشاركة اجتماعية ، تاريخ ومتفرقات

تعد لوحات الخيارات هذه ، تمامًا مثل الرأس ، مسألة اختيار تصميم تمامًا. يمكنك اختيار أي إعدادات تناسبك بشكل أفضل.

تلخيص لما سبق

ستساعدك الخطوات المذكورة أعلاه في تنفيذ AMP بشكل فعال على موقع الويب الخاص بك. بمجرد حفظ التغييرات ، تحقق من إصدار AMP على هاتفك ، أو عن طريق إلحاق "/ amp" بعد عنوان URL.

تلتقط الصور أدناه ميزات صفحة AMP الخاصة بك.

صفحة AMG المرئية

تذييل

ها أنت ذا. اتبع هذه الخطوات لتطبيق AMP ، وللحصول على صفحات خالية من الأخطاء وفائقة السرعة يتم تحميلها في أقل من ثانيتين لزوار الهاتف المحمول.