عيد الاضحى المبارك


مواضيع تهمك

ركن تقنيات محركات البحث سيو SEO قسم يهتم بتحسين ترتيب موقعك بمحركات البحث وبناء الباك لينك ومتابعة امور السيو وطرق مسك الكلمات.

ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)

السلام عليكم ورمه الله وبركاته في هذه المقالة سنتعرف عن ماهو مشروع ال AMP؟ وما هو وظيفته؟ وكيف يمكنني إضافة هذا المشروع في موقعي؟ كل هذه الاسئلة سنجيب عليها . ما هو AMP او Accelerated Mobile Pages؟...

احصائياتى

الردود
14

المشاهدات
6420
abo-karim
.:: Administrator ::.
  • abo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud ofabo-karim has much to be proud of

  • abo-karim غير متواجد حالياً

المشاركات
4,227

+التقييم
20

تاريخ التسجيل
Jun 2015

الاقامة
ام الدنيــ EGYPT ــا

نظام التشغيل
windows 7

رقم العضوية
1
07-17-2017, 10:06 PM
المشاركة 1
07-17-2017, 10:06 PM
المشاركة 1
افتراضي ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
السلام عليكم ورمه الله وبركاته
في هذه المقالة سنتعرف عن ماهو مشروع ال AMP؟ وما هو وظيفته؟ وكيف يمكنني إضافة هذا المشروع في موقعي؟ كل هذه الاسئلة سنجيب عليها .
ما هو AMP او Accelerated Mobile Pages؟
AMP هو إختصار لـكلمة Accelerated Mobile Pages هو مشروع من جوجل يستخدم لغة HTML وهى لغه مفتوحة المصدر “Open Source” فهو وسيلة لبناء صفحات الموبايل لتكون سريعة حبث باستخدام AMP يجعل سرعة الموقع كبيرة جداً تصل إلى 10 أضعاف سرعة الصفحة العادية, مما يجعل تجربة التصفح من الجوال سريعة وممتعة.
سلبيات استخدام AMP ؟
AMP مثله مثل اى تقنية لها مالها وعليها ماعليها فمن السلبيات انه فى حاله وجود الاعلانات علي موقعك فهو يقوم بإيقاف تحميلها لانه يعطي الاولويه للمحتوي فهو سيئ بالنسبة لاصحاب المواقع الربحيه لكنه جيد فى حاله لم يكون لديك اعلانات على موقعك .

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

نتيجة اختبار الموقع الرسمي لمشروع AMP


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


لاحظ الفرق من ناحية حجم الصفحة وزمن تحميلها فى موقع AMP الصفحة تحمل فى نصف ثانية ام موقعنا هنا تقريبا نفس الحجم لكن تحمل فى وقت اكبر 1.7 ثانية يعنى داخل على ثانيتين

طريقة إضافة الـ AMP الى موقعك ؟
فى البداية احب ان انوه الى ان هذه الاضافة اوالميزة هي ميزة تجريبية و قيد الاختبار اى انها ستمر بمراحل كثيره جدا من التطور والتحديث لحين حصولنا على الاضافة المستقره لكن بإمكاننا تجربتها في مواقعنا ومشاركة النتائج معنا .
اولا: طريقة إضافة AMP لمنصة البلوجر :
قبل أن تركبها في يرجى آخذ Backup كامل لموقعك في حالة حدوث أي أخطاء وانشاء الله لن يحدث.
1- فى البداية إذهب إلى محرر الـ HTML واستبدل كود ال <html> بــ :
كود:
<html amp='amp'>
2- راجع كود ال Metadata والـ Charset إذا لم تجده كما بالأسفل قم بإضافته :
كود:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
3- راجع تاج الـ Canonical وإذا لم تجدة قم بإضافته كما هو :
كود:
<link expr:href='data:blog.url' rel='canonical'/>
4- أبحث عن </head> وإستبدلها بالكود أدناه :
كود:
<style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
5- غير أكواد الصور إلى amp-img tags كما في الكود :
كود:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
ثانيا : طريقة إضافة AMP لمنصة الووردبريس :

1- توجه إلى لوحة التحكم ثم اذهب إلى أضافات>>أضف جديد


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


3- بعد تنصيب الاضافة وتفعيلها


ثم


اذهب الى “الروابط الدائمة” ثم أضغط على حفظ التغييرات وذلك لأعادة توليد قاعدة بيانات جديدة تحوي على روابط AMP.
الآن اصبحت AMP جاهزة في موقعك, وتعمل بشكل سليم, ويمكنك تجربة اي صفحة من خلال اضافة AMP الى اخر الرابط, وكمثال على ذلك:
رابط الصفحة الاصلي هو:
كود:
http://helperntl.com/anchor-text
رابط الصفحة التي تعمل بالـamp هو:
كود:
http://helperntl.com/anchor-text/amp
هناك طريقتان لمعرفة اذا كان مشروع الـAMP قد تم تفعيله بشكل سليم وناجح ام لا؟
الطريقة الاولى :
اذهب الى الرابط validator.ampproject.org وضع رابط الموقع وسيقوم بالتحقق من أكواد ال AMP .
الطريقة الثانية :
استخدم متصفح جوجل كروم ثم أضف هذا الكود "#development=1" في نهاية الرابط لتظهر كما في المثال
كود:
https://example.blogspot.com/p/amp-page.html#development=1
ثم أضغط كليك يمين ثم Inspect وأفتح تاب Console واذا وجدت هذه الرسالة "AMP validation successful" فاعلم بأن المشروع تم تنصيبة بنجاح .


موضوع تجريبى للـ AMP


تحويل الزائر القادم من الجوال الى صفحات AMP
الان تعمل صفحات AMP في موقعك, ولكن الزائر لا يمكنه الوصول لها مباشرة الا عن طريق كود تحويل سنضعه داخل ملف .htaccess وهو:
كود:
RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ http://helpernt.com/$1/amp [L,R=302]
مع تغيير http://helpernt.com/ الى رابط موقعك.


التعديل الأخير تم بواسطة هيلبرنت ; 04-16-2018 الساعة 01:57 PM
قديم 07-17-2017, 10:07 PM
المشاركة 2
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
محجوز للصور

تم حفظ الصور بالمرفقات

التعديل الأخير تم بواسطة هيلبرنت ; 04-16-2018 الساعة 01:58 PM
قديم 07-18-2017, 08:27 PM
المشاركة 3
sadat
.:: عضو فعال ::.
  • sadat غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
هى دى الموووووووووووووووووووووا ضيع

قديم 07-21-2017, 01:04 AM
المشاركة 4
abo-karim
.:: Administrator ::.
  • abo-karim غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
هى دى الموووووووووووووووووووووا ضيع


شكرا لك ياباشا

قديم 07-21-2017, 09:57 AM
المشاركة 5
عابر سبيل
.:: عضو فعال ::.
  • عابر سبيل غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
شرح ممتع أحسنت

قديم 07-26-2017, 12:15 AM
المشاركة 6
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
موضوع قوى .

قديم 01-23-2018, 11:39 AM
المشاركة 7
غاوى مشاكل
.:: عضو تشيط ::.
  • غاوى مشاكل غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
مشاء الله

طريقة راااااائعه

قديم 04-15-2018, 05:54 PM
المشاركة 8
sniper hearts
.:: عضو مشارك ::.
  • sniper hearts غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
لايوجد طريقه الا الان تفعل ذلك في كافة صفحات المنتدي الجيل الثالث فهل عندك طريقة لذلك اخي الكريم

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

نريد لكل المنتديات ان امكن

قديم 04-16-2018, 01:58 PM
المشاركة 9
هيلبرنت
.:: رفيق درب ::.
  • هيلبرنت غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
لايوجد طريقه الا الان تفعل ذلك في كافة صفحات المنتدي الجيل الثالث فهل عندك طريقة لذلك اخي الكريم

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

نريد لكل المنتديات ان امكن
انت مايشغلك هو المواضيع لانها حتى التى تظهر بجوجل مش موجة الموقع

قديم 08-26-2018, 09:44 PM
المشاركة 10
sadat
.:: عضو فعال ::.
  • sadat غير متواجد حالياً
افتراضي رد: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
بارك الله فيك

اضافة رد

العلامات المرجعية

ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)


أدوات الموضوع

الانتقال السريع
المواضيع المتشابهه للموضوع: ماهو مشروع amp من جوجل؟ وكيف تستطيع تركيبه بمدونتك (بلوجر , ووردبريس)
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
[ شرح ] : كيف تستطيع جوجل ان تميز الروابط المدفوعة ؟ هيلبرنت ركن تقنيات محركات البحث سيو SEO 3 02-03-2020 06:08 PM
ماهو مصير مدونة بلوجر بعد غلق جوجل بلس هيلبرنت ركن تطوير المواقع 4 02-28-2019 07:32 PM
ماهو المقصود بترتيب موقعك فى جوجل وكيف تقم بتحسينه؟ هيلبرنت ركن تقنيات محركات البحث سيو SEO 0 01-21-2016 09:06 PM
ماهو جوجل ساندبوكس google sandbox وكيف تحمى موقعك من الواقع به هيلبرنت ركن تقنيات محركات البحث سيو SEO 2 01-21-2016 08:57 PM
ماهو الـ Kiosk في ويندوز 8 وكيف تقوم بتفعيله هولستن الحربي أنظمة التشغيل ومشاكل الحاسب والشبكات 0 10-04-2015 05:24 AM




الساعة الآن 03:11 PM
RSS 2.0XML Site MapTAGS SiteInfo SiteRSS FeedMap SectionsvB MapsMap TagSitemap ForumMaps Forum