SEO - Mobile SEO Techniques

What is Mobile SEO?

Mobile SEO is the process of designing websites with a view to making it responsive for mobile devices and suitable for viewing on different screen sizes even with very low bandwidth. Additional care should be taken when designing websites for mobile devices.

The following attributes are an indication of a mobile-friendly site:

1. Responsive design: A good mobile website has a good responsive design that performs well on desktops as well as mobile devices. An advantage is that it reduces the maintenance of a website and also makes the content consistent for the search engines.

2. Readable Content: Good mobile website content is easy to read on a mobile device without having to zoom the screen. It’s fonts, colors, and layouts are appropriate.

3. Easy Navigation: Navigation is easy on a good mobile website screen. Links and buttons that can be easily maneuvered using a finger are provided.

4. Faster Loading Time: A good mobile website takes less bandwidth and less time to load on mobile networks due to the lightweight feature.

5. Visibility: A good mobile website makes sure the most important links are displayed on the Home Page and are visible enough. 

Guidelines to User-Friendly Websites

How user-friendly a website is would determine it’s ranking in search engines.

Below are guidelines to design a great mobile-friendly website.

Responsive Web Design

Responsive Web Design is highly recommended by Google because of user accessibilty accross various browsers, it is one of the simplest web configuration that can be easily implemented. The same HTML code is served on the URL, however, it adjusts the display based on the screen size of the mobile device.

Dynamic Serving

This is a type of mobile configuration where the URL of a website remains unchanged but serves different HTML content when accessed from a mobile device.

It is important to inform Google that the content is dynamically served from a server and may look different on mobile devices. Additional Processing has to be done at the server level before content can be served to your users, this puts unnecessary load on the server and makes it slow. This is a major drawback of a dynamically served mobile website.

Separate URLs

When two different URLs are maintained - one for mobile users and another for desktop users – be sure to inform Google explicitly which version to serve, this is not recommended because Google can detect automatically that your mobile pages are different from your desktop pages.

This approach is not recommended especially if the website is big and maintaining two versions will require double effort and money, also various discrepancies can’t be avoided in your content because two versions are maintained. 

From an SEO point of view, each URL is separate, hence performance is calculated separately, this means that your desktop ranking will never be added to the mobile ranking will always be assumed as separate websites, hence, no benefit is gained from SEO.

Inform Search Engines

Ensure Google and other search engines understand your mobile configuration. This is done by telling Google which mobile configuration you have opted for whether responsive web design, dynamic serving, or separate URLs.

A Responsively designed website automatically makes it easy for Google’s algorithms to understand without having to inform Google. Just use the meta-tag in your webpage header if your website is responsive.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport has to be included because it decides how your webpage will be displayed on a mobile device, ensure the viewport is declared so that your webpage displays correctly on any device.

If the website is dynamically served, be sure to allow Google to detect your configuration using the Vary HTTP header −

Vary: User-Agent

This header is used to serve content by cache systems like Content Delivery Network(CDN), and these CDNs will make use of this header while serving content on different devices. It tells the search engines that different content will be served on desktops and mobile devices. 

If a separate URL is maintained, e.g., example.com and m.example.com, then Google should be informed by adding a special link rel=alternate tag in your desktop version and vice versa as follows.

The Desktop site should have following in its header:

<link rel="alternate" media="only screen and (max-width: 640px)"

href="http://m.example.com" >

The Mobile site should have following in its header:

<link rel="canonical" href="http://www.example.com" >

Useful Tools

This list contains useful tools to find out if your site is mobile-friendly:

1. Google Webmaster Tools: These tools should be used while designing desktop as well as mobile websites.

2. Mobile Emulator: Using the emulator lets you see how your site appears on a wide variety of mobile devices.

3. Moz Local: This tool can be used to ensure your local SEO is in order.

4. Responsive Web Design Testing Tool: This is similar to the mobile emulator, this tool is used to see how responsive your site looks like on a variety of mobile devices with different standard screen sizes.

5. Screaming Frog: This allows you to analyze your site and double-check all the redirects.

6. User Agent Switcher: This tool is an add-on in Firefox that can be used to find out how one’s site looks like when accessed from a different user agent.