For SEO, mobile optimization has become more important than before, and you should get your website ready for Google’s mobile-first index.
Google’s Mobile-first Index ranks web pages based on their mobile version.
When your website is mobile-optimized, it should:
Another reason to follow mobile SEO best practice: Mobile searches that happened on Google have exceeded desktop searches for some time, and nearly 60% of all Google searches came through mobile devices.
Get Mobile SEO Best Practices as a PDF Document
The first tactic for optimizing your website for mobile SEO is to create a responsive design mobile website.
The old approach used to be that you developed a website for desktop users and devices. After mobile devices (or smartphones) came out and people are using the web browsers from their phones, many of these desktop-ready websites don’t work on mobile web browsers, or they simply cannot be displayed properly.
To adopt to mobile, some businesses went a little far by creating a new separate website only for mobile users. This approach leaves them with two websites (i.e. mobile and desktop) to maintain in the long run which isn’t ideal.
With responsive design, you only have one website that works well on mobile (hopefully) and still works on desktop. Note, the desktop website usually works well with tablet devices.
A user visiting your responsive website will see the first website with desktop, the second website with tablet, and the third website with mobile. As your width of the web browser shrinks from desktop to mobile, your responsive website will still display properly, and users will be able to read your website as normal.
In technical words, responsive design is a mobile website strategy in which your website’s URLs always stay the same, whether a user visits your site through a desktop mobile web browser. For example, the homepage’s URL for each device type:
www.example.com – desktop
www.example.com – tablet
www.example.com – mobile
Your web server sends the same set of HTML codes to web browsers (of all devices) that request your web pages. Your site’s CSS alters the rendering of the web page depending on the screen width of the specific device.
The Viewport of your responsive design website must be configured within the head section of each page.
<meta name="viewport" content="width=device-width, initial-scale=1">
Make sure your website loads fast enough for mobile users. People often use mobile phones when the connection speed isn’t optimal. Under this condition, it takes longer to load web pages.
Optimize your website to load super fast, not just mobile friendly, then it’s going to create a better experience that will help you improve your organic search traffic.
A user may do a Google search from a mobile device, click your web page’s search result, and land on your page. If it takes too long to load, what will usually happen? The user will usually click the web browser’s back button – This is a bad signal telling Google the user doesn’t like your website.
To speed up the loading of your website (or web pages), implement the following:
Migrate to HTTP/2, if your website is still running on HTTP/1.1. HTTP/1.1 is a protocol from the Internet’s old days and has many web performance issues.
HTTP/2 addresses many of the old performance problems that happened in HTTP/1.1, including lifting concurrent request limits and making header compression available.
Use File Compression.
Set up file compression on your web server, such as GZIP. File compression reduces the amount of data your website sends to the users.
Deliver Images Responsively.
Assume you’ve already optimized all the images by using their smallest size versions.
Now start delivering the images responsively.
Users access your website from devices of many different screen sizes. This gives you an opportunity to send images that are the best fit for the specific screen sizes they’re using. By matching the images to the most suitable screen sizes, you’ll certainly speed up the loading of image files for mobile users.
Add an srcset attribute to the “img” tag. This specifies an array of images that your website users’ web browser can choose from.
Replace Animated GIFs with Videos.
The problem with animated GIF files is that they’re often large files.
Whenever you can use a video, don’t use animated GIFs. By doing so, you may reduce the file size up to 80%.
Minify Text Files.
Minification removes all the unnecessary whitespaces in your text-based files. This can reduce the amount of data you send to users without affecting any function of your website.
When you have set up Google AMP on your mobile website, AMP ensures your website is super user-friendly for mobile devices.
When users do Google searches on mobile devices, Google shows a lot of search results that are AMP-friendly (or AMP-enabled). It makes you believe AMP-friendly web pages (or websites) have their own mobile index in Google’s index.
You want to make sure that you have a mobile-friendly design website, and are using Google AMP framework. It will boost your chance to get more Google mobile search traffic.
Refer to the official AMP site:
Test your mobile website’s with Google’s mobile friendly tool:
Test loading speed under mobile environment with this tool (i.e. TestMySite):
Test your mobile site’s optimization with PageSpeed Insights (Tool):
Each tool should give some issues that have slowed down the loading of your website (or web pages), or even suggestions on how to fix the issues. Make sure you follow up the suggestions and fix the issues.
Disable popups on mobile devices, even when you have multiple popups for desktop screens/users.
Mobile screens are smaller.
For example, if you have a popup that takes up the entire mobile screen, users will have to click “exit” to close your popup. When this happens on a mobile device, it irritates your users. Closing a popup isn’t as easy compared to desktop to just exit out.
When you show too many popups on mobile devices, it increases your site’s bounce rate, and decreases time on site. This sends Google a signal of bad user experience. As a result, Google organic ranking of your web page (or website) may start going down.
Make sure your website’s header image is small.
When your header (i.e. header banner image) is really large, mobile devices don’t have screens large enough to show the large header image, and your most important content above the fold.
This will make users keep scrolling down their screens to get to your important content. And this is bad user experience.
Make sure your important text content on your web page is very readable, large, and dark in color. This allows users to read your page easily.
Google’s mobile-first indexing means that the mobile version of a website is considered the primary version when Google determines organic ranking.
Make sure you’re showing everything (i.e. all the content) of your web pages to Google. This will help your mobile website do better in Google’s mobile-first index.
A website may take mobile user experience into consideration, and display only some of the content of a page to users. If users want to see more of the content of the page, they are required to click “load more”.
This setup obviously improves the web page’s load time. But the web page isn’t showing Google all the content at once i.e. Google doesn’t click “load more” to retrieve all the content of the page. The organic ranking of the web page will be negatively affected.
Make sure the web page can show Google everything when loading, including all the text, all the required HTML, all the CSS, etc. This allows Google to understand the site architecture for mobile.
If you have to make all the content of a web page visible to Google, but is restricted with the small size of mobile screens, then you can collaspe or hide the content in tabs. With this approach, Google’s mobile-first indexing will be able to retrieve all the content.
Promote Your Website with Free Traffic
Get the Complete List as a PDF Document
Copyright 2016-2018 www.chinamobileseo.com
12th Floor San Toi Building 137-139
Connaught Road Central Sheung Wan