Настройка диспетчера тегов Google Tag Manager для SEO продвижения

Технические проблемы по части SEO возникают по ряду причин: будь то CMS-системы, в которых не предусмотрена кастомизация, или сложности с разработкой, которые продолжаются месяцами, если не годами. В таких случаях приходится искать альтернативные способы улучшить работу веб-ресурсов. Один из вариантов — использовать своего рода meta-CMS. Эта система позволяет вносить специфические изменения в страницы сайта — то есть действовать в обход технических и прочих ограничений CMS.

Если вариант meta-CMS невозможен, можно задействовать систему управления тегами. В этой статье пойдет речь о диспетчере тегов Google (Google Tag Manager, или GTM), одном из самых распространенных диспетчеров (это 72.6% рынка, по данным BuiltWith.com). В диспетчерах тегов используется тег-контейнер, который заменяет все теги, добавленные в код сайта или приложения вручную. Чтобы добавить или изменить теги, разработчику не нужно что-либо менять на странице. С помощью диспетчера можно управлять тегами одного или нескольких веб-сайтов и мобильных приложений.  Все изменения делаются в тег-контейнере. В этом, собственно, преимущество такого подхода. Обычно используются уже готовые теги, в т.ч. теги Google Analytics или Facebook. Менее известный функционал — кастомные HTML-сниппеты (могут быть с кодом JavaScript). Это позволяет вносить произвольные изменения в HTML-страницы в зависимости от правил, которые вы определили. Преимущество диспетчера тегов в том, что с помощью одного тега можно добавить изменения на страницы всего сайта.

Раньше диспетчеры не рассматривались как надежный способ для изменений в плане SEO оптимизации, поскольку для тегов применялся JavaScript. Считалось, что якобы Google и другие поисковые системы игнорируют изменения в JavaScript. Но есть подтверждения, что Google все-таки фиксирует эти изменения, в т.ч. сделанные в диспетчере.

Как внести любые изменения в HTML, используя диспетчер тегов Google

Чтобы добавить новые элементы на странице, изменить контент или атрибуты элементов, или же удалить элемент со страницы, понадобятся определенные знания относительно:

1. CSS-селекторов и HTML — нужно знать, какие элементы на странице следует изменить.
2. JavaScript (в особенности jQuery), чтобы ввести элементы на страницу.

К примеру, существуют простые элементы, которые вы можете добавить на страницу, с которой не требуется что-либо извлекать (помимо URL страницы — встроенной переменной в GTM). С другой стороны, существуют более сложные изменения, добавление структурированных данных о продукции на платформах e-commerce, где нужно извлекать данных со страницы (названия продукции, цены и прочее).

Примечание. Если на сайте загружен jQuery, будет намного проще извлечь и добавить элементы на странице. Чтобы проверить, вы можете, просматривая страницы в Chrome или Firefox, открыть Console и вписать «jQuery» (с учетом регистра клавиатуры).

Если jQuery не загружен, появится сообщение об ошибке.

Вставьте элемент

Чтобы вставить элемент в HTML-страницу, понадобится HTML-тег в GTM. Ниже представлен пример HTML-тега, когда значение мета-тега robots устанавливается как «noindex,follow.» В этом примере используется jQuery, но можно обойтись и без jQuery, если нужно.

<script>

// Removes any existing meta robots tag

jQuery(‘meta[name=»robots»]’).remove();

// Create an empty meta element, called ‘meta’

var meta = document.createElement(‘meta’);

// Add a name attribute to the meta, with the value ‘robots’

meta.name = ‘robots’;

// Add a content attribute to the meta element, with the value ‘noindex, follow’

meta.content = ‘noindex, follow’;

// Insert this meta element into the head of the page, using jQuery

jQuery(‘head’).append(meta);

</script>

Этот сниппет установит значение метатега robots как «noindex,follow.» на любой странице, к которой он применяется и после того, как другие значения meta robots будут удалены. В диспетчере Google каждый тег связан как минимум с одним триггером, определяющим, когда должны активироваться теги. Конечно, лучше, когда теги срабатывают сразу же, как только страница загрузится.

Тег HTML, который размещен выше, можно изменить, чтобы создать другие типы элементов.

Извлечение данных со страницы

Есть два подхода к извлечению данных со страницы. Вы можете либо использовать встроенные переменные диспетчера Google, которые позволяют извлекать текст или атрибут элемента в зависимости от CSS-селекторов, либо сделать то же с JavaScript или jQuery в теге HTML.

Нужно создать разметку структурированных данных с помощью JSON-LD, откуда вы чаще всего будете извлекать данные страницы. Чтобы показать разные методы, обратимся к способу построения разметки страницы с продукцией за счет извлечения элементов в переменных GTM и теге HTML.

На этом примере описывается определенная модель сайта. У него есть страницы с продукцией, данные о продукции с уникальным ID в HTML страницы. На деле же понадобится найти CSS-селекторы, которые предоставят искомые элементы. Подходящий инструмент — расширение Selector Gadget Chrome, которое находит уникальный CSS-селектор для любого элемента на странице.

Для нашего примера могут быть следующие ID:

Переменные диспетчера Google

Если используются переменные диспетчера Google, для переноса данных со страницы понадобится установить переменную для каждого из элементов, которые размещены выше. Нужно перейти в меню Variables (переменные) и кликнуть NEW во вкладке User-Defined Variables.

Для каждого элемента нужно определить новую переменную по типу DOM Element, используя соответствующее ID или CSS-селектор для каждого из них. Для всего вышеперечисленного понадобится оставить пустым поле Attribute Name, за исключением изображения, где нужно будет извлечь атрибут src.

Чтобы перенести эти переменные в разметку JSON-LD, нужно настроить тег HTML, который соотносится с переменными.

Чтобы сделать ссылку на переменную диспетчера, нужны двойные фигурные скобки. Стоит учитывать, что мы использовали “Page URL”  (URL страницы) — это переменная по умолчанию в диспетчере Google. Последние четыре линии скрипта превращают элемент jsonData в часть скриптового элемента, “application/ld+json” должен быть вставлен в тег <head> страницы.

jQuery

Все вышеперечисленное можно делать и без переменных диспетчера, используя один тег HTML. Для этого понадобится jQuery, чтобы сделать то же, что делают переменные диспетчера.

Тег HTMl используется практически также, как и переменные, данные со страницы извлекаются с помощью jQuery. Очевидно, что это возможно только для страниц, на которых загружен jQuery, но эквивалентные выражения возможны в JS без jQuery.

Преимущество такого метода в том, что не нужно устанавливать индивидуальные переменные для каждого элемента — вся информация содержится в одном теге. С другой стороны, если у вас переменные, на которые ссылается множество разных тегов и/или триггеров, тогда есть смысл использовать переменные. Например, когда изменяется значение переменной — и это изменение применяется ко всем тегам и триггерам — какой-то отдельный менять не нужно.

Работает ли это?

Этот метод работает при условии, что Google замечает и индексирует изменения, которые вносятся посредством GTM. Как отмечалось выше, существует неопределенность относительно индексации разметки и контента, выполненных через JavaScript. Есть три свежих примера того, что это работает.

1) Разметка структурированных данных JSON-LD

На примере того, о чем шла речь выше (методы jQuery и метод переменных), можно видеть расширенные сниппеты в поисковых результатах, в этих случаях вообще не используются структурированные данные на странице, прежде чем диспетчер их применит. Ниже представлены сниппеты — это пример условной страницы, где используется сниппет продукции.

2) Теги Canonical

Также есть доказательства, что Google обращает внимание на теги canonical, выполненные посредством диспетчера. На графике ниже (STAT) показано число ключевых слов, по которым продвигаются страницы, до и после использования тегов canonical в диспетчере. После изменений с помощью canonical страница перестала ранжироваться по любым ключевым словам, их заменил тег canonical.

3) Мобильные теги

В этом случае у сайта были отдельные версии — десктопная и мобильная — на разных субдоменах. Мобильные теги для переключения между версиями (switchboard tags) были добавлены к сайту для десктопа, с использованием GTM, и страницы мобильного субдомена моментально стали индексироваться.

Примеры тегов

Представленные ниже теги можно найти в тег-контейнере. Они применимы только для сайтов, на которых загружен jQuery. Чтобы выполнить теги, понадобятся следующие шаги:

1. Загрузить тег-контейнер с Google Drive
2. В Admin-меню контейнера выберите Import Container.

3. Выберите файл контейнера из загруженного места, выберите Merge (объединить) и переименовать несовместимые теги, чтобы не переписывать любые установленные теги.

4. Кликните Confirm (подтвердить).
5. После загрузки контейнера внесите необходимые изменения в теги, чтобы они подходили для сайта. Сделайте так, чтобы триггеры применялись только к соответствующим страницам.

Тег для ввода мобильных тегов переключения (switchboard tags)

Если у вас отдельный мобильный сайт с одинаковой страницей и структурой URL, этот тег может добавить теги переключения — и вместо «www» будет «m» в названиях домена. Это также добавит теги canonical тем мобильным страницам, у которых его не было, и укажет на непосредственные десктопные эквиваленты.

Тег для добавления значения noindex

Здесь все так же, как и на описанном выше примере. Обращайте внимание на триггер, чтобы по ошибке не запретить индексацию каждой из страниц сайта. Этот атрибут удалит любые существующие значения метатега robots, и вместо них будет «noindex follow».

Это значение может применяться к страницам с продукцией, которой нет на складе. Можно использовать триггер, который отслеживает запасы продукции в определенном элементе на странице, и автоматически добавляет атрибут noindex.