How to Get Mobile Friendly as Google Rolls Out Mobile-First Indexing
Google have this week announced the roll out their mobile-first indexing following a year and a half of testing.
The internet giant first unveiled its plans to change the operation of its search index in 2016.
In December 2017 Google had begun to switch a small number of sites to mobile-first indexing but did not specify which sites.
The introduction of mobile-first indexing marks the beginning of algorithms being shifted to use the mobile version of a website’s content to index pages, and to understand structured data and show site snippets in search results.
What is mobile-first indexing?
The use of mobile-first indexing means the mobile version of a web page is used “for indexing and ranking, to better help our – primarily mobile – users find what they’re looking for,” the company wrote in a blog post.
The majority of people today search Google on their mobile device, and have done since 2015.
However, despite this increase Google claims that for those times when a non-mobile friendly page is relevant, if it has the best information available it will still appear higher in search than mobile friendly pages.
Recently Google added a signal using page speed to help determine a page’s mobile search ranking. From July this year, content that’s slow to load will be down ranked.
Google said the new mobile-friendly indexing won’t directly impact how your content is ranked, however mobile-friendly content will “perform better” in mobile search results.
Google has not said when the rollout of the mobile-first indexing will be complete.
How to make your site mobile-friendly
While there may not be that much you can do about Google’s roll out of mobile-first indexing, there are steps you can take to make sure your website is as mobile-friendly as possible.
The first is to use a mobile friendly preferred width. This means that a mobile viewer visiting your site won’t need to zoom in or out to see the site – the extra space to the left and right that would usually appear is removed.
To do this, simply load your website in your desktop browser and resize the window to the narrowest available width where the text can still be read. Look up the size of that window and use it as your site’s preferred viewport width. Do this by adding this meta tag to the page’s head:
<meta name=viewport content=’width=700′>
Another way to help make your website mobile friendly is to set image widths to 100%. Once you’ve sorted your preferred width, it’s time to take a look at those images. Some images will now be too wide as you’ve changed the width so to manage this you must give your images a maximum width of 100%. This will automatically resize images if they become too large for mobile viewing.
To set image widths to 100%, add this code to your website’s CSS stylesheet:
img {
max-width: 100%
}
Another problem regularly encountered when viewing a website from a mobile device is fixed positioning obscuring the site when zooming in and out. If your website has a fixed header or sidebar, this is something you’ll want to sort immediately.
The best way to go about this is to disable the fixed positioning by using this:
<style>
/* regular css */
#header {
position: fixed
}
@media screen and (max-width: 500px) {
/* applies only if the screen is narrower than 500px */
#header {
position: static
}
}
</style>
The final tip to help you get your website mobile friendly is to use standard fonts. While custom fonts can give your website a professional look, they can slow down the loading of a site, and show a blank screen for some seconds before the text appears.
Sticking to standard faults will remove this problem and make text appear instantaneously for mobile users.
What do you think of Google’s mobile-first indexing? Have you optimised your website for mobile in preparation? Drop us a comment in the section below with your thoughts.
