Что такое код hw_api >link

Содержание

(PHP 4, PHP 5 hw_api::link — Creates a link to an object

Описание

Creates a link to an object. Accessing this link is like accessing the object to links points to.

Список параметров

The parameter array contains the required elements ‘objectIdentifier’ and ‘destinationParentIdentifier’. ‘destinationParentIdentifier’ is the target collection.

Возвращаемые значения

The function returns TRUE on success or an error object.

Что такое API? Простое объяснение для начинающих

Этот краткий термин на слуху у всех, кто хоть как-то сталкивался с разработкой. Но далеко не все понимают, что именно он обозначает и зачем нужен. Разработчик Пётр Газаров рассказал об API простыми словами в своём блоге.

Аббревиатура API расшифровывается как «Application Programming Interface» (интерфейс программирования приложений, программный интерфейс приложения). Большинство крупных компаний на определённом этапе разрабатывают API для клиентов или для внутреннего использования. Чтобы понять, как и каким образом API применяется в разработке и бизнесе, сначала нужно разобраться, как устроена «всемирная паутина».

Всемирная паутина и удалённые серверы

WWW можно представить как огромную сеть связанных серверов, на которых и хранится каждая страница. Обычный ноутбук можно превратить в сервер, способный обслуживать целый сайт в сети, а локальные серверы разработчики используют для создания сайтов перед тем, как открыть их для широкого круга пользователей.

При введении в адресную строку браузера www.facebook.com на удалённый сервер Facebook отправляется соответствующий запрос. Как только браузер получает ответ, то интерпретирует код и отображает страницу.

Каждый раз, когда пользователь посещает какую-либо страницу в сети, он взаимодействует с API удалённого сервера. API — это составляющая часть сервера, которая получает запросы и отправляет ответы.

API как способ обслуживания клиентов

Многие компании предлагают API как готовый продукт. Например, Weather Underground продаёт доступ к своему API для получения метеорологических данных.

Сценарий использования: на сайте небольшой компании есть форма для записи клиентов на приём. Компания хочет встроить в него Google Календарь, чтобы дать клиентам возможность автоматически создавать событие и вносить детали о предстоящей встрече.

Применение API: цель — сервер сайта должен напрямую обращаться к серверу Google с запросом на создание события с указанными деталями, получать ответ Google, обрабатывать его, и передавать соответствующую информацию в браузер, например, сообщение с запросом на подтверждение пользователю.

В качестве альтернативы браузер может сделать запрос к API сервера Google, минуя сервер компании.

Чем API Google Календаря отличается от API любого другого удалённого сервера в сети?

Технически, разница в формате запроса и ответа. Чтобы сгенерировать полную веб-страницу, браузер ожидает ответ на языке разметки HTML, в то время как API Google Календаря вернёт просто данные в формате вроде JSON.

Если запрос к API делает сервер веб-сайта компании, то он и является клиентом (так же, как клиентом выступает браузер, когда пользователь открывает веб-сайт).

Пользователь благодаря API получает возможность совершить действие, не покидая сайт компании.

Большинство современных сайтов используют по крайней мере несколько сторонних API. Многие задачи уже имеют готовые решения, предлагаемые сторонними разработчиками, будь то библиотека или услуга. Зачастую проще и надёжнее прибегнуть именно к уже готовому решению.

Многие разработчики разносят приложение на несколько серверов, которые взаимодействуют между собой при помощи API. Серверы, которые выполняют вспомогательную функцию по отношению к главному серверу приложения, называются микросервисами.

Таким образом, когда компания предлагает своим пользователям API, это просто означает, что она создала ряд специальных URL, которые в качестве ответа возвращают только данные.

Такие запросы часто можно отправлять через браузер. Так как передача данных по протоколу HTTP происходит в текстовом виде, браузер всегда сможет отобразить ответ. Например, через браузер можно напрямую обратиться к API GitHub (https://api.github.com/users/petrgazarov), причём без маркера доступа, и получить вот такой ответ в формате JSON:

Браузер отлично отображает JSON-ответ, который вполне можно вставлять в код. Из такого текста достаточно просто извлечь данные, чтобы использовать их по своему усмотрению.

Ещё несколько примеров API

Слово «application» (прикладной, приложение) может применяться в разных значениях. В контексте API оно подразумевает:

  • фрагмент программного обеспечения с определённой функцией,
  • сервер целиком, приложение целиком или же просто отдельную часть приложения.

Любой фрагмент ПО, который можно чётко выделить из окружения, может заменять букву «А» в англоязычной аббревиатуре, и тоже может иметь некоторого рода API. Например, при внедрении в код разработчиком сторонней библиотеки, она становится частью всего приложения. Будучи самостоятельным фрагментом ПО, библиотека будет иметь некий API, который позволит ей взаимодействовать с остальным кодом приложения.

В объектно-ориентированном проектировании код представлен в виде совокупности объектов. В приложении таких объектов, взаимодействующих между собой, могут быть сотни. У каждого из них есть свой API — набор публичных свойств и методов для взаимодействия с другими объектами в приложении. Объекты могут также иметь частную, внутреннюю логику, которая скрыта от окружения и не является API.

Добавьте Google Аналитику на AMP-страницы

AMP (Accelerated Mobile Pages) – платформа, с помощью которой можно создавать веб-страницы для статического контента с ускоренной загрузкой. Действия пользователей на AMP-страницах отслеживаются при помощи элемента , у которого есть встроенная поддержка Google Аналитики.

Как настроить отслеживание просмотров страниц

Чтобы добавить стандартный тег Google Аналитики на свою AMP-страницу, скопируйте фрагмент кода ниже и замените на идентификатор нужного ресурса. О том, как найти свой идентификатор Google Аналитики, читайте в этой статье.

Принцип работы

Элемент – это дополнительный компонент AMP, его можно использовать только как custom-element в коде тега.

AMP не поддерживает JavaScript, за исключением собственных одобренных библиотек. Поэтому конфигурация выполняется с помощью JSON. Свойство gtag_id с действительным добавляется в блок vars , а затем идет ресурс config со значением : <> .

Отслеживание событий

Чтобы отслеживать события на страницах AMP, задайте нужные значения в разделе triggers . В конфигурации триггера используются следующие свойства:

  • selector – CSS-селектор, позволяющий задать целевой элемент;
  • on – тип события;
  • vars – раздел для определения типа события event_name , куда можно также добавить дополнительные параметры.

В примере ниже показано, как настроить простое событие Google Аналитики. Создайте триггер с названием «button«, который будет активироваться при нажатии элемента с идентификатором «the-button«. Этот триггер будет отправлять в Google Аналитику значение event_name , то есть «login«, и значение method , то есть «Google«.

События Google Аналитики используются только в этом сервисе и часто применяются при создании отчетов о кампаниях. Значения для них можно задать в разделе «vars» с помощью параметров event_category , event_label и value .

Дополнительную информацию о настройке триггеров вы можете найти в документации по amp-analytics .

Изменение параметров

Чтобы переопределить параметры Google Аналитики по умолчанию или дополнить код новыми параметрами, добавьте нужные значения в раздел parameter блока config . Следующий пример кода переопределяет значения по умолчанию для page_title и page_location .

Связывание доменов

Вы можете связать несколько сайтов в разных доменах и отслеживать их как один домен. Задать домены для связывания можно с помощью команды «linker»: < "domains": [. ] >:

Возможность установления связи с вашим каноническим доменом из кеша AMP включена по умолчанию, если на AMP-страницах настроена поддержка Google Аналитики. Чтобы отключить ее, добавьте «linker»: «false» в параметры конфигурации:

Скорость загрузки сайта

Google Аналитика автоматически собирает данные о скорости загрузки, анализируя лишь небольшую часть трафика вашего сайта. Измените частоту выборки, если вы хотите собирать больше данных (или меньше). Чтобы задать частоте выборки значение 100%, добавьте в свою конфигурацию следующий код:

Чтобы остановить сбор данных о скорости загрузки, используйте следующий код:

Трафик на страницах AMP и обычных веб-страницах

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

Используя отдельный ресурс для AMP, вы сможете получать более точные данные о трафике на этих страницах. Если вы работаете с одним ресурсом, обозначьте тип страниц параметром ds или иным специальным параметром.

По умолчанию Google Аналитика будет передавать с параметром источника данных значение «AMP«, которое вы можете использовать для сегментации, фильтрации или иных аналитических операций, требующих сравнения данных по AMP и обычным страницам в рамках одного представления.

Отладка конфигурации

Узнать, соответствует ли веб-страница спецификации AMP HTML, поможет инструмент AMP Validator. Чтобы включить его, добавьте в URL страницы компонент #development=1 .

Провести отладку конфигурации и устранить неполадки поможет расширение amp-analytics , которое выводит предупреждения и сообщения об ошибках. Чтобы включить расширение и просмотреть информацию на панели браузера, добавьте в URL страницы компонент #log=1 .

Полный пример

Это пример целой AMP-страницы с одной кнопкой. Конфигурация будет отправлять в Google Аналитику стандартные данные о просмотре страницы и событиях «button-click«.

Статьи по теме

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Полное руководство по использованию Google AMP

В октябре 2015 года компания объявила о новом формате страниц для мобильных устройств Google Accelerated Mobile Pages (Google AMP), который призван ускорить скорость загрузки страниц на мобильных устройствах.

По данным Google, загрузка страниц сайта с использованием Google AMP ускоряется на 15-85%.

Google AMP представляет собой набор 3-х технологий:

  • AMP HTML – фактически это обычный HTML, в котором ряд используемых тэгов заменен на специальные разновидности, поддерживаемые этим форматом.
  • AMP JS – эта библиотека ускоряет и управляет загрузкой ресурсов, дает возможность пользоваться упомянутыми выше специальными тэгами.
  • Google AMP Cache – это основанная на прокси CDN, которая распространяет все валидные AMP-страницы.

У формата есть несколько интересных ограничений:

  • Разрешены только асинхронные скрипты
  • Нельзя описывать стили с помощью «style» по месту применения, все они должны быть описаны в HTML файле в тэге «style amp-custom»
  • Стили ограничены размером в 50 КБ
  • Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
  • Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
  • Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face

Как начать внедрение AMP на своем сайте

Теперь вам всегда придется поддерживать две версии страниц: изначальную версию в том виде, как вы привыкли видеть ее на сайте и AMP-версию.

Поскольку АМР не разрешает многие элементы, вам скорее всего придется обойтись пока без таких вещей, как комментарии на странице и различные динамические элементы, и без некоторой другой функциональности, к которой вы привыкли на своем обычном сайте.

Отдельным моментом следует рассмотреть, как внедрить форму для сбора лидов на АМР-странице, об этом будет секция ниже.

Придется поработать над визуальными элементами. Поскольку в АМР высота и ширина картинок должны быть указаны в HTML, создание АМР версий существующих страниц может быть трудоемким процессом, если эти параметры уже не указаны в HTML.

Также надо иметь в виду, что «amp-img» позволяет показывать разные изображения устройствам с разными разрешениями экрана. Например, возможен такой вариант:

Если у вас используются анимированные gif-файлы, придется использовать специальный компонент «amp-anim».

Для видео используется специальный тэг «amp-video», а для того, чтобы вставить видео с YouTube (как это чаще всего делается на сайтах), существует отдельный компонент «amp-youtube».

Поддерживаются также такие элементы, как «карусели» с изображениями и лайтбоксы, внедрение элементов из Twitter, Facebook, Instagram, Pinterest и Vine через внешние компоненты.

Также потребуется внести изменения и в исходную страницу в «обычном» HTML. Чтобы у Google и других систем, которые будут поддерживать АРМ, была возможность переключиться на АМР-версию, в исходной статье нужно прописать специальный «link rel» тег с указанием на АМР-страницу. И в обратную сторону, все АМР-страницы должны иметь тег канонической ссылки на исходную версию страницы в обычном HTML.

Некоторые платформы, которые поддерживают АМР, требуют, чтобы на странице была корректно настроена разметка Schema.org, это также требуется для того, чтобы ваш контент мог показываться в «карусели» новостей на поиске Google.

Как внедрить форму сбора лидов

В стандарте АМР много ограничений, поэтому нельзя создать форму сбора лидов «в лоб», но существует хак, как это сделать.

Iframe поддерживается в amp-html, и iframe может включать в себе произвольный Javascript. Поэтому, чтобы получить форму на своей АМР-странице, вам надо включить компонент «amp-iframe» в секции «head» страницы:

Затем нужно вставить «amp-iframe» внутри «body» страницы. Нужно, чтобы этот элемент был не менее 600 пикселей или на 75% высоты страницы от верхнего края страницы. URL, используемый в «amp-iframe» использовать https и находиться на том же домене или поддомене, что и страница.

Работает ли статистика на АМР-страницах

Да, вы можете отслеживать статистику по вашим АМР-страницам, причем в стандарте применена философия «измерь один раз и сообщи всем», чтобы избежать ситуации, когда множественные коды отслеживания и аналитики замедляют загрузку страницы.

Существует два способа, которые позволяют отслеживать статистику посещений АМР-страниц:

  • Элемент «amp-pixel»: это простой тег, который может быть использован, чтобы отслеживать просмотры страниц с использованием запроса GET. Много переменных можно передать через него, включая такие как «document_referrer» и «title».
  • Расширенный компонент «amp-analytics»: более продвинутый способ, который позволяет внедрить Google Analytics (или другие подобные системы) на АМР-страницу. Прочитать подробную инструкцию о том, как внедрить Google Analytics для АМР-страниц можно здесь (https://developers.google.com/analytics/devguides/collection/amp-analytics/)

Google AMP для SEO

Google внедрил в прошлом году свой алгоритм ранжирования страниц с учетом их отображения на мобильных устройствах. Это был четкий сигнал, что дружественность сайтов к пользователям с мобильных устройств является существенным фактором ранжирования.

Поэтому АМР-страницы, которые разработаны специально для мобильных устройств, должны получить серьезное преимущество в ранжировании. Уже сейчас Google обращает внимание мобильных пользователей на доступность быстрых АМР-страниц при запросе с мобильных устройств, отмечая их значком с зеленой молнией.

Никто не хочет получить понижение ранга из-за дублированного контента, и Google требует, чтобы в заголовке страницы на обычном HTML было сделано указание на аналог этой страницы в формате АМР:

А в заголовке АМР-версии страницы должно быть указание на исходную страницу в обычном HTML:

При этом возможны ситуации, когда на сайте есть только АМР-страница, то есть не существует аналога страницы в обычном HTML – в этом случае в теге «canonical» нужно указывать саму АМР-страницу.

Илон Маск рекомендует:  Что такое код xslt_error

Как внедрить Google AMP на сайтах, где используется CMS

Внедрение зависит от используемой CMS, но как правило для этого используется какой-то плагин, который обеспечивает подобную функциональность.

Вот как эксперты сайта SEO-Hacker рекомендуют внедрять АМР на WordPress-сайте:

1. Установить и активировать плагин AMP WordPress plugin (https://wordpress.org/plugins/amp/)

2. Отредактировать файл .htaccess, чтобы перенаправлять посетителей с мобильными устройствами на АМР-страницы. Для этого надо вставить в .htaccess следующее:

RewriteCond % (android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([/]*)$ https://example.com/$1/amp [L,R=302]

Для Drupal Google AMP внедряется похожим образом – для этого используются AMP-модуль (https://www.drupal.org/project/amp), АМР-тема (https://www.drupal.org/project/amptheme) и АМР-библиотека на PHP (https://github.com/Lullabot/amp-library).

При установке АМР-модуля, формат АМР становится доступен для всех типов страниц и «отдает» АМР-страницы, если добавить к URL страницы «?amp» на конце.

АМР-тема разработана, чтобы обеспечивать специфическую разметку, которую требует стандарт, она автоматически становится активной, если обращение идет к странице с «?amp» на конце. Как любая другая тема Drupal, эта тема может быть расширена с помощью подтемы, что позволяет владельцам сайтов кастомизировать выдачу АМР-страниц, как они посчитают нужным.

АМР-библиотека используется для случаев, когда пользователи вводят HTML в поля, позволяющие это делать, и выдает предупреждение для тех случаев, когда введенный текст не соответствует АМР-стандарту. Библиотека также автоматически корректирует HTML-текст там, где это возможно, в том числе меняет тэги img и iframe на их АМР-эквиваленты.

В Joomla возможность выдавать АМР-страницы пользователям обеспечивается с помощью плагина wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).

Указанные решения являются, вероятно, только самыми первыми, доступными прямо сейчас, ведь формат АМР является относительно новым. В будущем мы увидим появление множества аналогичных решений и плагинов для различных CMS.

Какие браузеры поддерживают Google AMP

По данным AMP Project, поддерживаются 2 последних версии Chrome, Firefox, Edge, Safari и Opera. Также поддерживают, но не совсем корректно отображают АМР-страницы системный браузер Android 4.0 и Chrome версии 28 и старше на мобильных устройствах.

В заключение давайте подведем итог, в чем плюсы и минусы стандарта Google AMP?

  • AMP – это открытый стандарт.
  • Увеличение скорости загрузки страниц может дать преимущество в SEO, поскольку скорость загрузки является одним из факторов ранжирования.
  • Поскольку этот стандарт разработан Google, можно ожидать, что само наличие AMP-страниц для выдачи мобильным пользователям на сайте может в будущем стать фактором ранжирования, по крайней мере для Google.
  • АМР-страницы могут попасть в «карусель» в мобильной выдаче в топе Google.
  • Большие возможности для кастомизации, и в том числе возможность не использовать AMP Cache от Google и отдавать контент со своей CDN или своего сервера.
  • Наличие плагинов для популярных CMS, которые облегчают внедрение AMP на сайте.
  • AMP может оказаться сложен во внедрении, если вы не веб-разработчик или хотя бы не понимаете HTML.
  • АМР добавляет сложности. Мы вынуждены заниматься внедрением еще одной технологии, вместо того, чтобы оптимизировать имеющееся.
  • Возможности кастомизации при внедрении в CMS достаточно ограничены, возможно это изменится со временем.
  • Поддержка кастомного Javascript возможна только через «amp-iframe», но это не дает возможности получить доступ к данным из этого скрипта.
  • IE11 не поддерживает пока стандарт AMP, а значит пользователи Windows Phone пока не увидят AMP-страницы, а будут видеть вместо них стандартные HTML-версии этих страниц.

Зачем вам нужен AMP Google? И нужен ли?

В начале прошлого года Гугл начал активную работу по улучшению своей поисковой выдачи на мобильных устройствах. Первым «звоночком» был алгоритм mobile-friendly. Суть – если человек зашел в поиск с мобильного телефона, так давайте покажем ему на первых позициях те сайты, которые удобнее на этом самом мобильнике смотреть (естественно, при прочих равных).

Вообще, подход вполне логичный – если из пользователей вашего сайта многие открывают его со смартфонов или планшетов, то сделать сайт адаптивным (читай «удобным») для мобильных устройств – хорошее проявление заботы о своих пользователях, а соответственно, и о поведенческих факторах своего сайта. Гугл лишь подтолкнул процесс «мобилизации» сайтов.

В продолжение mobile-friendly в октябре 2015 Гугл анонсировал новый проект, призванный сделать жизнь «мобильных» пользователей еще слаще )) Речь идет о технологии AMP, Accelerated Mobile Pages – Ускоренные страницы для мобильных устройств. Мы не будем вдаваться в технические тонкости, а попробуем ответить понятным языком на основные вопросы: как это выглядит, кому и зачем это нужно, как внедрить на свой сайт.

Замечание: все скриншоты в статье сделаны с планшета (с мобильного устройства).

Как выглядит AMP Google

Вообще, страница сайта, использующая технологию AMP, внешне мало чем отличается от обычной страницы. Вот пример AMP-страницы:
http://m.lenta.ru/news/2020/01/16/falcon/amp/

Ничего особого в ней нет. Более интересно, как Гугл решил выводить AMP-страницы в своей мобильной поисковой выдаче. Смотрите, если мы ищем какие-то новости в Гугле, например, «новости дня», то под строкой поиска видим блок «Главные новости» с карточками:

Щелкаем по какой-либо карточке, и страница выбранного сайта открывается в новой вкладке. Зачастую, особенно если скорость интернет соединения не слишком высока, в течение 4-7 секунд мы наблюдаем такую картину:

Что придумали в Google – с внедрением AMP в поиск блок «Главные новости» изменится (обратите внимание на значок AMP):

С первого взгляда кажется, что мы видим те же самые карточки, только с чуть большими картинками. Кликаем по одной из них:

Обратите внимание на 4 момента (отмечены на скриншоте):

1. Физически мы не переходим на другой сайт, а остаемся в Гугле, который подгружает нам содержимое выбранной страницы.

2. Оказывается, это слайдер. Мы можем листать влево и вправо, тем самым быстро переключаясь между контентом остальных AMP-страниц блока «Главные новости».

3. По этой кнопке можем вернуться на страницу поиска.

4. И это самое важное – контент AMP-страницы отображается здесь буквально за доли секунды.

Выглядит заманчиво. Теперь ложка дегтя:

Пока такой слайдер с AMP-страницами выводится только в англоязычном google.com, в русскоязычной версии его нет. Ждемс..

Те, кто хочет уже сейчас «потрогать» руками русскоязычную выдачу с AMP-страницами, держите инструкцию:

  • С планшета или смартфона заходим на адрес http://g.co/ampdemo. Откроется поиск Гугла, но с уже включенной поддержкой AMP.
  • Вбиваем в поисковой строке запрос «новости дня» (или просто «новости») – профит! В блоке «Главные новости» видим карточки с пометкой «AMP», щелкаем, наслаждаемся ))

Еще один нюанс: Если Гугл не нашел достаточное число AMP-страниц, релевантных введенному запросу, то такие карточки показаны не будут. Например, по запросу «новости спорта» ничего подобного пока нет.

Кому нужны AMP-страницы

Полезность AMP-страниц можно рассмотреть с двух точек зрения:

1. Если смотреть с точки зрения пользователя, то такое «быстрое» отображение контента прямо в поисковой выдаче (без дополнительных ожиданий и переходов на сайты) очень удобно для людей, привыкших получать информацию преимущественно с мобильного устройства. А число таких людей с каждым днем только растет.

2. Если же смотреть с точки зрения бизнеса, то проект AMP будет полезен только тем, у кого в основе бизнеса лежит контент – это новостные сайты, интернет-журналы, блоги, обучающие порталы и т.п.

Так что если ваш бизнес – это продажа автомобильных шин, то переводить карточки товаров на AMP абсолютно бессмысленно. Но если при этом вы ведете свой блог с уникальными статьями на различные темы авто индустрии, то сделать для него AMP-версию будет далеко не лишним. Как вы видели на скриншотах выше, карточки с релевантными AMP-страницами показываются в самом начале поисковой выдачи – а не это ли мечта любого владельца сайта.

Рассчитайте стоимость добавления и настройки облегченных мобильных страниц для Яндекса и/или Google. Запросить расчет ».

Как устроен AMP

Теперь, когда мы показали, как это выглядит, можно вкратце рассказать о том, как это устроено.

По сути, AMP – это лишь еще один набор скриптов и правил для отображения веб-страниц. Например, в разработке сайтов давно используется готовый набор скриптов (так называемая «библиотека») с названием jQuery – благодаря ей, верстальщику не надо каждый раз заново программировать слайдеры или, скажем, модальные окошки. Верстальщик просто берет готовый код из библиотеки и настраивает его параметры под конкретный сайт.

Но проект AMP имеет несколько отличий от существующих библиотек:

1. В нем оставлен только тот код, который нужен для быстрого отображения контента (подгрузка картинок по мере прокрутки страницы, слайдеры, загрузка сообщений из соц. сетей, модальные окна). Как говорится, ничего лишнего.

2. Код написан так, чтобы быть максимально быстрым (используются только асинхронные скрипты, если вам это о чем-то скажет).

3. Код написан с учетом особенностей различных мобильных устройств и браузеров так, что AMP-страница должна одинаково хорошо отображаться вне зависимости от устройства, на котором она открыта.

Три этих отличия позволяют AMP-страницам отображаться в мобильных браузерах быстрее. Но при этом они накладывают существенные ограничения на функционал страницы – например, вы не сможете вставить на AMP-страницу никаких своих скриптов, можно использовать только готовые компоненты, да и список доступных html-тегов несколько ограничен (все правила и требования есть тут).

Впрочем, для отображения контента этого вполне достаточно. Вот еще один пример AMP-страницы:
https://www.washingtonpost.com/amphtml/lifestyle/style/six-ways-the-martian-subverts-expectations/2015/10/05/6bba4d42-6873-11e5-8325-a42b5a459b1e_story.html
На ней есть все, что нужно на странице новостного издания, открытой с мобильника – картинки, текст, видео, кнопки соц.сетей, реклама (нужна, конечно, не пользователям, но владельцам сайта), выпадающее меню.

И еще одна важная особенность проекта AMP:
При индексации AMP-страниц Гугл запоминает (кэширует) их содержимое на своих серверах. Поэтому, когда в поисковой выдаче Гугла вы щелкаете по карточке AMP-страницы:

то Гугл «подтягивает» ее не с сервера Lenta.ru (что может занять немало времени, если вы, например, находитесь в этот момент в Австралии), а отображает сохраненный контент со своего ближайшего к вам сервера.
Так Tefal Гугл думает о нас и старается выдать пользователю контент максимально быстро.

AMP – третий в списке

Обратите внимание, что AMP – это не замена обычным html-страницам или мобильным версиям сайта, это лишь дополнение. Давайте рассмотрим на примере.

Возьмем новостной портал lenta.ru и вот такую статью:
https://lenta.ru/news/2020/01/16/falcon/

Это стандартная страница сайта с контентом, выпадающим меню, дополнительными статьями по теме, поиском, кнопкой «Наверх», блоками рекламы, кнопками соц. сетей, различными системами статистики и пр. и пр.

И если на планшете это обилие информации еще воспринимается нормально, то на экране телефона вряд ли все это понадобится (и уж явно не поместится).

Поэтому для мобильных устройств у lenta.ru давно есть мобильная версия сайта, где меньше дополнительного контента (и чуть меньше рекламы):
http://m.lenta.ru/news/2020/01/16/falcon/

Теперь же у lenta.ru появилась 3-я версия этой же страницы в формате AMP:
http://m.lenta.ru/news/2020/01/16/falcon/amp/

Здесь еще меньше каких-либо дополнительных скриптов (рекламы вообще нет, хотя ее и можно вставить в AMP), только контент.

Как же эти 3 версии одной страницы сосуществуют вместе?

Исходной страницей является http://lenta.ru/news/2020/01/16/falcon/. Именно эта страница участвует в основной поисковой выдаче. На основной странице размещаем максимум функционала, информации и прочих «плюшек» для пользователей (не забываем рекламу, монетизироваться как-то нужно).

В «подвале» этой страницы есть ссылка на мобильную версию, и кроме того, при заходе с мобильника на основную страницу происходит автоматическое перенаправление на мобильную версию. Поэтому в поисковой выдаче Гугла на мобильных устройствах будет показана именно ссылка на мобильную версию. В мобильной версии уменьшаем число дополнительного контента и рекламы, что вызвано меньшим размером экрана и более медленным интернетом.

На AMP-версию указывает тег
в коде основной страницы:

При индексации основной страницы Гугл «увидит» эту ссылку и проиндексирует указанную AMP-страницу, чтобы затем показывать именно ее в своем новостном слайдере AMP-страниц на первой странице мобильной поисковой выдачи (в случае релевантности поисковому запросу).

Таким образом, lenta.ru выдает 3 разных версии одной и той же страницы под разные типы целевой аудитории (версии различны по функционалу, неизменным остается только основной контент).

Важно: На всех трех страницах указан тег
с адресом основной страницы, чтобы избежать дублирования контента:

Внедряем AMP на сайт

Создать AMP-версию своего сайта не так уж и сложно (при наличии грамотного специалиста). Нужно создать отдельный шаблон для сайта с использованием необходимых тегов из спецификации AMP. Затем либо вручную делать AMP-версию каждой новой страницы по готовому шаблону. Либо настроить автоматическую генерацию AMP-страницы средствами своей CMS.

Тем, чьи сайты сделаны на WordPress, повезло, в последнюю версию этой системы поддержка AMP-шаблонов уже встроена.

Также следует понимать, что нет необходимости переводить все страницы сайта в AMP-формат. Это касается только тех страниц, основной ценностью которых является контент (в основном, это статьи).

Если вы хотите добавить AMP-версию для своего сайта, но затрудняетесь это сделать – пишите, мы постараемся вам помочь. А может, ваш сайт вообще не адаптирован под мобильные? Тогда тем более пишите, посоветуем, что можно сделать.

AMP – новая разработка, направленная на ускорение загрузки контента на мобильных устройствах. Вещь достаточно узкоспециализированная, для тех, кто зарабатывает контентом.

Активно поддерживается пока только Гуглом. В русскоязычную версию выдачи Гугла AMP-страницы еще не входят (хотя это лишь вопрос времени). А вот отношение Яндекса к AMP-страницам не известно.

Вывод: пока не понятно, «выстрелит» или нет. Но поддержка со стороны не самого последнего поисковика позволяет думать, что все же «выстрелит». Время покажет. Но если AMP подходит вашему сайту, есть время и ресурсы, почему бы и не подготовить сани летом сайт заранее ))

AMP-страницы: как собрать достоверные данные

Что такое AMP-страницы и как настроить их базовое отслеживание с помощью Google Analytics мы уже рассказывали . И выяснили — существует много трудностей, которые искажают данные аналитики об эффективности их использования. Поэтому я расскажу, как отслеживать достоверную статистику AMP-страниц с помощью AMP Client ID API.

Что нужно знать о кешировании и просмотре AMP-страниц

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

У каждой проиндексированной AMP-страницы три вида URL-адреса:

  • оригинальный URL-адрес страницы в формате AMP
    https://site.com/page/amp;
  • URL-адрес, закешированный Google Cache
    https://site.com.cdn.ampproject.org/v/s/site.com/page/amp;
  • URL-адрес, который отображается с помощью AMP Viewer
    https://www.google.com.ua/amp/s/site.com/page/amp.

Если с первым типом URL-адреса все просто — это оригинальная страница в формате AMP, то с остальными двумя нужно разобраться. Согласитесь, наличие трех типов URL для одной страницы с одним и тем же контентом сбивает с толку. Однако, на это есть свои причины, которые улучшают скорость загрузки AMP-страниц:

  • необходимость кеширования;
  • необходимость предварительной визуализации страниц из кеша Google.

Зачем нам AMP-страница, кешированная в Google Cache

Как только Google при сканировании сайта обнаруживает AMP версию страницы (https://site.com/page/amp), он кеширует ее с помощью Google AMP Cache и преобразовывает URL-адрес: https://site.com.cdn.ampproject.org/v/s/site.com/page/amp.

Вероятность, что пользователи столкнутся с таким URL очень мала. Но в последнее время подобные случаи не редкость. Соцсети LinkedIn, Pinterest, Flipboard используют AMP в приложениях. Ссылка на закешированную страницу появится только в том случае, если пользователь внутри приложения зашерит публикацию.

Также не исключено, что пользователи попадут на URL вида https://site.com.cdn.ampproject.org/v/s/site.com/page/amp по прямой ссылке.

Google AMP Cache предназначен для того, чтобы:

  • определить, что страница AMP валидна и соответствует AMP HTML Specification;
  • обеспечить безопасную и эффективную предварительную загрузку AMP-страниц;
  • позаботиться о дополнительной оптимизации контента для удобства пользователей.

Кеш Google AMP доступен для всех пользователей и позволяет контенту быстрее появляться на экранах мобильных устройств. Каждый раз, когда пользователь получает доступ к содержимому AMP из кеша, оно обновляется и уже обновленная версия предоставляется следующему пользователю.

Просмотр AMP-страниц c помощью Google AMP Viewer

Мы подошли к последнему звену в цепочке URL-адресов AMP-страницы.

Вебмастер создает AMP-страницу (https://site.com/page/amp) — она сохраняется в кеш Google AMP Cache (https://site.com.cdn.ampproject.org/v/s/site.com/page/amp). Отсюда загружается при просмотре в Google AMP Viewer, когда пользователь вводит запрос в поиске (https://www.google.com.ua/amp/s/site.comy/page/amp).

Google AMP Viewer — средство для просмотра AMP-страниц. Viewer позволяет пользователю просматривать их максимально быстро и удобно, не покидая при этом «среду» Google. Если перейти на конкретную AMP-страницу, в верхней части окна Google AMP Viewer можно увидеть домен сайта, которому принадлежит эта страница. Однако в поисковой строке — домен google:

Как AMP Viewer облегчает жизнь пользователям? AMP Viewer подгружает информацию из кеша Google в специальный iframe и пользователь при переходе по ссылке попадает на уже загруженную в фоновом режиме страницу. Это вместо того, чтобы переходить на веб-страницу из результатов поиска, которая медленно грузится и может не содержать искомую информацию. Согласитесь, сравнительно дорогое удовольствие при ограниченном мобильном трафике.

Проблемы отслеживания AMP страниц в Google Analytics

Корректно отследить показатели AMP в Google Analytics сложно. Что мешает: непростая реализация URL-адресов AMP-страниц, наличие разных хостов и большое количество возможных сценариев, по которым пользователь может добраться до данных страниц.

Проясним иллюстрацией. Вот некоторые типичные сценарии, согласно которым могут действовать пользователи, и то, как они засчитываются в Google Analytics:

Видите, одна и та же сессия сохраняется только при двух сценариях: при переходе с AMP-версии страницы на обычную страницу веб-сайта и наоборот. Во всех остальных случаях сессия засчитывается заново, как и идентификатор пользователя — каждый раз будет новым. Из этого вытекают следующие трудности:

  • уникальный пользователь, который заходит с одного и того же устройства и браузера может быть засчитан в Google Analytics, как несколько уникальных посетителей. В зависимости от того, по какому сценарию он попадет на AMP-страницы;
  • сессия будет прервана и засчитана заново, если пользователь переходит из AMP Viewer на основной сайт: (https://www.google.com.ua/amp/s/site.com/page/amp -> https://site.com/page/);
  • когда одна и та же сессия засчитывается дважды, показатель отказов увеличивается как для AMP-страниц, так и для основного сайта. В первом случае, у AMP-страницы будет всего один просмотр, что засчитается как отказ. Аналогично и во втором случае, когда пользователь просмотрит только одну страницу на основном сайте;
  • сложно отследить канал, с которого пришел пользователь. Например, если человек попал на AMP-страницу из органического поиска, а оттуда перешел на основной сайт, в статистике он засчитается в реферальный трафик. Хотя, по факту, пользователь попал на сайт из органики.
Илон Маск рекомендует:  Что такое код getmetafilebits

Google AMP Client ID API

В сентябре Google анонсировал AMP Client ID API, призванный решить часть проблем с отслеживанием AMP-страниц.

Благодаря AMP Client ID API можно уникально идентифицировать пользователей, взаимодействующих с обычными и AMP-страницами. AMP Client ID API по идентификатору клиента AMP определяет, что к нему относятся несколько событий на сайте. Cервис охватывает только тот случай, когда пользователь просматривает контент с помощью AMP Viewer из поиска Google, а затем переходит на сам веб-сайт. Это самый распространенный сценарий, и пока вы избегаете использование ссылок на страницы из кеша Google, его будет вполне достаточно. Кроме того, метод очень прост в реализации.

Просмотрите сценарии, которые покрывает и не покрывает AMP Client ID API:

Как настроить AMP Client ID API

Для настройки необходимо внести изменения в коде AMP-страниц и в основном коде Google Analytics, размещенном на вашем сайте.

Настройка на AMP-страницах

На все AMP-страницы в необходимо добавить следующий фрагмент кода:

Как вносить изменения в код Google Analytics

  1. Если код GA размещен на вашем сайте с помощью Google Tag Manager, необходимо внести такие изменения в Universal Analytics тег:
  • перейти в настройки конфигурации тега Universal Analytics;
  • присвоить параметру useAmpClientId значение true;
  • сохранить и опубликовать изменения.
  1. Если код Google Analytics размещен непосредственно на самом сайте, включите в analytics.js следующую строку:

Настройка исключений из реферального трафика

Также необходимо добавить в исключения реферального трафика домен ampproject.org в ресурсе, где вы отслеживаете AMP-страницы и данные сайта. Это нужно, чтобы сессия не прерывалась, когда пользователь будет переходить из поиска на ваш сайт.

Проверяем результаты

Как понять, что все настроено правильно? Когда пользователь просматривает AMP-контент из поиска Google и переходит на ваш основной сайт, регистрируется одна и та же сессия.

Чтобы убедиться в этом, проверяем совпадает ли Client ID для одного пользователя при переходе с AMP-страницы из поиска Google на основной сайт.

Не забываем, что сценарий должен начинаться с попадания на AMP-страницу из Google AMP Viewer. Для просмотра версии страницы в поиске Google будем использовать инструмент проверки структурированных данных. Рекомендация: применяйте микроразметку для своих AMP-страниц и не допускайте в ней ошибок, иначе функция предварительного просмотра будет недоступна.

Создаем новый тест, вводим URL адрес AMP-страницы и нажимаем на «Предварительный просмотр»:

В результате видим, как страница выглядит в поиске:

Также можем использовать инструмент для проверки AMP-страниц от Google. Для этого вводим URL AMP-страницы в поле ввода инструмента и нажимаем на кнопку «Просмотреть в поиске»:

Переходим на страницу из поиска Google. URL страницы будет на домене google.com.

Открываем отладчик браузера и находим Client ID, который был вам присвоен. В нашем примере он равен cid:amp-2PqynluuopXd19ATE5A-VbArl_kRk0x3jRJkGHce9GK8Vy2W4TV2Ovm_WuE0kaEa

Далее проверяем, сохранился ли обнаруженный нами Client ID при переходе на основной сайт. Для этого заходим с AMP-страницы на основной сайт и открываем отладчик. Здесь ищем присвоенный Client ID. Если оба совпадают, как в нашем случае, значит все настроили правильно.

А если вы перейдете на закешированную версию AMP-страницы (ссылка на нее есть в коде страницы из AMP Viewer), сможете убедиться, что CID отличается.

В любом случае, вероятность попадания пользователя на страницу из кеша Google мала, поэтому вам достаточно охватить самый популярный сценарий — переход пользователя из поиска Google на основной сайт.

Кстати, совсем недавно Google анонсировал, что во второй половине 2020 года планирует внести изменения в отображение страниц AMP в поиске Google (AMP Viewer). Теперь вместо URL-адреса на домене google.com/amp будет отображаться URL-адрес на оригинальном домене веб-сайта. Пока новую технологию не внедрили, рекомендую позаботиться о корректном отслеживании ваших AMP-страниц с помощью AMP Client ID API.

Выводы

Google AMP Client ID API — инструмент, который поможет обойти трудности с отслеживанием эффективности использования AMP-страниц на вашем сайте. Он помогает идентифицировать пользователей и анализировать их поведение при одновременном использовании обычных и AMP-страниц. Для того, чтобы настроить AMP Client ID API, необходимо:

Быстрое руководство по настройке AMP на WordPress

Автор: Стэфани Левонн (Stephanie LeVonne) – SEO-аналитик в агентстве интернет-маркетинга Elite SEM.

В современном мобильно-ориентированном мире быстрая загрузка страниц – это необходимое условие для удовлетворённости пользователей. Кроме того, скорость сайта влияет на конверсию и показатель отказов.

Сегодня пользователи ожидают, что мобильные сайты будут загружаться так же быстро, как и их десктопные эквиваленты. По подсчётам Amazon, лишь 1 секунда задержки в загрузке страниц могла бы привести к снижению годовой выручки компании на $1,6 млрд.

Ускоренные мобильные страницы (Accelerated Mobile Pages, AMP) за короткое время стали стандартом того, как должны создаваться быстрые страницы. AMP загружаются на 15-80% быстрее, чем обычные мобильные страницы без потерь в функциональности. Сложность внедрения этой технологии во многом зависит от используемой CMS. При этом WordPress может стать отличной тестовой средой для того, чтобы посмотреть, как могут выглядеть ваши ускоренные страницы.

Чтобы настроить AMP на WordPress, следуйте следующим 7 шагам.

Примечание. Данное руководство предполагает, что при настройке WordPress вы активировали плагин Yoast SEO. Если это не так, вы можете пропустить те части руководства, которые с ним связаны. AMP-функциональность вы сможете внедрить и без него. Однако мы настоятельно рекомендуем использовать этот плагин, если вы серьёзно настроены в отношении SEO-оптимизации вашего сайта на WordPress.

Шаг 1. Установите и активируйте AMP-плагин(ы)

Чтобы начать внедрение AMP, необходим плагин AMP от Automattic. Это базовый плагин, который нужен для того, чтобы AMP-страницы работали.

Он будет автоматически генерировать совместимые с AMP версии ваших постов. Чтобы их просмотреть, нужно добавить /amp/ в конец URL. Например:

Обратите внимание, что в результате использования этого плагина AMP-совместимыми будут только посты, а не страницы. Чтобы сделать AMP-совместимыми страницы, нужно будет установить дополнительный плагин (подробности ниже).

После установки плагина AMP вы сможете дополнить его другими плагинами для расширения функциональности. Есть несколько бесплатных вариантов для выбора. Мы советуем использовать следующие:

  • AMP for WP — Accelerated Mobile Pages. Среди возможностей этого плагина значится интеграция с Google AdSense, поддержка rel=canonical, удобный конструктор AMP-страниц и возможность создавать AMP-контент, который отличается от содержимого стандартных мобильных страниц.
  • Glue for Yoast SEO & AMP. С помощью этого плагина можно делать страницы, посты и медиафайлы совместимыми с AMP. Glue for Yoast также гарантирует, что установленный по умолчанию AMP-плагин использует корректные метаданные. Так же, как и плагин AMP для WP, он позволяет настраивать оформление AMP-страниц. Кроме того, он позволяет выбрать иконку и поменять то, как логотип сайта будет выглядеть на AMP-странице.

Примечание. Для работы этого плагина необходимо установить и активировать плагин Yoast SEO.

Шаг 2: Настройте Google Analytics

Чтобы настроить Google Analytics, сначала нужно найти идентификатор отслеживания сайта. Для этого выполните следующие действия:

  • Войдите в аккаунт Google Analytics.
  • Нажмите Администратор.
  • В раскрывающемся меню в столбце АККАУНТ выберите нужный аккаунт.
  • В меню РЕСУРС выберите нужный ресурс.
  • В разделе РЕСУРС выберите Отслеживание >Код отслеживания. Идентификатор будет расположен в верхней части страницы. Он должен начинаться с UA.

Скопируйте свой идентификатор отслеживания, затем войдите в WordPress. На панели навигации слева перейдите в раздел AMP > Analytics и вставьте ID в поле «Google Analytics». Затем нажмите «Save Changes».

Шаг 3. Настройте параметры плагина Glue for Yoast SEO

На этом шаге мы рассмотрим базовые варианты конфигурации плагина Glue for Yoast SEO, который упоминался на первом шаге. Вы можете пропустить этот этап, если вы решили не устанавливать данный плагин.

Рекомендуемые нами конфигурации позволят вам настроить внешний вид AMP-страниц, а также включить поддержку AMP для нескольких типов контента.

Чтобы начать, перейдите в Yoast SEO > AMP > Post Types. Здесь вы сможете указать, какие типы постов должны быть совместимыми с AMP.

На второй вкладке, «Design» вы сможете настроить оформление AMP-страниц: применить стили CSS, настроить цвет шрифта и ссылок, загрузить пользовательскую иконку AMP и установить изображение по умолчанию для тех страниц, у которых нет связанных с ними картинок.

Шаг 4. Проверьте настройки AMP

Теперь, когда мы создали URL-адреса в формате AMP, важно убедиться, что они работают корректно. Если они настроены неправильно, Google не будет показывать их в результатах поиска.

Есть несколько решений для проверки URL-адресов в формате AMP. Выберите пару основных страниц и протестируйте их AMP-версии с помощью одного из предложенных ниже методов. Как упоминалось на первом шаге, чтобы просмотреть AMP-страницы, нужно добавить /amp/ в конец стандартного URL.

  • Вариант 1. Инструмент «Проверка страниц AMP»
    • Перейдите по ссылке: https://search.google.com/test/amp.
    • Введите нужный URL, нажмите «Проверить», оцените результат – соответствует или не соответствует страница критериям AMP.
  • Вариант 2. Консоль разработчика в браузере Chrome
    • Откройте AMP-страницу в браузере. Добавьте в конец URL следующую фразу: #development=1. Пример: http://eliteseoteam.com/healthy-spaghetti-squash-pad-thai/amp/#development=1
    • Откройте консоль разработчика (нажмите F12 или в меню Chrome выберите «Дополнительные инструменты», затем – «Инструменты разработчика») и проверьте страницу на наличие ошибок валидации. Если всё в порядке, валидация должна быть успешной.
  • Вариант 3: AMP Validator
    • Перейдите по ссылке: https://validator.ampproject.org/
    • Введите адрес AMP-страницы в поле «URL», нажмите «Validate».
    • Инструмент найдёт и выделит ошибки в HTML-коде.

Примечание. Вы также можете использовать расширение AMP Validator для Chrome, чтобы получить те же результаты прямо на странице.

Шаг 5. Добавьте самые важные AMP-страницы в Google

  • При использовании инструмента «Проверка страниц AMP» вы можете нажать «Добавить в Google» сразу после получения положительного результата проверки.
  • Другой способ: если вы авторизированы в Search Console, вы можете добавить страницу в Google прямо в результатах поиска:

Хотя этот шаг не является необходимым, Google проиндексирует AMP-страницу только в том случае, если на неё указывают внутренние ссылки, или же она содержится в XML-карте сайта.

Шаг 6: Проверьте отчёт по AMP в Search Console

Google Search Console даёт возможность управлять всеми AMP-страницами в одном месте.

В нём будет представлено количество проиндексированных страниц и ошибки, обнаруженные при их сканировании. Выявив недочёты, вы сможете устранить их с помощью инструментов, описанных на шаге 4.

Шаг 7. Проверьте скорость загрузки страниц

Пройдя все предыдущие шаги, оцените полученные выгоды. Проверьте скорость загрузки ускоренных и стандартных мобильных страниц с помощью соответствующего инструмента (например, WebPageTest) и сравните результаты.

Начните работу с AMP

В скором будущем Google запустит mobile-first индекс и начнёт учитывать скорость загрузки мобильных страниц в ранжировании. Поэтому сейчас внедрение AMP становится критически важным для сайтов. Следуя предложенным выше шагам, вы сможете быстро и легко настроить AMP на своём WordPress-сайте.

За последними новостями Google AMP можно следить на сайте проекта.

Полное руководство по использованию Google AMP

В октябре 2015 года компания объявила о новом формате страниц для мобильных устройств Google Accelerated Mobile Pages (Google AMP), который призван ускорить скорость загрузки страниц на мобильных устройствах.

По данным Google, загрузка страниц сайта с использованием Google AMP ускоряется на 15-85%.

Google AMP представляет собой набор 3-х технологий:

  • AMP HTML – фактически это обычный HTML, в котором ряд используемых тэгов заменен на специальные разновидности, поддерживаемые этим форматом.
  • AMP JS – эта библиотека ускоряет и управляет загрузкой ресурсов, дает возможность пользоваться упомянутыми выше специальными тэгами.
  • Google AMP Cache – это основанная на прокси CDN, которая распространяет все валидные AMP-страницы.

У формата есть несколько интересных ограничений:

  • Разрешены только асинхронные скрипты
  • Нельзя описывать стили с помощью «style» по месту применения, все они должны быть описаны в HTML файле в тэге «style amp-custom»
  • Стили ограничены размером в 50 КБ
  • Параметры «width» и «height» внешних ресурсов, таких как картинки, должен быть указан внутри html
  • Нельзя написать произвольный Javascript-код, можно использовать только поддерживаемую библиотеку AMP JS
  • Шрифты должны быть загружены по ссылке или в CSS-конструкции @font-face

Как начать внедрение AMP на своем сайте

Теперь вам всегда придется поддерживать две версии страниц: изначальную версию в том виде, как вы привыкли видеть ее на сайте и AMP-версию.

Поскольку АМР не разрешает многие элементы, вам скорее всего придется обойтись пока без таких вещей, как комментарии на странице и различные динамические элементы, и без некоторой другой функциональности, к которой вы привыкли на своем обычном сайте.

Отдельным моментом следует рассмотреть, как внедрить форму для сбора лидов на АМР-странице, об этом будет секция ниже.

Придется поработать над визуальными элементами. Поскольку в АМР высота и ширина картинок должны быть указаны в HTML, создание АМР версий существующих страниц может быть трудоемким процессом, если эти параметры уже не указаны в HTML.

Также надо иметь в виду, что «amp-img» позволяет показывать разные изображения устройствам с разными разрешениями экрана. Например, возможен такой вариант:

Если у вас используются анимированные gif-файлы, придется использовать специальный компонент «amp-anim».

Для видео используется специальный тэг «amp-video», а для того, чтобы вставить видео с YouTube (как это чаще всего делается на сайтах), существует отдельный компонент «amp-youtube».

Поддерживаются также такие элементы, как «карусели» с изображениями и лайтбоксы, внедрение элементов из Twitter, Facebook, Instagram, Pinterest и Vine через внешние компоненты.

Также потребуется внести изменения и в исходную страницу в «обычном» HTML. Чтобы у Google и других систем, которые будут поддерживать АРМ, была возможность переключиться на АМР-версию, в исходной статье нужно прописать специальный «link rel» тег с указанием на АМР-страницу. И в обратную сторону, все АМР-страницы должны иметь тег канонической ссылки на исходную версию страницы в обычном HTML.

Некоторые платформы, которые поддерживают АМР, требуют, чтобы на странице была корректно настроена разметка Schema.org, это также требуется для того, чтобы ваш контент мог показываться в «карусели» новостей на поиске Google.

Как внедрить форму сбора лидов

В стандарте АМР много ограничений, поэтому нельзя создать форму сбора лидов «в лоб», но существует хак, как это сделать.

Iframe поддерживается в amp-html, и iframe может включать в себе произвольный Javascript. Поэтому, чтобы получить форму на своей АМР-странице, вам надо включить компонент «amp-iframe» в секции «head» страницы:

Затем нужно вставить «amp-iframe» внутри «body» страницы. Нужно, чтобы этот элемент был не менее 600 пикселей или на 75% высоты страницы от верхнего края страницы. URL, используемый в «amp-iframe» использовать https и находиться на том же домене или поддомене, что и страница.

Работает ли статистика на АМР-страницах

Да, вы можете отслеживать статистику по вашим АМР-страницам, причем в стандарте применена философия «измерь один раз и сообщи всем», чтобы избежать ситуации, когда множественные коды отслеживания и аналитики замедляют загрузку страницы.

Существует два способа, которые позволяют отслеживать статистику посещений АМР-страниц:

  • Элемент «amp-pixel»: это простой тег, который может быть использован, чтобы отслеживать просмотры страниц с использованием запроса GET. Много переменных можно передать через него, включая такие как «document_referrer» и «title».
  • Расширенный компонент «amp-analytics»: более продвинутый способ, который позволяет внедрить Google Analytics (или другие подобные системы) на АМР-страницу. Прочитать подробную инструкцию о том, как внедрить Google Analytics для АМР-страниц можно здесь (https://developers.google.com/analytics/devguides/collection/amp-analytics/)

Google AMP для SEO

Google внедрил в прошлом году свой алгоритм ранжирования страниц с учетом их отображения на мобильных устройствах. Это был четкий сигнал, что дружественность сайтов к пользователям с мобильных устройств является существенным фактором ранжирования.

Поэтому АМР-страницы, которые разработаны специально для мобильных устройств, должны получить серьезное преимущество в ранжировании. Уже сейчас Google обращает внимание мобильных пользователей на доступность быстрых АМР-страниц при запросе с мобильных устройств, отмечая их значком с зеленой молнией.

Никто не хочет получить понижение ранга из-за дублированного контента, и Google требует, чтобы в заголовке страницы на обычном HTML было сделано указание на аналог этой страницы в формате АМР:

А в заголовке АМР-версии страницы должно быть указание на исходную страницу в обычном HTML:

При этом возможны ситуации, когда на сайте есть только АМР-страница, то есть не существует аналога страницы в обычном HTML – в этом случае в теге «canonical» нужно указывать саму АМР-страницу.

Как внедрить Google AMP на сайтах, где используется CMS

Внедрение зависит от используемой CMS, но как правило для этого используется какой-то плагин, который обеспечивает подобную функциональность.

Илон Маск рекомендует:  Создание первой задачи

Вот как эксперты сайта SEO-Hacker рекомендуют внедрять АМР на WordPress-сайте:

1. Установить и активировать плагин AMP WordPress plugin (https://wordpress.org/plugins/amp/)

2. Отредактировать файл .htaccess, чтобы перенаправлять посетителей с мобильными устройствами на АМР-страницы. Для этого надо вставить в .htaccess следующее:

RewriteCond % (android|blackberry|googlebot-mobile|iemobile|iphone|ipod|#opera mobile|palmos|webos) [NC]

RewriteRule ^([a-zA-Z0-9-]+)([/]*)$ https://example.com/$1/amp [L,R=302]

Для Drupal Google AMP внедряется похожим образом – для этого используются AMP-модуль (https://www.drupal.org/project/amp), АМР-тема (https://www.drupal.org/project/amptheme) и АМР-библиотека на PHP (https://github.com/Lullabot/amp-library).

При установке АМР-модуля, формат АМР становится доступен для всех типов страниц и «отдает» АМР-страницы, если добавить к URL страницы «?amp» на конце.

АМР-тема разработана, чтобы обеспечивать специфическую разметку, которую требует стандарт, она автоматически становится активной, если обращение идет к странице с «?amp» на конце. Как любая другая тема Drupal, эта тема может быть расширена с помощью подтемы, что позволяет владельцам сайтов кастомизировать выдачу АМР-страниц, как они посчитают нужным.

АМР-библиотека используется для случаев, когда пользователи вводят HTML в поля, позволяющие это делать, и выдает предупреждение для тех случаев, когда введенный текст не соответствует АМР-стандарту. Библиотека также автоматически корректирует HTML-текст там, где это возможно, в том числе меняет тэги img и iframe на их АМР-эквиваленты.

В Joomla возможность выдавать АМР-страницы пользователям обеспечивается с помощью плагина wbAMP (https://weeblr.com/joomla-accelerated-mobile-pages/wbamp).

Указанные решения являются, вероятно, только самыми первыми, доступными прямо сейчас, ведь формат АМР является относительно новым. В будущем мы увидим появление множества аналогичных решений и плагинов для различных CMS.

Какие браузеры поддерживают Google AMP

По данным AMP Project, поддерживаются 2 последних версии Chrome, Firefox, Edge, Safari и Opera. Также поддерживают, но не совсем корректно отображают АМР-страницы системный браузер Android 4.0 и Chrome версии 28 и старше на мобильных устройствах.

В заключение давайте подведем итог, в чем плюсы и минусы стандарта Google AMP?

  • AMP – это открытый стандарт.
  • Увеличение скорости загрузки страниц может дать преимущество в SEO, поскольку скорость загрузки является одним из факторов ранжирования.
  • Поскольку этот стандарт разработан Google, можно ожидать, что само наличие AMP-страниц для выдачи мобильным пользователям на сайте может в будущем стать фактором ранжирования, по крайней мере для Google.
  • АМР-страницы могут попасть в «карусель» в мобильной выдаче в топе Google.
  • Большие возможности для кастомизации, и в том числе возможность не использовать AMP Cache от Google и отдавать контент со своей CDN или своего сервера.
  • Наличие плагинов для популярных CMS, которые облегчают внедрение AMP на сайте.
  • AMP может оказаться сложен во внедрении, если вы не веб-разработчик или хотя бы не понимаете HTML.
  • АМР добавляет сложности. Мы вынуждены заниматься внедрением еще одной технологии, вместо того, чтобы оптимизировать имеющееся.
  • Возможности кастомизации при внедрении в CMS достаточно ограничены, возможно это изменится со временем.
  • Поддержка кастомного Javascript возможна только через «amp-iframe», но это не дает возможности получить доступ к данным из этого скрипта.
  • IE11 не поддерживает пока стандарт AMP, а значит пользователи Windows Phone пока не увидят AMP-страницы, а будут видеть вместо них стандартные HTML-версии этих страниц.

Глаза боятся, а руки делают. Подключаем AMP страницы на сайт

Я вырастил грибыыы … А нее, стопэ! :) Я подключил AMP страницы, и это оказалось не так уж и сложно! Пришлось повозиться, но уже есть что рассказать, и чем поделиться.

А началось все с того, что в Google-аналитике мне перестал давать покоя пункт «Ускоренные мобильные страницы (AMP)». Вроде бы вот он раздел, мне не мешает, но почему там пусто? Почитал мельком информацию, посмотрел видео, подумал, что вещь вроде бы неплохая, но работы много, и отложил подключение. Но пустой раздел в аналитике покоя не давал, не давал, не давал (привет, Баден-Баден!).

Итак, что такое AMP и зачем оно нужно?

AMP (Accelerated Mobile Pages) – переводится с английского как ускоренные страницы для мобильных устройств. Иными словами, HTML-код таких страниц отличается от общепринятого, и оптимизирован для отображения на мобильных устройствах.

Поначалу мне было непонятно, зачем это нужно, если есть такие фреймворки для адаптивной верстки, как Bootstrap? Например, на моем сайте используется как раз такой фрейморк, и страницы хорошо отображаются как на компьютерах, так и на смартфонах и планшетах, смысл городить еще что то? Но всё оказалось сложнее (с)

Когда вы создаете страницу, сделанную по технологии AMP, вы фактически создаете некоторый автономный продукт, который забирает Google, и в дальнейшем держит на своих серверах. Когда человеку в поиске попадается ваша такая страница, она отдается с ближайшего сервера в том виде, в котором Google забрал её в последний раз. Это как лепить садовых гномов и отдавать их в супермаркет на реализацию.

Человек прямо в поиске увидит картинку/логотип вашей статьи, заголовок, часть текста, а если заинтересуется, то и все содержимое вашей страницы будет ему отображено в считанные секунды, и всё это без захода на ваш сайт! В принципе, ситуация Win-Win, как говорится – мне не надо отдавать лишние деньги за ресурсы хостинга, пользователю не нужно ждать, пока страница сформируется, загрузится и отрисуется. Да, предвосхищаю ваш самый главный вопрос – на такие страницы можно вставлять как рекламу, так и счетчики посещаемости.

Как сделать AMP страницу и какие тонкости и риски просто необходимо учесть.

Как уже говорилось, AMP страницы должны соответствовать определенному стандарту, и на них накладываются определенные ограничения. Стандарт описан на английском языке на официальном сайте проекта — https://www.ampproject.org, но я проведу вас через примеры с сайта и опишу всё, что узнал, на русском.

Итак, «обыкновенная» AMP страница, выглядит, по мнению авторов, вот так:

Специально вставляю картинку, что бы апеллировать к номерам строк (слева). Сам HTML вы можете взять с официального сайта по этой ссылке.

Итак, вы видите структуру документа. В 6й строке вы должны вставить свой заголовок, а строку 23 заменить содержимым своей статьи (вместе с картинками и прочим), и подбить служебные поля. Если вы все сделаете правильно, создание AMP страницы будет окончено, и вам останется только скормить её в Google.

Но вот с этим «сделать всё правильно» как раз начинается самая тонкая работа :)

Не забудьте научить ПС не считать AMP страницу и оригинал дублями.

У меня теперь есть два вида записей блога – обычная страница, и, теперь, AMP, с одинаковым содержимым. Для себя я наметил, что отличаться они будут вставкой дополнительного текста «blog_amp» в URL (адрес) страницы.

Так, например, обычная статья имеет адрес «https://bablofil.ru/kak-torgovat-na-birje/», а её аналог – «https://bablofil.ru/blog_amp/kak-torgovat-na-birje/». Если хотите, откройте обе в браузере – и обе откройте с мобильного телефона, сравните. И сразу да – AMP может выглядеть намного красивее, не так как у меня, но я еще до этого доберусь ;)

Так вот, есть у меня теперь две разные страницы с одинаковым содержанием. Они немного отличаются по внешнему виду, но статья то одна и та же! С точки зрения Яндекса – это дубль страницы, и раньше это расстреливали пессемизировали страницу в поиске.

Для решения такой проблемы предусморены специальные заголовки в разделе «head» как основной страницы, так и её AMP-собрата (строка 7 на рисунке выше).

На «ускоренной» странице вы ссылаетесь на главную, указывая параметр rel=”canonical” и href=”адрес основной страницы”

rel= «canonical» href= «http://main_page.html» />

А на главной указываете ссылку на «ускоренную», указывая параметр rel=”amphtml” и href=”адрес страницы AMP”.

rel= «amphtml» href= «https://www.example.com/url/to/amp/document.html» >

Продолжая свой пример, у меня на странице https://bablofil.ru/kak-torgovat-na-birje/ указан путь к её amp-версии

, а на amp-версии указан путь к оригиналу

Тут у меня указаны относительные пути, без полного указания https://bablofil.ru/. , и по заверениям гугла, тут это допускается. Но в некоторых других частях документа придется использовать полный путь, так что вам, может быть, будет удобнее использовать полный URL везде.

Этих заголовков, говорят Яндекс с Гуглом, должно хватить, что бы всё было хорошо.. Но мы то живем в реальном мире! Поэтому многие мастера вносят в robots.txt строки, запрещающие индексацию amp страниц для Яндекса. В моём случае, можно было бы внести в robots.txt строку вида Disallow: /*blog_amp*, но я этого не делаю, потому что мне интересно, как Яндекс себя поведет. Такой вот мини-эксперимент.

Приведите содержимое статей в соответствие с ограничениями

Звучит как что-то абстрактное, но, на самом деле, все очень предметно. Некоторые WYSIWYG редакторы (те штуки, в которых вы набираете текст в админке, где можно выделять жирным, ставить заголовки и всё такое) любят вставлять всякое лишнее в тело статей. Например, мой редактор вставляет в загружаемые картинки атрибут style=”height:400px; width: 600px”, а так же иногда вставляет атрибут style в теги span и div.

Но это не поддерживается AMP, и гугл при проверке такой страницы будет ругаться и не хотеть её добавлять. Так же не поддерживается тег img – его надо заменять на тег amp-img.

Что сделал я в такой ситуации – несколько шагов, они больше программные. У меня сайт сделан на языке программирования Python, но те же самые техники вполнеможно приспособить и для PHP, особенно для таких движков как WordPress и Drupal.

Изображения и прочее.

Изображения должны быть указаны в тегах amp-img, и обязательно иметь следующие атрибуты:

layoutresponsive» (для адаптивного масштабирования)
w > height=”400” – любое целое число в пикселях.

Да-да, изображение будет масштабироваться, а пропорции будут браться из отношения width к height. Все эти поля обязательны, и, если вы их не укажете, изображения показываться не будут, и тем более Google не будет работать с этой страницей.

У себя я решил вопрос относительно просто: перед тем, как построить и скинуть в кэш amp страницу, отрабатывает автозамена – все вхождения на , и все вхождения style=”любой текст” просто вырезаются из всех тэгов – все равно они не работают на amp.

Код простой, выглядит вот так:

article — в моем случае, всё содержимое статьи. При использовании PHP надо будет заменить article.replace на str_replace и, возможно, переставить аргументы местами, а re.sub заменить на preg_replace.

Так же очень важным для меня стал вопрос, где брать исходные данные по изображениям – длину и высоту. Тут мне повезло, хотя, думаю, и у вас похожая история. В общем, когда я вставляю картинку в текст, код выглядит таким образом:

Внутри кавычек в аттрибутах alt, class, src и style текст каждый раз меняется, но их позиция всегда остается неизменной. Таким образом, мне нужно из поля style взять цифры (в этом примере, 53 и 553), и подставить их же в эту же строку, но как отдельные атрибуты. Строка после этого будет выглядеть вот так:

Потом, как я уже писал выше, для amp страниц style=”…” полностью срежется, а теги заменятся, и итоговый код для изображения на ускоренной странице будет выглядеть так:

А само решение делается в одну строку кода:

Опять же, в PHP re.sub надо будет заменить на preg_replace и, возможно, поменять аргументы местами.

Это регулярное выражение находит в html-коде статьи текст, похожий на

После того, как я внес эти изменения – подгонка изображений под стандарт и вырезание style=’…’ из тэгов, больше с текстом статей я не работал – текст стал валиден, осталось дооформить страницу.

Свои стили

Текст-то может и стал валиден, но пропали стили – подключать внешний CSS в AMP страницу нельзя, и в теги прописывать через style тоже нельзя. Выход – внедрять CSS в head страницы, но в строго отведенном месте — в теге style amp-custom. Вот как выглядит это у меня в шаблоне страницы.

Этот тэг должен присутствовать только один раз на всю страницу, дублировать нельзя, все стили прописываем в нём. Более того, подозреваю, что есть ограничения на размер содержимого, да и лишние пробелы надо убрать и переводы строк, но в процессе разработки я этого не делал.

Проставьте правильное описание страницы

Помните тот рисунок в начале статьи, где от разработчиков показывался пример правильной AMP страницы? Так вот, с точки зрения Google он НЕ правильный, пока вы не пропишете все нужные поля в описание script type=»application/ld+json» .

Вот как выглядит это у меня.

В фигурных скобках указаны мои переменные, которые подтягиваются из базы, свои для каждого отдельного поста. HTML-код для копирования вы можете взять с официального сайта.

Пара замечаний по заполнению: Для изображений тут не подходят относительные пути – всё надо вбивать полностью, и важны размеры. Вот эти поля: width:600 и height: 60, а так же height:2000 и width: 800 я взял полностью из примера. Я пытался подогнать их под себя – но потерпел поражение. Google ругался то на высоту, то на ширину, а через поиск нашел только то, что размеры могут быть любыми. В общем, оставил их пока как есть, если появится новая информация, сообщу. И да, если у вас есть такая информация, поделитесь, пожалуйста, в комментариях.

А, и еще на предмет поля mainEntityOfPage – по описанию, это поле должно указывать на товар, который вы описываете, или на персону, или на организацию и так далее. Про статьи ничего не сказано, но, раз уж это поле обязательно для Google, я в нём указал путь к такой же, но не ускоренной странице (канонической). Прав я или нет – время покажет. Но гуглу понравилось, вроде ;)

Добавьте меню

Тут я сделал сайд-бар, но, возможно, потом сделаю что-то более симпатичное. Оказывается, такие вещи предусмотрены стандартом, и добавлять их не сложно.

Делай раз – указал скрипт в разделе head – он для всех одинаковый

Делай два – добавил кнопку, при нажатии на которую будет показываться сайдбар

Делай три – добавил сам сайт-бар

Тут надо отметить, что аттрибуты role и tabindex обязательны для Google, так что вписал их – на официальном сайте про это упоминания я не нашел.

В общем-то всё, сайд бар открывается при нажатии на кнопку-гамбургер, и закрывается при нажатии на строку «Закрыть меню». Выглядит не так круто, как хотелось бы, но это дорабатывается стилями.

Добавьте рекламу

Тут принцип тот же – добавляем в head нужный скрипт:

И добавляем сам рекламный блок в тэге

Тут такой же принцип, как и с изображениями – реклама будет адаптивно подстраиваться, но в нужных пропорциях. Пример выше использует рекламу AdSense, данные для полей data-ad-client и data-ad-slot вы можете получить в консоли Google AdSense при создании баннера.

Добавьте аналитику

Пусть AMP страницы хранятся и не у вас, а на серверах иностранной корпорации, вам же все равно нужно знать, что с ними происходит – кто их просматривает, как находит и так далее. Ну и с этим ничего сложного, принцип вы, наверное, уже уловили:

Добавляем скрипт в head:

Добавляем код для счетчиков:

Вот их можно вставлять сколько угодно — по крайней мере, у меня указаны оба этих блока. Желтым цветом выделены идентификаторы, которые вы должны заменить на свои – код для Google вы можете получить в Google Analytics, код для Яндекса – в Яндекс.Метрике.

Добавьте что-нибудь еще

Я обязательно добавлю, только чуть позже, комментарии, красивую прокрутку изображений, интерактивные графики на свои страницы.. Как только с этим разберусь :)

А так есть хороший сайт, где собраны примеры всяких фишек и их реализации https://ampbyexample.com/ – с примерами кодов, с визуализацией и прочим – просто скрольте страницу вниз, смотрите примеры, и самые вкусные утаскивайте себе в копилки.

Вместо заключения

После того, как я сделал AMP страницы, на все статьи моего блога автоматически проставляется ссылка на AMP аналоги. Но я решил, что лишним не будет так же добавить эти страницы в sitemap.xml – и добавил.

Кроме того, когда я тестировал и подгонял AMP код, я пользовался проверкой от Google (ссылка выше), и там, при проверке, есть кнопка «Добавить страницу» — и я нажимал добавить для трех страниц.

Эти три страницы действительно, добавились на следующий день, но ругаются на ошибки, которые я уже давно исправил. Т.е. я сначала нажал добавить, потом полез что-то исправлять, где то совершил ошибку, исправил, а потом страницы добавились с замечаниями.

Так что теперь я просто жду, когда Google их сам найдет, а так же мне интересно, что будет делать с ними Яндекс после обнаружения. Если будет информация – сообщу.

что означает SW HW UPG. SW в информации о прошивке

Рекомендуемые сообщения

Последние посетители 0 пользователей онлайн

Ни одного зарегистрированного пользователя не просматривает данную страницу

Список тем для запросов

Тут собраны ссылки на темы для запросов дампов, электросхем и другой информации

Запрос дампов

Тут можно попросить оригинальный дамп или его редактирование (калибровку)

Запрос электросхем у дилеров

Тут можно попросить оригинальную электросхему на автомобиль

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL