Вопрос или проблема
У меня есть веб-сайт, который работает с React на стороне фронтенда и Strapi на стороне бэкенда.
Чтобы обрабатывать мои страницы 404, у меня есть следующий код в App.tsx:
<Routes>
...
<Route path="*" element={<Page404 />} />
</Routes>
Мой компонент Page404 выглядит следующим образом:
import { Helmet } from "react-helmet-async";
const Page404 = () => {
return (
<>
<Helmet>
<title>404 - Страница не найдена</title>
<meta name="robots" content="noindex" />
<meta name="description" content="Страница не найдена." />
<link rel="canonical" href={window.location.href} />
<script>{`document.status = 404`}</script>
</Helmet>
{Мой контент здесь}
</>
);
};
export default Page404;
Однако я не уверена, что страница распознается как 404, так как я все еще вижу страницы, которых не существует, в Google Search Console, даже если они не присутствуют в моем файле sitemap.xml.
Есть ли способ отправить статус HTTPS 404 с помощью Strapi? Или обновить мой фронтенд-код, чтобы убедиться, что он будет правильно понят Google?
Ответ или решение
Конечно! Чтобы корректно отправить статус-код HTTP 404 при использовании Strapi в вашей архитектуре с фронтендом на React, вы можете воспользоваться следующими шагами.
Шаг 1: Настройка Strapi для обработки 404 статусов
Первым делом, необходимо убедиться, что ваш сервер Strapi отправляет статус-код 404, когда запрашивается несуществующий маршрут. Вы можете сделать это, добавив пользовательский обработчик для неправильных запросов. Вот как это можно реализовать:
-
Создайте
middlewareдля обработки 404 ошибок.В папке вашего проекта Strapi, создайте или отредактируйте файл
./config/middlewares.jsи добавьте следующий код:module.exports = [ // Другие миддлвары ... { name: '404', handler: async (ctx, next) => { await next(); if (ctx.status === 404) { ctx.status = 404; ctx.body = { message: 'Страница не найдена', }; } }, }, ];
Шаг 2: Обновите фронтенд на React
Теперь, когда Strapi настроен на отправку 404 статуса, вам нужно обновить ваш компонент Page404, чтобы он также информировал поисковые системы о статусе.
Ваш код в компоненте Page404 уже выглядит достаточно хорошо, но вы можете немного его улучшить:
import { Helmet } from "react-helmet-async";
const Page404 = () => {
// Устанавливаем статус 404 для поисковых систем
if (typeof window !== "undefined") {
window.history.replaceState(null, '', '/404');
}
return (
<>
<Helmet>
<title>404 - Страница не найдена</title>
<meta name="robots" content="noindex" />
<meta name="description" content="Страница не найдена." />
<link rel="canonical" href={window.location.href} />
</Helmet>
<div>
<h1>404 - Страница не найдена</h1>
<p>К сожалению, запрашиваемая страница не существует.</p>
</div>
</>
);
};
export default Page404;Шаг 3: Убедитесь, что ваш сервер правильно отправляет 404 статус
Проверьте, что ваш сервер корректно отправляет 404 статус, когда клиент делает запрос к несуществующему ресурсу. Это можно сделать через инструменты разработчика браузера, вызвав несуществующий маршрут и проверив статус ответа.
Шаг 4: Проверка в Google Search Console
После того, как эти изменения будут сделаны, убедитесь, что вы проверили следующую информацию в Google Search Console:
- Убедитесь, что в отчете об ошибках 404 отражаются только те страницы, которые действительно отсутствуют на вашем сайте.
- Вам нужно будет подождать некоторое время, прежде чем изменения вступят в силу, так как Google периодически переиндексирует ваше веб-приложение.
Заключение
Следуя этим шагам, вы сможете убедиться, что ваши 404 страницы корректно обрабатываются как на уровне Strapi, так и на уровне React, что, в свою очередь, поможет вам управлять индексацией ваших страниц в поисковых системах. Если у вас возникнут дополнительные вопросы, не стесняйтесь обращаться за помощью!