Early 2016, Google also announced the implementation of AMP (Accelerated Mobile Pages) in mobile search results which in replace the
Mobile Friendlyindicator for websites or blogs displayed in mobile search.
This blog is an example how to implement AMP on Blogger blog templates without editing earlier posts & still uses most Blogger existing gadgets/widgets to extend a blog layout. You can read more information here at this AMP Blogger theme frequently asked question page.
Google via Google Search Console also provides an easy to use interface for website & blog owners to check if their web/blog pages are mobile friendly. A useful tool to use especially during the development phases of your website or blog designs.
In this post, we will share how to dynamically create a link on Blogger pages/posts to easily check URL's at Mobile Friendly Test page at Google Search Console. This link will dynamically output the blog page URL's and by clicking, will auto redirect to Google's Mobile Friendly Test page with the URL of the blog page automatically analyzed - minimal effort without copy & pasting URL's ;),
How to Add Dynamic Mobile Friendly Test Link on Blogger Template
Before proceeding, Backup your template to your computer.
Go to dashboard > Template > Edit HTML > find
<body>tag or anywhere suitable to display your dynamic link within the
<body> ... </body>tag.
Copy & paste below codes in template HTML
<div style="display:block; text-align:center; padding;15px;"> <a expr:href='"https://search.google.com/search-console/mobile-friendly?utm_source=psi&utm_medium=link&utm_campaign=psi-ux-banner&hl=en-US&url=" + data:blog.canonicalUrl + "?m=1"' target='_blank'> MOBILE FRIENDLY TEST </a> </div>
Save Template & Preview your changes.
When previewing your blog pages, a link with MOBILE FRIENDLY TEST will be displayed. By clicking this link, automatically another tab will be opened at Google's Mobile Friendly Test page with your blog URL automatically being analyzed & tested.
Once your blog URL have been analyzed, the results will be displayed. Users can determine weather the blog pages has passed the test or not & view in detail on any improvements that needs to be consider.
If you are satisfied with the results, you can also submit your URL for Google search indexing. Your link will be in queue for inclusion but please do not over do this URL submission.
?m=1 Used at Blogger Blog URL's for Analyzing at Mobile Friendly Test Page
By default, for Blogger blog pages, Blogger system appends the
?m=1to the blog URL's to indicate the page version is served on mobile devices - it just makes sense ;)
You can also find useful resources for example:-
- Open site-wide mobile usability report
- Learn more about mobile-friendly pages
- Post comments or questions to our discussion group
A live & working example implementation is also used at this AMP Blogger template blog. Click the MOBILE TEST by GOOGLE button above & you can see the results at Mobile Friendly Test page ;).