Что такое код swfmovie >add

Содержание

Что означают символы & и другие подобные?

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

например: /index.php?var1=val1&var2=val2
по сути тоже самое что и: /index.php?var2=val2&var1=val1

Но для текущего сравнения, которое сравнивает две строки в лоб, это разные адреса
Поэтому для этого хочу разбирать каждую переменную в гет запросе на две части: имя/значение

Посмотрел я значит адреса на том же кибер форуме и увидел адреса следующего вида:

И возник вопрос, что такое & . Для чего оно?
Из-за не знания этого мне кажется, могу сделать алгоритм не верным, кто знает, подскажите пожалуйста.

21.08.2015, 02:13

Êëà — как перевести в UTF-8?
пытался с помощью html_entity_decode, iconv, не получилось, Shtirliz перевел QP, LAT в WIN, а как.

Единая точка доступа && подключение PHP скрипта с GET запросом
Здравствуйте, у меня на сайте по стандарту организована единая точка входа, и у меня есть проблема.

Function __autoload && static variable
использую __autoload для подключения классов. И также мне нужно при первом обращении получить.

Грамотная и максимальная монетизация AMP страниц — исчерпывающая инструкция

AMP страницы (сокращение с английского переводится как – Ускоренные Мобильные Страницы) по сей день являются диковинкой для большинства вебмастеров. Их внедрение откладывается по некоторым причинам, одна из которых – миф о том, что существует сложность с их монетизацией, их внедрение повлечёт снижение дохода и т.п.

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

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

Содержание:

Google AdSense, другая реклама и AMP страницы – максимальная монетизация

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

Сразу стоит сказать, что речь пойдёт об эффективном размещении рекламы Google AdSense. Несомненно, существует возможность разместить рекламные блоки Рекламной Сети Яндекс, и даже партнёрские рекламные блоки, благо код AMP страниц очень похож на HTML. Но тут стоит понимать, что, скорее всего, придётся прибегнуть к редактированию кода.

В случае с рекламой Google AdSense – ничего фактически редактировать не надо, всё будет предельно просто. Следующие рекламные форматы и блоки доступны к размещению на AMP страницах:

  • Адаптивные блоки – классические рекламные блоки (текст \ графика), которые растягиваются на всю ширину экрана. Этот вариант является оптимальным для AMP страниц.
  • Блок ссылок – этот блок также существует в варианте адаптивного. Так как AMP страницы индексируются и выводятся только Google-ом, то никаких нареканий со стороны других поисковых систем не возникает от слова вообще. Считается, что эти блоки повышают доходность от рекламы, и это действительно так. На AMP страницах их можно выводить и под заголовком, в статье или под оной. Собственно, где угодно.
  • Автоматизированные объявления – да, оные поддерживаются в полном объёме и на AMP страницах. Google AdSense сам расставляет в дополнении к имеющимся дополнительные рекламные блоки, дабы увеличить конверсию и доход для вебмастера.
  • Фиксированные объявления – и таки да, для AMP страниц имеется свой формат фиксированного объявления, который дозволено разместить. Этот блок всплывает внизу и имеет кнопку закрытия. Предвкушая беспокойство на предмет корректности такой рекламы, можете ознакомиться с ответом на этот вопрос от разработчика популярного AMP плагина.
  • Рекомендуемый контент – этот блок также может быть выведен на AMP страницах. Хотя лично я не пользуюсь данной возможностью.
  • Как оптимально разместить рекламу Google AdSense на AMP страницах, какой код использовать

    Классический код адаптивного рекламного блока в AMP выглядит следующим образом:

    Только data-ad-client и data-ad-slot необходимо указывать реальные, что были присвоены в вашем случае.

    Но едва ли приведённой информации будет достаточно. Давайте разберём вставку каждого блока в отдельности.

    Вставка классических адаптивных блоков (включая блоки ссылок) на AMP страницу

    В WordPress AMP страницы реализовываются с помощью плагина. Наиболее функциональный и известный плагин – «AMP для WP — Ускоренные мобильные страницы».

    В консоли WordPress располагаются его настройки. Зайдя в AMP –> Settings -> Advertisement. В этом разделе можно включить вставку рекламных блоков между заголовком и самой статьёй, после статьи и в некоторых других местах.

    Пример: нам необходимо вставить блок ссылок между заголовком и началом статьи. Мы создаём необходимый адаптивный блок ссылок в личном кабинете Google AdSense. Копируем присвоенные ему данные и вставляем их в настройки блока (строка Data AD Client и Data AD Slot) с именем AD #3, также включаем пункт Responsive Ad unit – этот пункт означает, что блок должен быть адаптивным (в этом случае настройка AD Size игнорируется).

    Адаптивный блок непосредственно в статье на AMP странице

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

    Для этого нам необходимо отредактировать файл functions.php, который располагается в используемой вами теме (дизайне сайта). Код оттуда будет подхватываться плагином при формировании AMP страниц.

    Хочу особо отметить, что файл находится по пути …\wp-content\themes\ \functions.php Никакие файлы самого AMP плагина редактировать не требуется.

    И так, открываем файл functions.php темы и вставляем туда код:

    Пояснение по коду: не забудьте указать в коде корректные данные для data-ad-client и data-ad-slot, что были присвоены созданному в вашем случае адаптивному рекламному блоку (сам блок может быть любым – текст, графика или оба, блок ссылок). А абзац, после которого следует вписывать блок, указывается цифрой между $btf_ad_code, 5, $content – в приведённом примере это 5-ый абзац.

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

    Вставляем автоматизированные объявления на AMP страницы

    Дабы реализовать сие, необходимо вписать код, который должен выводиться на каждой странице.

    Код состоит из двух частей, первый должен быть вписан в Head область AMP страницы:

    А второй в область Body:

    Только не забудьте поменять data-ad-client на ваш.

    Если говорить про озвученный выше AMP плагин, то вписать приведённый код можно в разделе настроек по следующему пути AMP –> Settings -> Advance Settings.

    Фиксированное объявление на AMP страницах

    Для реализации данного рекламного блока первым делом необходимо создать рекламный блок текст \ графика с фиксированным размером – 320×100.

    Далее следует вписать код в Head область AMP страницы:

    А также вписать код в Footer область AMP страницы:

    Не забудьте поменять в приведённом коде data-ad-client и data-ad-slot на те, что были присвоены созданному рекламному блоку с фиксированным размером.

    Все приведённые строки также можно вписать в соответствующие места в настройках AMP плагина, что располагаются по следующему пути AMP –> Settings -> Advance Settings.

    Заключение

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

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

    AMP WordPress плагины

    Привет, друзья! Как вы уже знаете, что всемогущий Google в октябре прошлого года запустил проект с открытым исходным кодом — Accelerated Mobile Pages (AMP). Основная цель инициативы сводится к тому, чтобы сделать открытый мобильный интернет ещё более производительным и удобным для всех. В связи с этим были созданы специальные для этой цели плагины AMP WordPress (Accelerated Mobile Pages) для движка ВордПресс.

    Проект Accelerated Mobile Pages

    Формат AMP — это высокая скорость загрузки страниц (созданный на базе существующих веб-технологий). Основу проекта составляет принципиально новый формат открытого типа AMP HTML. Благодаря ему, разработчики теперь могут с лёгкостью создавать облегчённые версии стандартных веб-страниц. Более подробную информацию о проекте вы можете прочитать на официальном блоге Google Россия, здесь .

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

    Открытость проекта Accelerated Mobile Pages будет способствовать свободному обмену информацией, делая мобильный интернет быстрее и удобнее для пользователей по всему миру. Да, кстати, AMP (Accelerated Mobile Pages) появились в мобильном поиске, только, ещё в русскоязычной версии поисковика мобильные страницы с ускоренной загрузкой пока не появились.

    Страницы этого формата отображаются в новостном блоке и выводятся по любому запросу, который вызывает его показ: trump, google, waze, obama и тому подобное. Как видно на скриншоте, они правда, не всегда представлены в виде карусели:

    Google AMP появились в мобильном поиске

    Вообщем, дамы и господа, к чему это я? А к тому, что теперь и вы можете спокойно включить ускоренную загрузку страниц для мобильных устройств на вашем сайте/блоге WordPress.

    Вордпресс плагины AMP

    Компания Automattic, как и обещала, выпустила плагин для WordPress с таким коротким названием — AMP . Чтобы не отстать от жизни и следовать в ногу за нашим другом Google воспользуемся/присоединимся к проекту Accelerated Mobile Pages.

    Официальный плагин AMP для WordPress

    Официальный плагин AMP для WordPress

    Official AMP Plugin for WordPress. Плагин добавляет поддержку Accelerated Mobile Pages для вашего сайта WordPress .

    Для того, чтобы включить ускоренные мобильные страницы (AMP) на вашем WordPress сайте вам нужно только установить данный модуль через админку:

    Установить и активировать плагин AMP

    Активировать его и перейти в его настройки. AMP — Общие.

    Настройки плагина AMP WordPress

    Плагин можно настроить так, чтобы он следовал одному из трех разных режимов шаблона: Native, Transitional и Reader. Когда настроено для работы в режимах Reader и Transitional, записи / страница будет иметь канонический URL, а также соответствующий (парный) URL AMP. Плагин AMP не служит мобильной темой; он не перенаправляет мобильные устройства на версию AMP. Вместо этого AMP-версия предоставляется мобильным посетителям, когда они находят контент на таких платформах, как Twitter, Pinterest, Поиск Google и других.

    Google добавил поддержку AMP Stories в свой WordPress-плагин для AMP. Чтобы создавать AMP-истории, владельцам сайтов нужно установить последнюю версию плагина Gutenberg, поскольку редактор Stories полагается на функции, которые отсутствуют в основных версиях WordPress.

    Включив эту опцию, издатели смогут воспользоваться преимуществами нового формата, но при этом им не нужно будет учить HTML, CSS и JavaScript.

    Теперь у владельцев сайтов есть возможность:

    • Создавать AMP Stories путём перетаскивания и вставки блоков;
    • Добавлять такие элементы, как текст, видео и изображения;
    • Анимировать текст;
    • Настраивать цвет и прозрачность фона;
    • Устанавливать порядок страниц AMP-историй;
    • Управлять AMP Stories в WordPress.

    Давайте добавим текст, перетащим его и повернем

    New : Плагин AMP for WordPress теперь позволяет создавать сайты только на AMP

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

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

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

    Ещё одним нововведением стало добавление возможности включить только AMP в отдельных разделах сайта и отключить AMP на отдельных страницах.

    • Поддержка четырёх тем по умолчанию (2015, 2020, 2020, 2020);
    • Инструмент совместимости для отладки AMP;
    • Интеграция с Gutenberg;
    • Ряд других улучшений, связанных с кодом и производительностью.

    При этом разработчики подчёркивают, что этот плагин по-прежнему не является полностью готовым решением для использования AMP, а функционирует как средство для обеспечения совместимости AMP и WordPress. Подробнее на офсайте: https://amp-wp.org/

    Можете, также посмотреть ещё один плагин для этих же целей (ускоренные мобильные страницы) с таким названием — Accelerated Mobile Pages (Google AMP Project).

    Плагин Accelerated Mobile Pages WordPress

    Плагин Accelerated Mobile Pages

    Это первый выпущенный плагин для WordPress который автоматически добавляет ускоренные мобильные страницы (Project AMP Google) на вашем WordPress сайте. Правда, плагин от Automattic AMP пользуется большей популярностью (установок больше), чем Accelerated Mobile Pages, хотя какая разница, функциональность одна и та же. Его также устанавливаете, активируете и будет вам счастье. Статистика по AMP (Accelerated Mobile Pages) будет доступна у вас в Search Console и Google Analytics.

    AMP WP — Google AMP For WordPress

    AMP WP — Google AMP For WordPress

    Более 600 тыс. установок. Поддержка Gutenberg. Сделайте так, чтобы ваш сайт загружался в 5 раз быстрее на мобильных устройствах, используя возможности проекта AMP с открытым исходным кодом.

    Функции ускоренной мобильной страницы Google AMP Project

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

    Нужны ли AMP вашему сайту: подробное руководство по технологии

    Что такое AMP: обзор технологии и способов создания ускоренных мобильных страниц.

    25 Февраля 2020 | 2619 | 1

    Увеличение скорости работы сайта на мобильных устройствах остается одним из ключевых SEO-трендов, перешедших из 2020 в 2020 год. Для этого есть три весомые причины:

    1. Мобильные устройства (смартфоны и планшеты) в России генерируют около половины суммарного количества трафика: практически каждый второй визит на сайты производится со смартфона.

    Данные сервиса Яндекс Радар о количестве визитов с разных типов устройств в 2020 году (регион: Россия).

    2. Пользователи уже не готовы тратить время на загрузку: при просмотре с мобильных устройств 53% посетителей уйдут со страницы после 3 секунд ожидания загрузки.

    3. В эпоху Mobile-first indexing , официально наступившую в 2020, сайты, оптимизированные под мобильные устройства, имеют преимущество при ранжировании в выдаче.

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

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

    Для кого актуально

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

    Примеры сайтов на AMP

    Хорошим примером сайта, сверстанного на AMP, является официальный сайт www.ampproject.org (п.с.: оцените, что можно сделать при помощи технологии AMP для десктопа), а вот тут есть готовые шаблоны сайтов разной тематики, которые помогут оценить возможности AMP (можно бесплатно скачать понравившееся).

    Оценить потенциал разработки помогут кейсы о внедрении AMP на сайты регионального и мирового уровней различных тематик на официальном сайте технологии.

    Как работает AMP

    Страницы AMP построены с помощью трех основных технологий:

    1. AMP HTML — это HTML-разметка с ограничениями, расширениями, а также особенными web-компонентами, регламентированными в спецификации. Вот несколько примеров:

    Тег в html

    Тег-аналог в AMP HTML img amp-img video amp-video iframe amp-iframe

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

    Смотрите также пример HMTL-кода AMP-страниц, предлагаемый в валидаторе .

    При создании AMP-версий страниц используются CSS-стили. О поддерживаемых элементах CSS и правилах размещения на странице можно прочесть здесь .

    • встроенные стили запрещены (т.к. они снижают производительность),
    • также наложены ограничения по размеру заданных должным образом CSS на странице — не более 50Кб.

    О том, как конвертировать HTML-код в AMP, читайте по ссылке .

    2. Библиотека AMP JS, обеспечивающая визуализацию страниц. То, что страницы не могут содержать произвольный JavaScript-код и все скрипты должны быть асинхронными, и накладывает главные ограничения при создании AMP-версии сайта. Компоненты библиотеки позволяют если не полностью, то значительно компенсировать отсутствие возможности использовать кастомный код. С помощью библиотеки можно реализовать не только боковое меню, фильтры и сортировку, но и отправку формы, корзину интернет-магазина, ссылки на соцсети, подгрузку контента и рекламных блоков — инструменты для всего этого (и не только) можно найти здесь . Также ознакомьтесь со списком расширенных возможностей АMP по этой ссылке .

    3. AMP Cache, позволяющий загружать страницы AMP из поиска практически мгновенно за счет использования CDN (сети доставки контента) Google.

    Именно благодаря набору ограничений библиотеки и компонентов сделанный с помощью AMP сайт гарантированно будет быстрым и легким.

    Сравнение скорости загрузки и функционала AMP и адаптивной версии на конкретном примере

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

    Страницы для сравнения:

    По данным сервиса Google PageSpeed Insights адаптивная версия имеет низкую скорость загрузки:

    На полную загрузку страницы при просмотре с мобильного устройства уходит 9.5 секунд, а достаточное количество контента (т.е. первый экран и основной контент страницы) начинает отображаться только через 2.8 секунды после открытия страницы. Вспомним, что половина пользователей покинет страницу после трех секунд ожидания загрузки: можно сделать вывод, что такая низкая скорость может серьезно отразиться на показателе отказов и конверсии.

    AMP-страница сайта отличается очень высоким показателем скорости:

    Первый экран и основной контент страницы загружается за 1 секунду — это очень хороший результат, а через 3,9 секунды AMP полностью готова к взаимодействию с пользователем (удовлетворительный результат). В среднем ускоренная мобильная страница оказалась быстрее в 2,5 раза своей адаптивной версии и оценивается поисковой системой Google как страница с высокой скоростью загрузки (95 пунктов из 100 в сервисе Google PageSpeed Insights), что дает ей преимущество при ранжировании согласно Mobile-first indexing.

    А что с визуальной составляющей и функционалом

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

    Адаптивная версия (слева) и AMP (справа).

    Адаптивная версия AMP
    Хедер (шапка сайта)
    Кликабельный логотип + +
    Меню +
    Строка поиска +
    Дополнительные навигационные элементы +
    Дата и время публикации + +
    Блок “Поделиться” + +
    Основной контент страницы
    Основное изображение + +
    Полнота контента + +
    Элементы перелинковки
    Встроенная в контент лента рекомендаций + +
    Тегирование +
    Доп. блок “Поделиться” +
    Лента рекомендаций “Новости по теме” + +
    Доп. ленты рекомендаций +
    Футер (подвал сайта)
    Меню в футере +
    Дополнительное меню / элементы навигации +
    Информация о правообладателе / copyright + +
    Илон Маск рекомендует:  Что такое код rad2deg

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

    Можно сделать вывод, что AMP позволяет создавать полноценные версии страниц (аналогичные или даже идентичные мобильным и адаптивным), которые будут загружаться в разы быстрее: технология позволяет и дает нужные инструменты, а дальше — все в руках разработчиков.

    Нужен ли AMP вашему сайту

    Оценить актуальность технологии для вашего сайта помогут ответы на следующие вопросы:

    1. Есть ли у вашего сайта мобильная или адаптивная версия? Насколько она быстрая? Смотрите оценку скорости загрузки в Google PageSpeed или Google Lighthouse .

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

    По данным сервиса PageSpeed Insights сайт ampproject.org имеет высокую скорость загрузки на мобильных устройствах.

    Пример сайта с неудовлетворительной скоростью загрузки.

    2. У вас новостной или контентный сайт? Актуальность внедрения AMP подтверждается статистикой: среди более 25 миллионов доменов с реализованным AMP новостные сайты занимают основную долю.

    Помимо того, что ускоренные страницы имеют преимущества в ранжировании из-за mobile-first, именно из AMP-версий формируется выдача карусели «Главные новости»:

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

    3. Вы владелец интернет-магазина или агрегатора товаров и услуг?

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

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

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

    К примеру, вот результаты внедрения AMP из кейса сайта-агрегатора бронирования авиаперелётов и отелей wego.com:

    Источник: кейс , размещенный в разделе тематических исследований ampproject.org.

    Технология позволила улучшить скорость загрузки сайта в 10 раз, увеличить конверсию по партнерским программам на 95% и на 49% улучшить конверсию из мобильного поиска. Суммарно CTR рекламы на мобильных устройствах выросла в 3 раза.

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

    4. Оцените выдачу Google и опыт конкурентов: если в тематической выдаче уже присутствуют страницы AMP, этот тренд будет только усиливаться. Будьте среди первых.

    Например, по коммерческому запросу «купить телевизор в москве» в ТОП-5 мобильной выдачи Google представлена 1 ускоренная мобильная страница:

    А вот пример для сайта кулинарной тематики: по запросу «Блины на кефире» в топ-5 представлено 5 AMP-страниц, первые две из которых отображаются в поиске с помощью разметки вида «Карусель рецептов».

    Еще один пример по информационному запросу «amp для интернет-магазина»: 2 из 5 страниц топа выдачи — AMP:

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

    К практике: как внедрить AMP

    Для популярных CMS (Bitrix, WordPress, Drupal, Joomla и др.) имеются готовые решения, позволяющие быстро внедрить AMP на сайт. Следует отметить, что большинство плагинов платные и достаточно ограничены в своих возможностях, так что перед выбором и покупкой стоит взвесить все «за» и «против». Возможно, лучше создать свою AMP-версию с нуля.

    В WordPress выбрать подходящий плагин можно на странице wordpress.org/plugins . Наиболее популярный плагин — wordpress.org/plugins/amp , инструкция по настройке находится тут .

    Для сайтов на Drupal есть несколько взаимодополняющих инструмента для внедрения Google AMP:

    Подробнее о функционале и способе использования каждого инструмента можно узнать по ссылке .

    В Joomla найти расширение для реализации технологии можно найти на странице extensions.joomla.org/tags/amp .

    В Bitrix на данный момент имеется только одно решение: marketplace.1c-bitrix.ru/solutions/impel.amp . Перед покупкой рекомендуется подробно изучить модуль и его возможности: у модуля нет рейтинга и он был установлен сравнительно малое количество раз (50-99). Возможно, более приемлемым решением будет создание AMP-версии «с нуля» под нужды проекта.

    Нет подходящего плагина?
    Пишем техническое задание по созданию AMP c нуля

    Основные требования к шаблонам:

    • AMP-страницы должны соответствовать всем стандартам и требованиям, обозначенным в спецификации на официальном сайте технологии.
    • Чтобы страницы правильно работали и показывались в результатах Google поиска, HTML-код шаблонов должен успешно пройти проверку в валидаторе AMP .
    • Дизайн страниц должен быть адаптивным и корректно отображаться на всех типах устройств. Ссылка на официальную инструкцию тут .
    • AMP-страница должна содержать тот же главный контент, заголовки и метаданные, что и основная (каноническая) страница. Пользователи должны иметь возможность выполнять такие же ключевые действия (не идущие вразрез со спецификацией и возможностями AMP), как и на канонической версии страницы.
    • URI AMP-страниц должен относиться к домену сайта и быть сформирован образом, понятным пользователям. Примеры:

    example.com /amp/ page
    example.com/page ?amp

    • Шаблон AMP и канонической версии страницы должны быть перелинкованы между собой. Основная (каноническая) страница между открывающим и закрывающим тегами … должна содержать тег:

    link rel = » amphtml » href = » URL AMP-версии страницы «

    Страница-AMP между открывающим и закрывающим тегами … должна содержать тег:

    link rel = «canonical» href = » URL основной версии страницы » >

    Следует учитывать, что Яндекс не поддерживает технологию AMP и его роботы не считают атрибут rel=”canonical” строгой директивой. Игнорирование указания канонической страницы может привести к появлению AMP страниц в выдаче вместо основных страниц сайта. Для того чтобы этого не произошло, в robots.txt необходимо добавить запрет на индексацию ускоренных страниц для ботов Яндекс:

      На шаблоны всех AMP-страниц должны быть добавлены коды счётчиков Google Analytics, Яндекс Метрики и пр. (укажите необходимые вам), добавленные согласно инструкциям по ссылкам:

    https://developers.google.com/analytics/devguides/collection/amp-analytics/
    https://yandex.ru/support/metrika/code/install-counter-amp.html

    • В футере должна присутствовать ссылка на полную версию сайта. Если функционал AMP и базовой версии отличается, это даст пользователю возможность перейти на «не урезанную» каноническую страницу.
    • AMP-страницы должны включать структурированную разметку данныхschema.org , как и на канонических страницах сайта.

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

    Перечень наиболее важных типов разметки:

    • Product (для страниц товаров);
    • Article (для информационных статей и новостей). Наличие данной разметки определяет возможность попадания новостной страницы в карусель “Главные новости”, о важности данной разметки для страниц AMP по ссылке .
    • Recipe (для страниц рецептов);
    • Organization (информация о компании);
    • Web-site (поиск по сайту);
    • BreadcrumbList (строка навигации)
    • и т.д.

    Чем подробнее будет реализована разметка, тем лучшее представление в поиске получит страница. Кроме того, микроразметка может содержать техническую информацию для поисковой системы. Например, данные из dateModified разметки Article используются роботами Google для отслеживания изменений в статье и оперативного обновления кешированной версии страницы – это помогает предоставлять пользователям самую свежую версию статьи. Обязательно проверьте реализованную разметку на валидность в Инструменте проверки структурированных данных : отсутствие ошибок является критичным фактором для данной доработки. О рекомендуемых типах разметки можно узнать на страницах Справочных материалов Google в разделе Структурированные данные .

    • К логотипу сайта предъявляются строгие требования, ознакомиться с которыми можно по ссылке . Выдержка из требований:

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

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

    После реализации ускоренных мобильных страниц отслеживать их состояние можно в Google Search Console (вкладка Улучшения > Страница AMP).

    Search Console генерирует отчет о найденных проблемах, ошибках и предупреждениях на AMP-страницах сайта.

    О монетизации AMP-версии

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

    Справка Google рекомендует сначала создать одну тестовую AMP-страницу и проверить, будет ли на ней выполняться показ рекламы.

    Глаза боятся, а руки делают. Подключаем 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 (ссылка выше), и там, при проверке, есть кнопка «Добавить страницу» — и я нажимал добавить для трех страниц.

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

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

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

    Как установить и настроить плагин Accelerated Mobile Pages (AMP) в WordPress

    В прошлом октябре Google анонсировал AMP как проект с открытым исходным кодом для обеспечения более быстрой загрузки страниц на мобильных устройствах. Как сказали в TechCrunch, большинство считает, что AMP является попыткой Google конкурировать с мгновенными статьями Facebook Instant Articles и мобильными приложениями, которые обеспечивают более быструю работу браузера. Мы склонны согласиться.

    Страницы, оптимизированные с AMP, появятся в мобильном браузере в топе результатов Google Search, отодвинув статьи в традиционном HTML в низ рейтинга. Загружаться они будут действительно мгновенно.

    Честно говоря, мы скептически настроены по отношению к AMP для блогеров или небольших издателей. Часто мы пишем контент, который попадает в топ результатов Google Search. А теперь придётся осваивать новую технологию с ограниченными ресурсами и надеждой, что наш контент окажется в топе. Интересно, что в отличии от больших издательств, в поиске нет записей блогов в AMP :

    В 1995 Microsoft выпускал MSN News как часть MSN Online Network, которая была запущена с Windows 95 — ответ Microsoft на AOL. MSN News требовали Application Viewer, который работал на платформе Microsoft Media Viewer. В течение года должно было произойти слияние веб с NBC, что позже стало MSNBC.com. Microsoft настраивал свою среду разработки, чтобы генерировать одновременно Media View и HTML. Это создало огромное количество новых проблем.

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

    Бесплатный плагин WordPress AMP

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

    AMP находится только в начале своего пути, и мы разочарованы, что Google решил создать абсолютно новую среду разработки, а не выбрал путь работать с издателями над оптимизацией HTML5 для более быстрой настройки загрузки страницы. Это было бы более логично. Но ведь в команде Google одни гении ! (Сарказм.)

    Несмотря на наши опасения, сегодня мы расскажем вам об установке плагина AMP для WordPress и Yoast SEO Glue для плагина AMP, что позволит вам лучше контролировать внешний вид вашего сайта.

    Как выглядит AMP на WordPress?

    В примере вы можете увидеть отличия между AMP и HTML страницами. Конечно, в версии AMP страница загружается быстрее.

    Изображение страницы в оригинале на HTML5:

    Тэг следующей ссылки добавлен к каждой странице в блок head >. Это сообщает поисковым системам, что доступна AMP версия этой страницы.

    Но также есть и каноническая ссылка, определяющая URL исходной страницы:

    Изображение страницы в AMP версии:

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

    Давайте теперь поговорим об активации AMP на WordPress.

    AMP WordPress Plugin

    Вы можете изучить и загрузить AMP WordPress Plugin из директории плагинов WordPress, или прямо из своей консоли.

    Просто зайдите в Плагины → Добавить новый и поищите AMP:

    После установки нажмите Активировать:

    Теперь зайдите на любую запись в вашем блоге WordPress с окончанием /amp/ в конце адресной строки. Вы увидите очень упрощенную версию вашего поста, который будет выглядеть примерно так:

    Glue for Yoast SEO & AMP

    Универсальный AMP плагин от WordPress предлагает несколько настроек. Yoast SEO создали аддон для их популярного плагина, который дополнительно усиливает вашу поддержку AMP.

    Вы можете загрузить Glue for Yoast SEO & AMP из бесплатного каталога плагинов. Но сперва убедитесь, что вы установили плагин Yoast SEO .

    Вы можете менять настройки AMP через боковое меню Yoast SEO – просто нажмите AMP внизу меню:

    Во-первых, Yoast позволяет вам расширить функциональность AMP. По умолчанию, AMP меняет только актуальные записи – это специальные новостные статьи:

    Примечание: Если вы видите пустые страницы под вкладками, то убедитесь, что обновили оригинал плагина Yoast SEO, это должно помочь.

    Во-вторых, Yoast предлагает несколько полезных способов настройки фирменной символики, дизайна и цветов:

    И наконец, они предлагают способ размещения пользовательского кода Analytics в стиле AMP. Это не так просто, как кажется. Обратите внимание на код, который мы вставили ниже:

    Мы нашли AMP версию для внедрения Google Analytics . Просто настройте свой исходный код для вашего веб-сайта:

    Мы уверенны, что Yoast продолжит обновлять свой плагин Glue вместе с развитием плагина AMP.

    Отладка ошибок AMP

    Через несколько дней после установки AMP мы получили электронное письмо от Google Search Console, сообщающее об ошибках в 10 страницах. Но на самом деле не работали все наши AMP записи на сайте.

    Мы вошли в Google Search Console, чтобы просмотреть страницы с ошибками и увидели это:

    Мы нажали на одну из страниц:

    Потом нажали Open Page и рассмотрели ошибки более детально. Вы можете сделать это и вручную, добавив /amp#development=1 в конце URL. А потом открыть Developer Console в вашем браузере:

    Оказалось, что все наши AMP страницы были не рабочие из-за ошибки: The tag ‘script’ is disallowed except in specific forms . Мы пришли к выводу, что нужно использовать пользовательские функции W3 Total Cache, чтобы разместить некоторые функции JavaScript в коде страницы до закрытия тега /body >. AMP не позволяет сделать это, а плагин WordPress AMP неспособен это отфильтровать.

    Нам нужно провести больше исследований, например, выключит ли W3 Total Cache скрипты для определённых путей, как /amp/, или нужно искать другое решение. Вернув этот скрипт назад в head > мы разрушаем Google Page Speed.

    Интересно, что использование рекламы Google DFP также негативно влияет на Google Page Speed. Google испытывает смекалку разработчиков. Не так-то просто использовать все его технологии вместе.

    Мы так и не решили, что более важно: Google Page Speed, поддержка AMP или разработка и отладка.

    Итоги

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

    AMP – это общедоступный путь оптимизации веб, в то время как Facebook Instant Articles только «для элиты». Но мы бы предпочли, чтобы Google создал модель приоритетной загрузки в HTML5.

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

    Источник: code.tutsplus.com

    Насколько полезным был этот пост?

    Нажмите на звезду, чтобы оценить этот пост!

    Средний рейтинг: 5 / 5. Количество голосов: 2

    Как правильно настроить WordPress AMP

    Согласно исследованиям проводимым Google, более 50% поисковых запросов по всему миру производятся с мобильных телефонов. В связи с этим стоит убедиться, что ваш сайт на WordPress загружается быстро и выглядит прилично для этой категории производящих поиск пользователей. К счастью, проект Google Accelerated Mobile Pages (AMP) делает эту задачу более легко выполнимой.

    В этом руководстве мы расскажем, как установить WordPress AMP двумя способами:

    Мы также поясним, что такое WordPress AMP и обсудим, как проверить их корректность работы после установки. Погружаемся!

    Что такое WordPress AMP и чем он полезен для вашего сайта

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

    Если кратко, то Google AMP работает таким образом, что позволяет вам создавать дубликат вашего сайта, используя AMP HTML. Этот процесс исключает большинство элементом, которые могут привести к медленной загрузке вашего сайта (JavaScript, сторонние скрипты др.). Затем Google обрабатывает и “сглаживает” ваш сайт, для ещё более быстрой его загрузки. После этого результаты будут выглядеть где-то так:

    Google AMP обеспечивает множество преимуществ, хотя он имеет некоторые недостатки. Давайте изучим обе стороны медали. Начнём с преимуществ:

    • Улучшение поисковой оптимизации (SEO). Наиболее очевидным преимуществом Google AMP является прирост скорости. Так как скорость – это критический фактор, когда речь идёт о рейтинге ваших страниц в результатах поиска (Search Engine Results Pages – SERPs), это может помочь сделать ваш сайт более заметным. Google AMP гарантирует, страницы вашего сайта будут показаны в новостной карусели Google (Google News carousel), в приоритетном расположении вверху в не требующей прокрутки области результатов поиска на мобильных (ещё больше повышает SEO позиции).
    • Улучшенный интерфейс пользователя. Было подсчитано, что 33% всех потенциальных продаж теряются, если веб-сайт не оптимизирован под мобильные устройства. Ещё более тревожные результаты исследований показывают, что 57% пользователей интернета не станут рекомендовать бизнес с сайтом, который не адаптирован для мобильных устройств. Google AMP делает такую оптимизацию простой и возможной и тем самым позволяет избежать этой опасности.
    • Повышенная производительность сервера. Google AMP извлекает выгоду из некоторых ключевых функций оптимизации Google. Уменьшает трафик от изображений до 50% без потери качества и снижает нагрузку на работу сервера. Снижая нагрузку на сервер, AMP помогает улучшить производительность вашего сайта.

    С другой стороны, у Google AMP есть и свои недостатки:

    • Ограничения каскадных таблиц стилей (Cascading Style Sheets – CSS) и JavaScript. Хотя Google AMP позволяет вам достичь молниеносного времени загрузки, это может вам стоить отдельных элементов сайта. AMP удалит графику очень высокого качества, сложную анимацию и другие яркие элементы, которые используют CSS и JavaScript.
    • Отображаются только страницы из кэша. Высокая скорость Google AMP также является следствием того, что Google включает отображение версии ваших страниц из кэша. По этой причине ваши пользователи не всегда смогут получить доступ к последним версиями контента.
    • Ограниченные возможности доступа к рекламным объявлениям. Не смотря на то, что Google AMP поддерживает рекламу, процесс её описания очень сложен. Он также имеет ограниченные возможности интеграции с внешними рекламными платформами.

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

    В следующем разделе мы опишем два метода установки WordPress AMP при помощи нескольких удобных плагинов для ускорения мобильных страниц в WordPress.

    Как установить WordPress AMP при помощи двух плагинов

    Для установки AMP на вашем сайте вам потребуется плагин WordPress AMP. Прежде чем продолжить с этим или следующим методом мы рекомендует сделать бэкап вашего сайта на WordPress. После этого у вас всё готово к началу.

    Вариант 1: Используем плагин AMP для WordPress

    Плагин AMP for WordPress прекрасный инструмент, если вы хотите установить AMP для своего WordPress сайта быстро и просто. Хотя версия по умолчанию содержит минимальное количество функций для настройки AMP, эти опции могут быть расширены при помощи дополнительных плагинов. Дальше мы рассмотрим этот процесс. А сейчас давайте перейдём к тому, как установить сам плагин.

    Прежде, перейдите в Плагины › Добавить новый в своей консоли администрирования WordPress. Введите “AMP for WordPress” в строке поиска и найдите плагин AMP для WordPress. Затем установите и активируйте его:

    Далее перейдите в раздел Внешний вид > AMP. Это откроет страницу настроек AMP. Здесь выберите вкладку Design:

    На этой странице вы можете настраивать вид своего сайта WordPress AMP по своему предпочтению и просматривать предварительно любые изменения, перед тем как опубликовать их. Вы можете настраивать текст своего сайта, ссылки и цвет фона. Плюс, мы можете выбрать, какую цветовую схему вы хотите использовать – светлую или тёмную (т.е. черную или белую) для своего сайта. Когда внесённые настройки вас будут полностью устраивать просто нажмите Publish вверху страницы.

    Ещё вы можете установить, где записи, страницы или и те и другие будут располагаться в WordPress AMP. Чтобы это сделать, просто вернитесь в консоль WordPress и перейдите в AMP > General:

    На этой странице отметьте рядом с настройкой Post Type Support те види публикаций, которые вы хотели бы видеть на сайте WordPress AMP и нажмите на Save Changes.

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

    Перейдите в Плагины Добавить новый, найдите, установите и активируйте Yoast SEO:

    После этого сделайте тоже самое с плагином Glue for Yoast SEO & AMP. Затем перейдите в SEO AMP в админ консоли. Здесь вы можете выбрать, хотите ли вы включить записи и медиа типы данных в поддержку AMP:

    После этого нажмите кнопку Save changes. Дополнительные настройки можно найти на вкладке Design. Здесь вы можете установить иконку для сайта WordPress AMP, подобрать цветовую схему и даже добавить свой CSS:

    И ещё раз не забудьте сохранить изменения, когда вы закончите настройку своего сайта.

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

    Вариант 2: Установка плагина AMP для WP – Ускоренные мобильные страницы

    В дополнение для обеспечения привлекательного и удобного для начинающих интерфейса настройки страниц этот плагин WordPress AMP может интегрироваться с множеством других инструментов. Среди них: WooCommerce (ведущий плагин для электронной коммерции в WordPress), Alexa metrics, OneSignal push button notifications и другие.

    Для использования этого плагина AMP для WordPress, вначале нужно перейти в Плагины > Добавить новый в вашей консоли. Найти “AMP for WP”, установить и активировать плагин:

    Далее перейдите на новую вкладку AMP в админ панели WordPress. Вы увидите подпункты меню с разделами Settings, Design, Extensions и другие. Давайте подробнее посмотрим на настройки в Settings:

    Скорее всего вы захотите начать с раздела руководства со ссылками Getting Started на этой страница. Это поможет вам самым лучшим образом настроить свой WordPress AMP. После этого, вы можете запускать разные опции AMP для WP, включая:

    • SEO: Это включает настройки мета описания, интеграцию с плагинами SEO и другое.
    • Performance: Это единая настройка включающая и выключающая минификацию файлов. Минификация может улучшить скорость работы вашего сайта.
    • Analytics: Здесь вы можете настроит интеграцию с Google Tag Manager, также как и настройки аналитики.
    • Comments: Это позволяет настроить хотите ли вы включить комментарии WordPress, Disqus или Facebook в своём WordPress AMP.
    • Advanced Settings: Вы можете вводить свой HTML код для заголовка или подвала, установить мобильное перенаправление и включить или выключить retina images.

    Нажмите на Save Changes для каждой настройки выше, как только вы закончите с ней. После этого выберите вкладку Design:

    Собственно здесь вы можете управлять внешним видом своего сайта WordPress AMP. Для этого выберите конкретную тему AMP из списка в меню Theme Selector.

    После выбора темы вы можете настраивать её внешний вид. Вы найдёте настройки дизайна для цветовой схемы и шрифта (вкладка Global), выбор отображения заголовка и подвала, слайдер на главной странице и многое другое. В разделе Social вы можете также выбрать, какие кнопки социальных сейте вы желаете отображать на своём сайте WordPress AMP.

    Если вы довольные видом своего AMP-сайта, сохраните все изменения. Вы также можете предварительно их посмотреть, если перейдёте в Appearance > AMP:

    Бесплатная версия AMP для WP содержит широкий набор функций. Однако, вы можете значительно улучшить внешний вид и функциональность вашего сайта AMP с платными расширениями. Есть расширения для описания рейтинга (будет полезным для товаров или профилей недвижимости), интеграции с AMP WooCommerce Pro, использования пользовательских типов записей и другого:

    Платные темы AMP также доступны после оплаты. Посмотреть их можно в разделе Design > Themes в вашей админ консоли. Есть специальные настройки, которые подойдут для определённых видом сайтов, как например, сайтов новостей, журналов и так далее. Плюс, есть несколько замечательных многоцелевых тем:

    Если вы желаете попробовать ещё больше дополнительных функций, то для вас целый ряд тарифных планов Pro plans доступных для этого плагина. Диапазон от плана Personal (обслуживание одного сайта за $149 в год) до плана Agency (обслуживание неограниченного количества сайтов за $499 в год).

    Как проверить корректность работы своего сайта WordPress AMP

    Когда вы настроили любой из плагинов AMP для WordPress, вы подошли к ещё одному шагу. Вам нужно проверить работу WordPress AMP, чтобы убедиться, что он доступен и залинкован на supported platforms. Проверка – это также удобный путь посмотреть ошибки AMP с целью их устранения.

    Один их быстрых и простых способов проверить AMP – использовать инструмент разработчика в браузере. Для этого вам нужно открыть страницу AMP в вашем браузере (в нашем примере мы используем Google Chrome). Дальше вам нужно добавить следующее в конце URL:

    Как только вы это сделаете, откройте консоль инструментов разработчика в браузере. Для Google Chrome это Chrome DevTools console. Если найдены ошибки, они будут подсвечены красным, вместе с анализом их причин.

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

    Другой эффективный способ проверки AMP – использование расширения AMP Validator для Google Chrome и Opera:

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

    Заключение

    Даже несколько дополнительных секунд времени загрузки могут значительно снизить рейтинг вашего сайт в поисковиках (и ваш коэффициент конверсии). К счастью, как мы уже видели, использование Google AMP может помочь вам убедиться, что страницы вашего сайта загружаются молниеносно на мобильных устройствах. Что ещё, конфигурация и тонкая настройка AMP для WordPress – это просто и понятно, если вы используете правильный плагин WordPress для ускоренных мобильных страниц.

    У вас остались вопросы о том, как установить какой-либо плагин WordPress AMP? Дайте нам знать в комментариях!

    Что нужно знать о плагинах AMP для сайтов на WordPress

    Что такое AMP?

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

    Технология состоит из трех частей:

    • AMP HTML — разметка HTML, где используется ряд специальных тегов AMP;
    • AMP JS — библиотека, которая обеспечивает быструю визуализацию страниц AMP HTML;
    • Google AMP Cache — используется для предоставления страниц AMP HTML.

    В России AMP пока не поддерживается (есть непроверенная информация, что скоро появится). Сейчас можно посмотреть демо-версию на мобильном телефоне или планшете. Для этого перейдите по адресу http://g.co/ampdemo и вбейте в строку поиска любой запрос. Если у страниц по вашему запросу есть AMP-версии, вы увидите их в выдаче. Вот, что Google показывает по запросу «новости»:

    Google рассказывает, что означает логотип AMP

    При клике на карточку пользователь не попадает на сайт, а все еще остается в Google

    При клике на карточку пользователь не попадает на сайт, а все еще остается в Google

    Зачем это нужно?

    Цель технологии AMP — мгновенно загружать страницы в мобильной выдаче. Она разработана в первую очередь для пользователей, у которых нет доступа к быстрому интернету через 4G, LTE или Wi-Fi.

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

    Что вебмастер должен знать об AMP?

    — AMP-страницы не заменяют мобильную версию сайта или адаптивную верстку. Карточки AMP — один из вариантов интерфейса поисковой выдачи.

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

    — AMP работает не со всеми рекламными платформами и не со всеми системами аналитики.

    AMP на WordPress

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

    При выборе плагина обращайте внимание на совместимость с вашей версией WordPress.

    Самый популярный (100 000+ установок) плагин — Accelerated Mobile Pages от Automattic. После его установки у всех страниц сайта появляются версии AMP. Он дает мало возможностей для брендинга, но работает с разными плагинами-кастомайзерами.

    Как установить:

    1. Загрузите папку с файлами плагина в директорию /wp-content/plugins/.
    2. Активируйте его через меню «Плагины» в админке WordPress.
    3. Может потребоваться обновить пермалинки (перейти в Настройки > Пермалинки и нажать «Сохранить»).

    Редакция портала SEO-hacker советует: для того чтобы перенаправлять «мобильных» посетителей на AMP-страницы, после установки AMP от Automattic вставьте в файл .htaccess следующее:

    Илон Маск рекомендует:  zoom в CSS

    После запуска этого плагина для всех постов на вашем сайте будут генерироваться AMP-совместимые версии. Получить доступ к соответствующим страницам можно будет с помощью добавления постфикса /amp/ к URL-адресам. Например, если URL поста выглядит так: http://example.com/on/, то доступ к AMP-версии можно будет получить по адресу http://example.com/on/amp/.
    Обратите внимание: AMP-страницы не будут показываться всем пользователям мобильных устройств, их можно будет увидеть только в мобильной выдаче Google.

    Еще плагины

    AMP Recent Posts

    Плагин, который показывает ваши недавно опубликованные посты.

    AMP Customizer

    Позволяет менять внешний вид AMP-карточки: добавить лого, поменять цвет хедера, цвет заголовка и текста поста.

    AMP Analytics

    Позволяет подключить аналитику к вашему плагину AMP.

    AMP от PageFrog

    Работает с AMP от Automattic. Позволяет брендировать посты, использовать рекламу из Facebook и AdSense и поддерживает аналитику.

    Я решил отключить Google AMP на своём сайте

    Меня связывает с проектом Google’s Accelerated Mobile Pages (AMP) долгая история, но вчера чаша терпения переполнилась.

    Я зашёл в Twitter (в Safari на iPhone 6) и заметил, что кто-то сослался на мой сайт, поставив ссылку AMP. Я ответил и указал настоящую ссылку, но когда нажал на неё, то меня перенаправило обратно на версию AMP моей страницы.

    Thanks for sharing here is non amp link so all images load: https://t.co/6drRK5Cugz

    Я скопировал ссылку, сгенерированную Twitter, и заметил, что она выглядит так:

    Обратите внимание на amp=1 в ссылке. Когда на неё нажимаешь, она возвращает такую HTML-страницу:

    Единственное предназначение этой страницы — перенаправить читателя на версию AMP.

    Мои проблемы с AMP как издателя

    Когда проект AMP появился, я воспринял его оптимистично. Его целью было сделать веб быстрее, а я уважаю такую цель.

    Что мне ОЧЕНЬ не понравилось как издателю — это то, что Google кэшировал контент AMP и выдавал его из своего собственного кэша и под собственным доменным именем. В результате, ссылки выглядели так:

    Другими словами, вместо выдачи контента с BBC.co.uk, он поставлялся с Google.com.

    У такого подхода есть несколько проблем:

    1. Он «заманивает» пользователей на Google. Если человек нажмёт “x” на верхнем скриншоте, его отправят обратно к результатам поиска Google. Нормальный редирект отправил бы пользователя на реальный сайт BBC, увеличивая шансы, что он останется на том сайте. Вместо этого AMP делает проще для пользователей вернуться на Google. Это функциональность, которая в браузере всегда доступна по кнопке «Назад». Это плохо для издателей, но скорее всего неуместно и для самих пользователей.
    2. Он делает систему уязвимой для злоупотреблений. Например, фейковые новости при публикации через AMP могут показаться достоверными неподготовленному читателю, поскольку они поставляются с Google.com — очень уважаемого домена.

    Как ни странно, это НЕ то, что делает Twitter

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

    Мои проблемы с AMP как пользователя

    AMP состоит из трёх компонентов: HTML, библиотека JavaScript и кэш. В предыдущем разделе я говорил о своих претензиях к кэшу. Преимущетво кэша, как объяснили мне разработчики Google AMP, в том, что он позволяет Google (или любой другой платформе) осуществлять предварительную загрузку контента для пользователя. Когда пользователь нажимает на ссылку AMP, Google может вывести результат практически мгновенно, поскольку он уже получен в фоновом режиме.

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

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

    Неудобная прокрутка

    На iPhone AMP переназначает дефолтную прокрутку в браузере. В результате скроллинг на страницах AMP как будто отсутствует.

    Трудно делиться ссылками

    AMP затрудняет обмен ссылками на оригинальный контент.

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

    Примечание: Какой бы она ни была неудобной, но кнопка с оригинальной ссылкой — большой шаг вперёд в интерфейсе AMP. Изначально пользователям приходилось вручную удалять часть https://www.google.com/amp/ из адреса.

    Я готов пройти через эти трудности, потому что мне не нравится читать контент AMP и потому что я хочу убедиться, что доверяю верному источнику по этой ссылке. Уверен, что большинство пользователей не производят всех этих шагов. Они просто копируют полную ссылку AMP, вроде https://www.google.com/amp/www.bbc.co.uk/news/amp/39130072 , и делятся ею. Моя жена, например, постоянно присылает мне такие ссылки. Для меня действительно удивительно, что большие издатели не обеспокоены этим фактом настолько же, насколько я.

    Контент AMP обычно разделён на части

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

    Преимущество технологии AMP в том, что она накладывает жёсткие ограничения на контент, тем самым гарантируя его быструю загрузку. Проблема такого подхода заключается в том, что в AMP попадает не весь контент. Например, комментарии часто удаляются.

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

    Есть много других маленьких нюансов для разных сайтов. Например, комментарии Reddit (очень важная часть сайта) кэшируются в AMP. В результате, новые комментарии, которые видны в десктопной версии Reddit, не отображаются в версии AMP, пока кэш для этой страницы не обновится.

    AMP обязателен для пользователей

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

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

    Почему я изначально подключил AMP для своего сайта

    Я изначально подключил AMP для своего сайта только по одной причине — хорошее место результатах поиска Google.

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

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

    Она распространяется

    Я подумал об отключении AMP, когда впервые узнал, что Google загружает мой сайт из кэша, но передумал по двум основным причинам:

    1. Я хотел сохранить позиции в поиске.
    2. Я хотел оставить AMP как опцию для тех читателей, кому это нужно.

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

    Менее двух недель назад я написал следующее:

    «У меня нет проблем с самой библиотекой AMP. Меня не волнует, что Facebook Instant Articles или Pinterest используют AMP».

    Как я ошибался. Я думал, что меня это не волнует, пока не увидел свою ссылку в Twitter с указанием рендеринга в формате AMP.

    Пользователям это не нужно

    Несколько недель назад кто-то в Twitter обвинил меня в том, что я не люблю AMP, потому что у меня «привилегия» быстрого интернета. Хотя у меня и вправду быстрый интернет, не думаю, что использовал бы AMP даже на медленном соединении. Я бы скорее отключил JavaScript в браузере (может быть, даже изображения, если всё действительно настолько плохо). Это может работать не для всех сайтов, но мой сайт рендерится и кэшируется на стороне сервера. Пользователям нужно всего лишь скачать немного HTML, чтобы увидеть любую страницу. Зачем заставлять их скачивать библиотеку AMP JavaScript?

    Конечно, у нас есть AMP, потому что Google хочет, чтобы пользователи видели рекламу, которая практически отсутствует при отключенном JavaScript. Я тоже хочу, чтобы пользователи видели рекламу (рекламу Google, между прочим), так я оплачиваю расходы на сервер. Тем не менее, я радостью позволю человеку на плохом соединении отказаться от этой части сделки.

    В любом случае, для проверки своей теории я открыл Chrome Developer Tools, чтобы придушить своё соединение до максимально медленного варианта, и отключил JavaScript. Я открыл статью на своём сайте, и она загружалась три секунды. Я попытался использовать поиск Google, и он оказался ошеломительно быстрым, но там не было никаких ссылок AMP. Конечно не было, ведь они показываются только при включенном JavaScript.

    Я снова включил JavaScript (сохранив низкой сетевую скорость) и попытался поискать какой-нибудь контент AMP. Заняло более 10 секунд просто загрузить «карусель» с новостями.

    Как и ожидалось, статический контент (без JavaScript) по-прежнему на высоте.

    Пожалуйста, высказывайтесь

    Впервые я написал о своих опасениях насчёт AMP девять месяцев назад. Та статья привлекла некоторое внимание на Hacker News, и ребята с отдела Google AMP активно участвовали в обсуждении на Hacker News и в комментариях к моей статье. Они даже зашли настолько далеко, что пригласили меня на обед, чтобы лучше узнать о моих опасениях.

    Две недели назад я написал похожую статью под названием «Пожалуйста, сделайте Google AMP необязательным». Он получил намного больше внимания на Hacker News, чем первоначальная статья (вошёл в Топ-300 постов за всю историю), но по-прежнему никак не повлиял на позицию разработчиков Google AMP.

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

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

    Однако те из нас, кому не по душе AMP, должны сражаться.

    У вас есть сайт WordPress? Отключите AMP или не включайте его, если он отключен.

    Вы работаете на издателя, у которого включена поддержка AMP? Попробуйте объяснить своему работодателю опасности AMP, как он может терять трафик и узнаваемость бренда.

    Вы просто веб-разработчик? Попробуйте делать более быстрые сайты и избегайте перегрузки скриптами. Есть множество справочных ресурсов, которые помогут справиться с этой задачей (например, см. заметки с Chrome Dev Summit). Будет проще бороться с AMP, если большинство сайтов будут быстро загружаться, даже на слабых соединениях.

    Решение отключить AMP пришло не сразу. К счастью, отключить его на WordPress было почти так же просто, как и подключить. Достаточно просто дезактивировать плагин. Менее чем через 24 часа Google прекратил показывать версию AMP моего сайта в своих результатах поиска.

    Зачем вам нужен 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 подходит вашему сайту, есть время и ресурсы, почему бы и не подготовить сани летом сайт заранее ))

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