A mobile website mainly runs in 1 out of 3 configurations: Responsive web design, dynamic serving and separate URL’s. Google does not favor any particular URL format or configuration as long as the page assets are accessible to all Googlebot user agents. It is important that Google must understands your mobile site setup.
Responsive Web Design
Serves the same HTML code on the same URL regardless of the users’ device (desktop, tablet, mobile, non-visual browser), but can render the display differently based on the screen size.
Use meta name="viewport" tag to tell the browser how to adjust the content.
Why Responsive Design?
Google recommends using responsive web design because it:
- Makes it easier for users to share and link to your content with a single URL.
- Requires no redirection for users to have a device-optimized view, which reduces load time.
- It reduces the possibility of the common mistakes that affects mobile sites.
- Requires less engineering time to maintain multiple pages for the same content.
- It helps Google’s algorithms accurately that assign indexing properties to the page rather than requiring signal the existence of corresponding desktop/mobile pages.
- It saves resources when googlebots crawls your site. It makes crawling efficient and indirectly helps Google index more of your site’s content and keep it appropriately fresh.
Dynamic Serving
Dynamic serving is a setup where the server responds with different HTML and CSS on the same URL depending on the user agent requesting the page.
Use the Vary HTTP header to signal your changes depending on the user-agent. Detect user-agent strings correctly.
Separate URL’s
Each desktop URL has an equivalent different URL Serving mobile-optimized content.
Mobile SEO Recommendations
Don’t block Javascript, CSS and image files
- Make sure that Googlebot can crawl your Javascript, CSS and image files by using the “Fetch as Google” feature in Google Webmaster Tools.
- Check and test your robots.txt in Google Webmaster Tools.
- Test your mobile pages with the Mobile-Friendly Test to see if the system detects your website as compatible for mobile users.
- If you use separate URLs for your mobile pages, make sure to test both the mobile and the desktop URL’s so you can confirm that the redirect is recognized and crawlable.
Avoid Unplayable Content
- Use HTML5 standards for animations to provide a good experience to all users.
- Use video-embedding that’s playable on all devices.
- Consider having the transcript of the video available. This will make your site accessible to people who use assistive browsing technologies.
Faulty Redirects and Cross Links
- Use Webmaster Tools. To find the URL errors and fix them.
- Set up your server so that it redirects smartphone users to the equivalent URL on your smartphone site.
- Check your links to make sure that they point to the correct equivalent page.
Use Mobile-Only 404’s
Some sites serve content to desktop users accessing a URL but show an error page to mobile users.
- If you use Dynamic serving, ensure your user-agent detection is correctly configured.
- If a page on your site doesn’t have a smartphone equivalent or show 404 in a smartphone, then keep users on the desktop page, rather than redirecting them to the smartphone site’s home page.
Doing nothing is better than doing something wrong in this case.
App Download Interstitial
Use a simple banner to promote your app inline with the page’s content. This banner can be implemented using:
- The native browser and operating system support.
- An HTML banner or image, similar to a typical small advert, that links to the correct app store for download.
Slow Mobile Pages
Use Google Page Speed Insights to discover if your page has any issues that can slow your pages down, focusing on the “Speed” sub-section.
Try to address the issues marked as "Should Fix" and "Consider Fixing".
Use “Rel-Alternate Media”
This attribute enables you to map the desktop and mobile URLs. Use this attribute on the desktop page to specify the mobile version. You don’t include this attribute on the mobile version to specify the desktop version.
Use “Vary: User-Agent” HTTP Header
Whether the site redirects based on device type or simply shows different content (dynamic serving), always configure the server to return the “Vary: User-Agent” HTTP response header
Use “Rel=Canonical”
Use the desktop value for both the mobile and desktop version. This consolidates indexing and ranking signals (such as external links) and prevents confusion about potential duplicate content.
Use “Rel=next/prev”
If the site includes paginated content, you would also include the Rel=next and Rel=prev attributes. However, keep in mind that if the number of items listed per page is different on the mobile versus desktop version, you can’s use Rel=alternate media to cluster the corresponding pages together since the content doesn’t match.
Site Design For Mobile
Mobile devices are simplifying and revolutionizing the ways sites are designed. “Above the fold” no longer has meaning in a world where we scroll endlessly.
- Don’t use flash – The plugin may not be available on your user’s phone, which means they’ll miss out on all the fun. If you want to create special effects, use HTML5 instead.
- Design for the fat finger – Touch screen navigation can lead to accidental clicks if your buttons are too big, too small, or in the path of a finger that’s trying to get the page to scroll.
- Don’t use pop-ups either – It can be difficult and frustrating to try and close these on a mobile device. This might lead to a high bounce rate.
Optimize titles and meta descriptions
Remember that you’re working with less screen space when a user searches using a mobile device. To show off your best work in SERPS, be as concise as possible (without sacrificing the quality of the information) when creating titles, URLs, and meta descriptions.
Use schema.org structured data
Because of the limited screen space, a search result with rich snippets is even more likely to stand out than on a desktop.
Optimize for local search
If your business has a local element, remember to optimize your mobile content for local search. This includes standardizing your name, address, and phone number and including your city and state name in your site’s metadata.
Mobile Sitemaps
Create an XML sitemap for your mobile site, and submit it to Google and Bing. Keep mobile pages separate from desktop pages. By keeping the two separate, you can find out whether there is any indexation issue in mobile pages as compared to the desktop pages.
Conclusion
Key facts to consider mobile friendly designs:
- Google loves mobile friendly designs.
- There are currently 4 billion mobile phones in use globally.
- 1.08 billion of these are smartphones.
- 50% of local searches are carried out on mobile devices.
- A third of Facebook’s 700 million users are using Facebook Mobile.
- Half of Twitter’s 175 million users are using Twitter Mobile.
- 86% of mobile Internet users are using their devices while watching TV.
- A second delay in page response can result in a 7% reduction in conversions.
Benefits of Mobile Friendly Websites
- More traffic
- Improved user experience
- More conversions
- More average time on site
- Reduced bounce rate
- Fast loading time
- Competitive advantage
- More engagement
- Improved search performance
