» » » AMP страницы для Google Поиска
9 0  

AMP страницы для Google Поиска

Создавая AMP страницу нужно помнить что на ускоренной странице должен быть доступен тот же контент и функционал, который присутствует на стандартной странице.  Также нужно  использовать только HTTPS протокол.


Почему АМП это круто?
1. Скорость + в результатах мобильного поиска Google отображаются с расширенными данными и значком, указывающим на быструю загрузку, что делает сниппет более привлекательным для потенциальных посетителей; 

2. Падает показатель отказов.

3. Растет мобильный трафик.

4. Снижается нагрузка на хостинг - поисковик хранит КОПИЮ у себя на сервере - вашей АМП страницы!


Почему AMP это am говно?
1. Не поддерживаются формы обратной связи, нет возможности заказа товара или услуги. Это можно назвать самым главным минусом, т.к. для посадочной страницы или интернет-магазина использование турбо-страниц будет нецелесообразным, ведь вы все равно не сможете получить с них заявки.

2. Практически все дизайны таких страниц одинаковы!

Пример ускоренной страницы:

<!doctype html>
<html amp lang="en">

<head>
  <meta charset="utf-8">
  <title>Commerce</title>
  <link rel="canonical" href="https://www.ampstart.com/templates/e-commerce/cart.amp">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

  
	<!-- Используется Google для установки порядка парсинга DOM и CSSOM. а также скрывает контент до его полной загрузки. -->
	<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>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700" rel="stylesheet">
	<style amp-custom="">
		<!-- Здесь свои стили -->
	</style>
	<!--Последний обязательный элемент раздела-->
	<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>

<body>
	<header class="">
		<a target="_blank" href="product-listing.amp.html">Products</a>
	</header>
	<section class="">    
		<h2>You may also like</h2>	
		<amp-img src="../img/logo-nav.png" width="279" height="175 alt=""></amp-img>
	</section>
	<footer>
	</footer>
</body>

</html>

url amp страницы.

Может быть двух видов:
http://www.example.com/myarticle/amp
http://www.example.com/myarticle.amp.html

canonical и обратная к ней

AMP-страница должна содержать ссылку:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">


А на AMP-странице — доджна быть обратная ссылка:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">


Требования к CSS:

Css стили пишутся inline, и их размер не должен превышать 50кб.

Требования к логотипу:

Логотип должен быть вписан в прямоугольник 60х600px по одной из сторон на выбор

(т.е. высота может быть равна 60px, а ширина взята произвольного размера (до 600px) или же наоборот: ширина равна 600px, а высота - произвольная, но не более 60px). Соответствие одной из сторон названному размеру — обязательное условие, а использование лого квадратной формы не допускаются.


Требования к гиперсылкам:

Все ссылки должни иметь трибут - target="_blank"

В AMP для картинок тег html пишется по другому:

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Также есть другие АМР теги (- Список всех тегов) :

<amp-video width="720" height="305" layout="responsive"
  src="https://yourhost.com/videos/myvideo.mp4"
  poster="https://yourhost.com/posters/poster.png"
  artwork="https://yourhost.com/artworks/artwork.png"
  title="Awesome video" artist="Awesome artist"
  album="Amazing album">
</amp-video>

<amp-iframe width="200" height="100"
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAyAS599A2GGPKTmtNr9CptD61LE4gN6oQ&q=iceland">
</amp-iframe>

<amp-sidebar id="sidebar1" layout="nodisplay" side="right">
  <ul>
    <li>Nav item 1</li>
    <li><a href="#idTwo" on="tap:idTwo.scrollTo">Nav item 2</a></li>
    <li>Nav item 3</li>
    <li><a href="#idFour" on="tap:idFour.scrollTo">Nav item 4</a></li>
    <li>Nav item 5</li>
    <li>Nav item 6</li>
  </ul>

  <nav toolbar="(max-width: 767px)" toolbar-target="target-element">
    <ul>
      <li>
        <input placeholder="Search..."/>
      </li>
    </ul>
  </nav>
</amp-sidebar>

what Запрещено добавление пользовательских java-скриптов на AMP-страницы с помощью тега <script> запрещено. Можно только добавлять AMP runtime в раздел заголовков с помощью загрузки данного скрипта:

 <script src="https://cdn.ampproject.org/v0.js"></script>


no Но самое главное ЭТО МИКРОРАЗМЕТКА - смотреть тут



Чтобы созданные AMP-страницы попали в поисковую выдачу, стоит избегать синтаксических ошибок и не использовать запрещенные либо устаревшие теги.


--- Ресурсы:
1. Проверка АМП страниц:  https://search.google.com/test/amp?hl=ru

2. Google рекомендаци к AMP - https://developers.google.com/search/docs/guides/enhance-amp

3. Учебник по АМП: https://amp.dev/documentation/guides-and-tutorials/start/create/?format=websites

4. Сервис позволяет конвертировать вашу страницу в AMP добавив одну строку - https://mercury.postlight.com/amp-converter/

5. Генератор АМП страницы с существующей - https://html2amp.mobilizetoday.ru

6. Генератор - https://amp.dev/boilerplate/?referrer=ampbyexample.com

===

P.S. Удачи Вам... ой как она Вам пригодится... sad


Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019