Optimize Your Website for Google’s Mobile-First Index

/in , /by

Google-mobile-first-index

Google has officially begun testing their new “mobile-first index”. If your website has a mobile version, the new index will evaluate it first and only fall back to the desktop version of your website if no mobile version exists.

The mobile-first index is something Google has intended to implement for a long time now. Google first made mention of their intentions of implementing it back in 2015, however on Nov.4th 2016 Google covered the new index in detail on their official blog.

If you have been procrastinating on optimizing your website for mobile users, it’s time to take action. It’s no secret that mobile search traffic is steadily increasing with no end in sight and as such Google and other major search engines are forced to place more importance on mobile user experience.

 

Here are several steps you can take to ensure your website is optimized for the new Google mobile-first index

 

 

Website Speed: Google has set the bar reasonably high by declaring the acceptable load time for an e-commerce website to be 2 seconds or less along with an eventual goal of less than half a second. A website’s load time is critical to overall user experience and one of the most important ranking factors for mobile search results.

 

Here are four common issues that could be slowing down your website’s speed.

 

Poorly Optimized Images: Unnecessarily large images can have a dramatic effect on load times. Optimizing your images so that they are the appropriate size can be a very simple and effective way to improve your website’s speed.

Unnecessary Code: Minify your website’s code by removing redundant code that has no impact on functionality or re-writing it to be more efficient using fewer lines.

No Browser Caching: If your website is built off of wordpress or a similar content management system you can easily implement a browser caching plugin such as WP Super Cache. Browser Caching allows some of your website’s files to be saved to a user’s local computer when they visit your website so that they don’t have to be re-download multiple times.

Too Many Redirects: Unnecessary redirects can result in your website having to reload multiple times, slowing down your website and ultimately resulting in a poor overall user experience.
Page Design: In recent years SEO has become more than just a purely technical skill with an increasingly important emphasis on design. In order to properly perform SEO on a website an in depth understanding of both code and design is critical.

 

Designing a website for mobile devices has become an art. Ensuring your website is fully responsive is a great start but here are a few more suggestions to help your website rank well in Google’s mobile-first index.

 

Don’t use Flash: Many mobile users can’t load flash elements on their mobile devices so it’s critical that they’re either removed or replaced by using Java or HTML 5.

Avoid Pop-ups: Obviously generating leads is one of the main objectives of most websites, however if a mobile user is overwhelmed with pop-ups this has an extremely negative impact on user experience, they are likely to leave, resulting in a poor bounce rate and ultimately decreasing your website’s ranking. It’s best to avoid pop-ups entirely for mobile users.

Make Your Site “Finger Friendly”: Mobile users will be navigating your site using their fingers, meaning your website’s design needs to accommodate them. Ensure your website design is “Finger Friendly”, make sure mobile users are able to navigate your site effortlessly, both scrolling and tapping with proper element spacing to avoid any accidental clicks.

On-page & Local Optimization: Mobile devices have a lot less space to work with, all of your website’s titles and descriptions should be as concise as possible avoiding the use of any unnecessary characters. This will assist Google’s website crawlers understand what your pages are about faster which will lead to improved rankings and higher click through rates.

Google released a major update in September that changed the way local search factors into a website’s ranking. There are many studies and statistics showing that mobile users performing local searches are typically ready to take action.

Google’s own research showed an impressive 50% of users that conducted a local search from their mobile device visited a store within one day and 34% who searched from a computer/tablet did the same. Their is an incredible amount of incentive for local businesses to rank well in Google’s new mobile-first index.

To improve your website’s mobile visibility make sure to include appropriate tags and meta data

 

  • City and province in the title tag
  • City and province in the H1 heading
  • City and province in the URL
  • City and province in content
  • City and province in the alt tags
  • City and province in the meta description
  • Business Name, Phone and Address

 

Conclusion

Although Google hasn’t officially rolled out their new mobile index yet, by taking action now you can ensure your website is ahead of the curve by helping improve it’s visibility and ranking in mobile search results now and into the foreseeable future.

 

 

Getting Started With Accelerated Mobile Pages (AMP)

/in , /by

amp-accelerated-mobile-pages
Google is in the process of launching accelerated mobile pages site wide for their mobile search results, let’s take a look at how accelerated mobile pages can benefit your business and create a better user experience for mobile devices.

 

What is an Accelerated Mobile Page?

Google announced Accelerated Mobile Pages (AMP) in late 2015, an open-source project intended to enable publishers to easily improve website load times ultimately leading to a more positive user experience for mobile users without compromising any ad revenue.

Even though an experienced web developer can typically achieve similar performance results through in testing and optimizing, this process is commonly neglected due to time or other constraints. AMP enables these optimizations to be easily implemented without any significant alteration to the mobile web experience.

AMP is in essence a blueprint for creating mobile webpages which consists of three main parts:

 

AMP HTML:

A markup language with some additional customs tags & properties along with some tighter restrictions. If you’re already fluent in regular html, picking up AMP HTML you should have no trouble configuring existing pages using it.

 

AMP JS:

A framework for the JavaScript of mobile pages. It’s primarily used for resource management and does not allow the use of 3rd party JavaScript.

 

AMP CDN:

A Content Delivery Network which is optional, it allows you to take an AMP enabled page, cache the page and automatically apply some performance adjustments.

 

How To Implement AMP On Your Site

To start, you will need to have a copy of two versions for every article page, the original article page that the average user will see along with an AMP version.

AMP does not allow things like 3rd party JavaScript or form elements so you will likely have issues using on page comments, lead forms, and some other common elements that your standard page version might feature.

It’s also a possibility that you will need to rewrite the template of your site to compensate for the new restrictions. In AMP all CSS be less then 50kb and “in-line”. Also because custom fonts can be very load intensive, they are required to be loaded using amp-font extensions so that there is more control over how they load.

Rich media must be handled differently. Images are required to utilize the custom amp-img element and have to include a height & width. Videos must use a custom tag to embed locally hosted videos through HTML5 (amp-video). There are also extended components for image lightboxes, slideshows and embedding social media feeds.

The new tag components aren’t hard to get used to but they do require a bit of foresight when planning the creation of your website.

 

How Can I Start Using AMP In WordPress?

The simplest way to start playing with AMP is to implement it on a WordPress site. WordPress is developing an official AMP plugin with Automaticc and it’s constantly being updated on Github.

1) Install The Official WordPress AMP Plugin

Simply visit the amp-wp page on Github and download the .zip file. Install the amp plugin like you would with any WordPress plugin and after it’s been installed you just need to append “/amp/” to a page or article (If you don’t have a good permalink structure you can also append “?amp=1”).

2) Validate & Adjust

The Google Search Console will eventually notice the AMP version of your articles from the “rel=”amphtml” tag the plugin appends which allows easy bulk article validation. The problem with this however is that Google does not currently detect the changes very quickly, a correction may take multiple days to be reflected in Google Search Console.

If installing the AMP WordPress plugin is not enough, you may need to go through and manually validate pages that you want to benefit from Accelerated Mobile Pages. Some common issues are forgetting to specify the height & width attribute for images and updating old embed code that is using http instead of https.

3) Use Schema Markup For Validation

It’s important to use valid schema markup for your AMP pages. You can test your pages for valid markup using the Structured Data Testing Tool provided by Google.

4) Configuring Google Analytics With The AMP WordPress Plugin

The current version of the AMP WordPress Plugin does not automatically enable amp-analytics but the process of enabling it is fairly simple

If you want to enable Google Analytics to work with the AMP WordPress Plugin, simply edit amp-post-template-actions.php either through your wordpress dashboard via Plugins > Editor > “AMP” or by using FTP and add the following code at the bottom of the file.

 

Make sure to replace UA-YOURID-Y with your website’s unique Google Analytics property ID.

After adding the code and saving the file, you should now have a basic AMP setup on your WordPress website with tracking enabled.

 

Final Thoughts

Accelerated Mobile Pages are a simple yet effective way to boost the performance of your mobile website(s) and ultimately improve the mobile experience for your users.