Accelerated Mobile Pages (AMP) ⚡

SanCo is a Chip Tuning company that delivers components and software for diesel and petrol driven vehicles such as cars, tractors and lorries. The tuning products are primarily distributed to retailers and tuning workshops, as well as agriculture and trucking companies. When possible, the performance enhancing tuning is carried out through modification of the engines existing software control software.

The company website Sancodk.dk had been setup before the times of smart phones, mobile friendly websites etc. Web layouts were – like in this case – constructed by the use of HTML tables within HTML tables and frequent use of per-HTML-element inline CSS.

 

Making the website mobile friendly is essential for these primary reasons:
Website Visitors: A lot of website visitors today use mobile devices when browsing. How many you in your case can be discovered in your analytics software.
Search Engine Traffic:
Mobile-friendliness is a ranking factor. Google declared that they’d make mobile-friendliness a ranking factor for mobile searches – and not desktop searches. (https://support.google.com/adsense/answer/6196932?hl=en). Some referred to this incident as Mobilegeddon – as they lost significant amounts of traffic – while others did not.
March 16, 2016 Google declared that they will boost the ranking signals of mobile-friendly sites even further (https://webmasters.googleblog.com/2016/03/continuing-to-make-web-more-mobile.html)

Parallel to mobile-friendliness being a ranking factor in Google, Google has also launched the Open Source project AMP HTML which is about mobile-friendliness, speed and performance for all devices. As I haven’t seen them state that AMP HTML is a direct ranking factor, it still is for these reasons:
– Google features AMP articles in a carousel in Google. Some may be able to see the Google AMP demo here: Google Search news carousel (try on mobile).. If not, you can also take a look at this article with screenshots from featured AMP pages in Google (http://www.thesempost.com/google-launches-amp-demo/). If you prefer a video demonstration:

Additionally, speed is a ranking factor – and so is not making website visitors bounce back to the search engine due to lack of usability.

AMP PROs and Cons

AMP HTML is a subset of HTML and not an entirely new technology. Getting speedy and mobile-friendly web pages can be done also be done with a tailored for speed and mobile website, but with AMP HTML you  potentially get the benefit of extra visibility on Google. AMP HTML comes with a strict set of rules when it comes to the markup – and even adding you own custom made snippet of JavaScript is not possible at this point.

In the beginning, the functionality was very limited to not even not having options to add a responsive menu and a contact form. Here in 2016 Google has added a lot of new features and functionality. It seems a lot of it has been focusing on news sites, but that may likely only be the beginning.

Merging from html to amp

Examples of AMP Pages

The Washington Post, The Guardian  and The Wall Street Journal make use AMP HTML. You can read a case study about The Washington Post on the official AMP Project website.

Getting displayed in the Google AMP Carousel

You can make AMP pages without the possibility of getting displayed in the Google AMP Carousel.

In order be able to get displayed your pages need to be properly formatted. There are various ways I’ll get into later, but the ultimate test can be seen in Google Webmaster tools.

For possible featuring your pages in the Top Stories carousel you also need to have properly formatted Structured Data. Currently one of the following types are valid: Article,  NewsArticle, BlogPostingVideoObject (Source). You can choose between two different markup formats from schema.org: JSON-LD and microdata. As mentioned in the last link, the JSON-LD is the recommended format – so that is the one I’ll be using. You can check out these examples from the official AMPProject on GitHub (Source). You can test your Structured Data with this online testing tool.

For setting up the Structured Data you will also want to check out these guidelines that even have relatively strict formatting options for the logo – or rather the wordmark. The difference between a logo and a wordmark is that a logo can be a symbol, while the wordmark is a written out version of the company name.

The minimum requirements are that the height of the image have an exact height of 60px (preferred) or alternatively an exact width of 600px. The wordmark itself must then be maximum 48px with a minimum 6px padding around it. Furthermore, the wordmark must be dark with a white or light background.

The image object must be at least 696 pixels wide and have the following formats: .jpg, .png, or. gif.

The maximum article headline length not being allowed to exceed 110 characters.
(Check out the guidelines for adding a wordmark to your JSON-LD here). Also check this AMP code out for a complete minimal best practice example (Link).

For alternate languages for each page, check out this documentation (Link)

To be continued …

Leave a Reply

Your email address will not be published. Required fields are marked *