اضافة AMP للووردبريس صفحات الجوال Accelerated Mobile Pages

⚠️ نُشر في 19 مارس 2017 — بعض المعلومات قد تكون قديمة.

بقلم: LSG-alraih نُشر: 19 مارس 2017 — 10:13 م القراءة: 3 دقائق الكلمات: 537 مشاهدات: 13 آخر تحديث: 15 نوفمبر 2019 — 10:09 ص

📋 محتويات المقال

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

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

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

اقرأ أيضاً

من هي إنجي أفلاطون وفاة Inji Aflatoun

ويأتي هذا القرار من قبل قوقل الرائدة في مجالها, بعد دخول تصفح المواقع عبر الهواتف الذكية لأكثر من 80% من التصفحات اليومية.

كما تحدثت قوقل بأنه تم من يوم الإربعاء 24 فبراير 2016, البدء في عملية إظهار علامة البرق بجوار المواقع المتوافقة والمبنية بخدمة AMP.

ذات صلة

إيقاف منصة قوقل بلس

وفعلاً تم البدء مع مواقع عملاقة في البدء في تطبيق HTML 5 على مواقعها كما هو الحال في Pinterest و BuzzFeed و LinkedIn و Guardian بالإضافة إلى New York Times .

إيضاً الووردبريس بدأت في الشروع بها أيضاً, وقد قامت بعمل صب دومين خاص بشرح الخاصية لـ AMP لتحسين أداء وفتح المواقع على الجوالات.

قد يهمكشرح مسك الكلمات في قوقل عن طريق AdWords‏ مسك الكلمات في جوجل

مثال على طريقة عمل AMP

هنا نعرض مثال مبسط لطريقة عمل الخدمة على الإحصائيات تابع التالي

<amp-analytics>

{
    “transport”: {“xhrpost”: false, “beacon”: true},
    “requests”: {
      “base”: “https://${trackingServer}/b/ss/${accounts}/1/AMP-0.1/s${random}”,
      “pageView”: “${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&AQE=1”,
      “buttonClick”: “${base}?AQB=1&vid=CLIENT_ID(adobe_amp_id)&pageName=${pageName}&j=amp&pe=lnk_o&v1=${eVar1}&AQE=1”
},
“vars”: {
      “trackingServer”: “metrics.example.com”,
      “accounts”: “reportSuiteID”,
      “pageName”: “Adobe Analytics Using amp-analytics tag”
},
    “triggers”: {
      “pageLoad”: {
        “on”: “visible”,
        “request”: “pageView”
      },
      “click”: {
        “on”: “click”,
        “selector”: “button”,
        “request”: “buttonClick”,
        “vars”: {
          “eVar1”: “button clicked”
        }
      }
    }
}

</amp-analytics>
ربما تشاهديلا شوت يعود إلى محرك البحث قوقل من جديد بعد حضر قوقل لموقع يلا شوت

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

كيف يمكنني أن أنشيء صفحة بإستخدام AMP

يمكنكم بكل سهولة إنشاء صفحة منفردة لـ مواقعكم بإستخدام شفرة وكود AMP بطريقة سهله وسلسلة كما هو التالي:.

اقرأ أيضاً

تحديث دوري جديد لخوارزمية جوجل لتحسين الموقع الأربعاء 4 نوفمبر 2015 سيو

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style 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>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

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

إذا عليك متابعة التالي في الكود

ذات صلة

أداة اختبار جديد البيانات المهيكلة مستندات جديدة، سيو تحسينات المواقع

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

هذه فقط بطريقة مبسطة للأكواد وكيفة إضافة الكود في التصميم الخاص بنا, ولتجربة المستخدم بطريقة اسرع, يمكنكم متابعة الموقع الخاص بالخدمة من التالي “ampproject.

إضافة AMP لمنصة الووردبريس

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

قد يهمك

ليلة رأس السنة محرك البحث جوجل يحتفل برأس السنة صور ليلة رأس السنة 2015

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

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

ربما تشاهد

العاب فلاش ولعبة Flappy Bird من أكثر الكلمات بحثاً في 2014

ومازال التطوير قائم على تحسين الإضافة للتوافق مع الخدمة والمشروع من قبل قوقل في صفحات الجوال المسرعة.

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

اقرأ أيضاً

فاسيلي كاندينسكي “قوقل” تحتفل بميلاده 148 معلومات

يمكنكم تحميل الإضافة من الرابط التالي ” AMPWORDPRESS“.

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

ذات صلة