Используйте Google Tag Manager для SEO оптимизации

  1. Управление структурированными данными с помощью JSON-LD
  2. 1) УПРАВЛЕНИЕ ГРАФОМ ЗНАНИЙ
  3. 2) УПРАВЛЕНИЕ ПОИСКОМ
  4. 3) УПРАВЛЕНИЕ ХЛЕБАМИ
  5. 4) ОБЗОР УПРАВЛЕНИЯ
  6. HTML-атрибуты 5
  7. ИЗМЕНИТЬ НАЗВАНИЕ СТРАНИЦ БЕЗ ПОДКЛЮЧЕНИЯ КОДА
  8. ПОЛЕЗНЫЕ ССЫЛКИ:

[Обновлено 27 февраля 2019 года]

Кто сказал, что Google Tag Manager может быть полезен только для веб-аналитики?

Что вы можете не знать, так это то, что существует так много ( но слишком много) уловок, которые могут помочь вам, даже если вы работаете в SEO ,

Что? Уууууу ... 🙂 мы увидим некоторых вместе.

Управление структурированными данными с помощью JSON-LD

Прежде всего, что такое структурированные данные?

Структурированные данные - это разметки, которые позволяют гусеничный получить дополнительную информацию на веб-страницах, которые будут отображаться в SERP ,

Давайте поговорим о, например, богатый фрагмент , панировочные сухари , Дополнительные ссылки , окно поиска , обзор ... Чтобы узнать больше, вы можете прочитать мой глоссарий на структурированные данные ,

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

Эти данные также обогатят граф знаний реализуя например логотипы , контакты , социальные профили

Здесь, одна из фантастических вещей, которые вы можете сделать с помощью Google Tag Manager, это просто использовать JSON-LD реализовать структурированные данные с помощью наших дорогих друзей или персонализированных тегов HTML.

1) УПРАВЛЕНИЕ ГРАФОМ ЗНАНИЙ

Я уже говорил вам, что эти теги по умолчанию еще не представлены в Менеджере тегов Google, поэтому мы будем управлять ими с помощью пользовательских тегов HTML:

  • Теги раздела> Новый тег > Пользовательский тег HTML.
  • Скопируйте и вставьте сценарии (для удобства я поместил их под изображением, то же самое относится и к другим тегам, которые мы увидим позже).
  • Активировать на: все страницы.
  • Давайте назовем это, например, « cHTML - График знаний» .
  • Сохранить

Если мы хотим убедиться, что тег работает, мы можем войти в режим предварительного просмотра : мы должны увидеть новый тег среди тегов Fired On This Page .

Существует также инструмент Google, который позволяет проверить функционирование структурированных данных, вы можете найти его в нижней части этого руководства среди полезных ссылок 🙂

А вот и коды, взятые из Руководства Google по структурированным данным. Естественно, они будут персонализированы с вашими данными:

LOGO

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "Organization", "url": "http: //www.demo. tagmanageritalia.it/esempio/ "," logo ":" http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png "} </ script>

КОНТАКТЫ

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "Organization", "url": "http: //www.demo. tagmanageritalia.it/esempio/ "," logo ":" http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png "," contactPoint ": [{" @ тип ":" ContactPoint "," telephone ":" + 39-3388835425 "," contactType ":" техническая поддержка "," availableLanguage ": [" Italian "," English "]}]} </ script>

СОЦИАЛЬНЫЕ ПРОФИЛИ

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "Organization", "url": "http: //www.demo. tagmanageritalia.it/esempio/ "," logo ":" http://demo.tagmanageritalia.it/esempio/tm-content/uploads/2016/04/TagManagerItalia-icona.png "," contactPoint ": [{" @ тип ":" ContactPoint "," phone ":" + 39-3388835425 "," contactType ":" техническая поддержка "," availableLanguage ": [" Italian "," English "]}]," sameAs ": [" https : //www.facebook.com/zambon.matteo? fref = ts "," http://it.linkedin.com/in/zambonmatteo "," https://twitter.com/zambros_it "," https: / /plus.google.com/+MatteoZambon "]} </ script>

Если вместо этого ваш сайт ссылается на человека, а не на организацию, просто измените тип в коде:

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "Person", "name": "Matteo Zambon", "url": "http://www.demo.tagmanageritalia.it/esempio/", "sameAs": ["https://www.facebook.com/zambon.matteo?fref=ts", "http: //it.linkedin .com / in / zambonmatteo "," https://twitter.com/zambros_it "," https://plus.google.com/+MatteoZambon "]} </ script>

2) УПРАВЛЕНИЕ ПОИСКОМ

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

(Всегда помните, что мы можем реализовать окно поиска, но тогда Google решит, отображать ли его на основе своих алгоритмов, поэтому, если вы его не видите, проверьте его и не берите с собой 😀)

(Всегда помните, что мы можем реализовать окно поиска, но тогда Google решит, отображать ли его на основе своих алгоритмов, поэтому, если вы его не видите, проверьте его и не берите с собой 😀)

  • Теги раздела> Новый тег > Пользовательский тег HTML.
  • Скопируйте, вставьте скрипт.
  • Активировать на: все страницы.
  • Давайте назовем это, например, «cHTML - Search Box» .
  • Сохранить.

Сохранить

Это скрипт, который нужно вставить:

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "WebSite", "url": "http: //demo.tagmanageritalia. it / example / ",« потенциальное действие »: {« @type »:« поисковое действие »,« цель »:« http://demo.tagmanageritalia.it/esempio/?s= enjsearch_term} »,« запрос-ввод » : "обязательное имя = поисковый_терм"}} </ script>

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

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

3) УПРАВЛЕНИЕ ХЛЕБАМИ

Даже крошки, видимые в поисковой выдаче, можно управлять с помощью Google Tag Manager.

Вот как:

  • Теги раздела> Новый тег > Пользовательский тег HTML.
  • Скопируйте, вставьте скрипт.
  • Активировать на: все страницы.
  • Давайте назовем это, например, "cHTML - Breadcrumbs" .
  • Сохранить.

Сохранить

Код, который вам нужно вставить:

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "BreadcrumbList", "itemListElement": [{"@type": "ListItem "," position ": 1," item ": {" @id ":" http://demo.tagmanageritalia.it/esempio/arts "," name ":" Arts "}}, {" @type ": "ListItem", "position": 2, "item": {"@id": "http://demo.tagmanageritalia.it/esempio/arts/books", "name": "Books"}}, {" @type ":" ListItem "," position ": 3," item ": {" @id ":" http://demo.tagmanageritalia.it/esempio/arts/books/poetry "," name ":" Поэзия " "}}]} </ script>

Мы проверяем с помощью функции предварительного просмотра :

Мы проверяем с помощью функции предварительного просмотра :

4) ОБЗОР УПРАВЛЕНИЯ

Отзывы - это отзывы, которые вы можете увидеть в поисковой выдаче ниже некоторых сайтов. Они могут иметь разные форматы, такие как звезды, проценты, оценка от 1 до 10 и т. Д.). Этим также можно управлять с помощью диспетчера тегов Google с помощью пользовательских тегов HTML.

  • Теги раздела> Новый тег > Пользовательский тег HTML.
  • Скопируйте, вставьте скрипт.
  • Активировать на: все страницы.
  • Давайте назовем это, например, "cHTML - Review" ..
  • Сохранить

Сохранить

<script type = "application / ld + json"> {"@context": "http://schema.org/", "@type": "Product", "image": "http: //www.example .com / catcher-in-the-rie-book-cover.jpg "," name ":" Над пропастью во ржи "," review ": {" @type ":" Review "," reviewRating ": {" @type ":" Rating "," ratingValue ":" 5 "}," name ":" Шедевр литературы "," author ": {" @type ":" Person "," name ":" John Doe " }, "datePublished": "2006-05-04", "reviewBody": "Мне очень понравилась эта книга. Это жизненно важная задача для людей испытать свою жизнь и достичь совершеннолетия.", "Издатель" : {"@type": "Organization", "name": "Washington Times"}}} </ script>

Еще раз мы проверяем, что в режиме предварительного просмотра тег появляется между тегами, запущенными на этой странице :

Как это часто бывает, на каждой странице могут быть разные продукты, и поэтому они требуют разных отзывов
Как это часто бывает, на каждой странице могут быть разные продукты, и поэтому они требуют разных отзывов . В этом случае обзоры будут управляться с помощью переменных Google Tag Manager.

Вспомните, например, отзывы на отдельных страницах, сделанные пользователями. Представьте себе возможность использовать эти данные для создания богатых фрагментов.

Фантастика, не правда ли?

HTML-атрибуты 5

Менеджер тегов Google может помочь вам изменить атрибуты HTML5 , а также может помочь в SEO .

Но каковы атрибуты HTML 5 ? Атрибуты вставляются в элементы HTML, которые дают больше информации.

В GTM вы можете управлять ими с помощью переменной типа элемента DOM, если вы хотите экстраполировать значения из статического HTML-элемента, или вы можете сделать это с помощью gtm.element.dataset. [Data-attribute], где [data-attribute] - это конкретное имя 'атрибут в случае, если вам нужно проанализировать динамические элементы (например, нажав на элементы).

Эти атрибуты можно использовать для передачи или управления данными и информацией в Google Analytics .

Вот пример (взят из Руководство по Mozilla ):

<article id = "electriccars" data-columns = "3" data-index-number = "12314" data-parent = "cars"> ... </ article>

Имейте в виду, что мы решаем эту дополнительную информацию HTML-элемента.

Вот как переменная должна быть настроена в GTM:

Вот как переменная должна быть настроена в GTM:

Вы также можете использовать Javascript для чтения атрибутов, используя document.getElementById.

Например:

var article = document.getElementById ('electriccars'); article.dataset.columns // "3" article.dataset.indexNumber // "12314" article.dataset.parent // "автомобили"

ИЗМЕНИТЬ НАЗВАНИЕ СТРАНИЦ БЕЗ ПОДКЛЮЧЕНИЯ КОДА

Это не заканчивается, потому что Менеджер тегов Google может помочь вам изменить мета-заголовок , мета-описание и даже содержимое сайта .

Я покажу вам, например, как редактировать заголовок.

Заголовок страницы среди прочего вы можете взять его с помощью простого Javascript:

Благодаря пользовательскому тегу HTML вы можете взять document.title и изменить его значение на интересующей вас странице. Другими словами, мы собираемся изменить заголовок страницы с помощью Javascript, например так:

  • Создать новый пользовательский тег HTML
  • Вставьте этот скрипт:

<script> document.title = "Мой новый оптимизированный заголовок страницы"; </ Script>

  • Активируйте его на странице, где вы хотите изменить мета-заголовок

Активируйте его на странице, где вы хотите изменить мета-заголовок

На данный момент вам нужно просто подождать, пока Google Crawler пройдет, отсканировать и отрендерить, и все готово

PS: эти методы редактирования заголовка, описания и т. Д. Следует использовать в качестве обходного пути, если у вас нет другого решения!

PPS: если вам это также нужно для других целей, заголовок страницы можно взять с помощью простого Javascript:

PPS: если вам это также нужно для других целей, заголовок страницы можно взять с помощью простого Javascript:

И если вам все еще не хватает, я оставлю вам ссылки на другие мои руководства, которые могут вас заинтересовать:

Помните, что чтобы изменения вступили в силу, вы должны опубликовать все, нажав синюю кнопку «Отправить» 😉

Была ли статья полезной? Хотите что-нибудь добавить? Оставьте комментарий ниже 🙂

ПОЛЕЗНЫЕ ССЫЛКИ:

Поделитесь Google Tag Manager тоже!

Matteo?
Matteo?
It/esempio/?
Фантастика, не правда ли?
Хотите что-нибудь добавить?