Создание AMP Google для сайта на платформе 1С-Битрикс (в частности для интернет-магазиа)

Убираем noindex

Статья в процессе написания, поэтому не судите строго :)

Для поиска ошибок AMP-верстки очень помогает расширение AMP Validator для Chrome, рекомендую для установки.

Для поиска только используемого CSS-кода (а нам нельзя превышать 50 Кб) я использовал расширение CSS Used, также рекомендую.

Проверка страниц осуществляется тут - https://search.google.com/test/amp

Еще один валидатор AMP - https://validator.ampproject.org/

Вкратце по css: убираем !important ...

Для форм

Включаем в шаблон

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

Если необходимо выполнить несколько действий по нажатию на элемент, пишем их через запятую. Пример: on="submit-success:amp-obratnij-zvonok.close,amp-obratnij-zvonok-success"

Если данные отправляются c помощью Ajax-а методом POST, необходимо:

  • Вместо атрибута action использовать action-xhr
  • Адрес обязательно должен начинаться с протокола https (либо использовать относительные пути)
  • Если мы отдаём json, то обязательно нужно указать заголовок Content-Type: application/json; charset=utf-8 (например в функции header)
  • В заголовках крайне желательно указать Access-Control-Allow-Origin. Сразу покажу решение которое мне пригодилось, чтобы обрабатывающий ajax запрос скрипт проходил CORS проверку по разным доменам или по разным протоколам http/https пишем в него в начало:
  • header("Access-Control-Allow-Credentials: true");
    
    $http_origin = $_SERVER['HTTP_ORIGIN'];
    
    $allowed_http_origins   = array(
    	"http://www.test.ru",
    	"http://dev.test.ru",
    	"https://www.test.ru",
    	"https://dev.test.ru",
    );
    
    
    if (in_array($http_origin, $allowed_http_origins)){
    	header("Access-Control-Allow-Origin: " . $http_origin);
    }
    

В форме обязательно должен быть атрибут target (или _top или _blank)

Есть особенности указания action

Для изображений указываем amp-img, тип responsive (адаптивный) или intrinsic (встроенный), а так же ширину и высоту (width, height). Для responsive можно указывать соотношение сторон.

Убираем навешанные события на элементы, всякие onclick="..." и пр.

Убираем весь кастомный JS-код

Чтобы убрать часть JS-кода сбора статистики от Битркса используем обработчики события:

	// удяляем скрипт ядра для AMP страниц сайта
	function ampDeleteKernelJs(&$content)
	{
		global $USER, $APPLICATION;
		if((is_object($USER) && $USER->IsAuthorized()) || strpos($APPLICATION->GetCurDir(), "/amp/") === false) return;
		if($APPLICATION->GetProperty("save_kernel") == "Y") return;
		
		// НАРОД, внимание!!! чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ
		$content = preg_replace('/ЗНАК_МЕНЬШЕscript[^>]+?>var\s_ba\s=\s_ba[^ЗНАК_МЕНЬШЕ]+ЗНАК_МЕНЬШЕ\/script>/', "", $content);
		$content = preg_replace("/\n{2,}/", "\n\n", $content);
	}

	// также необходимо зарегестрировать сам обработчик (например в init.php)
	AddEventHandler('main', 'OnEndBufferContent', [__CLASS__, 'ampDeleteKernelJs']);

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

делаем отдельную папку

создаем отдельный шаблон

настраиваем показ шаблона в зависимости от адреса

Как добавить кастомный/произвольный JavaScript в AMP Google

Для этого необходимо сначала подключить соответствующую библиотеку

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

В случае Битрикса для этого я использовал $Asset->addString() в header.php.

Мы вставляем нужный нам код на страницу в тегах

< script id="some-id" type="text/plain" target="amp-script">

Оборачиваем кусок кода над которым будем производить действия с помощью

Где в script указываем наш id скрипта.

Далее нужно указать meta-тэг с хешем нашего JS-а. Хеш можно посмотреть в ошибках в консоли если запустить скрипт без мета-тега.


Мета-тег в Битриксе я добавлял с помощью $Asset->addString("тут мета-тег")

А вообще можно (наверное даже лучше) добавлять кастомный подключаемый скрипт по примеру:

< amp-script layout="container" 3p-lib-src="https://code.jquery.com/jquery-1.12.4.min.js" sandbox="allow-forms" src="my-custom-js.js> ... < /amp-script>

Можно даже таким образом подключить сторонюю библиотеку (JQuery как в примере), но тут важно учесть ограничения накладываемы AMP, например общий объем кода до 150Кб. Поэтому я работал напрямую с JS без библиотек.

Подготовка header.php для AMP

Использовать подключаемые js и css нельзя, поэтому функцию $APPLICATION->ShowHead() использовать не получится

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

Примеры реализаци AMP - https://amp.dev/documentation/templates/

Не забываем указать в AMP версиии страницы каноническую ссылку на оригинальную страницу, а на оригинальной ссылку на AMP версию с помощью тега:

< link rel="amphtml" href="https://www.example.com/">

В head добавляем

	

	ShowProperty("amp_js");?>

В целом можно разбить на 2 разные функции, но мне так удобней

/*
 * $path - путь до файла, если js то путь до файла на внешнем сервере, если css, то путь от корня сайта
 * Добавление файла в тело html
 * Внутри идет проверка на js и css и в соответствии с этим определенный тип вставки файла в документ
 * Author: www.lexa.pro
 */
if(!function_exists('ampIncudeFile'))
{
	function ampIncudeFile($path = "")
	{
		global $APPLICATION;


		$path_info = pathinfo($_SERVER['DOCUMENT_ROOT'] . $path);

		if($path_info["extension"] == "css")
		{
			if (file_exists($_SERVER['DOCUMENT_ROOT'] . $path))
			{
				$ampCss = $APPLICATION->GetPageProperty("amp_css"); // текущие стили
				$ampCss .= "\r\n----- Start File: " . $path . " -----\r\n \r\n"; // подключаем новые
				$ampCss .= file_get_contents($_SERVER['DOCUMENT_ROOT'] . $path) . "\r\n"; // подключаем новые

				$APPLICATION->SetPageProperty("amp_css", $ampCss);
			}
		}
		elseif($path_info["extension"] == "js")
		{
			preg_match('/v0\/(.*)\-/', $path, $found_ce);

			$customElement = $found_ce[1];

			// НАРОД, внимание!!! чтобы подсветка синтаксиса не ругалась я заменил в регулярке символ < на ЗНАК_МЕНЬШЕ
			$ampJs = $APPLICATION->GetPageProperty("amp_js"); // текущие скрипты
			$ampJs .= "ЗНАК_МЕНЬШЕscript data-skip-moving=\"true\" async src=\"".$path."\" custom-element=\"".$customElement."\">ЗНАК_МЕНЬШЕ/script> \r\n"; // подключаем новые

			$APPLICATION->SetPageProperty("amp_js", $ampJs);
		}
	}
}

// и пример вызова
//js - Внешний путь до файла
ampIncudeFile("https://cdn.ampproject.org/v0/amp-accordion-0.1.js");
ampIncudeFile("https://cdn.ampproject.org/v0/amp-bind-0.1.js");

//css - Путь от корня
ampIncudeFile("/local/templates/temp/l/card-.css");
ampIncudeFile("/local/templates/temp/l/choose-page.css");

Возврат к списку


Текст сообщения*
Защита от автоматических сообщений