Posted on 1 Comment

تفعيل اشعارات المتصفح Push Notifications لصفحات AMP

اشعارات AMP

اضافة اشعارات المتصفح Push notifications لصفحات AMP

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

 

في هذه المقالة سنقوم بتفعيل ميزة اشعارات المتصفح لصفحات AMP بطريقتين وذلك لمستخدمي اضافة AMP for WordPress الرسمية, و لمستخدمي اضافة AMP for WP – Accelerated Mobile Pages, مع العلم ان الاضافة الثانية غير الرسمية هي الأسهل ويتم تفعيلها خلال ثواني, اما الطريقة الاولى الخاصة بالاضافة الرسمية أصعب وبحاجة لعمل أكثر.

 

هذه المقالة ليست لمستخدمي ووردبريس فقط, بل هي طريقة شاملة جميع المنصات (ووردبريس – بلوجر – جوملا – shopify – دروبال – weebly – منصات أخرى), تابع في آخر المقالة إذا لم تكن ووردبريس.

 

الخطوة الأولى: سنستخدم اضافة OneSignal – Free Web Push Notifications, هذه الاضافة يستخدمها كل مستخدمي ووردبريس لإظهار اشعارات المتصفح لمواقعهم في الوودربريس, فهي الأسهل, قم بتنزيل هذه الاضافة وتفعيلها كما نقوم ذلك بالمعتاد.

 

الخطوة الثانية: قم بالذهاب لموقع OneSignal وتسجيل حساب جديد, مع تفعيل الحساب بالرسالة التي وصلتك إلى الإيميل.

الخطوة الثالثة: تهيئة حسابنا على موقع OneSignal لنبدء بالحصول على اشعارات, (من قام بتنزيل الاضافة سابقاً ولديه APP ID لا ينفذ هذه الخطوة معنا).

بعد الضغط على رابط التفعيل سنقوم بإضافة تطبيق جديد لحسابنا, وذلك بالضغط على Add a new app, ثم ادخال اسم التطبيق الذي نريده مثل sitesuccessful كما هو واضح في الصورة, ثم الضغط على زر CREATE.

 

نختار الآن Web Push ثم نضغط على زر Next.

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

ثانياً, سنقوم بإدخال اسم الموقع ورابط الموقع ورابط ايقونة الشعار (Logo), ثم الضغط على زر الحفظ Save.

ووصلنا إلى هدفنا المطلوب وهو الحصول على 

اذهب الى لوحة تحكم ووردبريس, ثم إلى اعدادات اضافة Onesignal Push, وقم بإدخال 

عد الى موقع Onesignal وقم بالضغط على زر Finish.

 

لمستخدمي إضافة AMP for WP – Accelerated Mobile Pages الغير رسمية

بكل بساطة قم بالذهاب الى اعدادت اضافة AMP في لوحة تحكم ووردبريس, ثم في General ادخل الى Push Notification.

قم بتفعيل الاشعارات, ثم أدخل APP ID الذي حصلنا عليه قبل قليل.

في حال كان موقعك على البروتوكول القديم http قم بتفعيل الخيار بالسطر الثالث, في حال كان https اتركه كما هو.

 

لمستخدمي اضافة AMP for WordPress الرسمية

يجب التركيز في كل خطوة, فنحن سنقوم بعمل تحرير لملفات اضافة AMP:

1-اذهب الى لوحة تحكم ووردبريس>>المحرر>>اختر اضافة AMP لتحريرها.

2-تابع هذا المسار للوصول الى الملف المطلوب: templates>>html-start.php.

3-قم بإدخال الكود التالي تحت وسم <head>

4-الآن تحت وسم <style amp-custome> قم بوضع هذا الكود.

 

5-الآن داخل وسم <body> قم بوضع الكود التالي مع تبديل https://YOURDOMAIN.COM الى رابط موقعك, وتبديل YOUR-APP-ID ووضع APP ID الخاص بك.

6-اذهب الآن الى ملف آخر في إضافة amp, عبر المسار templates>>footer.php, فأنا مثلاً اخترت ان يظهر زر الاشتراك فوق الفوتر, قم بإدخال الكود التالي أول الفوتر.

7-اذهب الأن الى السي بانل, ثم قم برفع هذين الملفين الى المسار الرئيسي للموقع (داخل public_html).

بهذا نكون انتهينا من تفعيل اشعارات المتصفح بالنسبة للإضافة الرسمية, ويمكنك تجربة فتح اي صفحة AMP من متصفح الكروم لتظهر لك فوق الفوتر كما في الصورة.

 

لغير مستخدمي ووردبريس (بلوجر – جوملا – shopify – وغيره)

عد للأعلى وقم بتطبيق الخطوات حتى الوصول للخطوة التي نختار فيها ووردبريس, ولكن نحن لن نختار في هذه الحالة ووردبريس, بل سنختار المنصة التي تملكها انت ولنفترض انها بلوجر Bolgger, سنقوم بإدخال اسم الموقع ورابط الموقع, كما فعلنا بالاعلى, ثم سنقوم بتخصيص زر الاشعار, وذلك في الخطوة الثالثة (Permission Prompt Setup), سنضغط على ADD a Promot.

سنختار الشكل واللون والمكان الذي تريده لوضع زر الإشعار ثم الضغط على زر الحفظ Save.

في الخطوة الرابعة Welcome Notification, قم بإدخال عنوان للرسالة بإسم موقعك, ونص الرسالة الترحيبية الذي سيصل للمشتركين.

انزل الآن لنهاية الصفحة وأضغط على زر Save.

سيظهر لك كود خاص بك, ستأخذ منه app id الخاص بك (موجود داخل الكود على الشكل appId: “730dff1f-6ddd-4sss-aaaa-63f8ace69f59” مثلاً).

الآن قم بالتركيز على كل خطوة سنقوم بها لتعديل ملفات amp الخاصة بموقعك.

1-قم بوضع الكود التالي تحت وسم <head>

2-قم برفع هذين الملفين الى المسار الرئيسي للموقع (داخل public_html).

3-تحت وسم <body> قم بوضع هذا الكود, مع تبديل https://YOURDOMAIN.COM الى رابط موقعك, وتبديل YOUR-APP-ID ووضع APP ID الخاص بك.

4-تحت وسم <style amp-custome> قم بوضع هذا الكود.

5-قم بنسخ كود زر الاشتراك ووضعه في المكان الذي ترغب به (بالهيدر – الفوتر – فوق التعليقات).

 

اتمنى ان يكون كل شيء واضح, واعتذر على التقصير والإطالة, اخوكم وليد حمود.

Posted on 28 تعليق

تحسين صفحات AMP للمستخدم ومحركات البحث

optimize amp

اهمية Accelerated Mobile Pages تزداد يوماً بعد يوم, فالمشروع الذي اطلقته جوجل في آواخر 2015 نال على اهتمام الكثير من المواقع العالمية نظراً للفائدة الكبيرة التي يمنحها هذا المشروع للمستخدم من سرعة وسهولة في التنقل.

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

بعد ذلك بدءت جوجل تلوح الى الجميع استخدام AMP وتنصحهم باستخدام هذا المشروع الجديد, وتعطي احصائيات وتقدم ارقام وتُحفذ اكبر شركات العالم على استخدامه, ومنذ اليوم الأول قمت أنا باستخدام AMP هنا في الموقع الناجح ونالت هذه الاضافة على اعجاب العديد من المتابعين وقمت باضفتها لهم داخل مواقعهم, وفي حال كنت جديد على AMP تابع هذه التدوينة التي اشرح فيها كل شيء عن AMP من الصفر: شرح Accelerated Mobile Pages واضافة AMP لموقعك

 

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

 

نقل المحتوى الى اليمين للمواقع العربية

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

عند تفعيل الاضافة سيكون المحتوى من اليسار الى اليمين, ولكن في لغتنا العربية المحتوى يجب ان يكون من اليمين الى اليسار, وجميع التعديلات التي سنقوم بها اليوم ستكون على ملف function.php.

توجه الى لوحة تحكم ووردبريس>>المظهر>>المحرر>>خصائص القالب (functions.php) وقم بوضع هذا الكود آخر الملف

 

 

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

 

وضع الصورة البارزة داخل الصفحة

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

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

اذهب الى مظهر>>محرر>>خصائص القالب (functions.php) وقم بوضع هذا الكود آخر الملف

 

 

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

 

اضافة Schema للمقالات

من الجميل الاهتمام بالشكل, ولكن ايضاً يجب مراعاة محركات البحث, اضافة Schema امر يُحبذه محرك البحث, واضافته لصفحات AMP سهل وبسيط وبنفس الطريقة السابقة, وسنقوم كمثال بأخذ التصنيف NewsArticle وسنختبر الصفحة على اداة Structured data testing tool

اتبع نفس المسار الموجود في الاعلى: مظهر>>محرّر>>خصائص القالب (functions.php) وقم بوضع هذا الكود آخر الملف (تحت الكود الخاص بالصورة البارزة).

 

 

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

 

schema-amp

 

الكثير من الخيارات باضافة واحدة وضرورية

لسنا الآن بحاجة الى تغيير كل شيء بشكل يدوي, فكعادتها Yoast سباقة في كل شيء, وقامت منذ بداية اطلاق مشروع AMP بتطوير اضافة مُكملة لعمل Yoast Seo واسمها Glue for Yoast SEO & AMP, تحوي على الكثير من الخصائص والتعديلات والاشياء المهمة جداً والتي سنشرحها الآن.

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

اذهب الى Design وهذا ما نريده وهو الأهم, يمكنك رفع صورة AMP ICON, واختيار لون المحتوى من حيث لون الهيدر ولون العنوان ولون النص ولون Post meta info.

 

conent-amp

 

وستجد خصائص اخرى خاصة باللينكات وغيرها.

اذهب الآن الى Analytics وقم بوضع كود google analytics الخاص بك لكي يتم حساب الزيارات التي تأتي لصفحات AMP وتحليلها, حيث سيكون لها كود خاص بها, وهو التالي

 

 

الآن قم بتغيير بيانات الحساب الموجود في الكود “UA-XXXXX-Y” الى حسابك الخاص في احصائيات جوجل “Tracking Id”, بعد ذلك اضغط على حفظ التغييرات.

 

اضافة اعلانات ادسنس داخل صفحات AMP

ملاحظة: يمكنك وضع اعلانات ادسنس بشكل مباشر داخل صفحات AMP وذلك باستخدام اضافة AMP for WP – Accelerated Mobile Pages والتي بها ميزات كثيرة جداً.

اذهب الى لوحة تحكم ووردبريس>>اضافات>>المحرر>>اختر اضافة AMP لنقوم بتحريرها والعمل عليها, ثم اختر ملف single.php للتعديل عليه.

single-php-amp

كود اعلانات ادسنس يختلف عن الكود الاصلي الذي يقدمه لك ادسنس, وهو على الشكل التالي:

في البداية, قم بوضع data-ad-client و data-ad-slot للوحدة الاعلانية الخاصة بك وتغيير مقاسات الاعلان الى الحجم المناسب الذي تستخدمه في الوحدة الاعلانية ففي هذا المثال قمت بوضع اعلان بمقاسات 300*250, ثم قم بنسخ الكود ووضعه في المكان الذي تريد داخل ملف single.php الذي ذهبنا اليه بعد قليل, ثم اضغط على تحديث الملف.

 

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

Posted on 78 تعليق

شرح Accelerated Mobile Pages واضافة AMP لموقعك

AMP

شرح كامل عن تسريع صفحات الجوال AMP

 

ماهو AMP؟ ما وظيفته؟ لماذا قامت جوجل بتطوير هذا المشروع؟ كيف استخدم AMP في موقعي؟ كل هذه الاسئلة سنجيب عليها في هذه المقالة

 

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

 

اخطاء amp

 

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

 

 

محتوى الفيديو

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

الموقع الرسمي لمشروع Accelerated Mobile Pages هو: ampproject.org, ستجد فيه كل ماتريد معرفته عن AMP, كما ستجد رأي المساهمين في هذا المشروع, ومشاهدة فيديوهات تعريفية عن AMP.

 

ماهو AMP؟

هو مشروع من جوجل يعمل بلغة HTML مفتوحة المصدر “Open Source” تجعل سرعة الموقع كبيرة جداً تصل إلى 10 أضعاف سرعة الصفحة العادية, مما يجعل تجربة التصفح من الجوال سريعة وممتعة, حيث تعودنا ان التصفح من الجوال بطيء ولكن مع AMP التجربة مختلفة.

 

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

 

ampproject-test

لاحظ ان حجم الصفحة ليس بالخفيف “2.7ميغا” وتم تحميلها في نصف ثانية فقط :), ونحن اعتدنا ان مثل هذا الحجم يتم تحميله في 5-6 ثواني على الاقل, ولكن مع AMP التجربة مختلفة, واعتقد انك الان فهمت ما هو AMP والية عمله.

 

لماذا قامت جوجل بعمل هذا المشروع؟

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

 

كيف اضيف AMP لموقعي؟

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

 

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

توجه إلى لوحة التحكم ثم اذهب إلى أضافات>>أضف جديد, ثم ابحث عن AMP, ستظهر لك الاضافة الرسمية في أول نتيجة, وهذه هي صفحة الاضافة AMP WordPress

 

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

الآن اصبحت AMP جاهزة في موقعك, وتعمل بشكل سليم, ويمكنك تجربة اي صفحة من خلال اضافة AMP الى اخر الرابط, وكمثال على ذلك:

رابط الصفحة الاصلي هو: https://sitesuccessful.com/vary-anchor-text

رابط الصفحة التي تعمل بالـamp هو: https://sitesuccessful.com/vary-anchor-text/amp/

 

ملاحظة: اضافة AMP تقوم بتهئية المقالات فقط, ولا تقوم بعمل AMP للصفحة الرئيسية والصفحات والتاجات والتصنيفات.

 

كيف أتاكد ان AMP تعمل بشكل سليم في موقعي؟

للتأكد بأن صفحة AMP تعمل بشكل سليم, استخدم متصفح جوجل كروم, ثم قم بوضع #development=1 في نهاية الرابط وادخل الى الصفحة من جديد ليكون الرابط أستكمالاً للمثال في الاعلى:

https://sitesuccessful.com/vary-anchor-text/amp/#development=1

الآن أضغط F12, ستظهر لك هذه الرسالة: “AMP Validation Successful” كما في الصورة.

 

AMP Validation Successful

بهذا تكون قد أتممت تهيئة موقعك للـAMP بشكل كامل, مع التحقق بأن AMP تعمل بشكل جيد وسليم.

 

تحديث: في التحديث الجديد لإضافة AMP أصبح يمكنك التحكم اكثر بشكل قالب AMP الافتراضي مثل الالوان (لون الهيدر – لون النصوص – لون الخلفية), كما واصبحت تدعم الصورة البارزة مباشرة, واضافة فوتر جميل وتحويل الزائر الى مكان التعليقات في حال كان يريد ان يضع تعليق.

%d8%aa%d8%ad%d8%af%d9%8a%d8%ab-amp

 

تحويل الزائر القادم من الجوال الى صفحات AMP

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

 

 

مع تغيير https://sitesuccessful.com/ الى رابط موقعك. (هذا الكود لم يعد يعمل بعد تحديث اضافة AMP الاخير)

 

هذا كل شيء عن AMP أو Accelerated Mobile Pages حتى الآن, فالمشروع مازال قيد التطوير والعمل من جوجل, وأي جديد ستجده في هذه المقالة بأذن الله, اتمنى ان تكونو استفدتم, اخوكم وليد حمود.