Руководство для начинающих по AMP в WordPress

1. Что такое AMP?
2. Как работает AMP?
3. Плюсы и минусы использования AMP на вашем сайте
4. Совместимость AMP с другими инструментами
5. Как использовать AMP с WordPress (3 полезных плагина)
6. 1. Начните с AMP плагина Automattic
7. 2. Добавьте клей для Yoast SEO & AMP в свою настройку
8. 3. Попробуйте расширенный плагин AMP для WP
9. Готовы к AMP It Up?

Ты читаешь это на своем телефоне? Да?

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

(И да, этот телефонный каламбур был очень задуман.)

Во всем виноваты смартфоны ( первый iPhone упал ДЕСЯТИЛЕТИЕ назад ), но появление мобильных устройств полностью изменило то, как люди используют Интернет. И все эти мобильные пользователи Интернета никуда не денутся - кроме, конечно, на другой сайт, если ваш не загружается быстро на их крошечных экранах.

Введите Google разработано Ускоренные мобильные страницы (AMP) проект.

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

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

Что такое AMP?

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

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

Это где Ускоренные мобильные страницы (AMP) заходи.

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

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

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

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

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

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

1. AMP HTML: это специально разработанная версия HTML, которая включает в себя определенные теги и ограничения, предназначенные для повышения производительности.
2. AMP JS: уникальная библиотека JavaScript, эта технология обеспечивает управление ресурсами и загрузку, что позволяет быстро отображать страницы.
3. AMP Cache: через эту сеть доставки контента (CDN) ваши страницы могут быть «кешируется» для более быстрого поиска ,

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

Плюсы и минусы использования AMP на вашем сайте

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

1. Упрощенные страницы - AMP создает ряд ограничений, которые не позволяют определенным элементам появляться в мобильных версиях ваших веб-страниц, таких как некоторые типы мультимедиа и сторонний JavaScript. Хотя ограничение функций ваших страниц поначалу может показаться недостатком, это облегчает чтение и использование ваших мобильных посетителей.
2. Улучшенная скорость - использование AMP максимизирует производительность вашего сайта на мобильных устройствах. Урезанная функциональность и легкий закулисный HTML и JavaScript приводят к тому, что страницы загружаются очень быстро - потому что изначально не нужно много загружать. Кроме того, функция кэширования сохраняет страницы, чтобы их можно было получать еще быстрее.

Все это имеет значение, потому что производительность играет главную роль в успехе вашего сайта. Страницы, которые являются доли секунды слишком медленно для загрузки в результате меньше трафика и выше показатель отказов. Это означает, что вы увидите меньше читателей , клиенты и конверсии. Грустное лицо.

Конечно, есть много способов улучшить производительность вашего сайта. Например, выбирая премиум хостинг WordPress как наш Планы DreamPress , гарантирует, что ваш сайт будет максимально быстрым и надежным (и предоставляет множество других преимуществ, таких как улучшенная безопасность и удобная поддержка).

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

Новое в WordPress? Почистить различия между WordPress.com и WordPress.org прежде чем начать

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

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

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

Совместимость AMP с другими инструментами

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

Давайте посмотрим на два: монетизация рекламы и аналитика.

Многие владельцы сайтов монетизировать свои сайты через рекламу, будь то в качестве основного или дополнительного источника дохода. Оптимизация мобильного телефона часто убирает эту рекламу, что очень важно для производительности, но может снизить вашу прибыль. AMP может решить эту проблему, повышая скорость на мобильных устройствах без необходимости блокировать или удалять рекламу. Более того, есть выделенный компонент что позволяет использовать AMP вместе с самыми популярными рекламными сетями, такими как Google AdSense , AdReactor , а также Amazon A9 , Ча цзин!

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

Конечно, все это только начало.

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

Как использовать AMP с WordPress (3 полезных плагина)

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

Но сначала!

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

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

Хорошо, давайте перейдем к плагинам!

1. Начните с AMP плагина Automattic

Этот первый плагин был создан Automattic , компания, стоящая за WordPress. Он предназначен для добавления поддержки AMP на ваш сайт WordPress и делает это путем создания AMP-совместимых версий всех ваших сообщений. Когда кто-то посещает ваш сайт на мобильном устройстве, ему будут показываться эти новые сообщения, которые будут использовать те же URL-адреса, но с добавлением / amp / slug.

Стоит отметить, что этот плагин все еще довольно ограничен по объему.

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

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

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

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

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

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

С этим вы должны быть хорошими!

2. Добавьте клей для Yoast SEO & AMP в свою настройку

Если вы не знакомы с Yoast SEO У меня к вам один вопрос: где вы были ?!

Просто шучу. Вид.

Yoast - это большой плагин для WordPress, который вы обязательно захотите проверить. Он используется всеми видами сайтов, чтобы помочь вам оптимизировать страницы для поисковых систем , Использование Yoast SEO - отличный способ поднять ваш сайт вверх в рейтинге страниц Google, чтобы привлечь больше трафика.

Пользователи SEO Yoast захотят проверить Клей для Yoast SEO & AMP плагин. Это простой инструмент, который помогает AMP и Yoast SEO работать гладко вместе. Это гарантирует, что ваши метаданные SEO правильно реализованы на ваших страницах, оптимизированных для AMP, и даже добавляет несколько новых настроек.

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

Тем не менее, Glue для Yoast SEO & AMP также добавит некоторые настраиваемые параметры на ваш сайт, которые вы можете настроить в соответствии со своими потребностями. Вы можете найти эти варианты, посетив SEO> AMP на панели инструментов WordPress. Здесь вы увидите три вкладки - Типы сообщений, Дизайн и Аналитика:

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

Ваш сайт WordPress нуждается в SEO SOS? Вот 13 способов повысить свой рейтинг ,

3. Попробуйте расширенный плагин AMP для WP

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

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

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

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

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

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

Нужен удобный вариант хостинга WordPress? DreamPress дает вам молниеносную скорость и талант «Смотри, мама, без рук!» По доступной цене.

Готовы к AMP It Up?

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

Более того, вы можете внедрить AMP на своем сайте WordPress - и легко повысить производительность - без особых проблем.

У вас есть вопросы о AMP или как его интегрировать с WordPress? Присоединяйтесь к DreamHost сообщество и начать разговор!

Похожие

Комментарии