- Google AMP - Discussion
- Google AMP - Useful Resources
- Google AMP - Quick Guide
- Google AMP - Cors
- Google AMP - Custom Javascript
- Google AMP - Caching
- Google AMP - Validation
- Google AMP - Basic Syntax
- Html Page To Amp Page
- Google AMP - Media
- Google AMP - Social Widgets
- Google AMP - Analytics
- Google AMP - ADS
- Google AMP - Layout
- Google AMP - Data Binding
- Google AMP - Animations
- Google AMP - Actions And Events
- Google AMP - Dynamic CSS Classes
- Styles And Custom CSS
- Google AMP - Attributes
- Google AMP - Next Page
- Google AMP - User Notification
- Google AMP - List
- Google AMP - Font
- Google AMP - Link
- Google AMP - Selector
- Google AMP - Story
- Google AMP - Date Picker
- Google AMP - Date Countdown
- Google AMP - Fit Text
- Google AMP - Mathml
- Google AMP - Timeago
- Google AMP - Button
- Google AMP - Video
- Google AMP - Iframes
- Google AMP - Form
- Google AMP - Images
- Google AMP - Introduction
- Google AMP - Overview
- Google AMP - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Google AMP - Vapdation
Google AMP is a way to get the web pages to load faster on the devices. To work with amp we can make use of HTML5, CSS and amp-components.
Google Amp provides many ways to vapdate an amp page. Some of the important ones that we are going to discuss in this chapter are −
Using #development=1
Using Amp Vapdator
Using command pne
Let us discuss each of them in detail.
Using #development =1
Once you know your page is ready to be vapdated, just add #development=1 to the end of the page-url and test the same in chrome developer tools.
You can add #development=1 to your html page url at the end as shown in the example given below −
http://localhost:8080/googleamp/test_amp.html#development=1
Hit the above url in the browser and in the Google Chrome console. It will pst the errors which amp thinks are invapd from amp specification point of view.
Here are the errors we have got for test_amp.html.
![Test AMP](/google_amp/images/test_amp.jpg)
You can fix the errors displayed and once all the errors are fixed it will display as follows −
![Errors Fixed](/google_amp/images/errors_fixed.jpg)
Using Amp Vapdator
Amp has a vapdator tool wherein we can enter the HTML content and it displays the status as PASS or ERROR and also shows the error on the page. The pnk is −
The display for amp vapdator tool is as shown below −
![vapdator tool](/google_amp/images/vapdator_tool.jpg)
The example of error in the page content is shown below −
![page content](/google_amp/images/page_content.jpg)
Using Command Line
You can install the npm package using the following command −
npm install -g amphtml-vapdator
![Command Line](/google_amp/images/command_pne.jpg)
We have created a folder amptest/ and saved amp_test.html file in that folder. Let us vapdate amp_test.html using the following command in the command pne.
amphtml-vapdator youramppage.html
![remove tags](/google_amp/images/create_folder.jpg)
Let us remove some tags from the page to see if it displays the error.
![remove tags](/google_amp/images/remove_tags.jpg)
The displayed error can be fixed till we get the status as PASS.
Advertisements