Микро-разметка schema.org json-ld шаблона BeTheme для WordPress

Микро-разметка Schema.org — это, как пишет Яндекс и Google, стандарт семантической разметки передачи данных с Вашего сайта для поисковых систем с помощью синтаксиса microdata (способ разметки микро-данных) — непосредственно в HTML-коде страниц.

JSON-LD (англ. Linked Data) – способ описания и передачи данных сайта поисковикам с помощью текстового формата JSON. Но внедрение происходит уже не в код страницы, а помещается в отдельный тег <script>, чтобы сделать доступными для обработки на веб-странице.

Schema.org была признана основными поисковиками и рекомендована еще в 2011 году. В свою очередь, Schema.org рекомендовал к применению JSON-LD в 2013 году, а начиная с лета 2014 года, уже и Google советовал его использовать.

Так что формат JSON-LD в связке с Schema.org можно с успехом использовать для разметки своего сайта.

Не буду вдаваться в подробности и утомлять Вас различными терминами, более подробную информацию можете найти на том же https://yandex.ru/support/webmaster/.

Моя же задача состояла в том, чтобы найти более оптимальный вариант для своего сайта, поделиться им с Вами — возможно кому-то поможет.
На данном сайте стоит Премиум-тема (или, как говорят, шаблон) для WordPress — BeTheme, разработанная западными специалистами Muffin Group. Обновление данного шаблона происходит очень часто.
Так что вносить какие-то кардинальные изменения в Редакторе: Заголовок — header.php или functions.php, сами понимаете, не очень-то хотелось.

Разметка Schema.org встроена в настройки данной темы — можно включить или выключить. В самом начале, при настройке блога, Google и Yandex никаких ошибок не показывали. Но, как только я внедрил на сайт микро-размету Open Graph, и использовал для этого плагин All in One SEO Pack, появилось пару предупреждений на Google. Я уже не говорю про Yandex.
Про настройки Open Graph для социальных сетей, читайте в статье: «Социальные кнопки — настройка мета тегов Open Graph».

Кто-то посоветует, что нужно избавиться от плагина. Но тогда о продвижении сайта в социальных сетях можно забыть. Любой внешний SEO-плагин будет создавать те же проблемы. С Google проще — пару настроек и все стало на место, а вот с Yandex сложнее. Обновления поисковых систем по этим настройкам происходили уже не раз, но никак Yandex с Google не могут прийти к общему знаменателю.

Перелопатив гору информации в интернете, я нашел, как мне кажется, пока, самый приемлемый вариант.

Код JSON-LD для разметки Schema.org на блоге WordPress.

Код JSON-LD в виде скриптов для разметки Schema.org не требует вставки его в шаблон самого блога. Вернее, автор его, Артур Абрамович, на своем сайте wpruse.ru, предлагает вставить его в файл функции темы functions.php.

Я же нашел более оптимальный способ. Заключить данный код в файл php с дополнительными функциями плагина. Я здесь не открываю Америку, этот способ, добавления новых функций в свой сайт, известен давно.

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

Создание плагина functionsphp.php.

Для того, чтобы создать свой плагин, который будет альтернативой файлу functions.php, находящемуся в Редакторе WordPress, необходимо загрузить на свой сайт пустой плагин. Плагин загружается в корневую папку блога: public_html/wp-content/plugins/, как обычный плагин через FTP-клиент или архивируем его в ZIP-архив и через Консоль блога — Плагины — Добавить новый — Загрузить — Активировать.

Первое, что нужно сделать — открываете бесплатную программу Notepad++, создаете Новый файл, копируете данный код и вставляете его в программу:

<?php
/* ====================================
* Plugin Name: Functions.PHP
* Description: Мой новый functions.php
* Version: 1.0
* ==================================== */

function functionsphp_head_info(){
echo "\n<!-- Плагин Functions.PHP активен -->\n";
}
add_action('wp_head', 'functionsphp_head_info');

В настройках Notepad++, в разделе Кодировки, должно быть выставлено: UTF-8 без BOM. Дальше, нажимаете Файл — Сохранить как — даете ему название functionsphp — Тип файла PHP и сохраняете к себе на компьютер.

Заметьте разницу в названиях файлов. Файл плагина, если открыть его свойства, называется — functionsphp.php, а в Редакторе темы — functions.php. Не надо пугаться — файл плагина дополняет функции файла в Редакторе, но никак не меняет его.

И еще, не маловажная информация! В дальнейшем, при редактировании этого плагина, даже, если сделаете фатальную ошибку, это никак не повлияет на работу сайта — плагин просто автоматически деактивируется. Исправив ошибку, можно снова активировать. Чего не могут официальные плагины.

Первая часть кода — это информация плагина для WordPress и его название.
Вторая часть — функция, выводящая HTML-комментарий,

<!-- Плагин Functions.PHP активен -->

показывающая об его активации.

Загружаете файл одним из способов, описанных выше, к себе на сайт. После активации плагина, открываете любую запись на сайте, нажимаете на клавиатуре Ctrl+U, потом Ctrl+F, вбиваете, вверху, в окно поиска название плагина, если увидите вставленный код, значит плагин работает.

Второй этап Ваших действий — редактирование кода JSON-LD schema.org в соответствии с настройками блога. Я не хочу на этой странице размещать данный код, так как он занимает приличное место. Скачать его можно либо на сайте автора, или же ниже по ссылке, нажав на одну из кнопок соц.сетей.

Сразу же предупреждаю — файл кода на авторском блоге имеет ряд небольших технических ошибок. В комментариях на сайте Артема я писал ему об этом, но когда он их исправит — не знаю, хотя обещал. В коде:

«height»: ‘. $img_post[1] .’,
«width»: ‘. $img_post[2] .’

необходимо поменять местами height и width. Поисковики первое значение привыкли принимать как ширину, а не высоту — выдают ошибку. Там таких несколько мест.

В данной редакции ошибки кода файла JSON-LD исправлены — скачивайте:
https://yadi.sk/d/VUmWoZtw3Chmgh

Скачанный файл разархивируйте и открываете той же программой Notepad++ и в самом начале, в строке 10 и 11 меняете мои ссылки на ссылки со своих картинок:

1. В строке 10 ставите ссылку на картинку, которая будет у Вас отображаться по-умолчанию в анонсах соц.сетей, если в статьях таковые отсутствуют. Эта картинка должна быть загружена на блог в медиафайлы в обязательном порядке. Размер по ширине не меньше 650 — 700 пикселей.
2. В строке 11 вставляете ссылку на логотип Вашего блога. Так же в обязательном порядке. Размер: ширина — 600px, высота — 60px. Открою маленький секрет. В Photoshop создаете Новое изображение с заданными размерами и с названием Logo. А в это окно уже помещаете картинку любого размера и сохраняете в формате png или jpg./

Будьте внимательны — ссылки вставлять между одинарными кавычками, без пробелов. И ради бога — перед тем как загрузить в медиафайлы, пишите название своим картинкам латинским шрифтом.

Редакция плагина functionsphp.php.

Следующим шагом будет — внесение изменений в загруженный плагин functionsphp.php. Для этого, переходите в Консоль своего блога — Плагины — Установленные. Находите свой плагин Functions.PHP. Сначала нажимаете — Деактивировать, потом Изменить. В открывшемся окне увидите код своего плагина.

Возвращаетесь к своему файлу JSON-LD, выделяете мышкой весь код и копируете. В окне редактора плагина отступаете одну строку и вставляете, скопированный в буфер обмена, отредактированный код. Закрываете редактор.

Переходите опять в плагины и активируете Functions.PHP. Если все сделали правильно, плагин активируется. Можно проверить его действие в валидаторах Yandex: https://webmaster.yandex.ru/tools/microtest/

и Google: https://search.google.com/structured-data/testing-tool/u/0/.

Проверяйте каждую страницу и запись на блоге.

Да, еще, что пришлось сделать для дальнейших настроек — отключить настройки Schema.org в опциях настроек шаблона BeTheme (в плагине All in One SEO Pack они были отключены), иначе с Яндексом не совладать. В Google все ошибки исчезли.

Редакция файла темы Заголовок (header.php).

Проверка страниц и записей блога валидатором Яндекса выявила ошибку в микро-разметке:
«ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix».

Это единственная ошибка, показанная в Yandex-валидаторе, которую пришлось исправлять непосредственно в Редакторе шаблона блога. Перепробовал все возможные способы. Принимая во внимание то, что код не большой, и даже при обновлении шаблона, я без особого труда, всегда смогу внести эти изменения, пришлось согласиться с этой жертвой.

В классических шаблонах WordPress эти изменения обычно делаются в файле — Заголовок (header.php).
В моем шаблоне, а возможно и во многих других премиум-темах, изменения потребовались и в файле Редактора — Шаблон страницы «Blank Page» (template-blank.php).

HTML-код в обоих файлах редактора, требующий редакции, обычно почти идентичен. В оба эти файла нужно вставить код подтверждения префикса с помощью специальных атрибутов. Копируете и вставляете именно этот код:

prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# profile: https://ogp.me/ns/profile# fb: https://ogp.me/ns/fb#"

В header.php вставляете данный код в HTML-файл:

В итоге получиться:

<html class="no-js<?php echo mfn_user_os(); ?>" <?php language_attributes(); ?> <span style="color: #0000ff;">prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# profile: https://ogp.me/ns/profile# fb: https://ogp.me/ns/fb#"</span> <?php mfn_tag_schema(); ?>>

Такие же действия делаем и в HTML-файле template-blank.php:

Измененный HTML-файл:

<html class="no-js<?php echo mfn_user_os(); ?>" <?php language_attributes(); ?> <span style="color: #0000ff;">prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# profile: https://ogp.me/ns/profile# fb: https://ogp.me/ns/fb#"</span>
<?php mfn_tag_schema(); ?>>

После редактирования файлов header.php и template-blank.php ошибки «префикс article» в Yandex-валидаторе исчезли.

Исправление ошибки microdata.

После очередной проверки валидатором Яндекса оставалось еще пару ошибок. Одна из них:
«microdata
ОШИБКА: невозможно определить принадлежность данных полей. Возможны две причины: эти поля некорректно размещены, либо указан лишний атрибут itemprop»

Честно говоря, снова редактировать файлы шаблона не было никакого желания. Стоит пойматься на этот крючок — уже не сорвешься. Хватит одной жертвы.

Немного подумав, решил использовать для этих целей плагин Header and Footer Version 2.0.3. Тем более, что он пригодиться в дальнейшем и для других целей.

В частности, когда, недавно, делал рекламу своих инфо-продуктов через рекламный кабинет Facebook, понадобилось установить на сайт Pixel Facebook, для отслеживания числа конверсий не только на сайте, но и на продающих страницах — Lending Page. Шаблон BeTheme, с его обширным и уникальным функционалом, позволяет делать такие страницы на одном и том же домене, что и блог.
Так вот, после очередного обновления шаблона, естественно, код пикселя был удален. Код Pixel Facebook ставился в файлы Редактора WordPress.

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

Плагин устанавливается классическим методом. Заходите в Консоль — Плагины — Добавить новый. В окно поиска пишите название плагина — WordPress выдаст нужный. Устанавливаете его и активируете.
После активации — Настройки — Header and Footer.

Чтобы устранить ошибку в настройках Schema.org «microdata», в окне настроек плагина, в первой вкладке «Header and footer», в поле «AFTER THE <BODY> TAG» вставляете вот такой код:

<div itemscope itemtype="https://webmaster.yandex.ru/vocabularies/term-def.xml">

Сохраняете изменения.

В дополнение, для большей убедительности Яндекса — это уже по настройкам «Article», в верхнее поле «<HEAD> SECTION INJECTION» вставил код:

<wrapper id="Wrapper" itemscope itemtype="https://schema.org/WPHeader">
<div itemprop="headline"></div>

Это уже не обязательно, хотя и этот код можно конкретизировать для поисковиков. Но все эти настройки уже предусмотрены в коде JSON-LD нашего плагина functionsphp.php.

Очередная проверка микро-разметки Schema.org и кода JSON-LD в валидаторах Google и Yandex дала более-менее удовлетворительный результат. В Google никаких претензий не нашел.
Яндекс, как всегда в своем репертуаре. Осталось предупреждение «vcard» — не выполнено обязательное условие для структурированных сниппетов:
«кажется, ваша разметка hCard описывает не организацию (поля fn и org не совпадают).»

Что можно понять с этого предупреждения? Поля fn (фамилия и имя) не совпадают с org (организацией). Информация для структурированных сниппетов.

Не такое уж и страшное предупреждение. Тем более для блога. Не сайт же организации с прайс-листом продукции на три страницы. Но, подумаем, как это исправить.

Какой же можно сделать вывод? Формат микро-разметки JSON-LD совместно с Schema.org дает возможность корректно размечать необходимые данные на сайте для восприятия поисковыми системами и человеком. Будем надеяться, что алгоритмы Google и Yandex когда-нибудь придут к единообразию.

P. S. Буду рад, друзья, если поделитесь своими наработками в комментариях.