By David Stephens
On March 20, 2015

In February, Google announced that starting April 21, it would include mobile-friendliness as part of its ranking signal. As part of that change, Google’s Webmaster Tools has been updated to identify pages of your site that will be affected by the new mobile-friendly criteria. In preparation for this change, we’ve evaluated Google’s processing of sites generated by Adobe Muse. This post describes our findings and provides recommendations for making your site more mobile-friendly if needed.

Google’s Announcement

Let’s start with Google’s announcement.

“Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices.”

The implication of this announcement is the changes affect searches performed on mobile devices.

What do I need to do?

If your site already has a phone page for every desktop page, then you are likely done. If not, follow the guidelines in the Recommendations. Muse will do the rest, including adding the appropriate SEO markup to the site.

Recommendations

1. Make use of Muse’s adaptive approach, which is supported by Google, to create an experience tailored for users on desktop and phone. More specifically, each desktop page should have an alternate page which has been formatted for viewing on a phone. Visitors will automatically be directed to the appropriate page based on their viewing device.

2. Run Google’s Mobile-Friendly Test (you may need to run it multiple times as it seems to yield inconsistent results). If no errors are generated, you’re done.

3. Understand the errors and warnings reported by Google Webmaster Tools and the scope of those results. The most common errors are caused by not having a page which has been formatted for viewing on a phone.

Note: Sometimes, people create pages that are intended to only be viewed from the desktop and as such, have no corresponding page formatted for viewing from a phone. Be aware Google will still inform you that the page is not mobile-friendly. For example, a five page desktop site can easily be reimagined as a one page phone site with the desktop content included as separate panels.

Conclusion

Muse currently offers a mobile solution that follows an adaptive approach which, when used as prescribed by Google such that every desktop page has a corresponding phone page, yields a green “Awesome! This page is mobile-friendly” result from Google’s Mobile-Friendly Test.


Background

Adaptive vs Responsive

A website can take a responsive, dynamic or adaptive approach to being mobile-friendly and Google supports all three. Muse currently takes an adaptive approach to mobile support and as long as you follow best practices by creating phone renditions of your pages, your site will be considered mobile-friendly by Google.

What is a mobile-friendly page?

Google considers your page mobile-friendly if it fits within the width of a phone, the text is readable and the links are far enough apart to be touched. The full details can be found on Google’s Webmaster Central blog.

Example

Let’s look at this beautifully crafted, Engineering Green, desktop site which is not mobile-friendly.

Sample Muse Page

Sample page for demonstration purposes only.

Google Webmaster Tools Result

When the above Desktop page, which has no corresponding alternate page for the phone, is loaded on a phone, the phone will by default zoom out to fit the entire width of the content in the view. As a result, the following errors are reported.

Mobile-friendly errors reported by Google for a Desktop URL with no corresponding Phone page.

Mobile-friendly errors reported by Google for a Desktop URL with no corresponding Phone page.

Making the page mobile-friendly

Both errors can be resolved by creating an alternate phone page and reformatting the content for the smaller view. By creating a phone version of the page Muse automatically adds the following link to the head of the desktop page to inform Google of the alternate mobile-friendly phone page:

<link media="only screen and (max-device-width: 380px)" rel="alternate" href="http://examplesite.com/.../phone/index.html"/>

In addition, Muse automatically adds a redirect to the head of the desktop page such that the browser will redirect to the phone page when viewed from a phone.

Finally, Muse adds the following information to the head of the phone page to inform Google of the relationship between the phone page and the desktop page:

<meta name="viewport" content="width=380"/>
<link rel="canonical" href="http://examplesite.com/.../index.html"/>

 If you have additional questions, feel free to reach out via Muse’s public forum.