AMP-страницы получили поддержку пользовательского JS-кода

Содержание материала:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как включить пользовательский JS в AMP Page через SW?

Мы просмотрели все возможные блоги AMP, но не смогли найти способ включить пользовательский JS в AMP. Этот блог ( https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker ) указывает, что мы можем добавить пользовательский JS в AMP с помощью работника службы, но не опишите, как это сделать.

Пожалуйста, дайте нам знать, как это сделать.

Изменить: — После добавления JS во время выполнения, он снова показывает ту же старую ошибку, пожалуйста, посмотрите на изображение

Отметьте в упомянутом сообщении в блоге, что вы можете расширить свои страницы AMP

как только они подаются от происхождения

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

Надеюсь, это поможет!

Да, хорошо, я понимаю, что ты имеешь в виду. Вы можете сделать это, добавив этот код к работнику службы:

Это динамически добавит файл extra.js ко всем страницам *amp.html которые запрашивает ваше приложение. Я верю, что это все еще будет подтверждено, но я не проверял это.

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

На этом ресурсе я нашел пример кода (он имеет мягкий платный доступ).

Глаза боятся, а руки делают. Подключаем 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 не будет работать с этой страницей.

Топ-пост этого месяца:  Основы SVG Группы

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

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

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

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

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

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

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

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

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

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

Свои стили

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Google AMP для SEO

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как включить пользовательские JS в AMP Страница через SW?

Мы прошли от всех возможных блог АМФА , но не смогли найти какой — либо способ включить пользовательские JS в AMP. Этот блог ( https://www.ampproject.org/docs/guides/pwa-amp/amp-as-pwa#extend-your-amp-pages-via-service-worker ) указывает на то, что мы можем добавить настраиваемого JS в AMP с помощью работника службы , но не описывает , как это сделать.

Пожалуйста, дайте нам знать, как это сделать.

Edit: — После добавления JS во время выполнения, он снова показывает ту же самую старую ошибку, пожалуйста, посмотрите на изображение

@ Ответ DavidScales является большим , если вы хотите , чтобы специально включить свой собственный JS через работника службы по какой — то причине. Кроме того, можно просто включить свой обычай JS в скрытом ампере-фрейме на странице. Обратите внимание , что все пользовательские JS должны быть изменены , чтобы ссылаться на родителя, так что он может получить доступ к DOM страницы — усилителя.

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

Обратите внимание, в упомянутом блоге, что вы можете расширить свои страницы AMP

как только они служили от начала координат

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

Надеюсь, это поможет!

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

Это будет динамически добавить extra.js файл на все *amp.html страницы , которые ваши запросы приложений. Я считаю , что это будет по- прежнему утверждать, но я не проверял.

Обратите внимание, что это будет работать только тогда, когда он служил с вашего происхождения (в отличие от AMP Cache), потому что это, где ваш работник службы имеет контроль.

Этот ресурс , где я нашел пример кода (он имеет мягкий платный доступ).

Internal Server Error

Error 500

This could be due to one of the following reasons:

.htaccess file was misconfigured

Permissions for the file requested on site were misconfigured

PHP or CGI code was misconfigured in the file that is requested on site

Site resources are approaching their maximum limits

Please contact the server administrator webmaster@coderlessons.com and provide the following information:

The time the error occurred

The actions you took prior to and immediately following the error. This will help the administrator better understand what may have caused the error. Please refer to the server error log for more information.

Как установить и настроить плагин 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

Грамотная и максимальная монетизация 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. В этом разделе можно включить вставку рекламных блоков между заголовком и самой статьёй, после статьи и в некоторых других местах.

    Топ-пост этого месяца:  CSS сетка и назначенные для нее элементы соотношение размеров

    Пример: нам необходимо вставить блок ссылок между заголовком и началом статьи. Мы создаём необходимый адаптивный блок ссылок в личном кабинете 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 страницах, дабы максимально их монетизировать, и в конечном итоге существенно поднять общую доходность с сайта.

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

    Что Google AMP означает для JavaScript сообщества

    Не думая о производительности веба, сообщество JavaScript ненамеренно проложило путь для AMP.

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

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

    Проблема JavaScript

    Поскольку я связался с JavaScript, я размышлял о возможных, разумных и полезных применениях JavaScript. С тех пор как JavaScript набрал силу в интернете, он был неправильно и чрезмерно использован. Раздражающие всплывающие окна. Нарушение взаимодействия с пользователем. Хрупкий, зависящий от конкретного браузера, недоступный код. Использование JavaScript, когда более надежная технология, расположенная ниже в стеке, была бы лучшим инструментом.

    В 2005 году я писал: «Сегодня JavaScript застрял в серьезном кризисе, просто проверьте текущее использование JavaScript на предмет удобства, доступности и совместимости». Пользователи не были полностью уверены, что JavaScript используется в их интересах. Часть веб-подкованных людей даже полностью отключила JavaScript, а некоторые по-прежнему принимают такие меры для обеспечения производительности, конфиденциальности и безопасности.

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

    Пользователь мобильного веба испытывает разочарование, и JavaScript, по крайней мере, частично виноват. К сожалению, проблема производительности JavaScript сложна. Вот неполный обзор:

    • Множество скриптов грузится с нескольких серверов. На некоторых сайтах скрипты сторонных сервисов преобладают и выходят из-под контроля.
    • Скрипты большие. Они генерируют сетевой трафик и тратят деньги пользователей.
    • Код сценариев, особенно код библиотеки и фреймворков, в основном не используется на странице. Одинаковый код загружается несколько раз.
    • Загрузка, анализ и выполнение скриптов блокирует загрузку и отрисовку самого важного контента.
    • Сценарии загружают контент отложенно, поэтому страница постепенно наполняется. Контент перескакивает, что ломает интерактивность пользователя и сажает батарею.
    • Выполнение скрипта использует ЦП, препятствуя взаимодействию с пользователем и истощая батарею.
    • Скрипты нарушают цикл рендеринга браузера, вызывая рывки и прерывания.
    • Скрипты по-прежнему нестабильны из-за сбоя сети, разных браузерных рантаймов и проблем совместимости.
    • Скрипты рекламы и аналитики собирают данные об устройстве, создают профиль пользователя и сохраняют его в локальном хранилище, нарушая конфиденциальность пользователя.

    Важно понимать, что проблема JavaScript лежит в основе жалкого состояния производительности веба.

    Оптимизация производительности отстаёт

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

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

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

    Google показывает свою рыночную силу

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

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

    Два шага необходимы, чтобы разрубить гордиев узел веб-производительности:

    • Экспертиза и средства для создания жизнеспособного решения.
    • Ресурсы использовать и продвигать это решение.

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

    Авторитарное решение

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

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

    Создание жизнеспособного решения — это лишь половина работы. Распространить его на весь веб — другая. Поэтому Google даёт преимущество страницам AMP в мобильном поиске Google. Страницы AMP отображаются в «новостной карусели» вверху и отмечены символом молнии. Они загружаются «встроенно», поэтому навигация между списком результатов поиска и сайта кажется мгновенной.

    Один JavaScript, чтоб править всеми

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

    С AMP вам нужен только один JavaScript, так называемый AMP runtime. Это JavaScript с открытым исходным кодом, разработанный Google. Это не библиотека, которую вы можете использовать в своем собственном JavaScript. На самом деле, вы больше не должны писать JavaScript. Вместо этого вы объявляете пользовательские элементы в своем HTML и AMP JavaScript превращает их в интерактивные компоненты.

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

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

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

    Сообщество Open Web должно признать поражение

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

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

    В частности, сообществу JavaScript не удалось устранить необузданное злоупотребление JavaScript и негативное влияние JavaScript на производительность веб-сайта. Средний сайт в настоящее время загружает 23 скрипта общим объемом 426 кбайт сжатого кода JavaScript. Сегодня легко настроить проект с помощью React, Angular или даже jQuery, добавить некоторые распространенные сторонние скрипты и в конечном итоге закончить с мегабайтами блокирующего кода JavaScript, грузящегося с нескольких серверов.

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

    Демократизируя производительность веба

    Неудивительно, что одностороннее, авторитарное решение более эффективно, чем разбросанные усилия экспертов по JavaScript и веб-производительности. Но не желательно и не устойчиво создавать «вторую паутину», в первую очередь для поиска Google для мобильных устройств. Запрет всего существующего JavaScript и переписывание его с нуля — не жизнеспособное решение. Таким образом, влияние AMP на большую сеть пока неясно.

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

    Как я добавил код Google Adsense на ускоренные мобильные страницы (AMP) WordPress

    Эра мобильных устройств привела к тому, что их стали использовать повсеместно, а поисковый гигант начал выполнять ранжирование сайтов, учитывая наличие на ресурсе таких страниц – легких и оптимизированных для планшетов и других девайсов. Дальше – больше. Владельцам сайтам, для которых доход от рекламы – не просто пустой звук, а главный способ обеспечивать себя и свою семью, приходится думать о том, как добавить код Google Adsense на AMP-страницы. Рассмотрим этот вопрос на случае, когда для создания мобильного контента на вашем сайте на Вордпресс используется специальный плагин, называемый WordPress AMP by Automattic. Вместо того чтобы ставить еще один плагин, внесем небольшие правки в единственный файл – functions.php вашей темы. Но обо всем по порядку.

    Четыре способа вставки кода Google Adsense на AMP-страницы

    Отталкиваемся от того, что плагин WordPress AMP by Automattic настроен и работает, а Гугл в панели вебмастера больше не выдает предупреждения об отсутствии оптимизированных страниц. Чтобы добавить рекламный код Adsense на ускоренные мобильные страницы, сгенерированные плагином, можно воспользоваться несколькими способами, в зависимости от того, куда именно будет вставляться код:

    • Над содержимым страницы.
    • Над контентом, а также в текст после определенного количества абзацев.
    • Вставка кода Google Adsense в контент AMP-страницы WordPress после определенного количества абзацев.
    • Четвертый пример создает один короткий код для вызова рекламного блока. Он работает как на обычных, так и на ускоренных мобильных страницах, чтобы отображать ваши объявления. Своего рода «швейцарский нож» универсального назначения.

    Таким образом, по функционалу эти способы расположены в порядке нарастания возможностей. Иногда может быт полезным первый вариант. Во-многих случаях – второй и третий. Четвертый же, однажды настроенный – полностью обеспечит вас необходимыми инструментами для вставки кода Гугл Адсенс в произвольное место на странице Вордпресс при использовании плагина WordPress AMP от Automattic.

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

    Для всех четырех способов необходимо наличие соответствующего рекламного блока (адаптивного) и добавление сценария javascript для поддержки элемента amp-ad.

    Для создания нового объявления необходимого формата в панели управления Google Adsense выполните последовательность таких действий (по состоянию на октябрь 2020 года):

    • «Мои объявления».
    • «Рекламные блоки».
    • «Новый рекламный блок».
    • Выбрать «Объявления в статье» с отметкой «Нативный».
    • В появившейся форме вписать название нового рекламного блока AdSense и указать необходимые настройки (шрифт, цвет текста и заголовка, фон рекламы).
    • После нажатия кнопки «Сохранить и получить код» объявление будет создано.
    Добавить комментарий