Как: добавить структурированные данные ld + json в ваше приложение AngularJs

1. 1. Создание директивы и добавление тега элемента
2. 2. Загрузка данных SEO в переменную Scope
3. 3. Наблюдение за изменением объема
4. 4. Фильтр объекта JSON
5. 5. Заменить элемент директивы скриптом

Долгое время поисковая оптимизация Google опиралась на ограниченный набор инструментов, таких как автоматический обход, консоль поиска или поддерживаемые типы схем. Однако ситуация начала меняться в 2015 году, когда Google наконец решил дать ld + json зеленый сигнал, открывая двери для множества богатых карт, которые строго ограничены до этого момента.

Если вы не знакомы с богатыми картами, это то, что Google должен сказать о них,

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

Google теперь поддерживает множество многофункциональных карт, таких как BreadCrumbs, Sitelinks, Sitelink Search, Корпоративная контактная информация, логотипы и т. Д., И их легко можно встроить в обычные предварительно отрендеренные сайты с помощью сценария ld + json. С такими фреймворками JavaScript, как AngularJs или React, вещи, как правило, идут на юг. Причина очень проста - представления отображаются после загрузки главной страницы, и, таким образом, мы можем включить SEO-данные этого представления в тело только после загрузки представления (или успешного выполнения запроса AJAX). Это, однако, может быть принято как преимущество, так как мы можем динамически изменять содержимое скрипта в зависимости от страницы с помощью одной директивы.

Итак, вот что мы собираемся сделать:

- Создать директиву.

- Объявить тег элемента директивы на главной странице

- Загрузить данные SEO в переменную области видимости

- Следите за изменением области действия этой переменной

- Отфильтруйте данные переменной области и поместите ее в скрипт

- Заменить директиву этим скриптом

1. Создание директивы и добавление тега элемента

Мы объявляем директиву с именем, richcard (не стесняйтесь выбирать любую другую) и внутри нее обращаемся к сервису $ filter . Мы узнаем больше об этой услуге через некоторое время. Ожидается, что директивная функция вернет набор свойств, связанных с целевым элементом, чтобы угловой компилятор узнал о его поведении. Если вы посмотрите на пример ниже, вы заметите, что мы возвращаем свойства restrict и link.

Свойство restrict сообщает компилятору, что это за объявление - элемент или директива атрибута. Есть еще два ограничения, класс (C) и комментарий (M), но мы сосредоточимся только на первых двух. Значение EA для ограничения позволяет нам использовать эту директиву в качестве элемента или атрибута. В этом примере используется элемент, и объявление для этого выглядит так,

<Richcard> </ richcard>

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

2. Загрузка данных SEO в переменную Scope

Это довольно легкий шаг. Точно так же, как мы инициализируем переменную $ scope, мы инициализируем корневую переменную $ scope. $ Внутри нужного контроллера с нашим объектом ld + json. Преимущество последнего заключается в том, что мы можем объявить нашу директиву на главной странице, а не частично. Если вы хотите использовать его только для одной части, выберите $ scope. В приведенном ниже примере удалена корневая переменная области видимости ld, содержащая ориентированные на схему данные My Wonderful Site. Если вы не знаете схемы, необходимой для связанных данных JSON, перейдите к руководству Google по структурированным данным ,

3. Наблюдение за изменением объема

Вернемся к первому примеру. Обратите внимание, что у нас есть объявление, объявленное в нашей области видимости внутри функции ссылки директивы. Эти часы позволяют нам узнать, когда значение области изменилось, и мы запускаем наши манипуляции только тогда. Функция $ watch принимает имя переменной для наблюдения и функцию обратного вызова, содержащую значение переменной. Мы используем это значение для фильтрации нашего JSON и используем его для наших целей на следующем шаге.

4. Фильтр объекта JSON

Значение, которое мы получаем из обратного вызова $ watch, является чистым объектом JSON, к которому нельзя добавить строку в соответствии с нашим требованием. Мы должны изменить это согласно нашей потребности. Есть два способа сделать это, формальный способ фильтрации - JSON. Мы используем ранее объявленный сервис $ filter. Сначала мы сообщаем службе $ filter, что вводим объект JSON, а затем передаем сам объект. $ filter преобразует переданный объект JSON в строку JSON, подходящую для нашего использования.

var val = $ filter ('json') (значение);

Неофициальный, но простой способ просто делает его строковым, используя JSON.stringify (...) .

var val = JSON.stringify (value);

5. Заменить элемент директивы скриптом

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

element [0] .outerHTML = '<script type = "application / ld + json">' + val + '</ script>'

Итак, мы закончили. Запустите проект и посмотрите, как произойдут изменения. Пример сценария ld + json с данными выглядит так, как я нашел на сайте Apple.

Взгляните на этот пример, чтобы узнать структуру, и посетите schema.org для получения дополнительных типов схем. Кроме того, как только вы правильно создали и использовали директиву, перейдите к Инструмент тестирования структурированных данных Google (SDTT) проверить на наличие ошибок в ваших данных. Имейте в виду, что если данные скрипта ld + json зависят от контроллера партиала, вам, возможно, придется сначала отрендерить страницу, прежде чем поместить ее URL-адрес в SDTT, чтобы инструмент проверял ее наличие, или вы можете просто поместить код скрипта в фрагмент кода. коробка СДТТ.

Похожие

Комментарии