Создание AMP страниц для улучшения позиций в Google
Введение
В этой статье разберем как создать AMP страницы для Гугла.
Что такое AMP страницы - это предоставление страниц в специальном формате, когда выгружается только контент, который гугл может закешировать у себя и мгновенно показывать пользователям.
Наша задача - создать такой механизм, который будет выдавать по определенному адресу наш контент в формате AMP.
Наш пример - это выдача статей блога в формате AMP.
Движок выдачи AMP страниц
Создаем страницу с кодом amp. Тип - лендинг (чтобы ничего лишнего не было на странице).
Вставляем тело страницы: https://pastebin.com/sPMnbbdQ
Прописываем SQL процедуру страницы:
CREATE PROCEDURE [dbo].[pg_crumbs_amp]
@roles nvarchar(128),
@itemID nvarchar(128) = '',
@urlParameters CRUDFilterParameter READONLY
AS
BEGIN
declare @result TABLE (title nvarchar(256), link nvarchar(256), tooltip nvarchar(256),
ord int, [right] bit, customLink nvarchar(512))
declare @t1 table(created nvarchar(max), [image] nvarchar(max), title nvarchar(max),
canonical nvarchar(max), microdataLD nvarchar(max),
header nvarchar(max), content nvarchar(max), footer nvarchar(max)
)
insert into @t1
exec amp_getPage @url = @itemID
-- SELECT 1
select * from @result order by ord
-- SELECT 2
if(exists(select title from @t1 where len(title)>0)) begin
select 1
end else begin
select '/' RedirectUrl
end
-- SELECT 3
select created created, [image] image, title title, canonical canonical, microdataLD microdataLD,
header header, content content, footer footer
from @t1
END
В этой процедуре мы вызываем внешнюю процедуру amp_getPage, которая выдает нам параметры для вставки в страницу.
Как выглядит процедура amp_getPage: https://pastebin.com/0f2iavK8
Примечания:
- В данном примере мы обрабатываем 2 вида контента - страницы блога (blog) и документация (docs). По аналогии можно сделать и для других элементов.
- Внизу страницы мы выводим блок других статей через HTML блок.
- Внизу страницы мы ставим ссылку на оригинал страницы
- В canonical мы записываем канонический адрес оригинальной страницы.
Далее нам необходимо прописать тег link на amp версию на основной странице: https://pastebin.com/B3N5uPFG
После завершения всех работ, необходимо проверить страницу AMP через Google - https://search.google.com/test/amp
Примеры выдачи AMP
Пример выдачи AMP для блога можно посмотреть - https://falconspace.ru/amp/blog-kak-sozdat-bystry-sayt
А для документации: https://falconspace.ru/amp/docs-telegram-boty-i-otpravka-soobshcheniy-v-telegram
Зачем использовать внешнюю процедуру amp_getPage, когда можно было все это сгенерироовать в самой странице?
Дело в том, что мы упрощаем механизм AMP для разработчика-пользователя. Ему не надо думать как внутри это все работает, его задача - просто на основе itemID заполнить правильно параметры табличной переменной @t1.
При этом остается возможность посмотреть как что внутри устроено и нарастить механизм по необходимости (например, добавить favicon или что-то другое).
Почему использован такой странный способ передачи данных через временную таблицу?
Это позволит в будущем расширять безболезненно формат передачи.
В подобном механизме в любом случае будут постепенные улучшения, доработки возможностей. Важно обеспечить простой способ наращивания параметров.
Как добавлять свои кастом стили на AMP страницы?
Для этого используем в head тег style с атрибутом amp-custom
Детали - https://amp.dev/documentation/guides-and-tutorials/start/create/presentation_layout/
Ссылки по теме
Полезные советы по AMP - https://www.directline.pro/blog/google-amp/
Связь страниц AMP с не AMP страницами - https://amp.dev/ru/documentation/guides-and-tutorials/start/converting/discoverable/
Тест AMP страниц - https://search.google.com/test/amp
Рекомендации Google по AMP - https://developers.google.com/search/docs/advanced/guidelines/amp?hl=ru
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация
- API, Интеграции
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO Возможности поисковой оптимизации сайта (SEO) Генерация RSS в SQL процедуре Интеграция с Яндекс XML API Интеграция API Яндекс.Вебмастер SEO - Как создать виртуальные страницы с одним шаблоном, но под разные ключи Оптимизация по загрузке картинок Как сделать карту сайта Яндекс Турбо - как включить Яндекс Турбо страницы для контента на сайте Интеграция с Тургенев API для проверки качества контента Создание AMP страниц для улучшения позиций в Google Внедрение рекламных блоков в контент
- Системные моменты
- HOWTO
- HOWTO Таблицы
- HOWTO Формы
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Falcon Space
Это снижение стоимости владения
за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом
Это быстрое внесение изменений
по ходу эксплуатации программы. Как создается функционал на платформе
Это простой удобный интерфейс
адаптация под мобильные устройства. Про юзабилити платформы