1

Я почти закончил разработку интернет-магазина на стеке MERN. Перед развертыванием я задаюсь вопросом, как оптимизировать веб-сайт, поскольку поисковые системы будут видеть белую страницу, потому что это JavaScript. Я знаю о NEXT JS, но, насколько я понимаю, уже поздно. На нем изначально нужно было создать сайт.

Что я должен делать? Спасибо

3
  • digitalocean.com/community/tutorials/…
    – entithat
    10 фев 2021 в 16:53
  • react-helmet. [1 символ]
    – Randall
    11 фев 2021 в 5:23
  • @ИзбытокСусликов React Helmet он вставляет мета теги, но он не генерирует на сервере html
    – DjusTV
    11 фев 2021 в 7:16

1 ответ 1

3

React возвращает разметку html. На выходе, у вас получается проект у которого есть все как у всех. Адреса страниц,разделы, разный контент.

Однако, проблема SPA в том, что рендеринг вынесен в браузер. Приложение состоит из одной страницы, которая загружается один раз. Вся отстальная информция, подгружается динамически, реагируя на действие пользователя.

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

Решенеие:

  1. Использовать пре-рендер. Специальные программы, которые перехватывают запросы к вашему сайту и, если запрос исходит от бота, пре-рендеринг отправляют кешированную статическую HTML-версию вашего сайта.

  2. Серверный рендеринг. Когда вся логика производится на сервере, а в браузер передаются статические html-ки. В таком ваианте, поисковый робот получит не пустую или полу-пустую страницу, а полноценную.Этот способ необходимо закладывать на этапе проектирования проекта. Лучшая технология, для этого - Next.js.

Next.js - это JavaScript-фреймворк реакта для создания статических серверных приложений. Он имеет множество возможностей, которые позволяют без проблем рендерить на сервере даже сильно загруженные SPA

  1. Добавить в проект файлы robots.txt, sitemap.xml, добавить метаданные, микроразметку.

Вот видео, о том, как гугл обрабатывает сайты на JavaScript: https://youtu.be/G3MpdyUbS4c

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.