Mobile pages will soon be the default version used in Google search rankings as more and more users rely on mobile devices for the majority of their online activities. Content on mobile phones needs to be displayed correctly to make it easier for users to get to the main points without cutting out the content. The structure of your content is important and needs to be easy to navigate around whilst still being digestible.
Google has started to use the mobile version of the web as their primary search engine index, where they have moved to crawling the web from a mobile browser view. Although this is not likely to be launching till early 2018, start by taking a look at our suggestions for designing content for the mobile-first index.
Table of contents
By using a table of content, you create a great way to show how content is organised, and combined with HTML bookmarks, allows users to quickly jump to sections they are interested in. For example;
HTML headings
Expandable content
Tabs
Filters
Summary, highlights, TL;DR
Bullet points or lists
Bold or italic text
Highlight important points
User friendly
Page speed
What about desktop?
Recommendations
HTML headings
Users tend to skim read pages by the headings given as well as acting as anchor links for the contents. HTML headings, heading tags, help to organise content into sections to structure the page in a logical manner. The topical subheadings for example used in this blog is h2 while the title is h1.
Expandable content
Expandable content areas are typically used for more details or FAQ sections. They are great to keep a page shorter and easier to navigate, while still allowing access to important information. Content hidden for UX reasons will be given full weight in the mobile-first index, whereas the desktop index slightly discounts this hidden content.
Tabs
Tabbed content isn’t used as much on mobile due to space limitations, but is an alternative to expandable content as it serves the same purpose. It hides content that may not be needed right away.
Filters
Filters are used as an easy way to cut out large parts of content that a user may not be interested in. By giving the option to see only what they want to see, it is much easier to find the information they are looking for.
Summary, highlights, tl;dr
By creating a summary or highlights, on-the-go mobile readers quickly take in your content and determine if they want to read more in depth. By using highlights or a summary, readers can take in the main points of the article quickly, something commonly used on news, financial and sport websites where the important information can be summarised in a few points.
Bullet points or lists
Convey a large amount of information quickly through the use of bullet points and lists.
Bold or italic
Bold text catches the eye of readers – just like the use of italics. Bold text is a great addition to lists to make prioritised points stand out even more.
Highlight important points
Use quotes, block quotes or tweetable moments for readers to easily recognise key points and tell them to find this information important enough to make it stand out. This is commonly used for statistics.
User friendly
To optimise your site, here’s a few issues that search consoles look at:
1. Flash usage – most mobile browsers don’t support Flash, use more modern technologies such as JavaScript and HTML 5.
2. Viewpoint not configured – the viewpoint metatag aids browsing in scaling a page to suit a specific device.
3. Fixed-width viewpoint – this problem attempts to circumvent mobile design with fixed width pages and is best shelved when a responsive design is adopted.
4. Content not sized to viewpoint – here the page content does not fit the window, and a user has to scroll. This can be fixed with relative rather than fixed widths.
5. Small font size – this is a scaling issue and requires users to pinch the screen to zoom in.
6. Touch elements too close – this is a common usability issue where it is too hard to tap a given element without also hitting neighbouring element.
7. Interstitial usage – a full-screen pop-up often represents poor user experience on a mobile device and is something that Google is looking to crack down on.
Today more people search on mobile phones than computers, with people being five times more likely to leave a site if it isn’t mobile friendly
Page speed
Page speed is important for all devices, but it can be critically important on mobile when users are out and about looking for quick answers. Make sure to think about the use of data and 4G as well as WiFi network. 4G has delivered some great speed improvements, but relies on the network coverage from providers. Over half of mobile users will leave a website if it takes longer than three seconds to load, check how long your page takes to lead with this Mobile-friendly test. Over half of mobile users will leave a website if it takes longer than three seconds to load.
What about desktop?
This switch to a mobile-first index doesn’t mean that desktop content will stop ranking. Many of these same practices work great for desktop, make sure you upload all content into the DOM. If you need to take action before content is loaded into the DOM, then Google won’t see it.
Recommendations
Here’s a brief list to prepare for the mobile-first index:
1. If you have a responsive site or a dynamic serving site where the primary content and markup is equal across mobile and desktop, you shouldn’t have to change anything.
2. Make sure your mobile site has the content you want to rank for.
3. Make sure structured data is on your mobile site. When adding structured data, avoid large amounts of markup that isn’t relevant to the specific information content of each document. Compare desktop and mobile by typing the URLs of both versions into the Structured Data Testing Tool and comparing the output.
4. If you have a site configuration where the primary content and markup is different across mobile and desktop, you should consider making some changes to your site.
5. Make sure rel-annotations are on your mobile sites.
6. Use the robots.txt testing tool to verify that your mobile version is accessible to Googlebot.
7. Sites do not have to make changes to their canonical links; Google will continue to use these links as guides to serve the appropriate results to a user searching on desktop or mobile.
8. If you are a site owner who has only verified your desktop site in Search Console, make sure you add and verify your mobile version.
Google has said changes shouldn’t be easily seen or have an impact on the mobile-first index. In fact, Google has said it hopes there is little to no impact after it is fully rolled out.
How will your readers consume your content? How will you make it as easy as you can to find the information readers are after?
