Добавить метатеги просто, не так ли? Да, но не для приложений React. Сделать ваш сайт оптимизированным для SEO - это одна из главных вещей, которая волнует всех. Одна из проблем развертывания приложения, созданного с использованием create-react-app, заключается в том, что оно полностью отрисовывается на стороне клиента. Хотя Google может отображать содержимое JavaScript при сканировании сайта, это происходит не всегда, и всегда есть риск того, что ваш пакет JavaScript все равно выйдет из строя. Итак, как с этим справиться? К концу этого вы узнаете ответ.

Как всегда, позвольте мне начать с того, почему пришлось это сделать. Моей задачей было создать веб-сайт на React, чтобы продемонстрировать этот потрясающий ИИ в действии. Итак, чтобы сделать это приложение React оптимизированным для SEO, мне нужно было добавить метатеги для каждой страницы.

Я начал свое исследование и нашел эти две библиотеки, которые помогут мне в этом.

1. Реагировать на снимок

Это дает статический пре-рендерер для приложений React. React Snapshot делает статический снимок всех ваших общедоступных страниц и оставляет все, что требует аутентификации, как обычно. Эти снимки по-прежнему включают в себя обычный пакет JS, поэтому после загрузки сайта он будет работать точно так же, как и раньше (то есть мгновенные переходы между страницами), но как можно скорее будут предоставлять вам реальные, функциональные HTML и CSS. Все, что вам нужно сделать, это добавить это в свой index.js и обновить файл package.json с помощью build”: “react-scripts build && react-snapshot”.

Если вы запустите npm run build, вы увидите, что он обнаружит ваши маршруты реакции и создаст статическую HTML-страницу для каждого маршрута внутри вашего build каталога.

2. Шлем React

Этот многоразовый компонент React будет управлять всеми вашими изменениями в заголовке документа. Helmet принимает простые HTML-теги и выводит простые HTML-теги. С помощью шлема React мы можем встраивать в компоненты метатеги, заголовок, ссылку, скрипт.

Использовать React Helmet очень просто. Вот пример фрагмента кода,

После того, как вы воспользуетесь этими двумя библиотеками, все остальное сделает за вас. Снимок сделает статику Довольно круто, правда? Больше не о чем беспокоиться. Если вы используете этот инструмент отладчика совместного использования Facebook, вы можете легко проверить, как работают ваши метатеги.

Надеюсь, это даст вам небольшое представление о том, как этого добиться. Спасибо за прочтение!