Mobile Friendly Checker - Test Mobile SEO Compatibility
Check HTML code for mobile-friendliness including viewport meta, font sizes, tap targets, and responsive design.
How to Use
- View the source code of your web page (right-click → View Page Source) and copy all the HTML.
- Paste the HTML into the text area above.
- Click 'Check Mobile Friendliness' to run all mobile compatibility checks.
- Review the score and the individual check results — green passes, yellow warnings, red failures.
- Follow the recommendations for each failed or warned check to improve mobile-friendliness.
About Mobile-Friendly SEO
Mobile-First Indexing
Since 2019, Google uses mobile-first indexing for all new websites, meaning it primarily crawls and indexes the mobile version of your content for ranking. Websites that are not mobile-friendly receive lower rankings in both mobile and desktop search results. With over 60% of global web traffic coming from mobile devices, mobile optimization is essential for SEO success and user engagement.
Viewport Meta Tag
The viewport meta tag (<meta name='viewport' content='width=device-width, initial-scale=1'>) is the single most critical element for mobile compatibility. Without it, mobile browsers render the page at desktop width (~980px) and then scale it down, resulting in tiny text and elements. The 'width=device-width' value sets the viewport to the device's screen width, and 'initial-scale=1' prevents initial zoom. This tag is required for Google to consider a page mobile-friendly.
Tap Target Sizes
Google recommends that all tappable elements (buttons, links, form inputs) should be at least 48×48 CSS pixels in size and have at least 8px of padding between adjacent targets to prevent accidental taps. Small tap targets are a major source of mobile usability issues. If links or buttons are too small or too close together, users must zoom in to tap accurately, leading to frustration and high bounce rates.
Responsive Design Techniques
Responsive design uses CSS media queries to adapt layout and content to different screen sizes. Key techniques include: flexible grids (using percentages instead of fixed pixels), flexible images (max-width: 100%), media queries to apply different styles at breakpoints, avoiding fixed-width elements wider than the viewport, and using relative units (em, rem, vw, vh) instead of absolute pixels for font sizes and spacing.
Key Features
- Checks for viewport meta tag presence and correct configuration
- Detects small font sizes that may require zooming to read on mobile
- Identifies Flash/plugin usage that doesn't work on modern mobile devices
- Checks for responsive CSS media queries that indicate responsive design
Common Applications
- Auditing existing pages for mobile-friendliness issues before Google indexing
- Checking third-party page templates and themes for mobile compatibility
- Diagnosing why a page fails Google's Mobile-Friendly Test
- Training developers on mobile SEO requirements and best practices