Mobile Optimization

Cellular Telephone optimization is the procedure for ensuring that visitors who access your website from cellular devices have an encounter optimized for the apparatus.

What is Mobile SEO Optimization?

Every year people spend more and more time on tablet computers and their cellular devices, but a lot of sites still are not designed to account for different display sizes and load times. Cellular Telephone optimization takes a look at page speed, website construction, website design, and a lot more to ensure you’re not accidentally turning away cellular visitors.

Mobile SEO Best Practices

There are just a couple of added things that you might want to consider when optimizing for cellular in case your website is already well optimized for search engines.
Page speed

Due to connectivity and hardware problems, page speed is even more significant for cellular users than desktop computer users. Beyond optimizing pictures, you will need influence browser caching, to minify code, and reduce redirects. More info on page speed are available on our Search Engine Optimization Best Practices for Page Speed page.
Do not block CSS, pictures, or JavaScript

In the previous times, some cellular apparatus could not support all of these components, so webmasters of websites that are cellular blocked all three or one. But for the large part that is no longer accurate, as well as the Smartphone GoogleBot needs in order categorize and to see the exact same content that users do. So do not conceal it. These components are also essential to helping Google comprehend when you have a receptive website or a cellular option that is different.
Website design for cellular

Cellular devices are simplifying and revolutionizing the ways websites are designed. “Over the fold” no longer has significance in a world where we scroll forever
Do not use Flash

The plugin might not be accessible in your user’s telephone, which means they will miss out on all of the fun. Use HTML5 in the event you would like to make special effects.
Do not use popups either

It may be frustrating and hard to try and shut these on a cellular device. This may result in a high bounce rate.
Layout for the fat finger

Touch screen navigation may cause random clicks in case your buttons are too little, excessively large, or in the route of a finger that is attempting to get the page.
Optimize names and meta descriptions

Keep in mind that you simply are working with less display space when a user searches using a cellular apparatus. To showcase your finest work in SERPS, be as concise as possible (without losing the standard of the advice) when creating names, URLs, and meta descriptions.
Use Schema.org ordered data

Due to the small display space, a search result with snippets that are abundant is prone to stand out than on a desktop. Read more on the subject of Schema.org ordered data.
Optimize for local search

Remember to optimize your mobile content for local search, in case your company has a local component. This consists of including your city and state name in your website’s metadata and standardizing your name, address, and phone number. More info on local Search Engine Optimization are available here.
Cellular website setup

The most crucial choice you will make when setting up a website is determining whether you would like to make use of dynamic portion a reactive, or individual website layout. Each has its benefits and pitfalls. Reactive layout is preferred by Google but supports all three alternatives as long as you’ve set them up correctly.
Responsive web design

Responsively-designed websites use CSS3 media queries to function mobile and desktop users with the same content using a flexible layout as well as a fluid grid to automatically adapt to the magnitude of a user’s display.

Layouts that are reactive use media queries to target the layout predicated on resolution, orientation, and display width. As an example, you can make use of the following CSS to instruct browsers how exactly to display content for a screen that is fewer or 420 pixels wide:
Code Sample
@media screen and (max-width: 420px)
.group
[Fashions for this particular category here]

And to link to a different stylesheet instead, place between your tags:
Code Sample

Layouts that are reactive let you truly have a variety of these media queries that users on miniature cellular displays, bigger-than-typical cellular displays, and even tablet computers all really can see a website that seems designed for their apparatus.

Use an emulator such as the Responsive Web Design Testing Tool to check your layout that is reactive appears the way you would like it to.
Dynamic portion

In the event you do not have the resources for a complete website redesign or need to show different content for cellular visitors than you do for background ones, one option is to use one URL to show different sets of HTML and CSS depending on what kind of device your visitor is using (also called discovering user agents). This is helpful, for instance, in the event that you are a restaurant who wants a cellular visitor (who might be roaming your area) to see a sample of reviews as well as a map to where you are instead of your complete site.

Showing distinct content on the basis of the user agent is known as functioning that is dynamic and it is done utilizing the Vary HTTP header, which looks like this:
Alter HTTP Header
GET /page1 HTTP/1.1
Host: www.example.com
(…remainder of HTTP request headers…)

HTTP/1.1 200 OK
Content-Type: text/html
Change: UserAgent
Content-Length: 5710
(… remainder of HTTP reply headers…)

Example from the Google Programmers Site.

To put it simply, this means the content will vary predicated on the user agent.

Dynamic functioning isn’t an ideal compromise that it may appear to be. For one, it relies on having an updated listing of user agents, which implies that each time a brand new cellular device comes to market that list must be upgraded. And it is common for mobile devices and desktop computers to be wrong functioned with the HTML for the other apparatus. Read more on the topic of common pitfalls.
Different cellular URL

An alternative would be to develop a second, concurrent website for mobile users. This enables you to create totally custom content for mobile visitors. To prevent URL confusion, most concurrent cellular websites use an “m” subdomain.

Cellular websites that are concurrent can not be as perfect as dynamic serving websites at sending visitors to the variant that is correct, so make sure you allow it to be simple for visitors who end up in the wrong location to click around to their encounter that is favorite.

You will also need to ensure your website redirects are all in place and as lean as possible to reduce page speed. And to prevent duplicate content problems, you will need to set up rel=”canonical”.
What about using a program?

Creating a program is one method to tailor the cellular experience for your visitors. Nevertheless, the interstitial page many websites use to alarm a mobile user an program is accessible can additionally function as a block to search engine crawlers. Google’s John Mueller describes.
Associated Software

Cellular Emulator
This tool allows you to see what your website looks like on a wide selection of cellular devices.
Moz Local
Ensure your local Search Engine Optimization is in order with this particular tool from Moz.
MozBar
Double check your ordered information markup and redirects with this toolbar from Moz.
Responsive Web Design Testing Tool
See what your website that is receptive looks like on a number of normal display sizes.
Screaming Frog
By examining your website with this particular tool assess your redirects.
User Agent Switcher
This Firefox add-on lets you see what your website looks like when obtained from a user agent that is different.

Outside Resources

Constructing Smartphone-Optimized Websites
Official guidance on getting your cell website in order from Google.

Associated Guides

The Guide to Building a Large Cellular Website of the Search Engine Optimization
Kristina Kledzik lays out why you are in need of an option that is cellular and offers insight into what options work best for various kinds of websites.
The Authoritative Guide to Google’s New Mobile SEO Rules
Peter McLachlan summarizes what Google is searching for in a mobile-optimized website.
Great Practices to Optimize Your Mobile SEO
In this Mozinar, Aleyda Solis shows you the best way to discover whether it is time to optimize your website for cellular and gives insight into the advantages and disadvantages of numerous set ups.

 

 

 

If your site is already well optimized for search engines, there are only a few additional things that you need to think about when optimizing for mobile.

Mobile Page speed

 

Don’t block CSS, JavaScript, or images

 

Site design for mobile

 

Don’t use Flash

The plugin may not be available on your user’s phone, which means they’ll miss out on all the fun. If you want to create special effects, use HTML5 instead.

Don’t use pop-ups either

It can be difficult and frustrating to try and close these on a mobile device. This might lead to a high bounce rate.

Design for the fat finger

Touch screen navigation can lead to accidental clicks if your buttons are too big, too small, or in the path of a finger that’s trying to get the page to scroll.

Optimize titles and meta descriptions

Remember that you’re working with less screen space when a user searches using a mobile device. To show off your best work in SERPS, be as concise as possible (without sacrificing the quality of the information) when creating titles, URLs, and meta descriptions.

Use Schema.org structured data

Because of the limited screen space, a search result with rich snippets is even more likely to stand out than on a desktop. Read more about Schema.org structured data.

Optimize for local search

If your business has a local element, remember to optimize your mobile content for local search. This includes standardizing your name, address, and phone number and including your city and state name in your site’s metadata. More information on local SEO can be found here.

Mobile site configuration

Probably the most important decision you’ll make when setting up a site is deciding whether you want to use a responsive, dynamic serving, or separate site configuration. Each has its advantages and disadvantages. Google prefers responsive design but supports all three options as long as you have set them up properly.

Responsive web design

Responsively-designed sites use CSS3 media queries to serve the same content to mobile and desktop users using a fluid grid and a flexible design to automatically adapt to the size of a user’s screen.

Responsive designs use media queries to target the layout based on screen width, orientation, and resolution. For example, you could use the following CSS to instruct browsers how to display content for a screen that’s 420 or fewer pixels wide:

Code Sample
@media screen and (max-width: 420px) {
.class {
[styles for this class here]
}
}

And to link to a separate stylesheet instead, put the following HTML in between your <head> tags:

Code Sample
<link href="mobile.css" type="text/css" media="screen and (max-device-width: 480px)" rel="stylesheet"/>

Responsive designs allow you to have a variety of these media queries so that users on tiny mobile screens, larger-than-average mobile screens, and even tablets can all see a site that looks designed for their devices.

Use an emulator like the Responsive Web Design Testing Tool to verify that your responsive design looks the way you want it to.

Dynamic serving

If you don’t have the resources for a complete site redesign or want to display different content for mobile visitors than you do for desktop ones, one solution is to use one URL to display different sets of HTML and CSS depending on what type of device your visitor is using (also called detecting user agents). This can be useful, for example, if you’re a restaurant who wants a mobile visitor (who might be wandering your neighborhood) to see a sampling of reviews and a map to your location instead of your full website.

Displaying different content based on the user agent is called dynamic serving and it’s done using the Vary HTTP header, which looks like this:

Vary HTTP Header
GET /page-1 HTTP/1.1
Host: www.example.com
(...rest of HTTP request headers...)
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
(… rest of HTTP response headers…)

Example from the Google Developers Blog.

Simply put, this means that the content displayed will vary based on the user agent requesting the page.

Dynamic serving is not the perfect compromise that it might seem to be. For one, it relies on having an updated list of user agents, which means that every time a new mobile device comes to market that list needs to be updated. And it’s not uncommon for desktops and mobile devices to be wrongly served with the HTML for the other device. Read more about common pitfalls.

Separate mobile URL

Another option is to create a second, parallel site for mobile users. This allows you to create completely custom content for mobile visitors. To avoid URL confusion, most parallel mobile sites use an “m” subdomain.

Parallel mobile sites can be as imperfect as dynamic serving sites at sending visitors to the right version, so be sure to make it easy for visitors who end up in the wrong place to click over to their preferred experience.

You’ll also want to make sure that your site redirects are all in place and as lean as possible to decrease page speed. And to avoid duplicate content issues, you’ll need to set up rel=”canonical”.

What about using an app?

Creating an app is one way to tailor the mobile experience for your visitors. But the interstitial page many sites use to alert a mobile user that an app is available can also serve as a block to search engine crawlers. Google’s John Mueller explains.

  • Mobile Emulator
    This tool lets you see what your site looks like on a wide variety of mobile devices.
  • Moz Local
    Make sure that your local SEO is in order with this tool from Moz.
  • MozBar
    Double-check your structured data markup and redirects with this toolbar from Moz.
  • Responsive Web Design Testing Tool
    See what your responsive site looks like on a variety of standard screen sizes.
  • Screaming Frog
    Check your redirects by analyzing your site with this tool.
  • User Agent Switcher
    This Firefox add-on lets you see what your site looks like when accessed from a different user agent.

External Resources