At the beginning of the year, in SEO news for this 2017, we talk about AMP and its weight in SEO due to the optimization of the loading speed of websites for mobile devices. buy youtube views
AMP yes or no?
A resounding Yes taking into account thatThe versions of the AMP pages reduce the contents of a website to the minimum necessary so that they load faster than ever.
Therefore, if Google recommends the use of AMP, we should definitely pay attention to it. Especially because it will help us improve our results in the SERPs.
How to implement AMP in a WordPress blog
Making your blog compatible with AMP is extremely easy. You just have to download the Plugin that will make it compatible without having to make any additional configuration. Just have it installed and the plugin takes care of the rest automatically and without you having to do anything about it. Then we leave the links to two Plugins that perform this function.
How to implement AMP in a web page
In a web page it will not be as simple as in your WordPress, since it will be a manual process and therefore more complex and delicate.
We must create AMP versions of each of the final pages (product, news, landings …) that are relevant to Google and mobile users. Which will serve with another URL and which will contain a specific HTML tag in your code.
An AMP version of a page is one that:
- Discards or eliminates the use of heavy elements such as images, iframes, forms … unnecessary to transmit information quickly to end users. Completely eliminating the possibility of using Javascript .
- It uses specific tags in its HTML code to identify it as an AMP version. For example: instead of <img> you would use <amp-img> .
In addition, style sheets have their own limitations in an AMP version:
- You can not use external style sheets (CSS).
- CSS must be within a single and specific AMP-specific tag: <style amp-custom>
- CSS rules such as @import and ! Important have the use completely prohibited .
Adapting a page to AMP
Taking into account the above, we will double our page and edit its HTML code to convert it into AMP.
Step by Step:
- The <! Doctype html> tag must be present and in the first place.
- Then we change the <html> tag to one like this: <html amp lang = “es”>, as you can see, besides pointing out that it is an amp page, we also indicate the language.
- Inside <head> we start with the tag <meta charset = “utf-8”>
- Immediately afterwards we introduce the following library: <script async src = https: //cdn.ampproject.org/v0.js “> </ script> .
- To avoid SEO problems of duplicate content, it is essential to enter a <link rel = “canonical”> tag that points to the URL of the original page that we are converting. This is important or Google instead of rewarding us with better positions will penalize us.
- We optimize the content display to the resolution of the device: <meta name = “viewport” content = “width = device-width, minimum-scale = 1, initial-scale = 1”>
- We introduce CSS styles within the <style amp-custom> </ style> tag
- Before closing the <head> it is essential to copy and paste the following code that includes specific styles related to the visualization of the content of the page.
</ script>
<style amp-custom> Here the CSS styles (font types and sizes, colors … </ style>
<style amp-boilerplate> body {-webkit-animation: -amp-start 8s steps (1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps (1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps (1, end) 0s 1 normal both; animation: -amp-start 8s steps (1, end) 0s 1 normal both} @ – webkit-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ – moz-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ – ms-keyframes -amp-start {from {visibility: hidden } to {visibility: visible}} @ – o-keyframes -amp-start {from {visibility: hidden} to {visibility: visible}} @ keyframes -amp-start {from {visibility: hidden} to {visibility: visible} } </ style> <noscript> <style amp-boilerplate> body {-webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none} </ style>
</ noscript>
These are the basic steps to build a specific page in AMP, always respecting the requirements indicated at the beginning for an AMP page. But we can also add schema.org metadata that identify the content of the page: article, news, blog post …
We encourage you to visit the AMP project page and discover much more:
Do you already use AMP? Have you noticed changes in your indexing in the SERP?