AMP формат WordPress сайта что такое, как настроить и проверить


Содержание материала:

AMP WordPress плагины

Привет, друзья! Как вы уже знаете, что всемогущий Google в октябре прошлого года запустил проект с открытым исходным кодом — Accelerated Mobile Pages (AMP). Основная цель инициативы сводится к тому, чтобы сделать открытый мобильный интернет ещё более производительным и удобным для всех. В связи с этим были созданы специальные для этой цели плагины AMP WordPress (Accelerated Mobile Pages) для движка ВордПресс.

Проект Accelerated Mobile Pages

Формат AMP — это высокая скорость загрузки страниц (созданный на базе существующих веб-технологий). Основу проекта составляет принципиально новый формат открытого типа AMP HTML. Благодаря ему, разработчики теперь могут с лёгкостью создавать облегчённые версии стандартных веб-страниц. Более подробную информацию о проекте вы можете прочитать на официальном блоге Google Россия, здесь .

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

Открытость проекта Accelerated Mobile Pages будет способствовать свободному обмену информацией, делая мобильный интернет быстрее и удобнее для пользователей по всему миру. Да, кстати, AMP (Accelerated Mobile Pages) появились в мобильном поиске, только, ещё в русскоязычной версии поисковика мобильные страницы с ускоренной загрузкой пока не появились.

Страницы этого формата отображаются в новостном блоке и выводятся по любому запросу, который вызывает его показ: trump, google, waze, obama и тому подобное. Как видно на скриншоте, они правда, не всегда представлены в виде карусели:

Google AMP появились в мобильном поиске

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

Вордпресс плагины AMP

Компания Automattic, как и обещала, выпустила плагин для WordPress с таким коротким названием — AMP . Чтобы не отстать от жизни и следовать в ногу за нашим другом Google воспользуемся/присоединимся к проекту Accelerated Mobile Pages.

Официальный плагин AMP для WordPress

Официальный плагин AMP для WordPress

Official AMP Plugin for WordPress. Плагин добавляет поддержку Accelerated Mobile Pages для вашего сайта WordPress .

Для того, чтобы включить ускоренные мобильные страницы (AMP) на вашем WordPress сайте вам нужно только установить данный модуль через админку:

Установить и активировать плагин AMP

Активировать его и перейти в его настройки. AMP — Общие.

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

Плагин можно настроить так, чтобы он следовал одному из трех разных режимов шаблона: Native, Transitional и Reader. Когда настроено для работы в режимах Reader и Transitional, записи / страница будет иметь канонический URL, а также соответствующий (парный) URL AMP. Плагин AMP не служит мобильной темой; он не перенаправляет мобильные устройства на версию AMP. Вместо этого AMP-версия предоставляется мобильным посетителям, когда они находят контент на таких платформах, как Twitter, Pinterest, Поиск Google и других.

Google добавил поддержку AMP Stories в свой WordPress-плагин для AMP. Чтобы создавать AMP-истории, владельцам сайтов нужно установить последнюю версию плагина Gutenberg, поскольку редактор Stories полагается на функции, которые отсутствуют в основных версиях WordPress.

Включив эту опцию, издатели смогут воспользоваться преимуществами нового формата, но при этом им не нужно будет учить HTML, CSS и JavaScript.

Теперь у владельцев сайтов есть возможность:

  • Создавать AMP Stories путём перетаскивания и вставки блоков;
  • Добавлять такие элементы, как текст, видео и изображения;
  • Анимировать текст;
  • Настраивать цвет и прозрачность фона;
  • Устанавливать порядок страниц AMP-историй;
  • Управлять AMP Stories в WordPress.

Давайте добавим текст, перетащим его и повернем

New : Плагин AMP for WordPress теперь позволяет создавать сайты только на AMP

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

Теперь сайты можно будет строить на AMP с нуля, не дублируя каждую страницу. Возможно, это поможет решить проблему с отображением URL издателей в Google News и результатах поиска.

Если сайт будет построен полностью на AMP, то издателям не нужно будет создавать отдельную AMP-версию, а в результатах поиска сможет отображаться URL издателя.

Ещё одним нововведением стало добавление возможности включить только AMP в отдельных разделах сайта и отключить AMP на отдельных страницах.

  • Поддержка четырёх тем по умолчанию (2015, 2020, 2020, 2020);
  • Инструмент совместимости для отладки AMP;
  • Интеграция с Gutenberg;
  • Ряд других улучшений, связанных с кодом и производительностью.

При этом разработчики подчёркивают, что этот плагин по-прежнему не является полностью готовым решением для использования AMP, а функционирует как средство для обеспечения совместимости AMP и WordPress. Подробнее на офсайте: https://amp-wp.org/

Можете, также посмотреть ещё один плагин для этих же целей (ускоренные мобильные страницы) с таким названием — Accelerated Mobile Pages (Google AMP Project).

Плагин Accelerated Mobile Pages WordPress

Плагин Accelerated Mobile Pages

Это первый выпущенный плагин для WordPress который автоматически добавляет ускоренные мобильные страницы (Project AMP Google) на вашем WordPress сайте. Правда, плагин от Automattic AMP пользуется большей популярностью (установок больше), чем Accelerated Mobile Pages, хотя какая разница, функциональность одна и та же. Его также устанавливаете, активируете и будет вам счастье. Статистика по AMP (Accelerated Mobile Pages) будет доступна у вас в Search Console и Google Analytics.

AMP WP — Google AMP For WordPress

AMP WP — Google AMP For WordPress

Более 600 тыс. установок. Поддержка Gutenberg. Сделайте так, чтобы ваш сайт загружался в 5 раз быстрее на мобильных устройствах, используя возможности проекта AMP с открытым исходным кодом.

Функции ускоренной мобильной страницы Google AMP Project

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

Применяем Google AMP в WordPress

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

Что такое Google AMP?

Google AMP (Accelerated Mobile Pages Project) был запущен в октябре 2015 года. Проект основан на AMP HTML, новом открытом фреймворке, целиком основанном на существующих веб-технологиях, что позволяет создавать легкие и быстрые веб-страницы. Иными словами, проект позволяет создавать «облегченную» версию текущей веб-страницы.

«С самого первого дня своего создания главным фокусом для AMP была скорость. Пожалуй, одна из самых неприятных вещей, связанных с мобильным интернетом – это то, что 53% пользователей закроют сайт в браузере, если он загружается дольше 3 секунд. Это негативный фактор для всех областей и сфер – для пользователей, для бизнеса, для издателей, для сайтов и для самой мобильной сети в целом», отмечает Дейв Бесбрис, отвечающий за проект AMP в Google.

Многие крупные компании взяли на вооружение Google AMP, включая таких гигантов, как WordPress, Reddit, eBay, Pinterest, Washington Post, Wired, Gizmodo и т.д. Как следует из поста Google, компания Slate отметила прирост в 44% уникальных посетителей в месяц, а также прирост в 73% посещений на каждого уникального посетителя в месяц.

Когда страница передается через AMP в Google, она будет иметь специальный символ AMP, как видно в демо-примере с New York Times. Обратите внимание, что вы должны просматривать страницу с мобильных устройств, чтобы увидеть это. Вы можете также использовать эмулятор устройств в инструментах разработчика Chrome. Разметка структурированных данных позволяет сделать ваш контент более заметным в поисковой выдаче Google. К примеру, статьи AMP, имеющие соответствующую разметку, могут выводиться следующим образом:

Вот пример того, как страница AMP будет выглядеть на сайте The New York Times. Как вы можете видеть, она является очень простой, что и является главной целью AMP. Фреймворк гарантирует, что страница загружается быстро и предлагает лучшее юзабилити.

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

Плюсы Google AMP

  • AMP бесплатен и имеет открытый код
  • AMP может значительно улучшить время загрузки вашего WordPress сайта. И помните, что скорость загрузки – один из факторов ранжирования.
  • Лучшие места размещения в поисковой выдаче с возможностью добавления в карусель для высоких показателей CTR. В одном из случаев применения AMP рост CTR составил 600%!
  • Google AMP использует многочисленные рекомендуемые практики улучшения производительности – к примеру, отказ от крупных CSS- и JS-фреймворков.
  • Может повлиять на ваши конверсии в позитивном ключе.
  • За прошедший год были выполнены многие улучшения, и теперь в Google AMP доступны возможности рекламы. Это означает, что новостные сайты и журналы смогут получать свой доход в AdSense.

Недостатки Google AMP

  • AMP не является в данный момент фактором ранжирования, однако может стать им в будущем. Это можно рассматривать и как плюс, и как минус.
  • Если вы не являетесь разработчиком, вам будет сложно внедрять и тестировать AMP. Однако платформа WordPress позволяет облегчить этот процесс.
  • Вносится новая отдельная платформа и функциональность, о которой вам придется думать. Почему бы просто не оптимизировать ваши мобильные сайты?
  • Может повлиять на ваши конверсии в негативном ключе.
  • Использует сторонние скрипты и приложения, которые могут не поддерживаться.
  • Нет поддержки старых браузеров, включая Internet Explorer 11. Разработчики отметили, что будут поддерживать 2 последние версии крупных браузеров, таких как Chrome, Firefox, Edge, Safari и Opera. Также они поддерживают настольные, мобильные и веб-версии представленных браузеров.

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

Как установить Google AMP в WordPress

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

Как это работает? Ваш пост получает другой URL, привязанный к нему. Все это делается автоматически с помощью плагина WordPress. Обычно к текущему посту добавляется /amp или /?amp. Вот пример:

Исходный URL записи: https://domain.com/blog-post

AMP URL: https://domain.com/blog-post/amp/

Плагины для реализации Google AMP в WordPress

Есть 2 популярных плагина в репозитории WordPress, которые помогут вам настроить Google AMP. Первый плагин – официальный AMP плагин, который разработан командой Automattic.

На момент написания статьи плагин имел более 100,000 активных установок с оценкой 3.5 из 5. Вы можете скачать плагин из официального репозитория WordPress. Изменить внешний вид можно в разделе Appearance AMP. Однако его опции сильно ограничены, и вы должны знать, как применить дополнительные фильтры для таких возможностей, как AdSense или Analytics.

Также важно отметить, что он поддерживает только посты, но не страницы. Хотя разработчики объявили о том, что они работают над добавлением данной возможности. Ниже представлен пример того, как будет выглядеть WordPress пост после установки плагина.

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

На момент написания статьи плагин имел более 4000 активных установок с оценкой 4.5/5. Вы можете скачать плагин из официального каталога WordPress. Плагин позволяет вам настраивать разные аспекты вашей сборки Google AMP. Также этот плагин поддерживает страницы. Ниже мы рассмотрим настройки и функции, доступные в плагине AMP в консоли.

General

На странице General вы можете изменить логотип, добавить Google Analytics, сменить цветовую схему и настроить текст.

Notifications

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

Advertisement

В этом разделе вы можете включить AdSense и выбрать места размещения. Этот плагин – один из самых простых способов использования AdSense с Google AMP.

Single

На странице Single вы можете включить разную информацию, такую как метаданные записи, миниатюры, пагинацию, комментарии и социальные иконки.

Structured Data

В разделе Structured Data вы можете задать опции, которые Google использует для поисковой выдачи и валидации, такие как дефолтное изображение записи, логотип, высоту и ширину изображения.

Custom CSS

Также плагин имеет CSS-редактор для настройки стилей.

Вот как будет выглядеть пост с запущенным плагином AMP for WP:

Пример главной страницы блога:

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

Проверка вашего кода Google AMP

После установки Google AMP на свой сайт вам нужно будет убедиться в том, что ваш код является валидным. Если он не будет таковым, то Google не покажет версию AMP в поисковой выдаче. Вы можете пропустить ваш сайт WordPress через Google AMP Validator. Он покажет вам, какие ошибки были выявлены и как их исправить.

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

Также вы можете проверить ваш сайт на ошибки AMP в Google Search Console в разделе «Search Appearance». Важно отметить, что большинство пользователей говорят про слишком медленное составление отчетов AMP в Google Search Console. Возможно, это связано с тем, что платформа является относительно новой, и потому обход страниц происходит слишком медленно.

Если у вас будут найдены ошибки, Google уведомит вас об этом по email – вам нужно будет добавить необходимые структурированные данные к вашим страницам AMP.

Google AMP SEO

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

Пример исходной страницы:

Пример страницы AMP:

Есть еще один плагин, который вы можете установить. Он называется Glue for Yoast SEO & AMP, разработанный командой Yoast SEO.

Если вы уже используете Yoast SEO на вашем WP сайте, вы можете применить данный плагин для сохранения ваших заголовков, мета-описаний и т.д. На момент написания статьи плагин имел более 10000 активных установок с рейтингом 4.2 из 5. Скачать его можно из официального каталога плагинов WordPress.

Отслеживание New Relic с Google AMP

Важно также отметить, что валидатор Google AMP может выдать ошибку:

The tag ‘script’ is disallowed except in specific forms.

Связано это с тем, что любые страницы HTML, отформатированные для Google AMP, не могут содержать какие-либо сторонние скрипты. Плагин AMP for WP, упомянутый выше, полностью поддерживает New Relic. Однако вам нужно будет отключить New Relic Browser на страницах AMP, что делается по следующей инструкции. Есть также дополнительный плагин для этого, Disabled NewRelic For AMP, который вы всегда можете установить.

Как установить и настроить плагин Accelerated Mobile Pages (AMP) в WordPress

В прошлом октябре Google анонсировал AMP как проект с открытым исходным кодом для обеспечения более быстрой загрузки страниц на мобильных устройствах. Как сказали в TechCrunch, большинство считает, что AMP является попыткой Google конкурировать с мгновенными статьями Facebook Instant Articles и мобильными приложениями, которые обеспечивают более быструю работу браузера. Мы склонны согласиться.

Страницы, оптимизированные с AMP, появятся в мобильном браузере в топе результатов Google Search, отодвинув статьи в традиционном HTML в низ рейтинга. Загружаться они будут действительно мгновенно.

Честно говоря, мы скептически настроены по отношению к AMP для блогеров или небольших издателей. Часто мы пишем контент, который попадает в топ результатов Google Search. А теперь придётся осваивать новую технологию с ограниченными ресурсами и надеждой, что наш контент окажется в топе. Интересно, что в отличии от больших издательств, в поиске нет записей блогов в AMP :

В 1995 Microsoft выпускал MSN News как часть MSN Online Network, которая была запущена с Windows 95 — ответ Microsoft на AOL. MSN News требовали Application Viewer, который работал на платформе Microsoft Media Viewer. В течение года должно было произойти слияние веб с NBC, что позже стало MSNBC.com. Microsoft настраивал свою среду разработки, чтобы генерировать одновременно Media View и HTML. Это создало огромное количество новых проблем.

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

Бесплатный плагин WordPress AMP

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

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

Несмотря на наши опасения, сегодня мы расскажем вам об установке плагина AMP для WordPress и Yoast SEO Glue для плагина AMP, что позволит вам лучше контролировать внешний вид вашего сайта.

Как выглядит AMP на WordPress?

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

Изображение страницы в оригинале на HTML5:

Тэг следующей ссылки добавлен к каждой странице в блок head >. Это сообщает поисковым системам, что доступна AMP версия этой страницы.

Но также есть и каноническая ссылка, определяющая URL исходной страницы:

Изображение страницы в AMP версии:

Убрали меню и навигацию по сайту, а также практически всю фирменную символику, но зато страница загружается очень быстро.

Давайте теперь поговорим об активации AMP на WordPress.

AMP WordPress Plugin

Вы можете изучить и загрузить AMP WordPress Plugin из директории плагинов WordPress, или прямо из своей консоли.

Просто зайдите в Плагины → Добавить новый и поищите AMP:

После установки нажмите Активировать:

Теперь зайдите на любую запись в вашем блоге WordPress с окончанием /amp/ в конце адресной строки. Вы увидите очень упрощенную версию вашего поста, который будет выглядеть примерно так:

Glue for Yoast SEO & AMP

Универсальный AMP плагин от WordPress предлагает несколько настроек. Yoast SEO создали аддон для их популярного плагина, который дополнительно усиливает вашу поддержку AMP.

Вы можете загрузить Glue for Yoast SEO & AMP из бесплатного каталога плагинов. Но сперва убедитесь, что вы установили плагин Yoast SEO .

Вы можете менять настройки AMP через боковое меню Yoast SEO – просто нажмите AMP внизу меню:

Во-первых, Yoast позволяет вам расширить функциональность AMP. По умолчанию, AMP меняет только актуальные записи – это специальные новостные статьи:

Примечание: Если вы видите пустые страницы под вкладками, то убедитесь, что обновили оригинал плагина Yoast SEO, это должно помочь.

Во-вторых, Yoast предлагает несколько полезных способов настройки фирменной символики, дизайна и цветов:

И наконец, они предлагают способ размещения пользовательского кода Analytics в стиле AMP. Это не так просто, как кажется. Обратите внимание на код, который мы вставили ниже:

Мы нашли AMP версию для внедрения Google Analytics . Просто настройте свой исходный код для вашего веб-сайта:

Мы уверенны, что Yoast продолжит обновлять свой плагин Glue вместе с развитием плагина AMP.

Отладка ошибок AMP

Через несколько дней после установки AMP мы получили электронное письмо от Google Search Console, сообщающее об ошибках в 10 страницах. Но на самом деле не работали все наши AMP записи на сайте.

Мы вошли в Google Search Console, чтобы просмотреть страницы с ошибками и увидели это:

Мы нажали на одну из страниц:

Потом нажали Open Page и рассмотрели ошибки более детально. Вы можете сделать это и вручную, добавив /amp#development=1 в конце URL. А потом открыть Developer Console в вашем браузере:

Оказалось, что все наши AMP страницы были не рабочие из-за ошибки: The tag ‘script’ is disallowed except in specific forms . Мы пришли к выводу, что нужно использовать пользовательские функции W3 Total Cache, чтобы разместить некоторые функции JavaScript в коде страницы до закрытия тега /body >. AMP не позволяет сделать это, а плагин WordPress AMP неспособен это отфильтровать.

Нам нужно провести больше исследований, например, выключит ли W3 Total Cache скрипты для определённых путей, как /amp/, или нужно искать другое решение. Вернув этот скрипт назад в head > мы разрушаем Google Page Speed.

Интересно, что использование рекламы Google DFP также негативно влияет на Google Page Speed. Google испытывает смекалку разработчиков. Не так-то просто использовать все его технологии вместе.

Мы так и не решили, что более важно: Google Page Speed, поддержка AMP или разработка и отладка.

Итоги

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

AMP – это общедоступный путь оптимизации веб, в то время как Facebook Instant Articles только «для элиты». Но мы бы предпочли, чтобы Google создал модель приоритетной загрузки в HTML5.

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

Топ-пост этого месяца:  Адаптивный веб-дизайн
Источник: code.tutsplus.com

Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: 5 / 5. Количество голосов: 2

WordPress.org

Русский

AMP для WP — Ускоренные мобильные страницы

Описание

AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site. AMP makes your website faster for Mobile visitors.

Extensions
Some useful extensions to extend AMP features, check AMP Adsense Support, Contact Form 7 Support, Email Opt-in Support and Call To Action Support. To view more, go to our Extensions page.

Support
We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

Bug Reports
Bug reports for AMP for WP are welcomed on GitHub. Please note GitHub is not a support forum, and issues that aren’t properly qualified as bugs will be closed.

Features:

  • NEW — Gutenberg Support
  • NEW — Divi and Elementor Support More Info
  • NEW — Improved CSS Optimization (Tree Shaking)
  • NEW — Addthis Sharing Support
  • NEW — AMP Infinity Scroll Support
  • NEW — Revolution Slider plugin Support
  • NEW — Photo Gallery by 10Web Support
  • NEW — MEWE social network Support
  • NEW — GDPR Compliance
  • Out of the box compatiblity for Yoast SEO, All in One Seo, Rank Math, Genesis, SEOPress, Bridge Qode SEO, The SEO Framework and Squrilly SEO Plugin.
  • Introducing Page Builder 3.0 for AMP! Learn More & Video
  • New Default Theme for AMP called Swift
  • 3 Pre-built AMP Layouts for Business websites and landing pages
  • OneSignal Push Notifications integration
  • Advanced WooCommerce Support More Info
  • Gravity Forms Support More Info
  • AMP Plugins Manager — Which allows you to disable a specific plugin functionality only in the AMP version
  • Structured Data Options
  • Page Break / NextPage (Pagination) Support
  • Contact Form 7 Support More Info
  • Graviry Form Support More Info
  • Caldera Form Support More Info
  • Ninja Form Support More Info
  • Facebook Comments Support
  • Github Gist Support
  • Email Opt-in Subscription form support in AMP added
  • Call to Action boxes and notification bars
  • 9 Advertisement sizes — 2 More AD slots added recently
  • Comments Forms in AMP.
  • Native AMP Search functionality.
  • Design 3 Watch the Video Overview
  • Disqus Comments Support
  • Google Tag Manager Support
  • Page, Category & Tags Support Added
  • Custom AMP Editor — Which allows you to override your Content that you had written in Post or page, so you can add the different content just for AMP.
  • Mobile Redirection — More than 50% of your traffic is from mobile and you aren’t doing anything to improve their user experience, which means you are falling behind on SEO and it can result in lower SERPS. Lightning fast mobile version means faster User experience means more engagement which directly results in the lower bounce rate.
  • Custom Post Type Support
  • Star Ratings
  • Drag & Drop Page builder Added
  • 4 Designs for AMP
  • AMP WooCommerce Support
  • Switch on/off Support for Pages & Posts on AMP
  • Translation Panel & RTL
  • Internal AMP linking — You can browse AMP pages internally
  • Related posts below the post
  • Recent Comments list
  • Automatically integrate AMP to your website.
  • Google Adsense (AMP-AD) Support with 4 different Ad slots across the layout! The First Plugin to have this capability.
  • Built in MGID Ads Support with 6 different ad slots.
  • Google Analytics Support.
  • User Friendly Theme Options Panel.
  • Unlimited Color Scheme.
  • Image Logo Upload.
  • Supports Posts and Pages and other custom post types.
  • Proper rel canonical tags which means that Google know the original page.
  • Overlay Navigation Menu bar.
  • Social Sharing in the Single.
  • Sexy Design.
  • Separate WordPress Menu for AMP version.
  • Page builder & Shortcodes Compatibility.
  • Carousel support for Gallery.
  • Better Image stretching and resizing.
  • Youtube Video Embed Support.
  • Vine Embed Support.
  • Twitter oembed Support.
  • Instagram Embed Support.
  • Facebook Video Embed Support.
  • RTL Support
  • Custom AMP FrontPage
  • Notifications
  • Alexa Metrics, Chartbeat, Hi-stats, Yandex Metrika, Piwik, Segment.com, StatCounter, Effective Measure and comScore Builtin Support
  • Incontent & DoubleClick Support
  • Great Support & Active Development.
  • Widgets & WooCommerce
  • Breadcrumb Support added
  • Facebook Instant Articles Support Added
  • AMP Installation Wizard that makes it easy to setup for new users.
  • Category base remover support
  • Tag base remover support
  • 7 New Social Media Integrations added (Reddit, Tumblr, Telegram, Digg, StumbleUpon, Wechat, Viber)
  • AMP Theme Framework Core Support Added. You can now create AMP templates of your own in just minutes. More
  • NEW — Make AMP & Non-AMP Same with just one click!
  • NEW — Allows you to use AMP as primary website!

JOIN CHAT GROUP COMMUNITY: Purpose of this group is to get proper suggestions and feedback from plugin users and the community so that we can make the plugin even better.

Getting Started:

1. User Documentation: The AMP for WordPress plugin is easy to setup but we have some tutorials and guides prepared for you which will help you dive deep with the plugin.

2. Developer Docs: We have created special documentations for developers and semi technical users who are willing to modify the plugin according to their own needs.

3. Support: We try our best to provide support on WordPress.org forums. However, We have a special community support where you can ask us questions and get help about your AMP related questions. Delivering a good user experience means a lot to us and so we try our best to reply each and every question that gets asked.

4. Premium Support: We will personally take care that your website’s AMP version is perfectly validated. We will make sure that your AMP version gets approved and indexed by Google Webmaster Tools properly and we will even keep an eye on AMP updates from Google and implement them into your website.

Credits

Some code used in this plugin was forked from ‘AMP for WordPress’ plugin https://wordpress.org/plugins/amp/ — License URI: http://www.gnu.org/licenses/gpl-2.0.html.
Mobile & Tablet detection library used https://github.com/serbanghita/Mobile-Detect — License URI: https://github.com/serbanghita/Mobile-Detect/blob/master/LICENSE.txt
PHP CSS Parser library used https://github.com/sabberworm/PHP-CSS-Parser — License URI: https://github.com/sabberworm/PHP-CSS-Parser#license (PHP-CSS-Parser is freely distributable under the terms of an MIT-style license.)

Скриншоты

  • AMP Homepage
  • AMP Single Post
  • Post Navigation in Single
  • Sticky Social sharing icons
  • Overlay Navigation menu sidebar.
  • Page builder of the Single article. You can drag and drop any element.
  • Single post of Design One
  • GTMetrix Performance Report
  • Google PageSpeed Insight report for AMP
  • Homepage of Design One
  • Pingdom Speed Report for AMP

Установка

Часто задаваемые вопросы

Yes, you easily can. In fact, we have support for 12 Analytics companies. Including Google Analytics, Facebook Pixel, StatCounter, QuantCast, Chartbeat, comScore to list a few. Also, we have Google Tag Manager (GTM) support as well.

Can I add Ads in my AMP pages?

Yes, you can. We have 6 ad placement slots that are built in and strategically placed to get maximum views. Also, we have an extension from which you can insert ads between the content, will get more ad slots and also add custom banners to all the available slots.

Can I extend/Change the AMP design, so it suits my needs?

Yes, you easily can. We have created this plugin in such a way that it can easily be extended. Check out our AMP Theme Framework

Do you have any prebuilt designs?

Yes, we have AMP themes section where we have free and paid designs available. We also update it regularly. You can check it out our AMP Themes

I’m a developer and I want to add custom functionality for a client, can I do that?

Yes, of course. This plugin is very developer friendly, we have lots of hooks and filters that you can use to extend and customize according to the requirements. Also, we have developer documentation which we update regularly.

How do I report bugs and suggest new features?

You can report the bugs here

Will you Add New features to my request?

Yes, Absolutely! We would suggest you send your feature request by creating an issue in Github . It helps us organize the feedback easily.

Accelerated Mobile Pages обзор плагина AMP

Знакомимся с плагином AMP. Как многим известно, Google решила обновить старые начинания. И внедрила в ранжирование знакомую технологию «Accelerated Mobile Pages». Ранее эта технология использовалась при низком качестве интернета.

Технология относиться к оптимизации мобильных страниц. Это удобно для пользователя, а вот для Вебмастера не совсем. Как решить проблему AMP, мы узнаем из этой статьи. В которой рассмотрим оптимальное решение для оптимизации сайта под мобильные устройства. Исходя из этого, я соответственно расскажу о неплохом плагине AMP — Accelerated Mobile Pages.

Содержание статьи:

Важная информация AMP

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

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

О будущем Accelerated Mobile Pages!По слухам в ближайший год, может быть два, Google собирается внедрить свою технологию в обязательном порядке. Соответственно отсутствие таких страниц у сайтов, очень сильно скажутся на их обладателях. Так как по решению Google (поясню это только слухи) — те ресурсы у которых не будет такой версии сайта.Будут полностью исключены из поисковой выдачи для мобильных устройств. Конечно будем надеяться, что это не так. Ну а теперь поговорим о самом плагине.

Accelerated Mobile Pages

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

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

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

Затем после установки, AMP необходимо грамотно настроить. Для этого вам нужно обратить свое внимание, в левое меню админ панели WordPress. В самом низу этого меню, появится вкладка AMP. Нажмите на нее для перехода в основное окно с настройками. Смотрите изображение ниже:

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

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

1. Генеральные — отвечают за размещение логотипа и определение его размеров. Также имеет функции применения AMP к страницам сайта.

2. Домашняя страница — включение AMP на домашней странице сайта. Либо использование титульного листа (статическую главную страницу). Кроме этого позволяет добавить ссылку на основной сайт в заголовке. Используя при этом логотип, как переход на основную версию сайта.

3. Page Builder — этот параметр мне мало понятен, но при включении он добавляет возможность создавать целевые AMP страницы. Я тестировал некоторое время возможности Page Builder. У меня при этом возникаю критические ошибки на страницах. На момент написания этой статьи, AMP страниц в поиске 36 из них убраны 5 страниц с критическими ошибками. В результате проверки выявляются дубли описаний. На данный момент я отключил этот параметр, посмотрим как это отразится на критических ошибках AMP страниц в будущем.

4. Дизайн — настройка дизайна.

5. Single — это отображение ссылок и общий вид статей.

Вторичные настройки AMP

6. Реклама — здесь можно выбрать места отображения рекламных объявлений. Коды вам необходимо взять из ADSense. Вам нужны значения: ca-pub- и Слот AD данных.

7. Меню — параметры отображения вашего меню.

8. Социальная — задает отображение социальных иконок, к примеру в футере.

9. Seo — оптимизация под критерии seo. Задает параметры запрета индексирования и описание к AMP страницам.

10. Аналитика — позволяет внедрить Google Analytics для мобильных данных.

11. Структурированные данные — внедрение структурированных данных на страницы AMP. Установка изображения по умолчанию, для всех страниц структуры. Обычно в роли изображения можно использовать логотип.

12. Форма обратной связи — вставляет контактную форму на нужную страницу.

13. Уведомления — мне эта опция не понятна вообще. При включении просит прописать куки для сайта. Я честно не понял зачем она нужна. Если кто-нибудь знает, напишите в комментариях. Я обязательно поправлю статью.

14. Комментарии — настройки комментариев к страницам.

15. Панель перевода — здесь вы спокойно можете, перевести AMP версию на русский язык.Если такой возможности нет, то я дам Вам изображения с переводами. Только в конце статьи.

16. Настройки Advance — отвечают за архивы и ссылки. К примеру размещение ссылки на основную версию сайта в футере.

17. Расширения — платный функционал плагина.

18. Далее следуют больше платные функции, такие как фиксирование ошибок и сообщить об ошибке. Ну и хорошая опция импорта и экспорта настроек. Почему хорошая узнаем дальше.

Волшебство настройки AMP

Я прекрасно понимаю, что многие из вас не очень понимают как все грамотно настроить. Поэтому я решил облегчить вам большую часть работы. Что вам необходимо сделать:

    Зайдите в общие настройки AMP. После нажмите на вкладку импорт/экспорт. Смотрите изображение ниже.
  1. Нажмите вкладку «Импорт из Файла».
  2. Затем в строку которая появится после нажатия, необходимо будет вставить код с настройками, расположенный на сайте разработчика плагина.
  3. Далее нажимаем «Импорт».
  4. И в конце «Сохранить изменения».

После применения этого кода, необходимо править минимум настроек:

    Логотип Аналитику Рекламу Социальную составляющую После можете удалить не нужную ссылку в футере, через параметр «Дизайн» Затем выполните перевод структуры

Перевод плагина

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

После завершения перевода, обязательно сохраните изменения.

Заключение

Как видите ничего сложного в настройке плагина Accelerated Mobile Pages нет. Но вот только теперь, у вас есть отличное решение оптимизированных страниц сайта. А точнее целая AMP версия сайта. Согласитесь что это круто. Скажу честно, прежде чем наткнуться на это решение я перепробовал множество вариантов различных плагинов. Но этот лучший в своем роде. И на данный момент, меня полностью устраивает его работа. Дополню последние слова советом!

При пробных работах с такими плагинами Вам необходимо учесть следующее. Результаты обновляются в Google спустя недели. И это очень сильно тормозит процесс проверки результативности. Это я вам по своему личному опыту говорю.


На этой фразе статья завершена! Спасибо что проявляете терпение, ведь объем моих статей достаточно большой. Желаю вам успехов в работе с этим плагином. Пишите комментарии и делитесь статьей. На мой взгляд она очень полезна.

Как правильно настроить Google AMP для своего сайта на WordPress

Опубликовано: ADv Дата 20.09.2020 в рубрике Настройки Комментировать

Хотели бы вы настроить Google AMP на своем WordPress сайте? Accelerated mobile pages или AMP — это способ сделать так, чтобы ваш сайт загружался быстрее на мобильных устройствах. Ускоренная загрузка страниц привлечет больше пользователей и трафика. В этой статье мы покажем вам как настроить Google AMP в WordPress.

Что такое Google AMP?

Google AMP означает Accelerated Mobile Pages (ускоренные мобильные страницы). Это инициатива от компаний Google и Twitter с открытым исходным кодом. Целью проекта является ускорить загрузку веб контента для пользователей мобильных устройств.

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

Accelerated Mobile Pages или AMP использует «голый» HTML и ограниченный Javascript. Технология позволяет контенту располагаться на Google AMP Cache. Google же выдает такую кешированную версию пользователям практически моментально после нажатия на ссылку в результатах поиска.

Это очень похоже на Facebook Instant Articles, однако Instant Articles ограничены только платформой Facebook, а точнее их мобильным приложением.

Accelerated Mobile Pages не привязан к платформе и может использоваться любым приложением, браузером и т.п. Сейчас он используется Google, Twitter, LinkedIn, Reddit и другими.

Настраиваем Accelerated Mobile Pages или AMP в WordPress

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

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

Здесь вы можете изменить фон шапки и цвет текста. Цвет фона шапки также будет применяться к ссылкам.

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

Не забудьте сохранить проделанные изменения.

Теперь можно перейти на любую отдельную запись на сайте и добавить в конец ссылки /amp/. Вот так:

Вы увидите обрезанную версию AMP для той же записи.

Если вы посмотрите исходный код оригинальной статьи, то заметите там такую строку в HTML:

Эта строка сообщает поисковым системам и другим сервисам, касающихся AMP, о том, где искать AMP версию страницы.

Решение проблем:

Если вы видите ошибку 404 при попытке просмотреть amp версию, то вот что нужно сделать.

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

Смотрим Accelerated Mobile Pages в Google Search Console

Хотите посмотреть, как выглядят ваши Accelerated Mobile Pages в поиске Google? Это легко можно сделать с помощью Google Search Console.

Входим в панель управления Google Search Console и нажимаем на Вид в поиске » Ускоренные мобильные страницы (AMP).

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

Расширяем и настраиваем свои Ускоренные мобильные страницы

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

Если вы уже используете Yoast SEO, тогда установите и активируте Glue for Yoast SEO & AMP.

Зачем вам нужен AMP Google? И нужен ли?

В начале прошлого года Гугл начал активную работу по улучшению своей поисковой выдачи на мобильных устройствах. Первым «звоночком» был алгоритм mobile-friendly. Суть – если человек зашел в поиск с мобильного телефона, так давайте покажем ему на первых позициях те сайты, которые удобнее на этом самом мобильнике смотреть (естественно, при прочих равных).

Вообще, подход вполне логичный – если из пользователей вашего сайта многие открывают его со смартфонов или планшетов, то сделать сайт адаптивным (читай «удобным») для мобильных устройств – хорошее проявление заботы о своих пользователях, а соответственно, и о поведенческих факторах своего сайта. Гугл лишь подтолкнул процесс «мобилизации» сайтов.

В продолжение mobile-friendly в октябре 2015 Гугл анонсировал новый проект, призванный сделать жизнь «мобильных» пользователей еще слаще )) Речь идет о технологии AMP, Accelerated Mobile Pages – Ускоренные страницы для мобильных устройств. Мы не будем вдаваться в технические тонкости, а попробуем ответить понятным языком на основные вопросы: как это выглядит, кому и зачем это нужно, как внедрить на свой сайт.

Замечание: все скриншоты в статье сделаны с планшета (с мобильного устройства).

Как выглядит AMP Google

Вообще, страница сайта, использующая технологию AMP, внешне мало чем отличается от обычной страницы. Вот пример AMP-страницы:
http://m.lenta.ru/news/2020/01/16/falcon/amp/

Ничего особого в ней нет. Более интересно, как Гугл решил выводить AMP-страницы в своей мобильной поисковой выдаче. Смотрите, если мы ищем какие-то новости в Гугле, например, «новости дня», то под строкой поиска видим блок «Главные новости» с карточками:

Щелкаем по какой-либо карточке, и страница выбранного сайта открывается в новой вкладке. Зачастую, особенно если скорость интернет соединения не слишком высока, в течение 4-7 секунд мы наблюдаем такую картину:

Что придумали в Google – с внедрением AMP в поиск блок «Главные новости» изменится (обратите внимание на значок AMP):

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

Обратите внимание на 4 момента (отмечены на скриншоте):

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

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

3. По этой кнопке можем вернуться на страницу поиска.

4. И это самое важное – контент AMP-страницы отображается здесь буквально за доли секунды.

Выглядит заманчиво. Теперь ложка дегтя:

Пока такой слайдер с AMP-страницами выводится только в англоязычном google.com, в русскоязычной версии его нет. Ждемс..

Те, кто хочет уже сейчас «потрогать» руками русскоязычную выдачу с AMP-страницами, держите инструкцию:

  • С планшета или смартфона заходим на адрес http://g.co/ampdemo. Откроется поиск Гугла, но с уже включенной поддержкой AMP.
  • Вбиваем в поисковой строке запрос «новости дня» (или просто «новости») – профит! В блоке «Главные новости» видим карточки с пометкой «AMP», щелкаем, наслаждаемся ))

Еще один нюанс: Если Гугл не нашел достаточное число AMP-страниц, релевантных введенному запросу, то такие карточки показаны не будут. Например, по запросу «новости спорта» ничего подобного пока нет.

Кому нужны AMP-страницы

Полезность AMP-страниц можно рассмотреть с двух точек зрения:

1. Если смотреть с точки зрения пользователя, то такое «быстрое» отображение контента прямо в поисковой выдаче (без дополнительных ожиданий и переходов на сайты) очень удобно для людей, привыкших получать информацию преимущественно с мобильного устройства. А число таких людей с каждым днем только растет.

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

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

Рассчитайте стоимость добавления и настройки облегченных мобильных страниц для Яндекса и/или Google. Запросить расчет ».

Как устроен AMP

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

По сути, AMP – это лишь еще один набор скриптов и правил для отображения веб-страниц. Например, в разработке сайтов давно используется готовый набор скриптов (так называемая «библиотека») с названием jQuery – благодаря ей, верстальщику не надо каждый раз заново программировать слайдеры или, скажем, модальные окошки. Верстальщик просто берет готовый код из библиотеки и настраивает его параметры под конкретный сайт.

Но проект AMP имеет несколько отличий от существующих библиотек:

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

2. Код написан так, чтобы быть максимально быстрым (используются только асинхронные скрипты, если вам это о чем-то скажет).

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

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

Впрочем, для отображения контента этого вполне достаточно. Вот еще один пример AMP-страницы:
https://www.washingtonpost.com/amphtml/lifestyle/style/six-ways-the-martian-subverts-expectations/2015/10/05/6bba4d42-6873-11e5-8325-a42b5a459b1e_story.html
На ней есть все, что нужно на странице новостного издания, открытой с мобильника – картинки, текст, видео, кнопки соц.сетей, реклама (нужна, конечно, не пользователям, но владельцам сайта), выпадающее меню.

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

то Гугл «подтягивает» ее не с сервера Lenta.ru (что может занять немало времени, если вы, например, находитесь в этот момент в Австралии), а отображает сохраненный контент со своего ближайшего к вам сервера.
Так Tefal Гугл думает о нас и старается выдать пользователю контент максимально быстро.

AMP – третий в списке

Обратите внимание, что AMP – это не замена обычным html-страницам или мобильным версиям сайта, это лишь дополнение. Давайте рассмотрим на примере.

Возьмем новостной портал lenta.ru и вот такую статью:
https://lenta.ru/news/2020/01/16/falcon/

Это стандартная страница сайта с контентом, выпадающим меню, дополнительными статьями по теме, поиском, кнопкой «Наверх», блоками рекламы, кнопками соц. сетей, различными системами статистики и пр. и пр.

И если на планшете это обилие информации еще воспринимается нормально, то на экране телефона вряд ли все это понадобится (и уж явно не поместится).

Поэтому для мобильных устройств у lenta.ru давно есть мобильная версия сайта, где меньше дополнительного контента (и чуть меньше рекламы):
http://m.lenta.ru/news/2020/01/16/falcon/

Топ-пост этого месяца:  Как использовать Bootstrap Практические примеры

Теперь же у lenta.ru появилась 3-я версия этой же страницы в формате AMP:
http://m.lenta.ru/news/2020/01/16/falcon/amp/

Здесь еще меньше каких-либо дополнительных скриптов (рекламы вообще нет, хотя ее и можно вставить в AMP), только контент.

Как же эти 3 версии одной страницы сосуществуют вместе?

Исходной страницей является http://lenta.ru/news/2020/01/16/falcon/. Именно эта страница участвует в основной поисковой выдаче. На основной странице размещаем максимум функционала, информации и прочих «плюшек» для пользователей (не забываем рекламу, монетизироваться как-то нужно).

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

На AMP-версию указывает тег
в коде основной страницы:

При индексации основной страницы Гугл «увидит» эту ссылку и проиндексирует указанную AMP-страницу, чтобы затем показывать именно ее в своем новостном слайдере AMP-страниц на первой странице мобильной поисковой выдачи (в случае релевантности поисковому запросу).

Таким образом, lenta.ru выдает 3 разных версии одной и той же страницы под разные типы целевой аудитории (версии различны по функционалу, неизменным остается только основной контент).

Важно: На всех трех страницах указан тег
с адресом основной страницы, чтобы избежать дублирования контента:

Внедряем AMP на сайт

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

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

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

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

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

Активно поддерживается пока только Гуглом. В русскоязычную версию выдачи Гугла AMP-страницы еще не входят (хотя это лишь вопрос времени). А вот отношение Яндекса к AMP-страницам не известно.

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

Как создать сайт на WordPress: полное руководство для новичков – установка, настройка, работа с сайтом

Время чтения: 27 минут Нет времени читать? Нет времени?

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

Почему WordPress – что это такое и 5 причин его использовать для сайта или блога

WordPress – это самая распространенная, на сегодняшний день, CMS . По данным независимого агентства Web Technology Surveys за сентябрь 2020 года, этот движок используется в 34,6 % сайтов или 64,1 % из тех, что сделаны на основе CMS. Для сравнения, в 2015 году на WordPress работало лишь 24 % ресурсов с CMS. Вот главные причины его успеха:

Бесплатный «движок» CMS WordPress распространяется по открытому лицензионному соглашению (GNU GPL). Вы можете свободно использовать этот продукт в любых целях, включая коммерческие.

Как выбрать движок для сайта?

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

WordPress используют Sony Music, The New Yorker, Reuters, TechCrunch, Республиканская партия США, Fortune и многие другие крупные СМИ, корпорации и организации. Черт, даже Rolling Stones и Snoop Dogg оценили этот движок.

Ну что, решили сделать сайт на WordPress? Тогда переходим к пошаговому руководству.

Шаг № 1: как выбрать хостинг и зарегистрировать домен

Для некоммерческого проекта платить за хостинг не обязательно, особенно на первых порах. Делиться фотографиями котиков или вести дневник бодибилдера можно, например, на бесплатной платформе wordpress.com. Но если у вас коммерческий проект, например, тематический блог или корпоративный сайт, и вы планируете зарабатывать с его помощью – выбирайте платный хостинг.

Что такое хостинг? Как выбрать хостинг?

Чтобы выбрать хостинг-провайдера, посмотрите это видео или изучите гайд в блоге «Текстерры». Если на это совсем нет времени, можете обратиться, например, в Reg.ru, Beget или «Айхор». Качество их услуг вполне на уровне.

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

Следующие рекомендации помогут выбрать удачное доменное имя:

  • Выбирайте доменное имя, частично или полностью совпадающее с названием сайта. Например, для сайта «Одноклассники» хорошие доменные имена – odnoklassniki.ru или ok.ru. Понятно, что имя vk.com этому ресурсу не подходит.
  • Используйте максимально короткое доменное имя. Владельцам смартфонов сложно ввести в строку браузера длинный адрес. Поэтому лучше использовать имя vk.com, чем vkontakte.ru.
  • Убедитесь, что выбранный адрес сайта легко запоминается и имеет смысл. Как вы поняли, владельцы «Одноклассников» не случайно выбрали короткое название ok.ru, а не ass.ru, простите за грубый пример.

Выбор доменной зоны не влияет на технические характеристики ресурса или позиции в поисковой выдаче. Однако теоретически этот параметр может влиять на доверие аудитории. При прочих равных пользователи охотнее верят сайтам с адресом vasya-pupkin.ru или vasya-pupkin.com, чем ресурсам типа vasya-pupkin.wordpress.com или vasya-pupkin.blogspot.com. Поэтому для коммерческих проектов старайтесь выбирать домены верхнего уровня, например, .com, .info, .org, .net, .ru, .ua, .by и т.п. Обратите внимание на появившиеся недавно домены первого уровня, например, .club, .guru, .ninja, .expert и другие.

Шаг № 2: как установить WordPress своими руками

После покупки хостинга и регистрации доменного имени установите WordPress. Обратите внимание, некоторые хостинг-провайдеры предлагают тарифные планы с предустановленной CMS. Если вы выбрали один из них, сразу переходите к третьему шагу руководства. Если вы приобрели хостинг без установленного движка, следуйте инструкциям:

Перейдите на сайт WordPress и скачайте дистрибутив.

С помощью FileZilla или другого FTP-клиента загрузите файлы WordPress в корневую папку или в субдиректорию. В корневой папке находится файл index.html. Чтобы создать субдиректорию, нужно поместить папку с файлами сайта в корневой каталог. В первом случае сайт будет доступен по адресу www.vash-site.ru. Во втором случае вы установите WordPress на существующий сайт. Он будет доступен по адресу www.vash-site.ru/wordpress/.

Установите WordPress. Для этого откройте ссылку на сайт в браузере. Укажите информацию для подключения к базе данных. Их должен предоставить хостинг-провайдер.

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

Если все сделано верно, увидите следующее сообщение (см. иллюстрацию).

По основному URL должен открываться сайт.

Вы только что своими руками создали сайт на WordPress. Теперь можете войти в панель администрирования и приступить к настройке.

Шаг № 3: выберите подходящую тему для WordPress

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

– Лучше выбрать бесплатную или платную тему?

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

– Какая тема лучше: русскоязычная или англоязычная?

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

– Как найти подходящий шаблон в каталоге?

Воспользуйтесь фильтром в каталоге тем. Отметьте нужные опции и примените фильтр. Еще один вариант: используйте дизайн-шаблон из подборки «Текстерры».

– Как установить тему WordPress?

Есть два способа. Первый: в админке выберите раздел «Внешний вид – Темы». Нажмите кнопку «Добавить новую».

Найдите нужную тему по названию или с помощью фильтра характеристик.

Наведите курсор на выбранную тему и нажмите кнопку «Просмотреть». Движок включит режим предпросмотра. Если внешний вид сайта вас устраивает, установите и активируйте тему.

Второй способ: скачайте дистрибутив выбранной темы на компьютер. Это должен быть архив в формате .zip. В разделе админки «Внешний вид – Темы – Добавить новую» загрузите и установите шаблон. После загрузки активируйте его.

Вы установили и активировали понравившийся шаблон. Теперь можно приступить к настройке.

Шаг № 4: как настроить сайт на CMS WordPress и тему (шаблон)

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

Настраиваем CMS WordPress

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

В разделе «Общие» укажите название и краткое описание сайта. Эта информация будет отображаться для пользователей. В полях «Адрес WordPress» и «Адрес сайта» укажите URL ресурса. Выберите часовой пояс, формат даты, язык сайта. Оставьте поле «Членство» пустым, так как на первом этапе развития сайта на нем захотят регистрироваться только боты и злоумышленники.

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

Обязательно укажите хотя бы один надежный сервис слежения за обновлениями в разделе «Сервисы обновления». В этом случае движок будет автоматически уведомлять поисковые системы о публикации новых материалов. Например, выберите сервис http://rpc.pingomatic.com/. Сохраните изменения.

Каждый раз при нажатии на кнопку «Обновить», оповещаются и выбранные сервисы. Чтобы домен не попал в списки ping-спамеров, есть плагин WordPress Ping Optimizer. Установите его и настройте частоту обмена данными об изменениях.

В разделе «Чтение» укажите, что должно отображаться на главной странице сайта. Если создаете блог, на главной должны быть последние записи. Для сайта со статическими страницами, в качестве главной выберите одну из них и создайте отдельную страницу «Блог», на которой будут отображаться посты. Посмотреть, как это выглядит, можно на сайте проекта TeachLine.

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

В разделе «Настройки обсуждения» выберите подходящие параметры. В большинстве случаев подойдут дефолтные настройки. Уделите внимание полям «Модерация комментариев» и «Черный список». Можете указать признаки, по которым комментарии будут перед публикацией поставлены в очередь на модерацию или окажутся в списке «Спам». Эти настройки сработают, если вы пользуетесь дефолтными комментариями WordPress.

В разделе «Медиафайлы» оставьте настройки по умолчанию.

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

Как настроить тему WordPress

Каждый шаблон имеет собственные настройки. Описание настроек дефолтной темы Twenty Nineteen поможет понять закономерности и настроить выбранный шаблон.

В консоли WordPress выберите меню «Внешний вид – Настроить». Откроется страница настройки темы или кастомайзер. Доступные пункты настройки можно увидеть в меню в левой части экрана.

В разделе «Свойства сайта» загрузите логотип, укажите название и краткое описание сайта, добавьте фавикон .

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

В разделе «Меню» настройте меню сайта. Нажмите кнопку «Создать меню».

Укажите название и область меню.

Добавьте в меню нужные страницы и нажмите кнопку «Опубликовать».

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

Как русифицировать тему WordPress

Русифицировать тему удобно с помощью бесплатной программы Poedit. Скачайте и установите ее на компьютер, а затем загрузите с вашего сайта на компьютер языковые файлы выбранного шаблона с помощью FTP-клиента, например, FileZilla. Также это можно сделать с помощью плагинов, например, File Manager. Если вы его установили, действуйте по следующему описанному ниже алгоритму.

В консоли выберите меню FileManager – Configuration. Настройте конфигурации, как указано на иллюстрации.

В меню FileManager – FileManager выберите папку wp-content – themes.

Выберите папку темы, которую хотите русифицировать. В ней откройте папку languages.

Скачайте на компьютер файлы en.mo и en.po. Если таких файлов нет, скачайте на компьютер файл с расширением .pot.

Откройте программу Poedit и выберите опцию «Создать новый перевод».

Откройте файл перевода и укажите код языка.

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

Сохраните перевод. Программа загрузит на жесткий диск вашего ПК два файла: ru_Ru.mo и ru_RU.po. С помощью функции Upload files загрузите файлы в папку languges вашего шаблона.

Вы русифицировали шаблон.

Вместо программы для ПК Poedit можно использовать плагин Loco Translate. После установки и активации надстройки интерфейс для перевода шаблонов появляется в админке сайта. Он тоже работает с языковыми файлами .po и .mo вашей темы, но все делается прямо в браузере.

Шаг № 5: решаем практические задачи с помощью плагинов для WordPress

Плагины – одна из болезней начинающих владельцев сайтов на WordPress. Едва зарегистрировав ресурс, новички ищут статьи типа «100 лучших плагинов для WordPress» и устанавливают десятки расширений. Это может замедлить сайт.

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

Пользуйтесь плагинами с осторожностью и устанавливайте только самые необходимые. С помощью плагинов можно сделать следующее:

  • Обеспечить безопасность сайта.
  • Бороться со спамом.
  • Оптимизировать ресурс к требованиям поисковых систем.
  • Повысить функциональность и улучшить юзабилити.

Как с помощью плагинов обеспечить безопасность сайта на WordPress

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

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

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

  • WP Database Backup – пока не переведен на русский;
  • BackUpWordPress – есть русская версия, но реже обновляется;
  • Backup and Restore WordPress – не русифицирован

Чтобы установить выбранный плагин, войдите в меню «Плагины – Добавить новый». Введите название расширения в поле поиска в правом верхнем углу и нажмите «Ввод». Также вы можете скачать плагин с сайта разработчика и установить его с помощью функции «Загрузить плагин» в верхней части экрана административной панели.

Нажмите кнопку «Установить». После установки активируйте плагин. Теперь настройте параметры резервного копирования. Выберите меню «Инструменты – WP DB BackUp». Нажмите Create New Database BackUp. Вы создали резервную копию по требованию.

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

На вкладке Destination включите автоматическое сохранение архива на Google Drive или отправку на электронную почту.

Чтобы защитить сайт от несанкционированного доступа, воспользуйтесь плагином Loginizer Security. Надстройка надежно защищает сайт от взлома методом перебора или брутфорсинга.

Как бороться со спамом на сайте WordPress

Плагины для борьбы со спамом актуальны, если вы пользуетесь встроенным механизмом комментариев WordPress. Сторонние системы, например, Disqus, защищаются от этого самостоятельно.

Защититься от спама можно с помощью плагинов, например, Akismet или Antispam Bee. После установки Antispam Bee плагин работает в фоновом режиме. Обычно подходят дефолтные настройки, а если нужно что-то поменять, перейдите в меню админки «Настройки – Antispam Bee».

Еще один хороший плагин, который использует технологию reCaptcha компании Google, называется Advanced noCaptcha & invisible Captcha. Теперь спам фильтруется с помощью искусственного интеллекта. Для настройки необходимо просто зарегистрировать свой сайт в Google, выбрать версию капчи и получить два ключа – обычный и секретный, чтобы использовать их с плагином.

Как обеспечить SEO сайта на WordPress

WordPress – SEO-дружественная CMS по умолчанию. Но есть задачи, без которых сайт нельзя считать полностью соответствующим требованиям поисковых систем. Вот они:

  • Создание и обновление карты сайта.
  • Канонизация URL.
  • Оптимизация title страниц.
  • Автоматическая генерация мета-данных страниц.
  • Блокирование индексации дублированного контента.
  • Создание микроразметки страниц.

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

Установите и активируйте выбранный плагин, например, Google XML Sitemaps.

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

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

Для технической оптимизации ресурса воспользуйтесь одним из следующих плагинов:

  • All in One SEO Pack.
  • WordPress SEO by Yoast.

Установите и активируйте выбранный плагин, например, All in One SEO Pack. Используйте настройки по умолчанию, если вы только знакомитесь с WordPress. Если считаете себя продвинутым веб-мастером, можете изменить некоторые настройки SEO-модуля. Для этого выберите меню All in One SEO в консоли движка.

Обратите внимание на перечисленные ниже настройки.

В разделе «Основные настройки» уберите флажок напротив пункта Use Schema.org Markup. Размечать страницу лучше с помощью отдельного плагина.

Если в качестве главной используете страницу записей, в разделе «Настройки главной страницы» укажите title, description и keywords. Если в качестве главной используется статическая страница, установите флажок в поле «Включить».

В разделе «Настройки для вебмастера» укажите код верификации ресурса в кабинете для вебмастеров Google. Для этого добавьте в «Инструменты для вебмастеров» новый ресурс, выберите альтернативные методы верификации. Скопируйте часть кода HTML, указанную на иллюстрации.

Вставьте ее в поле «Инструменты вебмастера Google» на странице настройки плагина.

Сохраните параметры плагина. В кабинете для вебмастеров нажмите кнопку «Подтвердить».

Для разметки страниц воспользуйтесь одним из следующих плагинов:

Связка WPSSO и WPSSO JSON Первый плагин базовый, а второй представляет собой расширение. С помощью базового решения на сайт можно добавить разметку Open Graph. С помощью второго с помощью JSON-LD реализуется разметка Schema.org. WP SEO Structured Data Schema С помощью данного плагина на сайт можно добавить несколько типов разметки Schema.org, включая Article, BlogPosting и Review. Разметка реализуется с помощью JSON-LD. Плагин Schema App С помощью этой программы на сайт можно добавить разные типы разметки Schema.org. Она реализуется через JSON-LD. Бесплатная версия поддерживает базовые типы разметки. Также для разметки можно использовать онлайн-генератор, если вы хорошо понимаете базовые принципы разметки Schema.org.

Установите и активируйте плагины WPSSO и WPSSO JSON. В консоли на странице настроек плагинов в разделе Essential Settings укажите информацию о сайте, а также сведения для разметки Open Graph. Не меняйте другие настройки.

Перейдите в раздел Schema Markup. В полях Organization Logo Image URL и Organization Banner URL укажите URL логотипа и баннера сайта. Эти изображения могут использоваться на странице поисковой выдачи.

С помощью выпадающего меню выберите базовый тип разметки для страницы записей блога, статической главной страницы. Вам нужны следующие типы: Blog и Website соответственно.

Выберите тип разметки для страниц публикаций, статических страниц и страниц медиафайлов. Для страниц записей подходят типы разметки Article и BlogPosting. Выбор зависит от формата публикаций в блоге.

Тип разметки BlogPosting – производное Article. Кроме BlogPosting, к частностям Article относится тип разметки News Article или «Новость». То есть BlogPosting содержит все семантические данные разметки Article.

Используйте тип BlogPosting, если публикуете небольшие заметки, личные наблюдения и впечатления, как в «Живом Журнале». Тип Article больше подойдет для обзоров, аналитических статей, руководств, как в блоге «Текстерры». Для статических страниц и страниц медиафайлов нужно указывать тип WebPage.

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

Что делать, если вы публикуете материалы разного типа: лонгриды, небольшие заметки и новости? В этом случае для каждой публикации лучше выбрать подходящую разметку. Вместо надстройки WPSSO JSON воспользуйтесь плагином WP SEO Structured Data Schema.

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

Недостаток плагина – необходимость размечать каждую публикацию вручную. А к преимуществам можно отнести поддержку дополнительных типов разметки, например, Review, Product и Aggregate Ratings. Бесплатная версия WPSSO JSON не поддерживает эти типы.

Между прочим, TexTerra занимается комплексным продвижением в интернете. Помимо SEO, услуга включает работу по разным направлениям: SMM, контент- и видеомаркетинг, email-рассылки и др. На сегодняшний день не существует более эффективного метода для бизнеса.

Как повысить функциональность и юзабилити ресурса

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

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

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

Начните улучшение юзабилити с латинизации URL сайта. Обратите внимание на ссылку, которую CMS генерирует по умолчанию. В ней есть кириллические буквы.

Скопируйте URL и вставьте его в комментариях на сайте или в текстовом редакторе.

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

Эту проблему можно решить с помощью WP Translitera или аналогичного плагина. Для этого достаточно установить и активировать выбранный модуль.

Добавьте на страницы кнопки шеринга социальных сетей. Эту задачу можно решить разными способами. Например, установите и активируйте плагин Head, Footer and Post Injections. Это полезная надстройка: с ее помощью можно добавлять произвольный код на все или отельные страницы сайта.

Выберите сервис шеринга, например, Pluso. Настройте блок «Поделиться» и скопируйте предложенный системой код. В админке сайта перейдите в меню «Настройки – Header and Footer». Откройте вкладку Posts. Вставьте код после или перед публикацией.

Сохраните изменения, проверьте, как отображаются кнопки.

Шаг № 6: как установить коды сервисов аналитики и подключить сайт к кабинетам для веб-мастеров

Обозначенная в подзаголовке задача решается разными способами. Например, при установке плагина All in One SEO Pack вы уже подключили ресурс к кабинету для вебмастеров Google. Подключить сайт к «Вебмастеру», «Метрике» и Google Analytics поможет установленный ранее плагин Head, Footer and Post Injections.

Зарегистрируйте сайт в указанных сервисах. Инструкции по регистрации можно найти в гайдах «Текстерры» по «Яндекс.Вебмастеру», «Метрике» и Google Analytics.

После регистрации в сервисах скопируйте коды отслеживания или теги верификации и вставьте их на сайт. Для этого перейдите по вкладке Head and footer на странице настроек плагина.

Подключить любой внешний сервис можно с помощью диспетчера тегов Google. Код Tag Manager нужно установить в разделы head и body каждой страницы сайта с помощью Head, Footer and Post Injections. О работе с диспетчером тегов можно прочитать в нашем руководстве.

Шаг № 7: как создавать страницы и записи на сайте под управлением WordPress

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

Gutenberg удобнее и более функционален, чем классический редактор WordPress. С его помощью можно создавать страницы произвольной структуры, вставлять в записи виджеты и мультимедиа, менять блоки контента местами и многое другое.

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

Топ-пост этого месяца:  Как работают и для чего нужны в Node js события программирование приложений

Как создать статическую страницу

Придерживайтесь описанного ниже алгоритма.

Выберите меню «Страницы – Добавить новую».

Добавьте заголовок страницы. Затем следуйте подсказкам редактора. Пишите текст или нажмите на значок «Плюс», чтобы добавить блок контента.

Например, чтобы вставить фотографию, выберите соответствующий блок.

Выберите источник фото и положение картинки на странице.

В Gutenberg доступны десятки вариантов блоков. Например, кнопки, произвольный код, встраивание публикаций из социальных сетей и так далее. Их можно использовать для оформления вашего блога.

После редактирования опубликуйте страницу.

Проверьте корректность отображения контента. Если нужно, отредактируйте страницу.

Как создать публикацию

Создание публикации рассматривается на примере классического редактора. С пятой версии WordPress, его придется установить как отдельный плагин. Конечно, как и для страниц, можно использовать новый «Гутенберг», но он не настолько гибкий.

Чтобы добавить запись, выберите меню «Записи – добавить новую».

Большинство шаблонов поддерживает несколько форматов записи. Выберите подходящий.

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

Классический редактор поддерживает два формата редактирования: визуальный или WYSIWIG и «Текст» с возможностью использовать HTML. Выберите подходящий. Добавьте заголовок и контент.

Укажите title и description, выберите изображение записи. Опубликуйте страницу.

Приступайте к самому главному

Вы создали и настроили сайт на WordPress и научились публиковать контент. Теперь вас ждет самая тяжелая и ответственная работа. Чтобы сайт был эффективным, вы должны регулярно создавать качественный и полезный для аудитории контент. Возможностей «движка» достаточно для реализации практически любого проекта: от информационного ресурса до интернет-магазина.

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

Сложно, не получается или просто нет времени? Делайте то, что умеете лучше, а профессиональное создание сайта на WordPress доверьте специалистам «Текстерры».

AMP страницы Google: настройка плагина AMP for WordPress — создание ускоренных страниц

Ссылка на эту страницу:

Встроить HTML код видео:

В этом выпуске мы рассмотрим AMP страницы Google: настройка плагина AMP for WordPress

AMP страницы Google: настройка плагина AMP for WordPress — создание ускоренных страниц — Обзор возможностей: описание и видео.

Автор плагина:

Ссылка на страницу wordpress.org, где можно скачать данный плагин:

Описание плагина

Получите скорость и функции проекта с открытым исходным кодом AMP на ваш сайт, способом WordPress.

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

Например, если ваш URL-адрес сообщения http://example.com/2020/01/01/amp-on/ , вы можете получить доступ к версии AMP http://example.com/2020/01/01/amp-on/amp/ .

Если у вас нет разрешенных постоянных ссылок, вы можете сделать то же самое, добавив ?amp=1 , т. е. http://example.com/?p=123&amp=1

Кроме того, ваши страницы и пользовательские типы сообщений могут иметь версии AMP. Просто проверьте свои поля на странице «Настройки AMP» /wp-admin .

Весь ваш сайт может отображаться как «Native AMP», если ваша тема вызывает функцию add_theme_support( ‘amp’ ) .

Будет только одна версия каждого URL-адреса: версия AMP.

Не будет отдельных URL-адресов с добавлением /amp или ?amp добавлением. См. Эту страницу wiki для выяснения подробностей.

Ваша тема также может использовать парный режим с вашими собственными шаблонами для URL-адресов AMP.

«Родной AMP» и «Парный режим» добавляют полную поддержку комментариев и виджетов.

Если ваша тема не поддерживает ‘amp’ , в ней будут использоваться базовые шаблоны post-post для потребителей AMP, таких как Google Search и Twitter.

А при посещении сайта, содержимое AMP, обычно, не будет отображаться без добавления строк к URL-адресу, подобному /amp или ?amp .

Следите за развитием плагина на GitHub или внесите свой вклад.

Для получения дополнительной информации о плагине, о том, как работает плагин и как его настроить и расширить, см. Вики проекта .

Скриншоты плагина AMP for WordPress

Галерея с описанием от авторов видео

Разбираемся с технологией AMP (Accelerated Mobile Pages) и быстрому её подключению на сайте WordPress

Сеоподготовка http://bit.ly/2lR3t6Z
Оптимизация скорости http://bit.ly/2meDFm0
HTML2WP http://bit.ly/2meta22
Обзоры тем http://bit.ly/2lClXFH
Видеокритика http://bit.ly/2mjVrks
Кодим http://bit.ly/2l6EE2E

Темы и разработчики
Divi http://bit.ly/ET_Divi
WP-Puzzle http://bit.ly/wp-puzzle
ElegantThemes http://bit.ly/ArtElegantThemes

Хостинги
Fozzy http://bit.ly/fozzyhost купон на скидку 10% wpruse
Beget http://bit.ly/BeGetArt
EuroByte http://bit.ly/EuroByte

Поддержать канал
http://wpruse.ru/?p=1079

*********************************************************************
Контакты
Страница VK: https://vk.com/artikus13
Группа про WordPress https://vk.com/wpruse
Канал на YouTube: https://www.youtube.com/c/wpruseru
Блог о разном http://artabr.ru/
Блог в поддержку канала http://wpruse.ru/

Что такое AMP и как его быстро установить на свой сайт на WordPress

Разбираемся с технологией AMP (Accelerated Mobile Pages) и быстрому её подключению на сайте WordPress

Сеоподготовка http://bit.ly/2lR3t6Z
Оптимизация скорости http://bit.ly/2meDFm0
HTML2WP http://bit.ly/2meta22
Обзоры тем http://bit.ly/2lClXFH
Видеокритика http://bit.ly/2mjVrks
Кодим http://bit.ly/2l6EE2E

Темы и разработчики
Divi http://bit.ly/ET_Divi
WP-Puzzle http://bit.ly/wp-puzzle
ElegantThemes http://bit.ly/ArtElegantThemes

Хостинги
Fozzy http://bit.ly/fozzyhost купон на скидку 10% wpruse
Beget http://bit.ly/BeGetArt
EuroByte http://bit.ly/EuroByte

Поддержать канал
http://wpruse.ru/?p=1079

*********************************************************************
Контакты
Страница VK: https://vk.com/artikus13
Группа про WordPress https://vk.com/wpruse
Канал на YouTube: https://www.youtube.com/c/wpruseru
Блог о разном http://artabr.ru/
Блог в поддержку канала http://wpruse.ru/

AMP for WP – Accelerated Mobile Pages WordPress Plugin Tutorial 2020

Learn How To How Properly configure and setup AMP for WP – Accelerated Mobile Pages WordPress Plugin 2020 To setup Google amp in your WordPress website

Note — Please don’t use this plugins due to bad support and many bugs in this plugins with complicated settings . We are getting continuous report from many visitor about this plugin . If you will break your website then we will not take any responsibility .
That’s why

We always recommend you to use official plugins — https://youtu.be/qtnr4uQpvUI

Hire someone from fiverr just 5$ for complete website optimization — https://goo.gl/pv3jfj

Kinsta- https://www.gomahamaya.com/go/kinsta
fastcomet- https://www.gomahamaya.com/go/fastcomet-blackfriday
14 days free trail cloud hosting — https://www.gomahamaya.com/go/fastcomet-free-trail
Bluehost- https://www.gomahamaya.com/go/bluehost
inmotion hosting — https://www.gomahamaya.com/go/inmotion-hosting

How to Properly Setup Google AMP on Your WordPress Site

Are you wanting to set up Google AMP for your WordPress website? AMP will make your website load faster on mobile devices. In this video, we will show you how to set up Google AMP in WordPress.

Text version of this tutorial:
http://www.wpbeginner.com/wp-tutorials/how-to-properly-setup-google-amp-on-your-wordpress-site/

If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.

Check us out on Facebook:
https://www.facebook.com/wpbeginner

Follow us on Twitter:
http://twitter.com/wpbeginner

Join our circle on Google+:
https://plus.google.com/+wpbeginner/

Checkout our website for more WordPress Tutorials
http://www.wpbeginner.com/

Summary of this tutorial:

Google AMP is designed for improving the mobile experience for your site by showing a stripped down version of your site. There are pros and cons for setting this up for your site but it would depend on personal preference for if you should add it.

For installing the AMP plugin go under Plugins, Add New and find the AMP plugin.

Under Appearance, AMP you will be able to customize the look of your site for when users view it on mobile.

There are multiple customization options including colors and logos for the new reduced page of your site for mobile.

Once you have it designed how you would like, ensure you save your changes.

Should you want to preview the AMP page from your computer you would go to the post and add /amp to the end of the url.

Using the Yoast SEO plugin you are able to customize the design, colors, and other options for your AMP pages.

Google AMP For WordPress — AMP Pages On WordPress Using WordPress AMP Plugin

Grab Your Free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL

Google AMP For WordPress — AMP Pages On WordPress Using WordPress AMP Plugin https://youtu.be/-U7-vpcr1fY

Google AMP WordPress plugin allows you to turn your posts into Google Accelerated Mobile Pages quickly and easily. This makes your pages load lightening fast and hopefully improves your mobile rankings. It will definitely improve your sites mobile user experience.

Grab your free 17-Point WordPress Pre-Launch PDF Checklist: http://vid.io/xqRL

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

How To Add AMP To Your WordPress Website — Accelerated Mobile Pages

How To Add AMP To Your WordPress Website — Accelerated Mobile Pages
More info: https://www.wpcrafter.com

In this video I show you how to setup AMP on your WordPress website.

I will tell you how AMP helps boost Website SEO and it is very simple to get it working
on your website! Thank you for watching!

Table of Contents:

00:16 WPExplorer.com
00:29 What is AMP and how to implement it
01:10 What does AMP do
01:52 Install AMP Plugin
02:10 Install AMP for WordPress
02:35 Adding via WP Dashboard, Downloading and Activating plugins
03:22 AMP Options
03:48 Advertisements
03:58 Options to control the look of Single

Thank you for watching. Hope to see you in the next video!
Please Like, share, comment and Subscribe.

All of my opinions in this video are my own, I was not paid to make this video. Whenever there is a link in any of my videos, if there is an affiliate program available, it’s safe to assume that you are clicking on an affiliate link. Please check my website for any associated bonus I may be offering, for supporting me, or ask in the comments below.

AMP for WP Installation Guide

WordPress AMP : Accelerated Mobile Pages Plugins (Fast!)

WordPress AMP accelerated mobile pages PLUGIN Fast
Google has been pushing a new concept called Accelerated Mobile Pages, in short AMP. This post explains what AMP is and aims to do, who should implement and why, how to get your WordPress site ready for AMP and how to make use of the Plugins fast and easy

What is Accelerated Mobile Pages? What is AMP?

(AMP) Accelerated Mobile Pages project aims to make pages load instantly on mobile which increases user-friendly. The web is slow for lots and lots of people considering images and other javascript and in fact, the majority of the people using the internet do so over a mobile phone, often Lower internet access mainly 2G or 3G. To make pages load instantly, AMP restricts what you can do in HTML pages.

Now that you now understand what WordPress AMP let’s jump to the real tutorial

In the tutorial, You are going to learn the plugin that makes the process easier with my step by step practicable tips that work perfectly with all WordPress Theme and WordPress amp theme

The tutorial also covers for woocommerce amp

For AMP test = https://search.google.com/test/amp

Don’t forget to like share and Subscribe to my YouTube channel
Also check out my website for more Awesome tutorials like this

Did you discover some new WordPress AMP PLUGINS tips that I hadn’t discuss here?
Let us Know in they comment below!


Please watch: «Page Speed Insights With Gtmetrix For More Accurate Web Load Test (2020)»
https://www.youtube.com/watch?v=A81RcdI3gag

Was ist AMP (Accelerated Mobile Pages) und wie gelingt die WordPress Integration

Deine Meinung gern per Audio-Kommentar unter: https://anchor.fm/stefboettcher/episodes/a55438

Du willst wissen, was AMP ist und was es dir bringt? Dann schau in dieses Video. Hier geht es um die beschleunigten mobilen Webseiten, was sie sind und wie man sie in WordPress Blog selbst integriert.
Damit kann Google in der Suche deutlich schnellere Ergebnisse anzeigen und an Smartphones ausliefern. Das ist die Idee dahinter.

Auf was musst du bei der Integration in WordPress achten? Welche Plugins benötigst du? Und was ist mit dem deutschen Datenschutz und der Impressumspflicht?

Googles AMP hat nicht nur Vorteile. Die Nachteile müssen auch betrachtet und letztlich abgewägt werden. Mehr Informationen und Details zur Umsetzung in meinem Blogbeitrag.

Lass uns darüber reden, hier in den Kommentaren und auf Anchor (anchor.fm/stefboettcher). Gib mir dein Feedback und deine Call-Ins.

Hinweis zur Tonqualität: Die erste Minute im Video bin ich leider nicht ganz sauber zu verstehen. Sorry dafür.

AMP — Accelerated Mobile Pages und wie integriere ich AMP in WordPress: https://www.station9111.de/2020/07/17/was-ist-amp-accelerated-mobile-pages-wordpress-blog-integration

Meine weiteren Social Media Kanäle:
Twitter: @stefboettcher
Instagram: @stefboettcher
Anchor: @stefboettcher
Blog: station9111.de
Zentrale Webseite: stefanboettcher.de

AMP WordPress — Como configurar AMP + YOAST SEO

O Google anunciou semana passada um projeto chamado Accelerated Mobile Pages, uma resposta ao Facebook Instant Articles, ao Apple News e ao Twitter Moments – todos os gigantes da tecnologia querendo abocanhar mais um pedaço da web que antes ficava sob o domínio das grandes publicações.

“Estamos anunciando uma nova iniciativa de código aberto chamada Accelerated Mobile Pages, que tem como objetivo melhorar muito o desempenho na navegação na internet móvel aberta”, anunciou David Bresbris, VP de Busca no Google. “Queremos páginas que abriguem formatos diversos de conteúdo, como vídeo, animações e gráficos, funcionando em conjunto com anúncios inteligentes, que carreguem instantaneamente”.

O objetivo do Google com o projeto é garantir que as páginas web carreguem quase que instantaneamente quando o usuário clicar em algum link, criando uma experiência tão rápida e responsiva quanto os aplicativos nativos de celular.

O mais legal é que, na filosofia “open source” do Google, todo o código será disponibilizado no Github para que qualquer publicação consiga integrar o seu conteúdo ao AMP.

Para saber mais acesse:
Escola Ninja WP: http://www.escolaninjawp.com.br

Estamos nas redes sociais
Facebook pessoal: https://www.facebook.com/flaviohoa
Fã page: https://www.facebook.com/escola.ninja.wordpress/
Fã Page pessoal: https://www.facebook.com/Flavio-Henrique-145011379270056/
Comunidade da Escola Ninja WP: http://www.escolaninjawp.com.br

Fast by default: AMP powering WordPress (AMP Conf 2020)

Fast by default: AMP powering WordPress

The WordPress AMP plugin, pioneered by Automattic, has enabled AMP for millions of sites, but there is still a lot of room for expanding its capabilities. To help the WordPress ecosystem push forward into a bright, fast, user-friendly future, Automattic, XWP, the AMP team and Google have formed a unique collaboration to bolster the plugin capabilities and enable AMP Canonical experiences by default for WordPress sites. See the first results of our work here at AMP Conf!

Watch the rest of the session videos here: https://goo.gl/fhMGBr

Subscribe to The AMP Channel for more AMP content: https://goo.gl/xt4cq5

Read about the event and look over the schedule on the event website here: https://goo.gl/RjVsFN

AMP + WordPress : Add ‘AMP’ Related Posts to Accelerated Mobile Pages without Plugin

This video shows you how to add related content to AMP for WordPress without plugin. The code adds 4 custom related posts to AMP pages based tags, optimized to adjust itself based on the screen size.

This is a follow up tutorial to the first one on customizing AMP for WordPress theme. If you haven’t watched the video, you can see that on this link
https://www.youtube.com/watch?v=RTJvgZ5bgpM

Get the code for related posts here:
http://techprezz.com/2020/03/wordpress-amp-how-to-add-related-posts-to-accelerated-mobile-pages-without-plugin/

PLEASE I beg you to like the video and share the posts on your socialmedia accounts and forums or link back.

Watch ✔ Like ✔ Comment✔ Share ✔ SUBSCRIBE ✔

Follow Us on
https://www.facebook.com/HowTo-113065995707084/timeline/
https://plus.google.com/+HowToGuide
https://www.facebook.com/TechPrezz
https://plus.google.com/+TechPrezz
http://youtubehowtos.blogspot.com/
http://youtubehowtos.tumblr.com/

This Channel’s name has been changed from «HowtTo» to TechPrezz, to know more about the change, please check out the about page

Thanks for all your support

(Rank Faster)How to Enable/Active AMP on WordPress Site in Just 10min (Hindi)

How to Enable/Active AMP on WordPress Site in Just 10min (Hindi)

AMP (Accelerated mobile pages) is getting important day by day & in this Video tutorial, you will learn how to setup AMP for your WordPress blog.

You will also learn:


Please watch: «How to make SEO Tool Website I FREE I How to Stepup AtoZ SEO Tool Website I Hindi 2020»
https://www.youtube.com/watch?v=PIYVIGi6aHQ

Что такое AMP-страницы и как их использовать? Андрей Липатцев, Google Ireland

Андрей Липатцев специалист службы поиска Google рассказывает о AMP-страницах
Подробнее про технические моменты по ссылке: https://www.ampproject.org/
———————————————
ПОДПИСЫВАЙТЕСЬ на канал WebPromoExperts! — http://bit.ly/YouTube_WPE
———————————————

— Еженедельный ДАЙДЖЕСТ (e-mail рассылка) — http://bit.ly/e-mail-wpe
— FACEBOOK: https://www.facebook.com/webpromoexperts
— ВКонтакте: http://vk.com/webpromoexperts

Академии интернет-маркетинга WebPromoExperts http://bit.ly/site_wpe
Блог Академии: http://bit.ly/blog_wpe

Агентство эффективного интернет-маркетинга WebPromo: http://www.web-promo.ua/
Блог агентства WebPromo: http://webpromo.ua/

Как настроить AMP

TexTerra: комплексное продвижение с фокусом на контент – https://texterra.ru/kompleksnyy-internet-marketing/?utm_source=youtube&utm_medium=texterra

Подписывайтесь на наш канал — http://www.youtube.com/channel/UCUMNUndgRn7BSUEkuZxdt2g?sub_confirmation=1

Читайте наш блог, где мы регулярно публикуем суперполезные материалы по интернет-маркетингу — http://texterra.ru/blog

Следите за новостями в социальных сетях:
Facebook — https://www.facebook.com/pages/Texterra/416582388387678
ВКонтакте — http://vk.com/web_texterra
Twitter — https://twitter.com/WebTexterra
Google+ — http://bit.ly/1S1Gzjj
Instagram — https://instagram.com/web_texterra/

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

Как технология AMP HTML ускоряет сайты и повышает бизнес-метрики / Артём Цымпов (eski.mobi)

РИТ++ 2020, Frontend Сonf
Зал Мумбаи, 6 июня, 13:00

* История проекта Accelerated Mobile Pages.
* Как это работает.
* Западные кейсы и результаты.
* Отечественные кейсы и результаты.
* Как правильно внедрить AMP.
* Будущее технологии.

Как ускорить сайт на WordPress в 17 раз. Пошаговая инструкция

Представляю наиболее полную инструкцию с способами по ускорению работы сайта на WordPress. Благодаря описанным ниже способам я ускорил загрузку своего сайта с 24,40 секунд до 1,41 секунды. Увеличил скорость загрузки в 17,3 раза! Хороший результат. Чтобы узнать как — читайте полную статью.

Замеры скорости работы сайта я проводил сервисом Pingdom Speed Test. Тестировал главную страницу сайта. Смотрите ниже показатели сайта «до» и «после» улучшений, и короткую и полную инструкцию по ускорению сайта.

Показатели сокрости загрузки сайта

Перед оптимизацией После оптимизации
Время загрузки 24.4 секунды 1.41 секунды
Количество запросов 94 запроса 76 запросов
Размер страницы 3.5 Мб 1.6 Мб

Скриншот замера скорости ПЕРЕД оптимизацией блога:

Скриншот замера скорости после оптимизации и проведенных ниже рекомендаций.
Ссылка на результат теста.

Короткое резюме по ускорению сайта на WordPress

Основное влияние на скорость оказали такие факторы как смена хостинга с использованием SSD дисков, оптимизация изображений, включение плагина кеширования W3 Total Cache, оптимизация БД сайта, удаление старых ревизий, включение сжатия файлов на стороне сервера, включение кеша для статичных файлов на стороне браузера. Далее следует полная развернутая инструкция по ускорению сайта на WordPress.

Полная инструкция как ускорить сайт на WordPress

1. Качественный SSD хостинг, быстрый пинг

Хостинг должен быть на SSD дисках. Желательно чтобы сервера хостинга располагались в вашей географической зоне, на которую ориентирован сайт. Если хостинг будет на SSD, но в США, а ваш блог ориентирован на Россию и страны СНГ, то толку от такого SSD будет мало. Так как будет идти долгий пинг для связи с сервером. Поэтому месторасположение дата центра хостинга также важно. Это важный параметр хостинга — быстрый пинг, отклик серверов. И чтобы хостер не делал оверселлинг услуг. Про тип хостинга — конечно лучше брать как VDS (виртуальный выделенный сервер) с необходимыми для вашего сайта параметрами, вместо обычного shared хостинга. Какую именно конфигурацию VDS выбрать — это зависит от нагрузки которую ваш сайт создает не сервер и от размера его суточной аудитории. Я бы советовал брать минимум 1Gb Ram, 1 ядро процессора и 10 Гб SSD. В начале у меня был VDS на обычных HDD дисках, затем я поменял его на SSD VDS хостинг.

Хостинг «До»:

VPS хостинг FreeHost.com.ua
Размер диска: 30 Gb HDD
Память: 2 Gb RAM
Частота CPU: 2,2 Ghz
Количество CPU: 1
Расположение серверов: Киев, Украина
Стоимость: 12,8 $/месяц

Хостинг «После»:

VDS хостинг от ihor.ru
Размер диска: 20 Gb HDD
Память: 1 Gb RAM
Частота CPU: 2,4 Ghz
Количество CPU: 1
Расположение серверов: Москва, Россия
Стоимость: 250 руб/месяц (примерно 5$/месяц)

По скриншотам теста скорости загрузки сайта, видно что на старом хостинге время ответа сайта достигало 12,3 секунды. Что непомерно много. На новом хостинге от ihor.ru время ответа сайта составляло 1,2 секунды, что в разы быстрее, по сравнению со старым хостингом. На этот показатель повлияли SSD диски, и более лучший дата центр с лучшим и более быстрым каналом.

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

2. Оптимизировать изображения

Проверьте используете ли вы оптимизированные jpg файлы изображений. Которые занимают небольшой размер и при этом обладают хорошим качеством. В Photoshop сохранять такие изображения можно командой Save for Web (Ctrl + Shift + Alt + S), или через функцию export assets если вы используете Photoshop CC. Не стоит сохранят большие непрозрачные картинки в .png формате, он занимает слишком много места, и для этого лучше использовать jpeg формат. Формат png подходит для небольшой графики которая используется в оформлении сайта, в шаблоне, это могут быть изображения кнопок, буллеты, изображения с прозрачным фоном.

Некоторые миниатюры к записям у меня были сохранены в .png формате, и размер изображения достигал 300 Кб. Пересохранив изображения в jpg формат, каждая миниатюра стала занимать 60-90 Кб в среднем. Таким образом вес некоторых изображений уменьшился в 3-4 раза, без потери качества.

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

3. Настройка wp-config.php для ускорения работы сайта на wordpress

Небольшой способ снизить загрузку на хостинг — отредактировать файл wp-config.php, который находится в коревой директории вашего сайта.

Находим в файле wp-config.php строку:

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

4. Настройка Robots.txt — запрет на индексацию ненужным сайтам.

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

Например, помимо роботов от Yandex и Google на сайт также заходит поисковый робот от поисковика Yahoo. Таким кодом можно запретить Yahoo роботу просматривать сайт:

Я прописал следующие запрещающие директивы:

Вот пример моего файла robots.txt

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

5. Настройка файла .htaccess для снижения нагрузки на сервер.

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

Настройка №1. Часто с сайтов копируют информацию вместе с картинками, не изменяя адреса картинок. И когда такое происходит картинки лежащие на нашем хостинге загружаются на других сайтах, и это создает ненужную нагрузку на хостинг.

Следующим кодом можно запретить загружать изображения нашего сайта на сторонних сайтах:

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

Настройка №2. В файле .htaccess можно и следует указать кэширование для некоторых объектов сайта (изображений, css и js фалов) чтобы браузер кешировал их на своей стороне и не загружал их каждый раз. Для этого в .htaccess ниже первого кода добавляем следующий код:

Настройка №3. Включим gzip сжатие страниц перед отправкой их пользователю. Вставим в .htaccess следующий код:

Настройка №4. Ограничение спама в комментариях. Большинство спам комментариев отправляются автоматически. Этим кодом мы запретим напрямую отсылать комментарии минуя форму комментирования. Теперь спам боты не смогу отправлять комментарии.

Настройка №5. Если вы пользуетесь системой FeedBurner, то у вас явно установлены плагины, которые отправляют RSS-контент на сайт FeedBurner. Сегодня вы можете их удалить, потому что перенаправить контент можно и без плагинов, уменьшив нагрузку на хостинг.

ВНИМАНИЕ. Не забудьте в примерах выше заменить адрес yourdomain.ru на адрес своего сайта.

6. Оптимизация базы данных

Важное значение в скорости работы сайта имеет База Данных. При сохранении постов по нескольку раз WordPress создает ревизии записи — состояния постов в разные моменты их редактирования. В результате со временем база данных содержит большое количество ненужных ревизий постов, и их необходимо очищать и оптимизировать. Сделать это можно с помощью плагина Optimize DB. Установить его можно из админки WordPress. Например запустив его на своем сайте я удалили более 1200 ревизий постов. Что значительно улучшило скорость работы БД.

7. Оптимизация кода шаблона (темы)

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

Настройка №1. Найти код, который отвечает за стили в файле header.php:

Внимание. Не забудьте изменить yoursite.ru на ссылку своего сайта.

Настройка №2. Изменить код пинбеков:

Заменить с исправлением yoursite.ru на свою ссылку:

Настройка №3. Изменение кода RSS ленты:

Заменить с исправлением yoursite.ru на свою ссылку:

Настройка №4. Довольно часто в подвале сайта (footer.php), разработчики тем оставляют совершенно ненужные запросы к Базе данных. Например:

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

Некоторые маленькие советы, которые позволят ускорить загрузку сайта:

1) Если ваш сайт не использует комментарии, не стоит их скрывать с помощью плагинов, это создает совершенно ненужную нагрузку. Так как вам комментарии совершенно не нужны, просто удалите следующий код из файла темы (single.php):

2) Старайтесь не использовать внешние скрипты, такие как, комментарии от Вконтакте, различные виджеты социальных сетей. Да, это выглядит красиво и эффектно, но создает приличную нагрузку на сайт. Из примеров могу сказать что мой сайт значительно грузил код веб-визора от ЯндексМетрики, виджет Add.This. Кнопки соц сетей я поменял на отельный JS плагин.

3) Почистите весь код вашего сайта от комментариев, данные комментарии вставляются с помощью тегов и /*код/. Оставьте только нужное, так как сайту приходится тратить лишние силы на их загрузку…

4) Старайтесь размещать все скрипты в конце страницы перед закрвающим тегом

Добавить комментарий