Blog

WordPress, AMP and WPML – how does this affect your business?

Mobile web development updates – Google AMP

One of the biggest changes happening in mobile web development is definitely Google AMP. We already  started implementing the new initiative with esports.ch. AMP stands for accelerated mobile pages and is a new way for Google to optimize loading time for websites. All AMP enabled websites will also be highlighted in Google search engine. WordPress announced the launch of a new AMP plugin in the beginning of 2016.

What exactly is AMP?

The continuous development of online content creation and increase of mobile web usage has created a need for new ways to keep users on a website. Accelerated Mobile Pages is an open source project led by Google. Consisting of three main things: HTML, JS and Cache it’s a new way for building light websites with a quick load time. Basically rules and restrictions in the source code that mainly target Javascript functions (main cause for lag in the load time). All the necessities would still be present on a site just optimized for performance.

WordPress & AMP

The newly introduced plugin has made AMP setup for WordPress relatively simple. When you have a third party hosting provider just download and install the plugin. After activating the plugin it will automatically generate an accelerated version of all the pages and posts. For seeing the accelerated page version go to Appearance and open the “AMP” settings menu. You can also implement some simple changes and turn AMP off. We still recommend to contact your IT department or developer team for implementing the changes in settings. Since plugin is open source you can find  the newest version of the source code from GitHub.

Making changes to AMP in WordPress

Though it comes with a pre-built template you might still want to make some appearance changes in your accelerated pages and posts. For specific changes you’d already need some coding skills. The template consists of nine parts:

  • featured-image.php
  • footer.php
  • header-bar.php
  • meta-author.php
  • meta-comments-link.php
  • meta-taxonomy.php
  • meta-time.php
  • single.php
  • Style.php

Copy these from the plugin folder in PHP onto your theme or child theme and rename them to “amp”. This enables plugin to use these elements. After that you can easily implement changes, just keep in mind that the load time should stay relatively same. After making changes you also need to validate the new version. For that visit: https://validator.ampproject.org .

Validating

Using the WPML plugin on your site might cause the following error upon validation:

The attribute ‘href’ in tag ‘link rel=stylesheet for fonts’ is set to the invalid value ‘…/sitepress-multilingual-cms/res/css/language-selector.css?v=3.5.3.1’. Learn more.

To fix the issue insert the following code into your themes function.php file:

//
//  AMP and WPML validator fix
//  https://www.blueglass.ee
//
add_filter( 'request', 'bg_amp_wpml_language_selector_fix' );
 
function bg_amp_wpml_language_selector_fix( $query_vars ){
    if( defined('AMP_QUERY_VAR') && array_key_exists(AMP_QUERY_VAR, $query_vars)) 
        define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true);
        
    return $query_vars;
}

Does AMP affect SEO?

You can expect AMP optimized websites to become more and more preffered by Google for mobile platforms. WordPress users should take notice that one of the most popular SEO tools Yoast has developed a separate plugin for AMP – Glue for Yoast. They’re also promising to integrate it into the main plugin in the nearest future.

While considering the growing importance of mobile web and resources Google has put into the project, we decided to integrate AMP to our development process and all the future projects would be released with accelerated versions of websites.

 

If you’d like to know more about the range of services we provide and discuss working with us, then please write us – info@blueglass.ee and let’s discuss your project in detail.

Если хотите знать больше о наших услугах, обсудить работу с нами или же у Вас есть классная идея для сотрудничества, пожалуйста свяжитесь с Нами!
  • Это поле используется для проверочных целей, его следует оставить без изменений.