Owning a mobile device website is an important factor in increasing the influence of a website. If your website has not been equipped with a corresponding mobile terminal website, it will be gradually abandoned in the rapidly developing mobile Internet era. In recent years, search engines such as Google and Google have also vigorously strengthened the mobile search experience, and even launched some tools and reports to check the practicability of mobile devices.
Google mobile optimization method to increase website traffic:
Single web page test
Open: https://search.google.com/test/mobile-friendly ,for mobile device suitability testing;
Enter your website-run the test;
The entire website test
First verify the website ownership in Google Search Console, which we often say is Google Webmaster Tools, that is, whether you have installed the Google Search Console code on your website to determine whether you own the website;
Google Search Console-Enhancements-Mobile usability
Optimize according to the “mobile device usability” report tips.
Incompatible plugin used
Note Web pages may contain plugins (such as Flash) that most mobile device browsers do not support.
Solution: Delete Flash or use HTML5 instead.
No end viewport set
The webpage does not define the viewport attribute, which is used to instruct the browser to automatically adjust the webpage size or zoom the webpage according to the device screen size).
Solution: Insert the following code into the <head> tag.
<meta name = “viewport” content = “width = device-width, initial-scale = 1” />
Viewport is not set to “device screen width”
The viewport property of the webpage has been set to a fixed width, and the webpage cannot be automatically adjusted according to different screen sizes.
Solution: adopt responsive layout, and the webpage will automatically adjust the size according to different device screens.
Content width exceeds screen display range
The width of the content on the web page exceeds the display range of the screen. You need to drag the horizontal scroll bar to view the content on the web page. This shows that some elements on the web page have set absolute width values.
Solution: Use a responsive design method to set the width to a relative value, or when the screen is smaller than a certain width, some elements are hidden.
The text is too small to read
The font is too small and the content is blurred. Users who use mobile devices need to “zoom with two fingers together” to read the text on the webpage.
Solution: In the same way as above, insert the following code into the <head> tag.
<meta name = “viewport” content = “width = device-width, initial-scale = 1.0”>
The distance between clickable elements is too close
The distance between touch elements (such as buttons and navigation links) on the webpage is too small, which causes mobile device users to usually press adjacent elements when they tap the desired element with their fingers.
Solution: Properly increase the spacing or line height between the button and the navigation link.