ТЗ на Google AMP для разработчика от SEO-специалиста

После перехода Google на mobile-first... Всем все равно, никто ничего не понял. Видишь mobile-first index? Нет. Я тоже. А он есть.

Кто-то за AMP, кто-то против, так как считает, что с мобильного телефона трафик c AMP не будет считаться, путая с Instant Articles или другими «островковыми» технологиями поисковых систем. Никто не думает, что не сделав AMP, вас вообще может не быть в выдаче, так как наличие этой верстки для контентного сайта является фактором ранжирования, например.

Можете поверить, что AMP — must have для СМИ и информационных сайтов, если вам интересен Google и его трафик, в том числе поисковый.

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

Задача ставится в Jira, Trello или Asana так: «Вот тебе официальное руководство от Google на английском. Сделай AMP». Все.

Да-да, вы же так же делаете AMP. Или спросите у кого-нибудь, кто ставил задачу по AMP.

Никто не понимает, почему они важны и что мало просто их сделать. Их надо настроить так, чтобы они были полезны.

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

Так вот. ТЗ по AMP в части касающейся SEO:

— Действительно, вот

https://www.ampproject.org/docs/getting_started/create/basic_markup руководство от Google с техническими подробностями разметки.

— Прописываем канонические URL в header AMP-страниц (прописываем URL main-страницы в теге rel canonical иным языком). Вот так это выглядит примерно:

<rel="canonical" href="http://main_page.html" />

— На каждой main-странице ставим следующее выражение c ссылкой на AMP-страницу:

<rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

— Внести в robots.txt строку, запрещающую индексирование страниц AMP

— Если у нас редактор Wysiwyg — там будут лишние элементы, которые для AMP-разметки будут непонятны, при валидации Google будет ругаться на строки кода с этими элементами. Также не читает Google и тег img в AMP-версии. Его надо заменить на AMP-img.

— Обязательные атрибуты для изображений в фиде. Если их не указать, то изображения не будут показываться.

layout="responsive" (для адаптивного масштабирования)

width=”___” — в пикселях

height=”___” — в пикселях

Примерный код для программного учета вышенаписанных штук:

article = article.replace("<img", '<amp-img layout="responsive"')article = article.replace("</img>", "</amp-img>")article = re.sub(r'style="[^"]+"', '', article) #замена по регулярному выражению

Article — это все содержимое статьи.

При использовании PHP надо будет заменить

article.replace на str_replace и, возможно, переставить аргументы местами, а re.sub заменить на preg_replace.

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

— АMP не видит внешние стили, поэтому лучше в header внедрить CSS-стили. Но записать их отдельно для AMP. Например, <style amp-custom>

— Прописать все нужные поля в описание <script type="application/ld+json">

— Для добавления аналитики — в хэдер поставить скрипт

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

И вставляем коды счетчиков для «Метрики» и Analytics.

— Если надо добавить рекламу, то в header поставить скрипт

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

И в тег сам рекламный блок добавляем.

— Чтобы добавить меню, в header ставим скрипт:

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Далее добавляем кнопку, при нажатии на которую будет показываться сайдбар:

<div role="button" on="tap:sidebar.toggle" tabindex="0" class="" id="ham">☰</div>

И добавляем сам сайдбар в код.

Надеюсь, вы с радостью воспользуетесь статьей.