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