Обрабатывать метатеги и заголовок документа в React для поисковых роботов

У меня есть приложение React (redux), которое использует рендеринг на стороне клиента. Я хотел, чтобы описание и заголовок моих сайтов можно было сканировать с помощью Google (они, кажется, сканируют асинхронный материал, потому что мой сайт отлично отображается в Google с текстом из моих тегов h1), поэтому я нашел библиотеку под названием response-Helm, которая построена на response-document- библиотека. Эта библиотека позволяет мне изменять заголовок и описание документа в зависимости от того, на каком маршруте я сейчас нахожусь.

Итак, вот мои вопросы:

  1. В настоящее время (через неделю) мои результаты поиска в Google не изменились, что заставляет меня думать, что либо Google не сканировал мой сайт, либо Google сканировал его, но не заметил динамического изменения описания и просто использовал мои теги h1. Но как я могу проверить, что произошло?
  2. Я замечаю, что у Instagram есть приложение для рендеринга на стороне клиента, но каким-то образом, когда я проверяю источник страницы, они уже изменили заголовок и описание на каждой странице, хотя тег body - это просто пустой div, что типично для приложения, визуализируемого на стороне клиента. Я не понимаю, как они могут это сделать.

реагирующий шлем


person kjonsson    schedule 15.03.2016    source источник
comment
Я не думаю, что если вы используете рендеринг на стороне клиента, он может сканироваться. Вы должны использовать рендеринг на стороне сервера, чтобы быть дружественным к поисковой оптимизации.   -  person WitVault    schedule 15.03.2016
comment
@WitVault Название и описание? Потому что сайт доступен для сканирования, и именно так это делает Instagram.   -  person kjonsson    schedule 15.03.2016
comment
При сканировании Google будет отображать клиентский JavaScript. Однако любые вызовы AJAX завершатся ошибкой.   -  person Max    schedule 13.06.2016


Ответы (2)


Следуйте документации по рендерингу сервера React Helmet: https://github.com/nfl/react-helmet#server-usage.

person taion    schedule 18.03.2016

Используйте Google Search Console, чтобы увидеть, как Google сканирует ваш сайт, и инициировать сканирование / индексирование ваших страниц: https://www.google.com/webmasters/tools/

Что касается того, как Instagram может отображать метатеги в клиентском приложении - они, вероятно, отображают и обслуживают статический контент на стороне сервера, когда обнаруживают, что его просматривает сканер или бот. Вы можете сделать это для своего контента самостоятельно, не конвертируя все свое приложение в рендеринг на стороне сервера. Услуги Google по предварительной отрисовке. (Я не буду приводить никаких примеров, потому что я не хочу повышать их SEO, не имея о них мнения.)

Другой вариант - визуализировать ваше приложение React статически и обслуживать его при необходимости. Смотрите подготовку Graphcool (кажется немного устаревшей), response-snap и response-snapshot. Все визуализируют сайт на локальном сервере и загружают отрисованные HTML-файлы. Если все, что вам нужно, это <head>, тогда все должно быть хорошо!

person jimbotron    schedule 23.10.2017