Here at Balkanmarketingstories.com we tend to stay on top of the modern Digital Marketing concepts, trends (and tools) and capture their utilization on the lovely Balkans. One of those areas are SEO practices and latest developments. Connectedly, for the past days we’ve been working on amplifying the website by incorporating Accelerated Mobile Pages (AMP) technology throughout the website. Today, I am personally, happy to announce that BalkanMarketingStories.com just went full AMP and first pages are being indexed as I write this post.

This article is BMS’s introduction to the AMP project, its technology, usage and benefits. In the upcoming weeks, we’ll publish a case study of AMP usage in the Balkans and the largest publishers.

For now, lets answer couple of major questions on the AMP.

What is the AMP Project?

If you’re exploring the world of Digital marketing, there is a big chance you’ve heard about the AMP project.

amp

As mentioned above, AMP stands for Accelerated Mobile Pages and it is a Google backed and developed, project meant to enhance user experience in a mobile first world. By definition,  AMP project is an:1

Open source initiative that resulted from a discussion between publishers and technology companies about the need to improve the entire mobile content for everyone – publishers, consumers, creators and users.

Basically, Google has in conversation with publishers developed a technology that serves content super-fast and easy to explore on mobile devices. Publishers here are all the websites that serve content on the Internet for users all around the world. Factually, AMP was initially (and predominantly at the moment) built for publishers within the “News” categories of websites. That is websites, which have content fresh and changes at least on a weekly basis, i.e. highly dynamic and fresh web pages.

The AMP was announced back in October 2015  and it was developed as a natural result of Google’s acknowledgment of mobile first world.2 Meaning that, Google understands that there is a constantly growing number of people using smart phones to read, watch and discover content on Internet via their smart phones.  Actually, in May 2015, Google noted that more Google Searches take place on mobile devices than on computers in 10 countries including the US and Japan.3 Of course, within such paradigm Google has recognized that mobile users are not patient if the web page loads to slow or its mobile rendering is broken. Such, often small, technological glitches influence various communication problems as user attention is ruined, the experience has been trashed; resulting in any future efforts of web-site-based brand relationship building jeopardized.

Interestingly, Facebook has recognized the same problems and has been working on Facebook Instant Articles project. Which, in its general principles is similar to Google’s AMP and aims to solve the same problems but for content delivered via the Facebook app. But, Google’s AMP, due to the Google’s usage, is a project with the web-wide implications. Perhaps, sometime in the future we’ll compare the two. For now, back to AMP.

With AMP, Google, together with publishers and technology companies, set out to develop an advanced open source technological framework that will guarantee fast loading times while enhancing user experience on mobile devices.

So, how does the AMP work?

In its core, AMP work as any other web based HTML pages, except it allows only a predefined set of functionality by limiting the use of usual web components to achieve its super-fast loading time. From a more technical perspective, this is due to the set AMP standardization that allow only asynchronous scripts, sizing all resources statically, disabling extension mechanisms block rendering, keeping all third-party JavaScript out of the critical paths, in-lining and bounding all CSS, making fonts triggering efficient, minimizing style recalculations, running only GPU-accelerated animations and so on.4 For those not so web-developing savvy, the aforementioned are the core elements of any functional and interactive web page and they on its own respect, beyond page functionality, influence page’s size and load speed.

This AMP standardization is based on the latest technology and architectural approaches that give preference to speed and better experience in comparison to advanced functionality.5 And still, within the AMP standards, there exists a growing library of web components that offer the ability to embed rich media objects like video and social posts, display advertising, or collect analytics.6 In its totality the AMP pages are light and simple, they load super-fast and focus on users experience on mobile.

Google had published extensive guides, code references and guides on the on the AMP project website which you can use for your own reference in creating the HTML AMP pages.7

Moving forwards Google has presented a roadmap which includes many features that will be added to the AMP Project. You can check the roadmap, here. The roadmap has been divided in 4 distinct focus areas. These areas cover major milestones that need solution; from basic formatting and standardization, analytics, ads and access. Basically, the aim is to make AMP pages as closely functional to normal HTML pages as possible but to maintain the target user experience and fast load time.

What I particularly found interesting, within the upcoming AMP related goals, is inclusion of Accelerated Landing Pages (ALP) for Google AdWords PPC campaigning.  Two months ago, this part of the project launched opening AMP into the SEM campaigning. Interesting bit to note here is that, among others, ALPs will be pre-cached by Google and then pre-loaded and served over their search engine and ads.8 This results in pages loading almost instantly, which will definitely help optimize user experience and impact your SEM efforts in positive ways. And SEO efforts, actually.

How do AMP and SEO work together?

AMP project, even though in its starting phases it has  has already gained steam with big publishers and various news websites. This has been influenced by assumptions that Google SE which will favor those website that load fast and have a good user experience for mobile. In its totality, that translates into favoring AMP Pages, or at least considering them as a positive ranking factor.

Yes, I note it as an assumption. This is because at this moment AMP is not officially a ranking signal.9 But, as the SEO industry leaders inferred from previous Google practices and trends; and considering the fact that the Page Speed is a ranking signal, it can be considered as such.10 Or at least, it should not be ignored nor dismissed by the webmasters.

Another supporting fact is that Google has been pushing for AMP information via its Official Google Webmaster’s email notifications (based on the blog of the same name) urging webmasters to grasp the benefits and get on the AMP train (#AMPlify). Those active in the Search Console will notice that there is now a new page for monitoring and evaluating AMPs connected with the respective domain. You can find it under the Search Appearance category.

Before showing you how do AMPs actually look like and how they are presented in the Google results let me quickly point out couple of things on how to actually implement and validate AMPs.

AMPs on your Website

Truthfully, moving your pages to AMP can be a either easy or a hard task depending on how is your website built. If you used custom build HTML pages then you’ll have a tougher task at your hand – as you have to decode every single page you want to amplify. Sure, this is until some scripts or  services become generally available.

On the other hand if you use any CMS (content management system) platform like WordPress, Joomla or Drupal – installation of the AMP pages will be covered by installing couple of pre-built and widely available  solutions. On WordPress the process is relatively easy as you can amplify your pages simply by installing a plugin (like the official WordPress AMP plugin, or PageFrog) enabling settings and tweaking the meta data.

I will not go here into details on how to install these plugins and tweak the core settings. You’ll find good tutorials all over the web and YouTube; like here and here.  I will though emphasize couple of major points you need to do after you actually install the AMP plugins or re-code your web pages:

  1. Verify that there are indeed AMP pages on your website

To do this, just open any of your pages. As an example here I’ll use an article Lord Somersby on BiH’s Tour – written by Dušan Mladenović. So once you open that page go to its source code by clicking right mouse button and selecting View Source or by pressing Ctrl+U in the same time. Once in source press Ctrl+F to find this piece of code:

link rel="amphtml"

This is basically a designation of the AMP URL that will be picked by Google’s Bot. In my example this the entire AMP link code:

<link rel="amphtml" href="http://balkanmarketingstories.com/m-factor-of-the-week/lord-somersby-on-bihs-tour/amp/"

No just use the URL (href value) and open it in your browser and then you’ll see the AMP page itself. Note that the AMP links on Worpdress are same as regular, but just have an /amp/ extension on the end. The difference should be obvious. The old page is embedded within the rest of the site (hence downloading extra resources).

regular-page

While the AMP is a simple page cleared of unnecessary styles and resources, hence serving only the content that matters:

amp-page

Once you’ve visually confirmed that there indeed AMP versions of your page, then you should officially validate them.

2. Validate the AMP page itself 

This step is easy, as an AMP Validator is open and provided through Project’s websites. You can find it here https://validator.ampproject.org.  When there, simply copy the URL you wish to validate and process it. If all is ok – you’ll see a comment ‘PASS’. Otherwise, the Validator highlights what went wrong and what needs to be recoded.

3. Submit your Sitemap to Google & Fetch the website 

Once you’ve validate that indeed there are now AMPs on your domain, the next thing to do is to re-upload your sitemap to Google Search Console. You’ll find it in Google Search Console – category Crawl – page Sitemap. Once you’ve submitted your sitemap – crawl the website by Fetching it. You’ll find Fetch & Render function within Fetch as Google page also under the Crawl category.

This 3rd step basically tells Google: “Hey, I made some changes to my website, I need you to check it out. Here is the map of all pages on the website, send your bots, crawl it for indexation.” Once in the process of indexation, Google will notice that you have AMP pages and will present its status in the Search Console. Just to note, it took Google to notice our AMP pages 3 days after I submitted the sitemap. Here’s the status at the time I’m writing this:

amp-on-balkan-marketing-stories.com

4. And final step would be to Monitor the indexation and of course, act upon the errors Google notifies you about. Like I have to do now. As Google discovered 2 errors, I’ll need to fix these in order for Google to Accept them as AMP pages.

How do AMPs look on Google? Where do I see them? 

Well, in its intended purpose, you can see AMP pages only by googleing on your mobile device. They will be distinguishable by the icon AMP and a flash next to it. Google has been slowly including AMPs in the search engine functionality, but it’s not a constant feature (as of 27th of September 2016). Meaning that someday you may see them, others not. And it also depends whether you are using a local SE or .com version. I’ve managed to pickup our AMP of that Lord Somersby article on first place of Google’s results (which is rather good for such query):

 

bms-lord-somersby-amp-on-google

 

But in any event, if you want to play around on Google with fully enabled AMP you can try the Google’s AMP Demo at: g.co/AMPdemo. To see the full-AMP-enabled Google, just type in a newsworthy keyword and you’ll have a grasp how will Google look like in the future.

Conclusion

By recognizing that there are more and more people depending on smart phones to search for information, products or simply answer questions. Connectedly, the users experience is crucially linked with the web sites performance – speed, readability and responsiveness. To provide best experience and to best serve  the mobile first world, Google reached out out to various publishers and content producers to discuss and develop an open source technology aimed to revolutionize how websites are delivered on mobile devices.  The result of this cooperation is the AMP project. Which in its core is nothing more than a next gen standards for creating web pages – all with a goal of delivering web pages with super-fast loading speed for mobile users, whilst retaining all the functionality of a standard web page.

This goal, in my humble opinion is achieved. AMP on its own works good for mobile users and will help both publishers to serve the content and users to consume it, while not spending too much resources. Sure, at this stage AMPs are not fully functional, but its development is still not final. There are major features on AMP Project road map (like ads or access, i.e. login/contact forms) that are to be completed. And I am positive Google will push for its completion and guarantee successful and complete implementation. (And actually, Facebook, on its own with Instant Articles project). Ultimately, all participant in the process: users, publishers and Google as a mediator in between – will benefit from AMP and related technologies.

So, are you ready to #AMPlify your website?

Let us know in the comments what do you think of this project, where do you see its future, or if you have any other thoughts or related questions. If you need any help implementing AMP on your website or to discuss some details, but don’t trust comments, you can always write me at nikola@balkanmarketingstories.com!

Don’t forget to revisit balkanmarketingstories.com and stay in touch. Upcoming in the next weeks, on this topic, is a case study of AMP usage on the major news websites in the Balkans.

 

 


Sources & Footnotes:

  1. AMP Project, AMP FAQ, https://www.ampproject.org/docs/support/faqs.html#what-is-the-accelerated-mobile-pages-project, accessed 29.09.2011.
  2. Google Official Blog, Introducing the Accelerated Mobile Pages Project, for a faster, open mobile web, https://googleblog.blogspot.cz/2015/10/introducing-accelerated-mobile-pages.html, accessed 29.09.2011.
  3. Google AdWords, Inside AdWords: Building for the next momentum, https://adwords.googleblog.com/2015/05/building-for-next-moment.html, accessed 29.09.2011.
  4. AMP Project, How AMP Speeds Up Performance, https://www.ampproject.org/docs/get_started/technical_overview.html, accessed 29.09.2016.
  5. AMP Project, How do Accelerated Mobile Pages work?, https://www.ampproject.org/docs/support/faqs.html#how-do-accelerated-mobile-pages-work, accessed 29.09.2016.
  6. Ibid.
  7. Google AMP, AMP HTML Specifications, https://www.ampproject.org/docs/reference/spec.html, accessed 28.09.2016.
  8. AMP Project WordPress Blog, Fast Ad Landing Pages with AMP, https://amphtml.wordpress.com/2016/08/11/fast-ad-landing-pages-with-amp/amp/, accessed 29.09.2016.
  9. This is based on the Gary Illyes’s (Webmaster Trends Analyst at Google)  presentation on AMP at SEJ 2016 Summit in Chicago. Details here:  https://www.searchenginejournal.com/future-amp-gary-illyes-sejsummit-chicago/166677/
  10. More info here: https://moz.com/blog/how-googles-amp-will-influence-your-online-marketing or here: https://www.wired.com/2016/02/google-will-now-favor-pages-use-fast-loading-tech