Are you ready for Google Mobile Friendly Test? These are the following tips you need implement for your website to pass Google Mobile Friendly Test. It will also help your mobile visitors to render your website properly. Finally it will be get a mobile badge in Google SERPs as it will be known as your site is optimized for mobile devices. Kindly note, To get mobile badge in SERPs, your all pages should follow these mobile friendly rules. Then only your website will considered as mobile friendly. Check your all non-mobile friendly pages through Google Web Master Tool under Mobile usability. I suggest take a backup before making any changes in your website. So in-case, If you will got any problem while modifying you will easily revert back.
Leading Search Engine company – Google wants to show Mobile friendly website in SERPs for mobile visitors. I highly appreciate Google for this new Ranking Algorithm for providing user-friendly search results. Now in future, I hope we will see more mobile-friendly website in SERPs. According to Search Engine Land report – “Google will take action for Mobile friendly Test from 21st April 2015.” So be ready to optimize your website for Mobile devices, and featured tablet phone.
This is How you can pass Google Mobile Friendly Test
At this time, This website is well optimized for Desktop user mobile platform also. Follow these tips to make your website mobile friendly. These all tips are based on Google Guidelines and some of my personal experience.
Allow Google Bot to crawl website CSS, JS and Images files
User-agent: * Allow: /wp-content/themes/js/ Allow: /wp-content/themes/css/ Allow: /wp-content/plugins/abc/fonts/
Test Mobile Friendly URL
Check your domain in the Webmaster Tool, If you see any error under mobile usability, You should fix immediately. If you have small website of 10-50 pages. Or, If you don’t know how to use Google Webmaster Tool. Don’t worry, You can also check by Smartphone by searching on Google in this way. eg. site:yourdomain.com
You will see a Mobile Friendly label just beginning of your website.
Increase Website User Experience for Mobile Devices
Check your website at Google PageSpeed Insights. You may see some recommendations. You need to Size the tap targets appropriately. As we know fingers are more clumsy than mouse pointer. So, your button size should be appropriate. You can fix this problem by adding gap between your links and make your buttons larger. See my page footer, How I given space between TOS and Privacy link. Another tips, If you are using list HTML tag, Use <br> code. As I have used in my footer fourth widget.
Configure the META viewport
To pass Google Mobile Friendly Test, you should use Meta Viewport. It allow browser to render page according to the visitor mobile screen. Just You need to add this code above </head>. If it is already, then don’t. A good viewport is helpful for mobile SEO as well as for visitors. So, they will not bounce from your site very quickly. This is a single piece of meta tag can do great thing.
<meta name=viewport content="width=device-width, initial-scale=1">
Site Content should not fall outside the viewport
Means you content should not be wider than screen size. Google wants to rank higher such website which is well responsive according to device screen. By using a good responsive theme, You can take advantage of CSS media-queries. A good theme having all major screen size pre-defined media queries to render properly elements like images, table, iframe, etc. Any of your website should not fall outside the viewport. All popular website are taking advantage of media queries to maintain the viewport. You should specify dimension for images carefully.
For instance, if you wants share larger size screenshot. Then just hyperlink the similar-smaller image to larger image. If your content are outside the viewport, generally it may be Images.
Link smaller image to larger images. <a href="large-size-image-path" > <img src="small-size-image-path" width="number" height="number"></a> Resize image to small size by height and width tags. (Not recommend for Page Speed) <img src="small-size-image-path" width="480" height="20">
Specify Correct DocType
If you creating a custom website with offline tools like Adobe Dreamweaver, You should think about this. Wrong DocType may lead to render your pages in different way and you may not pass Google Mobile friendly Test. Moreover only a correct DocType will support your few html tag which you have used in your website.
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
Use Legitimate Font Size
According to Google Guidelines. Your website font size must have at least 16 CSS pixels. It is highly recommend to keep a good font size. On mobile screen It will be helpful for readers to understand your content properly.
Mobile friendly Test Rule says, your website should not use plugins such as Flash, Silverlight, and Java. Most mobile devices do not support plugins, and plugins are a leading cause of hangs, crashes, and security incidents in browsers. So, Google highly recommend to remove all those elements from your website. I think People come on any website for content not 100 animated/auto-play videos widgets.
Avoid Non-Mobile Friendly URL 301 Redirect
Yes, you right read. Any type of ugly 301 redirect can destroy your plan for passing google mobile friendly test. Check your .htaccess code or redirect manager where ever you have set such type of URL from your domain name. You should remove it immediately or update your design according to Google mobile friendly Test.
What to do when Google Mobile Friendly tool say “test failed to fetch the requested url”
Make your website visible to the Search Engine. Keep your website up to date with more newer mobile friendly Content. Google anytime can crawl your website to test is it mobile friendly or not. Never keep your site in maintenance mode.
Implement Dynamic Design Method
- Some more Tips to Make your site mobile friendly
- Avoid adding “Desktop View label” link in footer.
- Keep ‘noindex’ all non-mobile friendly pages.
- Use Call to Action Feature.
- Avoid Ugly Iframe
- Only add useful links in website navigation and it should clean coded.
- Approx 80% traffics comes on any website directly from mobile devices. So, it is advised to give more priority to mobile devices users.
- Use authentic theme and Mobile-SEO-friendly theme
- For performance reason, create website according to the Device platform(user-agent).
- WordPress user can use WPtouch Mobile Plugin
Google Mobile Friendly Web Designing Tips by Google Developer : Mobile friendly layout guidelines.
I hope, You enjoyed this post. If anything missed you can share in comments. It will be great pleasure for me, if you will help others to find this article. So, Please share using below Social Media Links.