SEO finding
On a phone the page is too wide, the text too small, the buttons too close, or an overlay covers it
SEO Warning Severity: Medium
Part of the audit Mobile rendering. Finding id: seo.mobileLayout.
What it costs you
Visitors on a phone who cannot read or use the page leave. Google's documentation says it uses the mobile version of a page for indexing and ranking.
What to do
Open the page at phone width and fix what the finding names.
What it checks
- Content wider than the screen
- Text too small to read
- Buttons too small or too close
- Pop-up covers the content
How to fix it
Keep the content inside the screen width
- Open [url] in the browser's device mode at a width of about 400 pixels and scroll sideways to see what sticks out.
- Give images and embedded media max-width: 100%.
- Wrap wide tables in a box that scrolls on its own, or stack their columns at small widths.
- Replace fixed pixel widths with relative ones.
- If the same finding shows on many pages, fix the shared template or stylesheet, not each page.
How to check: Recrawl the page: the finding is gone.
Raise the font size
- Set the base font size of the body text to 16 pixels.
- Search the stylesheet for font sizes below 12 pixels and raise them.
- Check captions, table cells, form labels and the footer.
How to check: Recrawl the page: the finding is gone.
Enlarge and space the links and buttons
- Add padding to links and buttons until the touch area is at least 48 by 48 pixels.
- Leave at least 8 pixels between two targets. Lists of links in the footer and tag lists are the usual place.
How to check: Recrawl the page: the finding is gone.
Shrink or delay the overlay
- Open [url] on a phone and look at what covers the screen ([selector]).
- If it is a consent banner, an age check or a login wall that you must show, dismiss this finding.
- Otherwise turn it into a banner at the edge of the screen, or show it after the visitor has scrolled.
How to check: Recrawl the page: the finding is gone.
Fix the layout at phone width
- Open [url] in the browser's device mode at a width of about 400 pixels.
- Fix what the finding names. If it shows on many pages, fix the shared template or stylesheet.
How to check: Recrawl the page: the finding is gone.
A real case
Researchers at Stone Temple Consulting tracked the top 10 results for 15,235 queries before and after Google's mobile-friendly update of April 2015. Nearly half of the pages Google did not consider mobile-friendly dropped in rank, 2.3 times as many as rose.
Thresholds
| Name | Default | Meaning |
|---|---|---|
max_overflow_px | 0 | How many CSS pixels the content may be wider than the screen. |
max_small_text_share | 0.4 | Largest share of the visible text that may be set below 12 CSS pixels. The 12 pixels are fixed in the collector that fills mobile_layout. |
max_small_tap_target_share | 0.35 | Largest share of links and buttons that may be under 48 by 48 CSS pixels or closer than 8 pixels to another. Those sizes are fixed in the collector. |
max_overlay_share | 0.3 | Largest share of the screen an overlay may cover when the page loads. |