To check a valid AMP Blogger page is pretty easy when you can append #development=1 at your browser URL bar & automatically view the errors at your browser console log.
But what if you need instant access to check for AMP validation? Below we will share how to easily create a link anywhere in your Blogger powered AMP template for you to check your page for AMP specific validation purposes.
Before doing so, backup your template to your computer.
Click Edit HTML and find
<body>(or anywhere in your template that might be suitable to reach from your blogger page).
Copy below codes and save it in your template.
<a expr:href='"https://validator.ampproject.org/#url=" + data:blog.url + "%3Fm%3D1"' target='_blank'>CHECK VALID AMP</a>
Click Save Template
You can change the text highlighted yellow to whatever text require.
Refresh you blog pages, and a link will be displayed (in this case right at the top of your blog page) for users to click.
Once it is clicked, automatically a new window will appear at ampproject website & display either you blog page is valid or has errors.
You can remove or comment out the code above in your template HTML if it is not in use.
Added Features on BlogrAMP Blogger TemplateGood news! On BlogrAMP templates, this built in feature is already installed for you. You can easily activate or deactivate your blog pages AMP validator link/button just by adding a simple line of code. Here's how.-
Go to Template HTML and find
At class attribute add
dev-modeand it should look like so:-
<body class='dev-mode' id='blogramp'>
Click Save Template & automatically a button is displayed for you to click & check your blog page is a valid AMP HTML page.
If you do want this button to display, then remove the
<body>class attribute. All made easy for users to maintain & making sure your Blogger blog pages are valid Accelerated Mobile Pages, even if you have made small changes.
Hope it helps. Tell us what you think in comment section below.