Follow This Checklist for a Mobile-Friendly Website
Mobile-friendliness is essential to modern websites, and that’s even more true now that it plays a role in search engine indexing with Google’s mobile-first indexing policy. The mobile version of a site is now the primary version that is matched to keywords in search results. As of 2019, mobile phones represented 53.3% of traffic worldwide, and 60% of organic search traffic came from mobile devices, making it vital to support accessibility to mobile devices. Furthermore, mobile-friendliness is a direct signal of quality to modern search engines using measures such as page health scores, so it will directly sway a page’s rank on search engine results pages.
What elements go into mobile-friendliness? Mobile devices have a variety of screen sizes, all smaller than desktop screens, meaning mobile browser pages need to be able to resize and display content without negatively impacting their appearance and presentation. Mobile devices using cellular data prefer smaller-sized webpages so they will load faster and spend less data.
To accommodate these needs, many sites have separate mobile and desktop versions of their sites, but this effort is wasted if the mobile site is not maintained and aligned with the desktop site. To ensure mobile-friendliness, review your site and test if it follows these steps.
Don’t: use noindex/ nofollow for mobile pages
Sites with a separate mobile version may have set mobile pages as noindex/nofollow to drive search engines to the desktop version and avoid multiple versions of the same page consuming search traffic. This should be fixed with noindex/nofollow directives removed so they can be indexed and the links within them will be followed to other mobile pages.
Don’t: use lazy-loading for primary content
Do: keep primary content on the page without lazy-loading to guarantee that it appears and is indexed consistently.
Do: use the same structured data as a desktop
Google’s mobile-friendliness guidelines recommend having the same structured data on the mobile site as the desktop version. Check if the structured data is present on the mobile version and add it if it’s not there, especially keeping in mind that the page may have been designed as a secondary version rather than the primary target of search engine traffic. Structured data plays a major role in categorizing content for search engine indexing and creating featured snippets on search engine results pages.
Do: use the same page metadata as desktop
Google advises having the same metadata on desktop and mobile sites. Check that the title tag and meta description are identical across both pages and accurately describe the content to viewers.
Do: use rel=canonical/ and rel=alternate
Using the ‘canonical’ and ‘alternate’ attributes, you can label different versions of the same page so they don’t absorb each others’ traffic value. This keeps the Google bot from crawling both versions and thus indexing fewer of your overall pages due to a limited crawl budget.
Do: use hreflang consistently on mobile and desktop versions
The hreflang link elements identify different translated versions of the same content. Check that all mobile versions of pages with international versions refer to other mobile versions, and desktop versions go to different-language desktop versions, with no translated mobile pages directing to the desktop version in the primary language, and going only to the canonical version.
Don’t: use overly intrusive ads on pages
Low-quality ads that hurt the user’s ability to browse the page will hurt a mobile page’s rank on Google. Check that ads follow the Better Ads standards and remove any that do not qualify. Certain popups, banners or overlays are considered to be intrusive interstitials that interfere with user experience and prevent them from reaching the content that matches their Google search. Remove any interruptions that may result in a lower page rank.
Do: use images that are the right size and high quality
Check that images are high-quality and aren’t too small or in a low resolution that can’t be viewed properly on smaller mobile devices. Use all the same image metadata on the mobile page. Use the <img srcset> attribute or <picture> element to specify responsive images that can be loaded at multiple resolutions depending on the user’s device.
Don’t: use images and videos in unsupported media formats
Check that images and videos use the right formats so they will be indexed by Google. Images use the formats BMP, GIF, JPEG, PNG, WebP, and SVG to be accepted, while videos use various formats including .mpeg, mp4, .webm, and more. Convert images and videos to supported formats for best performance in image and video searches.
Do: use the same alt-texts as desktop
Use all the same alt-text and other metadata within images that are used on both mobile and desktop pages, to ensure consistency in Google image search results.
Don’t: have content missing from your mobile pages
Ensure that the mobile content is high quality and contains everything that the desktop site does, so mobile-first searches are indexing your most valuable and attractive content. Simplifying mobile content may make it easier to read and display, but removing quality content reduces its SEO value.
Do: use the same error status pages as desktop
If the mobile version of a desktop page serves an error message while the desktop page displays normally, the page will not be indexed at all. Make sure that the mobile versions of pages serve the same error pages in the same circumstances to ensure that pages are indexed consistently.
Don’t: use fragment URLs
Fragment URLs, with parts that come after an # within the address, are not usually indexable by Google, so they will be ignored when crawled by Google bots. No matter where in the URL the # is placed, anything afterward will be ignored. Check that no mobile URLs are dependent on the function of their fragments, though they can be used to identify part of a page.
Don’t: block mobile pages in robots.txt
The mobile page may be blocked by a directive that prevents indexing or following. Check both the robots.txt file and the robots meta tags for directives that would block indexing, and ensure that the same robots.txt directives are used for both mobile and desktop versions of your site.
Do: support mobile responsiveness on your mobile pages
Responsive design automatically adjusts to the right screen size, negating many issues related to mobile accessibility and simplifying the process of keeping a site mobile-friendly as opposed to maintaining multiple versions of each page. Check that pages are able to resize, image and other resources are presented at different sizes based on the device, and that content is not interrupted abruptly based on the needs of a specific device. Run Google’s Mobile-Friendliness test to make sure the site can function on a variety of mobile devices.
Do: support mobile orientation & page layout
Check that the layout of mobile pages is compatible with portrait and landscape orientations and can be displayed effectively on mobile devices without sudden shifts or content that is only accessible to a certain orientation.
Following these steps and testing your mobile site’s accessibility will ensure that it can be completely indexed by Google and other search engines. Failing to provide mobile-friendly sites will result in pages not appearing in search results or being downranked compared to pages with equally relevant but more accessible content. Review your website today to ensure that mobile users can locate your content in searches and access it easily.