آموزش اعتبار سنجی در گوگل AMP

آموزش اعتبار سنجی در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش اعتبار سنجی در گوگل AMP خواهیم پرداخت.

گوگل AMP راهی است برای بارگیری سریعتر صفحات وب در دستگاه ها. برای کار با amp می توانیم از HTML5 ، CSS و مولفه های amp استفاده کنیم.

گوگل AMP روشهای زیادی برای تأیید اعتبار صفحه آمپ ارائه می دهد. برخی از مهمترین مواردی که ما قصد داریم در این درس مورد بحث قرار دهیم عبارتند از:

• با استفاده از development=1 #
• با استفاده از اعتبار سنج Amp
• با استفاده از خط فرمان

اجازه دهید در مورد هر یک از آنها به طور مفصل بحث کنیم.

استفاده development=1 #

هنگامی که دانستید صفحه شما برای تأیید اعتبار آماده است ، کافیست  development = 1 # را به انتهای url صفحه اضافه کنید و همین مورد را در ابزارهای توسعه دهنده chrome آزمایش کنید.

همانطور که در مثال زیر نشان داده شده است ، می توانید در انتها development=1 # را به url صفحه html خود اضافه کنید –

http://localhost:8080/googleamp/test_amp.html#development=1

آدرس اینترنتی فوق را در مرورگر و در کنسول Google Chrome وارد کنید. این خطاهایی را که از نظر مشخصات آمپر معتبر نیست ، لیست می کند.

در اینجا خطاهایی که برای test_amp.html دریافت کرده ایم آورده شده است.

می توانید خطاهای نمایش داده شده را برطرف کنید و پس از برطرف شدن تمام خطاها ، به صورت زیر نمایش داده می شود –

استفاده از اعتبار سنج Amp

Amp دارای یک ابزار اعتبار سنجی است که در آن می توانیم محتوای HTML را وارد کنیم و وضعیت را به صورت PASS یا ERROR نشان می دهد و همچنین خطای صفحه را نشان می دهد. پیوند این است – https://validator.ampproject.org/

صفحه نمایش برای ابزار اعتبار سنجی به شرح زیر است –

مثال خطا در محتوای صفحه در زیر نشان داده شده است –

با استفاده خط فرمان

با استفاده از دستور زیر می توانید بسته npm را نصب کنید –

npm install -g amphtml-validator

ما یک پوشه amptest / و فایل amp_test.html را در آن پوشه ایجاد کرده ایم. با استفاده از دستور زیر در خط فرمان اجازه دهید اعتبار amp_test.html را تأیید کنیم.

amphtml-validator youramppage.html

اجازه دهید برخی از برچسب ها را از صفحه حذف کنیم تا ببینیم آیا خطا را نشان می دهد یا خیر.

خطای نمایش داده شده تا زمانی که وضعیت را به عنوان PASS بدست آوریم قابل رفع است.

منبع.

لیست جلسات قبل آموزش گوگل AMP

1. آموزش گوگل AMP
2. بررسی اجمالی گوگل AMP
3. مقدمه گوگل AMP
4. آموزش تصاویر در گوگل AMP
5. آموزش فرم در گوگل AMP
6.  آموزش Iframes در گوگل AMP
7. آموزش ویدیو در گوگل AMP
8. آموزش دکمه در گوگل AMP
9. آموزش Timeago در گوگل AMP
10. آموزش Mathml در گوگل AMP
11. آموزش تگ Fit Text در گوگل AMP
12. آموزش شمارش معکوس تاریخ در گوگل AMP
13. آموزش انتخاب کننده تاریخ در گوگل AMP
14. آموزش استوری در گوگل AMP
15. آموزش انتخاب کننده در گوگل AMP
16. آموزش لینک در گوگل AMP
17. آموزش فونت در گوگل AMP
18. آموزش لیست در گوگل AMP
19. آموزش اعلان کاربر در گوگل AMP
20. آموزش next page در گوگل AMP
21. آموزش ویژگی ها در گوگل AMP
22. آموزش استایل ها و CSS سفارشی در گوگل AMP
23. آموزش کلاس های CSS پویا در گوگل AMP
24. آموزش اکشن ها و رویدادها در گوگل AMP
25. آموزش انیمیشن در گوگل AMP
26. آموزش اتصال داده در گوگل AMP
27. آموزش طرح بندی در گوگل AMP
28. آموزش تبلیغات در گوگل AMP
29. آموزش تجزیه و تحلیل در گوگل AMP
30. آموزش ویجت های اجتماعی در گوگل AMP
31. آموزش نحو در گوگل AMP
32. آموزش اعتبار سنجی در گوگل AMP
33. آموزش اجزا جاوا اسکریپت در گوگل AMP