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

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

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

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

Плагин AMP настройка – выбрать сложность установки

Скачала плагин из Word Press.org.  Но здесь есть 2 похожих плагина. Например,  один из них простой AMP. Второй тоже называется AMP, но только его название более сложное — accelerated mobile pages amp . Функции и настройки второго плагина тоже более сложные. Авторы над ним еще работают. Для себя выбрала вариант простого плагина и пока не пожалела.

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

Плагин AMP настройка — стандарт

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

Настройку  проверила  в веб. мастере Гугл, перейдя из «основных показателей» в сервис «PageSpeed Insights».

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

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

Настройка – читатель

В этой настройке сайт загружается в 2 отдельных шаблона. Сайт для  ПК остается в первозданном виде. Для варианта amp авторы плагина предлагают выбрать простую, совместимую с плагином тему. Это темы прошлых лет, у меня даже обнаружилась к ним ностальгия. Однако на мобильных аппаратах они быстро находятся и прекрасно отображаются.

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

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

В результате получилось огромное количество ошибок 404. Тогда пришлось плагин с сайта удалить, а страницы с amp запретить в файле  robots.txt. Только сейчас этот запрет удалила.

Но авторы за 2 года плагин усовершенствовали, изменили и улучшили.  ПС Гугл просто требует быстрых мобильных страниц. И правильно делает!

Плагин AMP настройка – предупреждения от Google

На следующий день получаю сообщение от ПС Гугл: «Владельцу сайта https://moylubimiblog.ru/».На Вашем сайте обнаружены проблемы (1) категории «Страница AMP».

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

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

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

Размер изображения меньше рекомендуемого

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

У меня картинок на 2 сайтах более 2 тысяч, хотя уменьшала их количество уже не раз. Чтобы улучшить скорость загрузки сайта . За 8 лет ведения сайтов требования ПС к изображениям менялось много раз.

Одно время можно было загружать их сколько угодно. Потом они требовались совсем маленькие, особенно в начале статьи. В результате  картинки установлены у меня в разное время и разных размеров. Заняться исправлением вручную – просто немыслимо. Но сейчас Гугл требует, чтобы картинки соответствовали своему контейнеру. Особенно это важно при установлении мобильной версии AMP.

Размер картинки – соответствие контейнеру

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

Но если мы размер всей страницы обозначим, как 100%. Тогда при передвижении границы сайта в ширину, или в высоту будет сдвигаться все содержимое веб. страницы. Шрифт и картинки станут мелкими. На этой основе построена адаптивность под разные мобильные устройства.

Если посетитель смотрит сайт на своем маленьком телефоне, то экран сужается, но локальный текст или картинку можно увеличить. Однако если картинка меньше контейнера, как у меня. Тогда ее размер фиксирован, и ее трудно рассмотреть, при увеличении  пальцами.  Но хорошо, что таких вариантов оказалось не много, и на них мне Гугл конкретно указал.

Как исправить несоответствие картинки и контейнера

Нашла в интернете следующий гениальный код CSS.

[highlight] [code]img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }[/code][/highlight]

Думаю, что многие в интернете знают, что width- это ширина изображения. Длина обозначается латинским словом – height.

Как определяю, что картинки на сайте в порядке? У меня стоит плагин для сжатия картинок, называется он — «Smush». У плагина есть и другие функции, кроме сжатия. Если есть несоответствие картинки и контейнера, на открытой статье, то плагин включает желтенький фонарь. Но если все в порядке, тогда вверху страницы увидим зеленый значок.