Пример: настройка AMP на сайте WordPress

1. Для чего нужен AMP?
2. Как работает AMP
3. Каким должен быть наш сайт?
4. Какие сайты должны AMPizzare?
5. Понять, следует ли создавать версию содержимого AMP путем анализа доступа
6. Как сделать AMP-версию сайта WordPress
7. Тест AMP на локальной версии сайта
8. Установите плагины AMP
9. Настройте внешний вид страницы AMP
10. Типы постов с поддержкой AMP
11. Настройте дизайн
12. Обновление плагина AMP 0.4
13. Введите AMP Analytics
14. Анализируйте ошибки страниц и исправляйте их
15. Как плагины AMP работают на WordPress
16. Что такое «контент»
17. Анализ моего контента
18. Как я очистил код рейтинга звезд КК
19. Внести изменения с локального сайта на производственный сайт
20. Анализ индексации страниц AMP с помощью Google Search Console
21. Различия во времени загрузки

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

Для чего нужен AMP?

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

Для этого, однако, необходимо отказаться:

• пользовательский рисунок наших страниц, переход на довольно «стандартную» верстку;
• взаимодействие с нашими пользователями, из-за отсутствия форм;
• интерактивность наших страниц, так как невозможно использовать анимацию и / или Javascript;

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

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

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

Схематически можно сказать, что сегодня AMP работает так:

• Я создаю AMP-версию своего контента, к которой пользователь вряд ли сможет получить ее прямо с моего сайта;
• поисковая система читает, что есть AMP-версия моих страниц, и пользователи, приходящие с мобильных устройств, при поиске показывают URL-адрес, который указывает на AMPate-версию моего контента;
• пользователь (с мобильного устройства) попадает на версию Accelerated Mobile Page, но при втором щелчке по URL-адресу, соответствующему моему домену, изменяется классическая версия;

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

Каким должен быть наш сайт?

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

Какие сайты должны AMPizzare?

Как упоминалось в предыдущем абзаце, не все сайты требуют версию AMP .

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

• разметка «Ускоренная мобильная страница» не поддерживает много элементов, необходимых для страниц этого типа, и по этой причине код не будет проверен;
• в версии AMP сайт теряет добавленную стоимость и назначение контента, предоставляемого этими элементами странице, и ускоряет его загрузку для мобильных пользователей.

Понять, следует ли создавать версию содержимого AMP путем анализа доступа

Анализируя доступ к нашему сайту, мы сможем понять:

• сколько процентов мобильных пользователей;
• поведение этого пользователя (время на странице, отскок и действия, которые он предпринимает);
• на какой тип контента попадает, когда он исходит от поисковой системы;

После изучения данных мы сможем понять, если (если мы оптимизировали все другие факторы, такие как мобильная версия, SEO на месте и т. д.):

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

Эти простые анализы могут быть выполнены с Google Analytics связана с поисковой консолью ,

Вернуться к резюме

Как сделать AMP-версию сайта WordPress

После принятия решения о разработке AMP-версии для нашего сайта, созданной с помощью WordPress, целесообразно выберите какой плагин использовать ,

Есть несколько, и на этом сайте я говорил вам в прошлом о сайте Frog ( Мгновенные статьи Facebook и страницы AMP Google ) и программное обеспечение, разработанное Automaticc (AMP) , но в каталоге плагинов WordPress сегодня есть много других.

Я выбрал установку последнего по ряду причин:

• Automattic означает практически WordPress, что вкратце является гарантией при создании программного обеспечения для WP;
• сообщество разработчиков этого плагина видит разные фигуры, работающие над этим программным обеспечением;
• мне кажется, что было зарегистрировано меньше ошибок, чем в других плагинах;
• больше людей используют его и имеют более активные установки;
• он очень легкий и делает только то, для чего был рожден: создание AMP-версии нашего контента;
• обновления кажутся мне более частыми, чем другие плагины;

Затем, чтобы добавить аналитический код AMP (классический код отслеживания НЕ будет работать) и немного стилизовать внешний вид наших будущих скудных страниц, я установил еще один плагин, созданный командой Joost de Valk: Клей для Yoast SEO & AMP ,

Тест AMP на локальной версии сайта

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

После проведения всех тестов и анализов мы можем рассмотреть возможность внесения изменений в производственную зону и на онлайн-сайт.

Установите плагины AMP

Установка двух плагинов является классической версией WordPress, единственное замечание - обратить внимание на порядок, в котором они активированы и, прежде всего, используется Glue для Yoast SEO & AMP. Этот плагин на самом деле использует я SEO-метаданные, настроенные с помощью Yoast и без этого не может работать.

Итак, в этом случае, который мы собираемся проанализировать, целесообразно предусмотреть, что:

После выполнения этой процедуры у нас будет AMP-версия всех наших статей , к которой мы можем обратиться, добавив суффикс / amp / к нашим постоянным ссылкам, в случае, если мы настроили их «говорящие», то есть с иной структурой, чем простая . Если наши постоянные ссылки являются конфигурацией WordPress по умолчанию (и с точки зрения SEO это не очень хорошо), мы можем достичь AMP-версии наших статей, добавив суффикс? Amp = 1 к нашим URL-адресам.

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

Настройте внешний вид страницы AMP

Благодаря расширению плагина Yoast для AMP мы можем внести некоторые изменения в внешний вид нашего скудного макета для содержимого, отображаемого с кодом AMPizzato.

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

Типы постов с поддержкой AMP

Благодаря этому расширению Yoast мы можем активировать AMP-версию не только статей, но и других типов постов WordPress.

В моем случае я оставил только выбранные статьи, что касается Страниц, Медиа и (в моем случае, пользовательского типа поста) просмотров, которые я не хотел генерировать AMP-версию.

Настройте дизайн

Как вы можете видеть на скриншоте ниже, мы можем установить минимальный графический аспект AMP-версии нашего контента.

На нашей странице мы можем связать значок, который появится в левом верхнем углу, с минимальным размером 32x32px . Если, как и в моем случае, у вас уже есть установить значок вашего сайта для устройств Apple Вы можете использовать его в этом случае.

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

Обновление плагина AMP 0.4

Внимание! Начиная с версии 0.4 плагина Automattic AMP , можно настроить цвета панели заголовка непосредственно с этим программным обеспечением. Эти настройки переопределяют информацию, предоставляемую Yoast's Glue, поэтому будьте внимательны при настройке цветов. Чтобы отредактировать цвета верхней панели вашего сайта в версии AMP, войдя в систему в качестве администратора в WordPress, перейдите в « Внешний вид»> «AMP» , где вы можете установить правильные цвета.

Затем я добавил метагаз, чтобы стандартизировать строку URL браузера в поле «Дополнительный код», где можно добавить дополнительный код между тегами <head> версии AMP. Благодаря этой системе я надеюсь, что в будущем пользователи, когда они будут пользоваться поисковой системой Google с браузером Chrome на мобильном устройстве , будут видеть мои страницы AMP более или менее следующим образом.

Введите AMP Analytics

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

Для этого уместно знать, что:

• код отслеживания не будет отображаться на наших страницах AMP, как если бы у них была совершенно другая графическая тема, чем у одного набора;
• обычный код Google Analytics не работает и требуется AMP Analytics;

Чтобы решить эту проблему, Yoast предоставил в своих настройках вкладку, в которой можно установить код AMP Analytics, к которому мы должны будем добавить наш идентификатор отслеживания .

Итак, давайте перейдем в Google Analytics, выберите свойство для нашего сайта и перейдите в Администрирование> Свойства> Информация мониторинга> Код отслеживания, мы получаем наш идентификатор и в следующем коде заменим его на XX-XXXXXXXX-X .

<amp-analytics type = "googleanalytics" id = "analytics1">
<script type = "application / json">
{
"vars": {
"account": "XX-XXXXXXXX-X"
},
"триггеры": {
"trackPageview": {
"на": "видимый",
"запрос": "просмотр страницы"
}
}
}
</ Script>
</ Amp-аналитика>

Затем мы копируем и вставляем новый код отслеживания AMP Analytics в текстовое поле, предоставленное Yoast, и сохраняем изменения.

Код будет работать, получая посещения, когда они приходят на страницу, но я должен сказать, что по сравнению с классическим я заметил проблему: хотя я исключил некоторые статические IP-адреса из Analytics, чтобы не «испачкать посещения», этот код требует того же.

Анализируйте ошибки страниц и исправляйте их

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

Вернуться к резюме

Как плагины AMP работают на WordPress

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

На практике в версии AMP плагины получают информацию, относящуюся к:

• Заголовок сообщения;
• Автор;
• Дата;
• Категория;
• Tag;
• Содержание;
• метатегов;

Эта информация затем используется в макете с допустимым кодом разметки AMP.

Поэтому, если мы перейдем к грязному одному из полей, перечисленных выше, с кодом, который не может быть проверен , у нас будут ошибки при анализе нашей новой страницы AMP. В частности, и в большинстве случаев это «грязный» контент из-за плагинов, которые внедряют шорткоды или разметку HTML / Javascript, которые не могут быть закодированы в версии Accelerated Mobile Page, а не, как думают некоторые, из-за используемой графической темы ,

Что такое «контент»

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

Когда мы хотим отобразить этот контент, мы можем использовать объект WP Codex с именем the_content ();.

Анализ моего контента

Например, в моем случае у меня есть определенный HTML-код из-за того, что в некоторых статьях Visual Composer и в целом для kk звездных рейтингов и лучшего клика в твиттере .

Анализ отдельных случаев с онлайн-инструментом для Анализ разметки AMP Я понял, что:

• почти весь код Visual Composer (и связанные с ним короткие коды) очищается плагином Automattic, за исключением некоторой разметки HTML, которая не может быть преобразована в AMP (например, динамически генерируемые графики);
• код, определенный для проверки рейтинга звезды kk, недействителен ;
• Разметка Better Click To Tweet проверяется и отображается , хотя я должен сказать, что ее вряд ли можно использовать;

Вот почему я решил:

• ничего не делать для графики, созданной с помощью Visual Composer, статьи, в которых они есть, нуждаются в этом контенте, иначе они теряют свое значение, поэтому правильно, что в версии MPA они не могут быть отображены;
• очистить содержимое от разметки звездных оценок kk;

Как я очистил код рейтинга звезд КК

Для отображения обзоров kk звездных оценок за пределами контента , то есть не в пределах того, что показано, когда мы вызываем объект the_content (); на наших страницах необходимо отключить действие плагина проверки для всего сайта и сделать его отображаемым в нашем макете в выбранной нами точке.

Затем я открыл файл, в котором отображаются мои статьи (в основном это всегда файл single.php, даже если в моем случае это другой файл) и сразу после вызова объекта the_content (); Я ввел следующий код:

<? php if (function_exists ("kk_star_ratings")): echo kk_star_ratings ($ pid); ENDIF; ?>

Эта строка сообщает CMS: если плагин kk star rating был активирован (в моем случае только для постов), то он показывает обзоры этого контента, определенные его идентификатором ( $ pid ).

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

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

Чтобы завершить эту операцию, я внес изменения в веб-сайт в следующем порядке:

• онлайн загрузка нового файла для просмотра статей в детской теме;
• загрузил подключаемые модули Automattic and Glue for Yoast AMP SEO & AMP;
• активированы оба плагина;
• настроил плагин Glue for Yoast SEO & AMP;

Вернуться к резюме

Анализ индексации страниц AMP с помощью Google Search Console

По мере того, как пауки поисковой системы Google сканируют AMP-версии моего сайта, мы можем видеть результаты на панели консоли поиска Google .

В GSC после выбора свойства, связанного с этим сайтом, в разделе « Aspetto nel ricerca> Ускоренная мобильная страница» мы можем видеть в течение нескольких дней, сколько страниц проиндексировано.

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

• 19/09 было проиндексировано 5 страниц;
• 20/09 проиндексировал 35 из них с ошибками 1 (страница с графиком, который я не исправляю);
• на 21/09 173 страницы были проанализированы и проверены, 3 с ошибками (все с графиком);
• 22/09 были 188, 4 с ошибкой (3 с разметкой относительно графиков, которые не должны быть исправлены, и 1 с ошибкой из-за грязного кода из-за случайного копирования меток и немедленного исправления);
• 23 сентября их было 193, всегда с 4 ошибками;
• 24/09 мы находимся на 217, и ошибки вернулись к 3 (всегда страницы с графиками);

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

Различия во времени загрузки

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

Как вы можете видеть из этого изображения время загрузки различно:

• если классическая страница загружается за 6,5 секунды, AMP занимает половину , 2,8 секунды;
• вес страницы 1,66 МБ уменьшился до 307 КБ: 18% от исходной страницы ;

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

Похожие

Комментарии