Почему во Vue.js не отображается разметка Schema.org?

Question

[Никита Кудинов]

Внедрил микроразметку Schema.org в компонент Vue.js. Пошёл проверят по валидаторам, Яндекс не видит вообще, Гугл видит факт присутствия, но не видит элементов заметки. Пошёл проверять какой код они видят и анализируют. Обнаруживаю почти пустую html разметку, где есть div c id app, и всё. Как сделать так чтобы валидаторы видели уже после подгрузки всё?

Answer 1

[Alex]

Потому, что сервер возвращает пустую страницу (то что видят боты) а интерфейс регенируется уже на клиенте средствами JavaScript. Чтобы боты видели интерфейс, его желательно сгенерировать на сервере и уже после отправлять в браузер.
Читайте про Server Side Rendering Vue

Comments

[Алексей Ярков]

Справедливости ради стоит отметить, что боты не настолько тупые сейчас. У меня разметку в SPA видят отлично, без SSR.

[Alex]

Алексей Ярков, Вроде как да. Если не ошибаюсь то система примерно такая: есть обычный бот, который не понимает JS. Он быстро ходит по сайтам. Если он попадает на SPA и понимает что это SPA, он ничего не индексирует и отправляет сообщение, чтобы сюда потом пришел другой бот, который уже понимает JS и сможет как-то проиндексировать страницу. То есть обновление данных в поисковой выдаче будет медленее и не факт, что весь контент будет проиндексирован, это уже зависит от реализации.
Но это всё касается именно поискового бота. Как работает валидатор под капотом мне не известно.

[Алексей Ярков]

Alex, валидатор микроразметки в Яндексе тоже корректно воспринимает.