Your Guide to Getting Started with Mobile SEO

Earlier this year saw the release of Google’s mobile search ranking algorithm, dubbed by many as “Mobilegeddon,” which included “mobile friendliness” as a mobile ranking signal. In case it wasn’t clear that you need to approach your mobile SEO differently from your normal SEO, it should be now!

If you fail to take the differences for mobile SEO into account you’ll lose out on a significant source of traffic: in the US, Google processes more queries from mobile devices than it does from desktop.

One important thing to keep in mind while devising your mobile SEO strategy is that mobile SEO is all about context - people searching on a mobile device have very different intentions and expectations for what they find.

They’ll also use your mobile version differently to desktop and this should change how you design and promote it in order to move visitors through the conversion funnel. Use Google’s Mobile-Friendliness Test to get an idea of how the current mobile version of your site is performing and what you need to change in order to improve the mobile user experience.

In this piece, we’ll cover how you should approach mobile SEO from the ground up so you won’t block your own digital marketing efforts from reaching as many people as you’d like.

Build for Mobile from the Ground Up

Page Speed

While there are obviously many signals for Google’s mobile search rankings, page speed is one of the most important. Mobile searchers have notoriously short attention spans and even fractions of a second in load time can make a difference. The time it takes to load a page is a major factor when it comes to user abandonment rate: nearly half of users expect a mobile page to load in two seconds or less. 40% will abandon a website that takes 3 or more seconds to load. Google expects you to render above the fold (ATF) content in one second or less. So each millisecond could be making a difference to your positions in search results, and money.

When designing for mobile, remember that most devices have less powerful CPUs than desktop computers and a short battery life, making it a challenge to meet the one-second ATF requirement. On top of that, you have to take into account the time it takes to complete the DNS lookup, TCP handshake and HTTP request and response. In the end you’ve only got about 400 milliseconds that you can do anything about. Take every step you can to reduce the strain you put on the user’s network.

• Optimize your image size: don’t rely on HTML to downsize your image; it just changes the appearance, not the actual size. Use a photo editor like Photoshop to change the size of your images.

• Rely on browser caching: reduce the number of HTTP requests by leveraging browser caching. Use Expires headers (if you’re using Apache) and Cache-Control headers to tell users’ browsers that images, stylesheets and CSS are cacheable.

• Reduce/eliminate browser redirects: some redirects are unavoidable. Remember, every redirect is another HTTP request, which slows down load time.

• Minify code: Use tools such as YUI Compressor or JSMin to remove unnecessary characters from JavaScript and stylesheets on your mobile site. This can improve caching and reduce bandwidth consumption.

• Avoid external blocking JavaScript and CSS above the fold: Every time a browser encounters an external script while parsing a page it has to stop and download that resource. This adds a network roundtrip, delaying the ATF rendering. Use inline JavaScript and CSS to render ATF content and load any additional functionality after the ATF content has been delivered.

• TCP Slow Start: A new TCP connection is unable to utilize the full bandwidth of a connection between the browser and the server, so the server is limited to 10 packets or less in the first round trip. This means it’s important to render in the connection, so your ATF content needs to be 14KB or less. Make sure your server is updated to the latest version or else you might be limited to 3 or 4 packets in the first connection!

• Accelerated Mobile Pages: Accelerated Mobile Pages (AMP) are mobile optimized web pages that have been created using an open source specification, which allows them to be served instantly. Google stores validated AMPs in a dedicated cache and serves them from there. Using structured markup, these pages are then eligible to appear in a carousel that includes AMP-ready pages.

If you need to improve your speed, start with Google’s PageSpeed Insights tool. PageSpeed measures the performance of your page as both mobile and desktop user-agents and scores them on a 0–100 point scale. Scores of 85 or higher indicate high performance. It judges on time to render ATF content and time to load the full page. You can also use browser tools like the Developer Console in Chrome, Web Console in Firefox or Tools Console in Internet Explorer to find errors and bottlenecks.

Remember the mobile user experience

As mentioned before, users don’t interact with mobile in the same way they do on desktop. They are usually looking for specific information to answer a question or complete a task. It’s your site’s job to make sure they can find information or complete an objective as quickly and efficiently as possible. This should be reflected in the user experience.

After speed, user experience is one of the most important factors that dictates whether visitors stay on your site to convert or leave after minimal interaction. The way mobile visitors use your site is fundamentally different from desktop. This is not only due to screen sizes — mobile users expect to be able to complete their goal almost immediately. 70% of mobile search traffic results in an action within an hour. Since we already know that mobile users are an impatient lot, you must optimize your mobile user experience to give visitors an even more direct route to conversions.

• Don’t use Flash, Silverlight, Java or other plugins. They might make your page look great but they aren’t supported by mobile browsers. It doesn’t matter how good it looks - your visitors will leave your site if they can’t see parts of it. If you want special effects, use HTML5 instead.

• Content needs to be readable without zooming in on the page. If you’ve set your mobile viewport, make your base font size 16 pixels — this is the default size for most fonts. You can then define other text sizes relative to the base. You should also stick with mobile-friendly fonts like Arial, Helvetica, Courier/Courier New, Times/Times New Roman or Verdana. Limiting the text on your page will also allow you to use a larger font size.

• Keep touchscreen readiness in mind. A user’s ability to quickly and easily navigate using their finger is a critical part of mobile friendliness. Your tap targets need to be at least 48 pixels in height and width with an extra 32 pixels on all sides. Accidental clicks lead to major frustration for users and severely impact your site’s usability.

• Structure your content so that it’s easy and intuitive to find information or complete an action. You can use content to guide your users to an intended goal such as email sign up or account creation by prioritizing this content above the fold and using clear calls to action. Don’t distract them by putting unnecessary detail on your landing page. If a user really needs more information, they can always click through to a secondary page.

• Make navigation on your mobile site obvious. If users can’t easily get around your mobile site 40% will move on to a more mobile-friendly site. To make sure you don’t lose out on this traffic, format your site vertically and make your back and home buttons prominent on each page. Use navigation bars, tab bars or a navigation hub to optimize page real estate dedicated to navigation.

When building your mobile site you have three options in how to tell search engines that you’ve got a mobile site: responsive design, dynamic design and a mobile subdomain.

• Responsive web design is Google’s recommended method of creating a mobile site. It doesn’t require any changes to your current code to tell the robots you’ve got a mobile site. Implementing responsive design requires setting the mobile viewport meta tag in the head of the page. The viewport tag tells mobile devices how to display a webpage based on the device’s screen size. A properly implemented viewport tag looks like this:

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

• Dynamic website design: this method requires a bit more development time investment. Sites that use dynamic design deliver different HTML code to mobile and desktop users by detecting the user-agent. You need to use the Vary HTTP header to tell Google that the mobile googlebot should crawl the page.

• Mobile subdomain: this method requires more developer time and resources than the other two. It involves building an entirely separate mobile site and hosting it on a subdomain, usually mobile.domain.com or m.domain.com. Like with dynamic design, googlebot won’t be able to detect that your mobile subdomain is for mobile users. You’ll need to use the rel="canonical” tag to signal the relationship between the different versions of your pages. This method can be complicated and expensive, particularly for businesses with large websites, and is generally falling out of favor.

Continue reading %Your Guide to Getting Started with Mobile SEO%

by Maria Lopez via SitePoint