Yes, here’s such a hybrid, Russian-English heading ... So let's immediately clarify something. So, if SEO is a well-known (in narrow circles) term, then AMP is not so. Accelerated Mobile Pages was announced by Google in 2015 (see Wikipedia article ) as a tool to quickly browse web pages on mobile phones. Over time, AMP turned into a framework that allows you to create pages for any sites (not only for mobile devices), and expanded its "nomenclature": actually sites ( AMP Websites ), stories ( AMP Stories ; topic of this article), ad units ( AMP Ads), and emails ( AMP email ). Behind all this, as mentioned above, is Google , and if you are interested in promoting sites in this search engine - it will be useful to treat the topic of AMP with due attention. But first, let's see what these very AMP stories look like ( AMP Stories ; update: from May 1, 2020 renamed to Web Stories ), then we decide whether we need them, and if it turns out that we need them, we will consider how to do it.AMP story example
Click on the QR code to see what the AMP story looks like on a real site from a desktop computer or laptop, or scan it to view the same page from a mobile device (smartphone and / or tablet):
This is not an advertisement.. AMP- «» . , , — , — , .
On a computer or laptop, you should see this “story”:
On a tablet and smartphone, this:
Who is it for
Using AMP stories is good where a few frames (recommended from 7 to 20, but this is not a strict rule) can convey the meaning and beauty of a service or product. For example, the same tourism and travel, hotels (show rooms, recreation areas, SPA), fashion (show a collection of clothes), restaurants and cafes (show interiors and dishes), beauty salons (show ... beauty). In general, the meaning should be clear, and every business owner knows better than me what he should show.How it affects search engine optimization (SEO)
The trend of search algorithms in my opinion today is that the ranking of a site is less and less affected by links from other sites (although, yes, it still affects), and the following factors (not necessarily in the order listed) are more and more:- Page Download Speed
- Adaptation to mobile devices
- Structured data availability
- Abundant content availability
- The long history of the site
The first three items from this list are available for quick optimization, so let's take a closer look at them.Page Download Speed
Take a look at this screenshot from the Google documentation , and read the underlined (or click on the image to go to this document): AMP
technology from the very beginning was designed specifically to increase page loading speed on mobile devices. For these purposes, Google downloads AMP pages to mobile devices not from your server, but from its cache ( Google AMP Cache ). That is, Google first saves your AMP page (in this case, AMP history ) at home, and then quickly gives it to users of mobile devices using its powerful global network of servers, the so-called Cdn
- Content Delivery Network .True, this is true only for pages opened on mobile devices (pages opened from a computer will still be loaded from your server), but we know that adaptation to mobile devices is very important, since today users access websites from mobile devices more often than with traditional computers and laptops. So, with the help of AMP technology, we solve the problem of page loading speed (at least on mobile devices), which meets the stringent requirements of Google . And this is not enough! But the documentation also says about: " illustrated articles in Google search results, " which AMP stories are obviously called(take a look at the first sentence in the screenshot, or click on the image to go to this document): From this context, we can conclude that Google in its search gives them (ie, “ illustrated articles ”) a special place in the search results! So why not take this place and your stories? But the technology of AMP stories is still quite new, and Google has repeatedly announced its phased implementation in search results - by region of the world and topics of the stories themselves. But, I know that you know when it is best to prepare a sled ... In addition, the presence on your site as content of AMP stories
with structured data simply cannot go unnoticed (if we do everything right; read more about this) by Google algorithms , and it is very likely that this will beneficially affect the position of the entire site in its search results.In the meantime, let's check on Google’s AMP Page Validator whether our story can be considered a valid AMP page from the point of view of Google itself :
Yes, everything is OK. Please note that at the bottom of this screenshot it is said that " Valid structured data was found on the page ." We will come back to them, but first, let's check whether our AMP story is adapted to mobile devices.Adaptation to mobile devices
There’s another tool from Google for this test - Optimization check for mobile devices . Check:
Everything is OK. And, honestly, for some reason I knew this beforehand.Structured data availability
If you look in the Google documentation , then you can find a rather large section on structured data (click on the image to go to this document): Obviously, Google attaches great importance to them. Since we are interested in Google no less than he is in us, let's not refuse him such trifles, and we will do as he wants. If you look at the code of our AMP story , then there, in the head section , you can find the following fragment: As you can see - nothing complicated. The Google documentation says that the preferred JSON-LD format is fine, we do .
type="application/ld+json"Further, the documentation says that the preferred standard http://schema.orgis accept.And then everything is obvious and intuitive. I will just explain:- paths to files here can be specified both relative and absolute;- datePublished and dateModified coincide at the first publication, and in case of changing content - we only change the value of the dateModified field ;- the format of the datePublished and dateModified fields is exactly as shown, and +3 is the time offset in hours from Greenwich Mean Time ( GMT - Greenwich Mean Time ), in this case Moscow time is meant;- asimage (here is the poster.jpg file ) it is recommended to use an image with aspect ratios (width / length) of 3: 4, at least 696 x 928 pixels in size, recommended: 960 x 1200 or 1200 x 1600;- as a logo (here is a thumb.png file ) it is recommended to constantly use the same (for a specific site or brand) square image with a size of at least 112 x 112 pixels (I think that 200 x 200 or 256 x 256 will be OK )While checking the validity of AMP, we already saw that: " Valid structured data was found on the page ", but let's check it using a special tool from Google Checking structured data:
As you can see, in the upper right corner in capital letters it says: NO ERRORS , NO WARNINGS - it looks like Google is happy. So we do too.Optional: data for social networks
Although this has nothing to do with search technologies, but since we are well aware of the role of social networks, let's do something useful for them as well (but we know that in the end it will all turn out in our favor). So, in the head section of AMP history (however, like any other page on the site), you can also place markup informing social networks such as Facebook, Twitter, Pinterest, VKontakte additional information about our AMP history . Now, if a user of one of the social networks shares a link to our page, another image and title (and sometimes also a description) “pulls up,” as in the example from VKontakte in this screenshot:
And here is how this markup looks in the page code:
Here, I think, everything is also intuitive. But I will explain the following.The markup in empty lines is divided into three sections.Facebook (uses the og namespace - Open Graph ), Twitter (uses the twitter namespace ), and VKontakte (uses the vk namespace ).I must say that Open Graph is de facto the standard for such markup, and other social networks also use it. Moreover, if you do not specify separately for Twitter and VKontakte, they will also try to use Open Graph . But we have indicated for a more controlled result.It should also be noted that the paths to the resources here must be registered absolute, with the exception of VKontakte - here the path to the image can be registered both absolute and relative (in the example above - relative :) content="./hero_vk.jpg".In addition, Facebook requires the creation of so-called web application, and use its identifier ( property="fb:app_id"see the first line), probably to control the distribution of third-party content through its network (and be able to close this shop at any time if he doesn’t like something).To create such an application, go to the application page of the developer account (which must be created, if not already created) Facebook for Developers and click on the tile: " Add a new application". Give your application any name (I called my“ Visual Stories ”), and right after creation you will see the identifier of your application, as shown in the screenshot below:
Further settings are easy to understand, and are not necessary for our purposes.Do not use the identifier shown here, Facebook-, — ! , .
Now let's check the validity of our markup for social networks.Facebook repost debugger : Everything
seems to be OK with Facebook .Now Twitter Card validator :
And with it, everything seems to be fine.Now check on Pinterest , in so-called Rich Pins Validator :
In addition to the nice green ticks, it’s also written below: AMP Valid? True The . But most importantly, note here that the Canonical URL is the address of the AMP story itself . This is critical for indexing on Google , and we will return to this at the end of the article.Regarding VKontakteas far as I know, they don’t have such a validator (or say this: I don’t know that VKontakte has such a validator), but we checked them at the very beginning in practice - everything works there too.How to do
An AMP story can be created ... manually. Although some CMSs have extensions for creating AMP pages , it is precisely the AMP stories that, as far as I know, are not yet supported. There are also several online services for creating AMP stories , for example, MakeStories , but I have not tested them, because I do not like such dependencies from third parties, in terms of code cleanliness, completeness of functionality and timeliness of updates. Therefore, here is a link to a template in my GitHub repository containing basic functionality (images, video, animation - everything is like in the Low Stars of Summer AMP story)), which is quite enough for most cases, but it can be easily expanded using the official catalog of components . The template can also be cloned: But the code will not work correctly if it is run directly from the file system. For development and testing purposes, you must first start the local server. If you do not have your own proven, reliable and familiar, and you have a Chrome browser - I can recommend Web Server for Chrome . Just start, select the folder with the files ( amp-story-template-ru ) and open the local address - everything as shown in the screenshot: Since we are already talking about the Chrome browser , I can also recommend the extension from the developersgit clone https://github.com/stmike/amp-story-template-ru.git
cd amp-story-template-ru
AMP - AMP Validator . Using it is incredibly simple: if you are on a valid AMP page , a green icon is lit in the Chrome panel ; if not, it is red, and when clicked, it shows line numbers with errors.
The template code is well commented - so you can read it like Andersen's tale, but still I want to pay attention to a few nuances.1. Google search engine will consider AMP-history (like any AMP-page ) valid only if the secure protocol HTTPS (not HTTP ) is used to access it .2. In the GitHub repositoryAlong with the familiar index.html file, you will find the bookend.json file . In AMP stories, he is responsible for the graceful ending of the story: repeat, share through social networks, useful links. Everything, as shown in the screenshot: The
resource paths in the bookend.json file can be both absolute and relative.3. AMP stories in the tag <link rel="canonical"...must refer to themselves. Other pages of the site should not point to them. This distinguishes them (in terms of SEO ) from regular AMP pages . Here's what Google writes about it :
After indexing at least one AMP page on your site(including AMP stories ) in the menu ( Improvements section ) of the Google Search Console, the item appears: AMP page . There should not be errors:
Conclusion
That's all for today. Other materials follow. To whom it is interesting to read, subscribe to notifications of new publications. You can subscribe on this site (the Subscribe button below), or on the Telegram channel IT Tutorial Zakhar , or on the community of the same name on VK , or Twitter @mikezaharov .Donuts
