Плагин AMP нужен, чтобы пользователи мобильных устройств могли легко и быстро находить наши сайты. Для своих сайтов сделала такую прекрасную вещь. Установка очень легкая, доступная каждому блогеру. Даже совсем начинающий справиться. В мобильной версии статьи не только легко находятся, но и легко читаются. В низу страницы, на мобильной версии есть ссылка, через которую можно выйти и мгновенно оказаться на основной статье.
Плагин AMP – выбрать сложность установки
Скачала плагин из Word Press.org. Но здесь есть 2 похожих плагина. Например, один из них простой AMP. Второй тоже называется AMP, но только его название более сложное — accelerated mobile pages amp . Функции и настройки второго плагина тоже более сложные. Авторы над ним еще работают. Для себя выбрала вариант простого плагина и пока не пожалела.
В настройках плагина, авторы предлагают пользователю выбрать степень сложности настройки. В зависимости от технической подготовленности пользователя. Выясняют технический вы человек, или не очень. Например, я пользователь компьютера уверенный, но не программист, потому решила, что не очень технический. В результате вначале выбрала вариант «стандарт».
Плагин AMP — стандарт
Это когда весь сайт станет, как AMP. Но у обладателей мобильных устройств сайт быстрее открывается в варианте amp.
Настройку проверила в веб. мастере Гугл, перейдя из «основных показателей» в сервис «PageSpeed Insights».
Скорость страниц оказалась прекрасной, лучше не бывает – более чем 90%, для мобильных устройств и компьютеров. Однако в мобильном устройстве яркой картинки не было. Видно было только, как ищет поиск сайта. Причем это действо продолжалось неопределенно долго.
Кстати проверить, как работает вариант AMP плагина можно прямо из панели сайта администратора. Но я еще зашла на эту страницу, со своего мобильного телефона. В результате та же картинка — мобильный поиск долго ищет, но не находит. Все стало ясно, что настройку нужно переменить.
Настройка – читатель
В этой настройке сайт загружается в 2 отдельных шаблона. Сайт для ПК остается в первозданном виде. Для варианта amp авторы плагина предлагают выбрать простую, совместимую с плагином тему. Это темы прошлых лет, у меня даже обнаружилась к ним ностальгия. Однако на мобильных аппаратах они быстро находятся и прекрасно отображаются.
Интерфейс немного упрощенный, нет сложного меню. Для поиска статей предлагаются только архивы, за все годы. Настройки тоже проще и понятны. Хотя результат прекрасный. Сейчас только что настроила плагин, реакцию ПС, на нововведение, увижу позже.
Но авторы за 2 года плагин усовершенствовали, изменили и улучшили. ПС Гугл просто требует быстрых мобильных страниц.
Плагин AMP — переходный период
Некоторое время у меня стояла настройка «читатель». С ней скорость загрузки на мобильных устройствах увеличилась до 80-85%, и только. Для компьютеров она находилась в «зеленой зоне» более 90%. Видимо замедляли загрузку сразу 2 шаблона, для одного сайта. Попробовала перенастроить страницы AMP с одной темой. Когда для компьютеров это будет полноценный сайт, со всеми картинками и слайдерами.
Однако для пользователей мобильных устройств сайт открывается тоже быстро — выше 90%, но почти без картинок. Особенно в статьях. Для перенастройки опять открываю мастера и следую его инструкциям. Рекламу Adsense установила на обоих страницах. Потому что AMP использует только ПС Гугл. У меня все получилось, скорость возросла, ночью даже до 98 — 100% для компьютеров.
Однако недолго у меня был настроен переходный вариант плагина. Страницы были быстрыми, но совсем без картинок. Такие страницы Гугл не индексирует. Причем из индекса выпадает не только AMP, но так же основная страница. Потому все оставила опять, в варианте «читатель».
Плагин AMP – предупреждения от Google
На следующий день получаю сообщение от ПС Гугл: «Владельцу сайта https://moylubimiblog.ru/». «На Вашем сайте обнаружены проблемы (1) категории «Страница AMP». На основании анализа Вашего сайта были вынесены предупреждения.
Первым предупреждением было, что страница совсем не AMP. Посмотрела код, который генерируется на лету. Код AMP страницы совсем небольшой и легкий, потому она так быстро загружается, но особенно кэш. В коде несколько раз написано, что это AMP. Проверила адреса автоматически. В том же Гугле AMP страница подтвердилась.
Еще была рекомендация вписать в коде ссылки, чтобы связать 2 станицы, основную и AMP. Предлагаемые ссылки скопировала и вставила в код заголовка основной страницы. Но она стала видна как простой текст, прямо над сайтом. Этот совет оказался не правильным, потому что связь страниц здесь происходит по другому. С помощью редиректа, который обеспечивает плагин.
Размер изображения меньше рекомендуемого
Про изображения — это следующее замечание от Гугл. «Рекомендуем Вам по мере возможности устранить указанные выше проблемы. Тогда в результатах поиска Google будет появляться больше страниц Вашего сайта, и притом в наилучшем виде».
У меня картинок на 2 сайтах более 2 тысяч, хотя уменьшала их количество уже не раз. Чтобы улучшить скорость загрузки сайта . За 8 лет ведения сайтов требования ПС к изображениям менялось много раз.
Одно время можно было загружать их сколько угодно. Потом Гугл рекомендовал их устанавливать совсем маленькими, но особенно в начале статьи. В результате картинки установлены у меня в разное время и разных размеров. Заняться исправлением вручную – просто немыслимо. Но сейчас Гугл требует, чтобы картинки соответствовали своему контейнеру. Особенно это важно при установлении мобильной версии AMP.
Размер картинки – соответствие контейнеру
Каким должен быть контейнер картинки это, кажется, поняла. То есть это не значит, что все изображения сайта должны быть одинакового размера. Если при верстке сайта размер страницы был выставлен в процентах. Например, какой-нибудь объект был обозначен, как 40%. Тогда, при передвижении одной из сторон сайта, это объект всегда будет занимать свою нишу, внутри страницы. Например, заголовок сайта будет оставаться только с левой стороны. Не передвигаясь меньше, чем на 40% страницы.
Но если мы размер всей страницы обозначим, как 100%. Тогда при передвижении границы сайта в ширину, или в высоту будет сдвигаться все содержимое веб. страницы. Шрифт и картинки станут мелкими. На этой основе построена адаптивность под разные мобильные устройства.
Если посетитель смотрит сайт на своем маленьком телефоне, то экран сужается, но локальный текст или картинку можно увеличить. Однако если картинка меньше контейнера, как у меня. Тогда ее размер фиксирован, и ее трудно рассмотреть, при увеличении пальцами. Но хорошо, что таких вариантов оказалось не много, и на них мне Гугл конкретно указал.
Как исправить несоответствие картинки и контейнера
Нашла в интернете следующий гениальный код CSS и вставила его в настройках сайта, «дополнительные стили».
img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
Думаю, что многие в интернете знают, что width- это ширина изображения. Длина обозначается латинским словом – height.
Как определяю, что картинки на сайте в порядке? У меня стоит плагин для сжатия картинок, называется он — «Smush». У плагина есть и другие функции, кроме сжатия. Если есть несоответствие картинки и контейнера, на открытой статье, то плагин включает желтенький фонарь. Но если все в порядке, тогда вверху страницы увидим зеленый значок.
04.04. 2022. Однако в дальнейшем все эти соответствия и несоответствия оказались несостоятельными. По новым правилам минимальный размер картинки должен быть размером 300 : 300 px. Вот теперь переделываю все эти размеры постепенно. Но еще изображения должны быть хорошего качества, т. е. четкими.
Временно отключаю плагин
Скорость загрузки этих легких страниц была постоянно в «зеленой зоне». И реклама Гугла прекрасно на них шла. Однако Гугл отменил свою рекламу для России. Но в Яндексе все страницы AMP перешли в неканонические. После запрета в файле robots.txt перешли в ошибку 404. Так что в Яндексе все стало не хорошо. Теперь исправляю ошибки в ПС Яндекс.
