Главная » SEO » Оптимизация сайта » AMP страницы для Google Поиска
204 0  

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

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

css AMP страниц не должен содержать:
- !important;


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

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

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

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

5. fellow Но! Помните что есть AMP JS —  библиотека AMP скриптов, которая заточена под асинхронную загрузку и постояно расширяется;

6. С конца 2019 года разрешили добавлять свои скрыпты - смотреть

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

<!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 для Видео:

документация - здесь

Нужно вставлять еще один скрипт:
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
======
<amp-video controls
  width="640"
  height="360"
  layout="responsive"
  poster="/static/inline-examples/images/kitten-playing.png">
  <source src="/static/inline-examples/videos/kitten-playing.webm"
    type="video/webm" />
  <source src="/static/inline-examples/videos/kitten-playing.mp4"
    type="video/mp4" />
  <div fallback>
    <p>This browser does not support the video element.</p>
  </div>
</amp-video>

Для вставки видео с YouTube:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<amp-youtube data-videoid="WHD8FM2lpUE"  layout="responsive" width="480" height="270"></amp-youtube>


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

<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 страниц:

amp-ad — контейнер для рекламных блоков:

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

<amp-ad width=300 height=200
      type="adsense"
      data-ad-client="ca-pub-8125901705757971"
      data-ad-slot="7783467241">
  </amp-ad>


amp-pixel — элемент

для отслеживания просмотров страниц. Он не поддерживает стили, код имеет вид:

<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>


Для вставки кода отслеживания analytics.google:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

* GA_MEASUREMENT_ID - заменить на свой индефикатор. (- более подробно)


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

Ошибки в таблице стилей CSS:

love Существуют следующие ошибки AMP, связанные с таблицами стилей:

STYLESHEET_TOO_LONG — таблица стилей превысила допустимый лимит размера в 50000 байт. В таком случае необходимо уменьшить содержимое тега <style amp-custom> до допустимой величины;

CSS_SYNTAX — синтаксическая ошибка в таблице стилей. Нужно исправить ошибку в указанном месте;

CSS_SYNTAX_INVALID_AT_RULE — использование недействительного правила. Необходимо исправить ошибку, относящуюся к директивам CSS.


--- Ресурсы:
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