On 21st April, 2015 the Google algorithm will be expanding its use of mobile-friendliness as a ranking signal for searches on mobile devices.
This announcement is no surprise since Google continually factors in user experience into ranking evaluations, and mobile internet searches have increased dramatically over the last few years. The web design team at New Design Group has worked on three actionable ways to get your website mobile ready.
SEO and Mobile Rankings
In Q3 2014, Global Web Index found that 80% of internet users globally own a smartphone, with 75% using it for internet searches, and 47% owned a tablet with 37% of those using it to surf the net.
In May 2014 Google added “User Experience” recommendations in their PageSpeed Insights tool, which allows owners to check if their websites provide a good experience for mobile users.
Soon after, Google announced a new feature in their Webmaster Tools to track the “Mobile Usability” of pages, considering:
- A defined viewing area that adjusts to the device’s screen.
- Content sized to the viewport, so users don’t have to scroll or pinch the screen to see the entire page.
- Fonts that scale for ease of reading on small screens.
- Clickable links/buttons that are well-spaced from other touch elements.
- Visual design and motion driven by mobile-friendly technology.
The associated “Mobile-Friendly Test” tool checks any given page against the guidelines mentioned above.
Around the same time, the search engine launched the “Mobile-Friendly” label in search results, based on the result of the test tool.
From the 21st of April, the new update which results in better rankings for pages offering a good mobile experience, will be based solely on the “Mobile-Friendly” label.
Types of Mobile Websites
There are three possible mobile configurations:
- Responsive Web Design
Responsive web design is when the same HTML code is sent to all devices but the browser is instructed to adjust the page to best fit the screen (rendering).
Advantages
- There is only one URL.
- Once the website is created, future design updates only need to be made once.
- Web developers can use a single set of code for all platforms.
- The website can be adapted to different devices.
- Responsive web design doesn’t have to detect the ‘user-agent’ (the browser or device requesting the web page) and tends to load more quickly.
Disadvantages
- If the desktop website is complicated, it may not be possible to create a responsive web design to fit on a mobile device screen.
- It may require a high level of technical knowledge to craft a responsive web design from a desktop website.
- A single website, even a responsive one, may not offer the experience expected by mobile users.
- Dynamic Serving
A separate version of the design is created for mobile users, but the same URL is used for both desktop and mobile website – the HTML code and CSS is served to different devices depending on the requesting ‘user agent’.
Advantages
- There is only one URL.
- As the code used to render the page is separate, the design can be created specifically with the needs of mobile users in mind.
- Redirection is not required.
Disadvantages
- There are two sets of page code which need to be maintained.
- The list of user-agent strings needs to be regularly updated to be relevant to all new mobile device models.
- If the user-agent detection has a problem, the user may see the wrong version of the website.
- Separate Mobile Website (Separate URLs)
This is where an equivalent but separate subdomain is created for mobile devices from the desktop URL. The separate page is served to mobile devices and desktops via user-agent detection and redirection to the correct URL.
Advantages
- The design can be prepared to meet the expectations of mobile users because the code used to render the page is separate.
- This option doesn’t require alteration of the desktop design.
Disadvantages
- More likely to have errors since multiple tags must be configured.
- The separate subdomain requires further configuration.
- Mobile users who land on the desktop URL will have to wait to be redirected.
Mobile Website SEO Checklist
Once you have created a mobile website, it is important to check everything is running properly:
- Run the Mobile-Friendly Test tool on some page types to check they pass the test.
- To make sure Google “sees” these pages properly, use Webmaster Tools’ “Fetch as Google” feature (with Fetch and Render), using the Mobile: Smartphone option, and ensure no design elements (like images) are missing.
- If you opted for Dynamic Serving, use Webmaster Tools’ “Fetch as Google” feature to ensure the Vary HTTP Header is set properly.
- If you opted for Separate URLs, use Webmaster Tools’ “Fetch as Google” feature, using both Desktop and Mobile: Smartphone optionsto ensure alternate and canonical tags are set properly.
- If everything is looking good, use the “Submit to index” feature on the homepage and main categories (using the “Crawl this URL and its direct links” option) to facilitate indexing of your design and code changes.
- Use the “Mobile Usability” section in Webmaster Tools to monitor for errors with time.
If your website passes this checklist you should be mobile friendly and able to offer your mobile users a great website experience – and benefit from the new ranking boost from Google! For more info on this checklist, please check this mobile web design guide.