Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Dynamically Add and Check Mobile Friendly Test by Google on Blogger Pages

  1. Blogr-AMP
  2. Learn
  3. Resources
Dynamically Add and Check Mobile Friendly Test by Google on Blogger Pages
26 February
Views
Blogger users are well aware the importance of having mobile friendly blog pages for their Blogger blog designs in order to take advantage in getting more readers/traffic via search results especially coming from mobile searches.

Early 2016, Google also announced the implementation of AMP (Accelerated Mobile Pages) in mobile search results which in replace the Mobile Friendly indicator 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.

Mobile Freindly Test for Blogger Template with responsive designs

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='&quot;https://search.google.com/search-console/mobile-friendly?utm_source=psi&amp;utm_medium=link&amp;utm_campaign=psi-ux-banner&amp;hl=en-US&amp;url=&quot; + data:blog.canonicalUrl + &quot;?m=1&quot;' target='_blank'> MOBILE FRIENDLY TEST </a>
</div>

Save Template & Preview your changes.

The Results


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.

Why ?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=1 to the blog URL's to indicate the page version is served on mobile devices - it just makes sense ;)

Useful Resources


You can also find useful resources for example:-


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 ;).

Learn Resources
Blogr-AMP Blogger AMP HTML TemplateRated 5/5 based on 98 reviewsHow to check Blogger blogs template designs using Mobile Friendly Test by Google search console useful tool help out during the blog or website design development phase especially when using responsive designs fundamentals for their web builds.Blogr-AMP: Dynamically Add and Check Mobile Friendly Test by Google on Blogger Pages
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Blogger users are well aware the importance of having mobile friendly blog pages for their Blogger blog designs in order to take advantage i....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Working to get connected...

Ooops! We're having trouble connecting. Please refresh your page or contact us...

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Working...

Ooops! We're having trouble connecting...
Contact Us