What exactly is Mobile Optimization?
Mobile Search Engine Optimization (SEO) is all the best practices associated with ranking a website in search engines for mobile searches. If you’re looking to implement Mobile SEO for your local business, then it’s important to understand there are different considerations for desktop and mobile when it comes to SEO and the user experience. To understand the importance of focusing on mobile, let’s review some stats.
Mobile Timeline Statistics and Trends
April 2015: Google unleashed Mobilegeddon. This was an update to their algorithm that boosted the ranking of mobile-friendly pages in search engines results.
January 2016: Google informed webmasters that pages that are not easily accessible to users coming from a mobile search may not rank as high. In particular, this focused on intrusive pop-ups that make the main content inaccessible.
May 2016: Local searches are growing 50% faster than mobile searches. This is a very important stat for local businesses and has compelled a lot of businesses to start working on their Local SEO. This stat let everyone know that mobile and local searches are a clear trend.
October 2016: Mobile & Tablet internet usage exceeded desktop for the first time worldwide.
June 2017: Google announces they are rolling out a Mobile-First Index.
I visit with small business owners all the time, and it shocks me that so many of them do not have mobile-friendly sites or a Mobile SEO strategy. Consumers are using mobile devices to research, shop, and find local companies to do business with. If you are not optimizing your site for mobile and considering mobile in your SEO strategy, you are far behind your competitors. Your first step is to test your site for mobile friendliness.
Testing your Site for Mobile Friendliness
Fortunately, there are some great, free tools available that allow you test your site for mobile friendliness. Here are a couple of the most popular tools:
Mobile-Friendly Test by Google: This one is straight forward. Enter your URL, and Google will fetch your site and run a mobile-friendly test. The tool will tell whether your site is mobile friendly or not and let you access a site-wide mobile-friendly report. To access the report, your site must be verified through Google Search Console. If your site is not set up through Google Search Console, you should definitely take the time to verify your site. Be sure to submit a sitemap and use Google Search Console on an ongoing basis to help manage your Technical SEO.
Bing Mobile Friendliness Test: I like the Bing test because when a site does not pass the test, it will let you know why the site did not pass so you have specific action items to address. Common errors include:
- Viewport not configured correctly
- Zoom control is restricted
- Page content does not fit device width
- Text on page is too small
- Links and tap targets are too close/small
These errors are action items for your web developer to fix. Forward the report and get him or her to work!
Options for a Mobile-Friendly Website
When it comes to building your new site, you’ll have to decide between a responsive design, dynamic serving, or a different URL for mobile. Each option has its pros and cons. Let’s explore each one thoroughly.
Responsive Design
This is the most common choice and Google’s recommended method. Responsive web design enables sites to respond to the user’s device based on screen size, platform, and orientation. For example, this design practice allows sites to recognize whether a user is on a desktop computer, mobile phone, or tablet and adapt or respond to the device.
More technically speaking, responsive design includes the use of proportion-based grids, flexible images, and CSS3 media queries.
Fluid grids and flexible images are sized in relative units like percentages and units. To account for different widths of browsers, media queries allow the page to use different CSS rules.
Pros: A single site has a single URL and is easy maintenance. The advantages of a responsive design far outweigh the cons in most cases. It’s more cost effective and flat out easier to manage one website than several.
Cons: If you absolutely need materially different content for mobile, then a responsive design can hinder your efforts. You will be limited on just how different the content can be from desktop to tablet to mobile.
Dynamic Serving
Dynamic serving uses different code for each device but on the same URL. For example, the process serves one set of code for desktop, another set of code for mobile, another for tablets, and so on.
The server recognizes the device and immediately serves a different set of HTML and CSS to accommodate the dimensions of the device.
Pros: Probably the biggest pro to dynamic serving is the ability to customize what content shows up on each device. Sometimes certain content looks good on desktop but does not create a great experience on mobile. With dynamic serving you can show different copy, images, or videos on different devices to create a unique experience per device. Assuming you have a good reason for this strategy, dynamic serving is very accommodating.
Cons: Dynamic serving is essentially individual websites for each device. On initial build out, this means more development hours, a bigger bill, and a longer timeframe. The ongoing management is complicated. If you want to make a change or an update, you have to update every instance of the site. This means more time, cost, and difficulty maintaining uniformity.
Separate Mobile URL
You can also build a mobile site, separate from your desktop site, hosted on a completely separate URL. A common URL structure would be m.example.com for your mobile site.
In concept, this is similar to dynamic serving except the desktop URL is different than the mobile URL.
Pros: Greater customization of mobile content is possible, and there is a stronger ability to optimize for mobile search intent.
Cons: A proper implementation has several technical considerations and more risk. You will need to set up bidirectional annotation. This is essentially a rel=”canonical” tag on the desktop page pointing to the corresponding mobile page. And then a rel=”canonical” tag on the mobile page pointing to the corresponding desktop page. This strategy also comes with a higher cost of maintenance.
Mobile Friendly with a Good User Experience
Too often I hear site owners tell me their site passes a mobile-friendly test, and they assume their work is done. It’s important for Google to agree that your site is mobile friendly, but that is not enough! The experience from desktop to mobile typically changes, and it’s critically important that you review every page and aspect of your site on mobile to ensure the user experience is best in class. Here are a few items to look for on mobile.
The Header
There is a good chance your desktop header does not look the same as your mobile header. Pull out your phone, go to your website, and review your header from mobile. Is there information that is vital to the user that has been collapsed? I often see phone numbers being hidden. If you have an eCommerce site, make sure your “Shop Now” button is visible in the header. In fact, go through the experience of buying each product. Make a list of issues you found frustrating or steps that may have been unnecessary. Then work with your developer to make the changes. Sometimes small changes to the user’s path to purchase can have a big impact on conversions.
If you look at your menu’s navigation from left to right, where is your Contact Us tab? If it is on the far right, it may have collapsed and is now only accessible from a hamburger menu. If this is the case, you may want to rethink the layout. Especially if you are a local business and it’s imperative that customers can contact you for your services.
Your Form Submit
Sometimes that big, clear, and easy-to-use form looks great on desktop but is too long or wide for mobile. Send in a test form submission from mobile and make sure the experience was flawless. If there are too many fields to fill out, impatient mobile visitors may bounce off. Make sure you are only collecting what is pertinent. If you are not sure how many fields to use, run a simple test. Test your more comprehensive form against a short form and see which one generates more conversions. Set your gut feeling aside and let the data talk!
Pop-Ups and Overlays
If you implemented a pop-up or exit overlay to capture more conversions, carefully review this strategy on mobile. Google cracked down on intrusive interstitials on mobile. Make sure your overlay is not aggressively standing between the user and the content they intended to view. Use a reasonable amount of screen space. Or play it safe and only utilize your pop-ups on desktop.
Mobile SEO Best Practices
You’ll want your site to be lighting fast on desktop and mobile. Users expect a site to load fast, and they will quickly become annoyed when a site is slow. Here are a few hard facts, courtesy of Kissmetrics, about mobile speed:
- 47% of people expect your site to load in less than 2 seconds
- 40% will abandon entirely if it takes your site longer than 3 seconds to load
- 85% of internet users expect a mobile site to load as fast or faster than on their desktop
- Bounce rates significantly increase each second your site takes to load
Slow sites determine whether a user leaves or stays, impacts the overall experience, kills conversions, and are an SEO ranking signal.
Now that you know the importance of having a fast site, let’s take a look at how you can determine the speed of your current site.
Popular Site Speed Testing Tools
Just like testing for mobile friendliness, there is no shortage of speed testing tools.
Think with Google tests your mobile speed and immediately provides a speed score. Google will email you a report summarizing the items you need to address in order to increase your site’s speed on mobile.
Google PageSpeed Insights is a tool from Google that will grade your site from 1 to 100, with 100 being the fastest. Generally, you should strive to have a speed score of 85 or better. PageSpeed will give you a grade for both desktop and mobile and a list of areas for improvement.
GTmetrix is a tool that is based on PageSpeed and Yahoo’s tool Yslow. GTmetrix assigns a grade of A through F and also provides a waterfall section, video, and a history section. It defaults to the test from Canada, but if you sign up for a free account you can change the location to the United States. GTmetrix will show you items that are promoting speed and action items that need to be tackled in order to improve site speed.
Pingdom is one of the web’s most popular tools for speed testing. They divide reports into categories which include waterfall, performance grade, page analysis, and history. The default testing options are San Jose, CA; Melbourne, Australia; and Stockholm, Sweden. You can test for free or take advantage of automated testing every thirty minutes with a paid account.
No matter what tool you settle on, you will learn that there are a few common issues that need to be resolved in order to speed up your site. Let’s take a look at a few.
Eliminate Render-Blocking JavaScript and CSS in Above-the-Fold Content
What does all that mean? When your browser, such as Chrome, Firefox or Safari, loads a webpage, JavaScript and CSS prohibit the page from displaying until they are downloaded by the browser.
Now, some resources need to be downloaded and processed before displaying anything. But that only applies to JavaScript and CSS in certain cases, and they are not needed to render above-the-fold content.
In pure layman’s terms, Google is telling us not to use these certain types of code that block rendering on the part of your site that is visible before scrolling down.
So, how do you accomplish this goal? The objective is to move unnecessary JavaScript and CSS out of the critical rendering path.
If you are using WordPress, you’re in luck. There are scores of plugins that address this common issue. But, be very careful. Most of them are highly configurable and best suited for a developer. Configure them wrong and your site will crash.
Leverage Browser Caching
When a user visits your site, their browser needs to load resources like logos, CSS files and many other resources. Browser caching allows those resources to be saved locally in the visitor’s browser cache.
Then when the user leaves and comes back to the site, the browser will access the local resources. The result is a faster loading site. This is good for both you and your site visitors.
Some hosting companies will add the appropriate expiration headers to your .htaccess automatically. This is fantastic since optimizing servers is a different discipline than web development.
Optimize Images
Optimizing images is a common recommendation from Google, Yslow, and GT Metrix. There’s actually more to it than you might think. First of all, you want to make sure you are using the correct type of image format for your use case. There are three universally accepted image formats: GIF, PNG, and JPEG. Check out this flow chart from Google to help you decide which format to use:
Once you have decided on the format, you’ll want to make sure your images are optimized for speed.
You’ll want to use vector images when you can and compress them to remove unnecessary metadata. Here is a great checklist from Google that covers some core techniques for image optimization.
Reduce Server Response Time
Server response or time to first byte is a metric measuring how long it takes to hear back from your server.
While there are a number of variables that can affect server response time, it typically comes down to two main factors: databases and hosting.
Databases
If your website depends on retrieving data from databases, ensure your database is well optimized. Slow queries can cause a bottleneck and really slow down servers. Work with your database administrator to rewrite queries, utilize the right indexes, change your schema, and leverage external caches.
Hosting
There are scores of web hosting companies to choose from. They all vary to some degree in price, speed, reliability, user interface, and uptime. The main thing here is to ensure you have enough resources to handle your traffic. The amount of traffic you are receiving will dictate your hosting plan. You could have a free hosting account for a site of very low importance, shared hosting, a Virtual Private Network, or dedicated hosting where you have a server exclusively for your site.
There are a number of good hosting companies. If you are using WordPress, my number one recommendation would be WP Engine. We host Rocket Pilots and most of our clients’ sites on WP Engine. Sites run fast, come with automated SSL certificates, automatically setup browser caching, and have great support. I would also recommend DreamHost and InMotion Hosting.
Minify HTML
This basically means to minify code that has redundant data without negatively impacting how the resource is processed by the browser. It’s the technical way of describing how to get rid of the unnecessary code and only use what is essential. To minify HTML, you can use HTMLMinifier.
Optimize for Local and Mobile SEO Together
Many mobile searches are location oriented, so the opportunities are huge for local businesses. Here are a few best practices where Local SEO and Mobile SEO practices work together.
Distance of the User to Your Business
Google considers the proximity of the user to your business while conducting the search. In order to make your address crystal clear to search engines, you will want to fully build out your Google Business Profile Page and ensure that your business is listed on prominent directories like Yahoo, Bing Places, and Yp.com.
On-Page SEO + Mobile SEO
Here is a great opportunity to utilize On-Page SEO to enhance your Mobile SEO. Where you can, include your city and keyword in the URL, Page title, H1 tag, early on in your copy, and Title tag. Also be sure to use your city or your address in the Meta description. There is less real estate on the search engine’s response page for mobile, so showing the user you are near them may persuade them to click your link and increase your organic click-through-rate.
Other Mobile Optimization Tips
No Flash
Flash is often inaccessible from a mobile device. This creates a poor experience for the user and promotes high bounce rates. As an alternative, use HTML5.
Google’s Mobile-First Index
SEOs and webmasters have been waiting for the release of Google’s mobile-first index.
“We don’t have a timeline for the launch yet… We have some ideas for when this will launch, but it’s probably many quarters away. Our engineers’ timeline was initially end of 2017. Right now, we think more 2018,” said Gary Illes at SMX Advanced.
He ensured attendees that Google will communicate effectively with everyone before the launch, and webmasters will have plenty of time to prepare. This index is just another reason to ensure your site is mobile friendly, and it’s an opportunity to get ahead of your competition.
Summary
There are a lot of factors when it comes to mobile optimization. Pick the right development structure and implement these SEO strategies, and you will stay far ahead of your competition.
If you’ve been working hard on your Mobile SEO, feel free to leave a comment below to share your experiences. We would love to hear your successes and what challenges you are facing. If you are looking for more SEO tips for your local business that are high impact and easy to implement, check out this article.
If you need help with your Mobile SEO, don’t hesitate to contact us directly. We regularly help small businesses improve their rankings, and we would be happy to help you too!
Our San Diego based law firm internet marketing company specializes in lawyer SEO services such as personal injury lawyer SEO, SEO for family law, and criminal law SEO. We also also offer ad services for attorneys, websites for lawyers, and much more.
