Как создать Ускоренные Мобильные Страницы (и что это значит)

1. Почему ты должен беспокоиться?
2. Что делает тик AMP?
3. Как реализовать AMP сложным способом
4. Как использовать AMP для WordPress (супер-простой способ)
5. Закрытие комментариев

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

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

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

Почему ты должен беспокоиться?

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

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

Множество различных аспектов влияют на алгоритмы поиска Google, и компания постоянно совершенствует и развивает их для удовлетворения меняющихся потребностей (я рекомендую немного почитать о Колибри , Мобильный дружественный а также Ранг Мозг ). Прямо сейчас, мобильный телефон, где он находится. Больше людей выполняют поиск на мобильных устройствах, чем где-либо еще. Аналогичным образом, Google становится умнее продвигать сайты, которые имеют удобный для пользователя UX и быстрое время загрузки.

Как мобильные пользователи хотят, чтобы веб-сайты отображались? Они должны быть удобны для касания, быстро загружаться и относительно легки в данных. Чего хочет Google? Чтобы пользователи были счастливы. Для Google свет - это пользователи, а не издатели.

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

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

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

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

Что делает тик AMP?

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

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

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

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

Как реализовать AMP сложным способом

Одним из неприятных недостатков использования AMP является необходимость поддерживать две версии вашего сайта: версию AMP и версию для ПК.

Почему вы не можете просто использовать AMP по всем направлениям? Конечно, пользователи настольных компьютеров тоже заслуживают быстрого опыта!

AMP вводит ряд ограничений. Например, он не допускает сторонний JavaScript или некоторые другие элементы формы.

Вам также нужно будет переписать элементы шаблона вашего сайта, чтобы все заработало. CSS в AMP-сайтах должен быть встроенным и менее 50 КБ. Определенные ресурсоемкие пользовательские шрифты должны быть загружены через расширение AMP-шрифта. Мультимедиа также необходимо обрабатывать по-разному с помощью элемента AMP-IMG для изображений, а также для явной ширины и высоты. Было бы трудно реализовать это на всем вашем сайте, не ставя под угрозу некоторые функциональные возможности настольной версии.

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

Страница авторизации Android, загруженная как AMP

Та же страница загружается нормально с нашим адаптивным макетом

Полное руководство о том, как сделать все это можно найти Вот ,

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

<link rel = "amphtml" href = "http://www.example.com/blog-post/amp/">

Чтобы символ AMP всплывал в карусели новостей, убедитесь, что ваши метаданные Schema.org верны.

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

Как использовать AMP для WordPress (супер-простой способ)

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

Всякий раз, когда кто-то спрашивает, как создать сайт и начать создавать бренд в Интернете, я говорю им, чтобы начать с WordPress. WordPress - это система управления контентом (CMS). По сути, это платформа для создания сайтов. Это делает невероятно простым создание профессионально выглядящего веб-сайта. Это абсолютно бесплатно и не имеет компромиссов. Это приводит в действие многие из самых больших сайтов в сети; от BBC America, до TechCrunch, до The New Yorker, до всех любимых Android Authority.

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

Так www.example.com/example становится www.example.com/example/amp/ ,

Вы также можете настроить некоторые аспекты внешнего вида, выбрав «Внешний вид»> «AMP». Сначала вам нужно убедиться, что ваша версия WordPress обновлена. Если вам нужно обновить, убедитесь, что все резервные копии.

По сути, это AMP всего за пару кликов. Я говорил вам, что WordPress был полезен!

Закрытие комментариев

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

Некоторые члены SEO-сообщества недовольны Google за то, что можно было бы расценить как жесткую попытку диктовать форму Интернета. В частности, существует опасение, что, предоставляя кэшированные версии сайтов, Google на самом деле отказывая владельцам сайтов в их собственном трафике , Есть хороший большой баннер, который приглашает пользователей вернуться в Google, что может помешать посетителям исследовать остальную часть сайта. Другая небольшая проблема заключается в том, что мы продолжаем и делаем всю эту работу только для того, чтобы стать еще одним Заброшенные проекты Google , Странные вещи произошли.

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

Помимо сетевой политики, принятие AMP, вероятно, является разумным шагом для издателей. Наверное, поэтому мы тоже это сделали.

Что вы думаете обо всем этом? Это хорошая идея? Вам нравится читать сайты AMP на вашем мобильном устройстве? Будете ли вы реализовывать это самостоятельно?