Создание 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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

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

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

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

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