Недавно, когда я работал над val.digital (на шведском), который полностью является приложением React и другими одностраничными приложениями. Я боролся с SEO. Основная причина в том, что робот Googlebot просто еще недостаточно умен, чтобы понять, как правильно отображать SPA во всех сценариях.

Это правда, что иногда удается достаточно подождать, пока загрузится основной сайт, но много раз, все, что вы получите, когда donig «Render & Fetch» ​​в Инструментах для веб-мастеров будет пустым рендером, показывающим панель загрузки.

Посмотрите на скриншот слева, это будет проблемой.

Сначала я надеялся, что он все равно будет корректно индексироваться. Иногда кажется, что это работает, робот Googlebot подбирает ключевые слова, которые присутствуют только в приложении React, и иногда Render & Fetch будет делать правильные вещи. Google ясно осознал, что на странице есть больше материала.

Тем не менее, это не всегда верно, что он может сделать это. В мое время постоянно развивалась страница. Многие термины фактически не подобраны роботом Googlebot. И самое популярное ключевое слово для сайта в соответствии с Инструментами для веб-мастеров - «загрузка». Это не здорово.

Чтобы решить проблемы, мой первый подход состоял в том, чтобы поместить некоторый статический HTML, содержащий меню, с тегами <a>, связывающими различные подстраницы внутри элемента React, которые будут заменены приложением во время загрузки. HTML-код был почти идентичен тому, что будет выводиться позднее React, и представлял собой «рендеринг на стороне сервера с плохой репутацией». Я надеюсь, что их непосредственное присутствие в HTML поможет Google найти другие страницы и проиндексировать их. В противном случае на первой странице вообще не было ссылок на первую страницу.

Это было напрасно.

Следующим подходом было создание более насыщенных текстом страниц. Так как val.digital представлены политические опросы, все страницы практически идентичны по структуре, везде огромные диаграммы. Это трудно для индексации. Чтобы исправить это, я создал Страница часто задаваемых вопросов с большим количеством текста для Google, чтобы сожрать. Это также не увенчалось успехом, даже через месяц после того, как я добавил его на страницу, Google не проиндексировал текст на нем. И ни одна из других страниц сайта не была добавлена ​​в обзор (несмотря на то, что они есть в файле Sitemap).

Грустное зрелище для любого веб-мастера.

Следующим шагом было внедрение рендеринга React на стороне сервера, то есть каждая страница предварительно рендерилась с полным HTML-кодом, который React на стороне клиента будет рендерить при запуске. И это работает! У меня были некоторые трудности с получением React для рендеринга в статический HTML-файл (а не на стороне сервера по требованию), но как только я наконец заработал, все прошло гладко, и теперь, наконец, робот Googlebot выбирает все ключевые слова, которые я хочу ,

Наконец, кажется, Google поднимает больше, чем первая страница.

В заключение следует отметить, что рендеринг на стороне сервера должен рассматриваться как обязательный для одностраничных приложений на сегодняшний день. Даже если Google иногда удается отобразить страницу со всеми работающими JS, она не на 100% надежна и не сможет правильно проиндексировать весь ваш сайт, если вы положитесь на него.

Похожие

Комментарии