TL;DR: frequent mobile issues
- Missing Viewport Tag. Use Chrome DevTools-Lighthouse or/and SEO crawler to audit your site. If the tag is absent, insert
<meta name="viewport" content="width=device-width, initial-scale=1" />in the HTML<head>section - Inappropriately Sized Tap Targets. Use Chrome DevTools-Lighthouse or/and SEO crawler to identify small or overlapping tap targets. Ensure touch targets are at least 48x48 pixels and properly spaced.
- Illegible Font Sizes. Inspect your code to ensure font sizes are 12px or larger for at least 60% of the text.
- Unsupported Browser Plugins. Manually inspect your code or use crawler and/or Chrome DevTools to find and remove unsupported plugins.
Below, let's discuss each issue in more detail and explore what you can do to resolve them.
Why we should care
Mobile version is crucial because more than half of all website traffic (58.67%) comes from mobile phones. Moreover, Google now uses mobile-first indexing, showing how important it is for websites to be mobile-friendly. With so many people using their phones to search and shop, having a mobile-optimized site is essential to attract and keep users. Let's look at some of the most common mobile optimization errors and how to fix them.
Does not have a tag with width or initial-scale
One of the most frequent issues is not setting the viewport in the <head> section. Pages without this tag, or with an improperly configured, might not be displayed correctly on mobile devices. The viewport meta tag allows the width and scaling to be adjusted properly on all devices.
Why viewport matters
Not setting the viewport can result in inconsistent display — pages may not scale correctly, causing text and images to appear too small or too large on mobile devices. Without it, mobile devices might render pages at desktop screen widths and scale them down, making the text difficult to read. Having a properly set viewport ensures your web page will adapt to different screen sizes, providing a consistent and accessible user experience. Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag.
Viewport basics
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Explanation of the example
- width=device-width — this sets the width of the viewport to be equal to the width of the device. It ensures that the page uses the full width of the device's screen, making the content appropriately scaled and easier to read.
- initial-scale=1: this sets the initial zoom level when the page is first loaded by the browser. A value of 1 means the page will be displayed at a 1:1 scale, with no initial zoom, ensuring the content is not zoomed in or out when the page loads.
Other Possible Properties
Height — defines the height of the viewport. It can be set to device-height to match the height of the device.
Minimum-scale — specifies the minimum/maximum zoom level allowed by the user.
User-scalable — determines whether the user can manually zoom in and out. It can be set to yes or no.
You should know
The user-scalable and maximum-scale properties are crucial for accessibility. Disabling zoom (user-scalable=no) or setting a restrictive maximum scale can hinder users with visual impairments from resizing text and elements for better readability. Ensuring that the viewport meta tag allows zooming and proper scaling is vital for meeting accessibility standards.
How to check viewport
- You can manually check if your webpage has a viewport meta tag by viewing the source code of your page. Look for the following tag in the section of your HTML
- Using Lighthouse - an open-source, free automated Google's tool for improving the quality of web pages. Open Chrome DevTools: right-click on your page and select "Inspect," then go to the "Lighthouse" tab. Run an Audit: click on "Generate report" to start the Lighthouse audit. Lighthouse will flag issues with your viewport meta tag in its report.
- Using Crawler. For instance, in Screaming Frog SEO Spider, connect to PageSpeed Insights and Navigate to the ‘Mobile’ tab to see any viewport-related issues flagged by Lighthouse.
Sounds complicated?
Hire SEO consultant to help you
Get a Consultation
Tap targets are not sized appropriately
Tap/touch targets are interactive areas on a web page that users on touch devices can engage with. These include buttons, links, and form elements. Ensuring that tap targets are large enough and well-spaced makes your page more mobile-friendly and accessible.
Why touch targets matter
Touch targets need to be adequately sized and spaced to ensure they can be activated easily without triggering adjacent targets. When touch targets are too small or too close together, it becomes challenging for users to interact with them effectively. Having sufficiently sized touch targets, or at the very least, adequate spacing between them, is essential for all users, particularly:
- People using mobile devices where touch screens are the primary mode of interaction.
- Individuals using a mouse, stylus, or touch input who have mobility impairments, such as hand tremors.
- Users operating devices in environments with constant movement, such as public transportation.
- Mouse users who struggle with fine motor movements.
- Individuals accessing a device with one hand.
- People with large fingers, or those who use only part of their finger or knuckle to operate the device.
A minimum recommended touch target size is around 48 device independent pixels on a site with a properly set mobile viewport. For instance, while an icon may only have a width and height of 24px, you can use additional padding to bring the tap target size up to 48px. The 48x48 pixel area corresponds to around 9mm, which is about the size of a person's finger pad area.
How to check tap targets
Lighthouse and crawler can help identify issues with tap target sizes.
Open Chrome DevTools, click on "Generate report" to start the Lighthouse audit. Lighthouse flags pages with tap targets that meet both of these conditions:
- The target is smaller than 48 px by 48 px.
- At least 25% of the target area within 48 px of the center of the target overlaps with another target.
Document doesn't use legible font sizes
Websites with small font sizes can be challenging for users to read on mobile devices. Lighthouse will flag any pages where more than 40% of the text is smaller than 12px.
Check the font sizes in your CSS. Ensure that at least 60% of the text on your page has a font size of at least 12px
Unsupported browser plugins
Pages that use browser plugins like Flash, Shockwave, Java applets, Director, and Silverlight are not supported by most mobile devices and browsers, and search engines cannot index them. Mobile and desktop browsers are progressively blocking content from unsupported plugins. The best long-term solution is to remove outdated plugins and replace them with modern, supported alternatives, such as using HTML5 video players instead of Flash.
How to find these plugins
- You can manually inspect your web pages by viewing the source code and looking for references to unsupported plugins. Look for <object>, <embed>, or <applet> tags, which are commonly used to embed these plugins.
- Using crawler, for instance - Screaming Frog SEO Spider. To populate this filter the PageSpeed Insights API must be connected via ‘Config > API Access > PSI’. Go to the ‘Mobile’ tab. Apply the ‘Unsupported Plugins’ filter to view URLs with this issue.
- Using Browser Developer Tools - Open Chrome DevTools: Right-click on your page and select "Inspect" to open DevTools. Check the "Console" tab for warnings about deprecated or unsupported plugins.
Ensuring your site is mobile-friendly not only improves user experience but also could boost your search engine indexability. While many issues can affect your site's mobile version, the ones we've discussed are the most common and impactful. For a comprehensive solution, consider our Tech SEO Audit Service to ensure your website is fully optimized for mobile devices. What mobile SEO issues have you encountered on your website, and how did you address them? Share your experiences in the comments below!
