Как настраивать robots и sitemap в react?

Question

[historydev]

Добрый вечер. Подскажите пожалуйста, как работать с разными страницами в реакте для поисковых систем?
Допустим есть /home и /meet. Я хочу чтобы на /meet кидало только при поиске мяса, а на home при поиске site.ru. Как я могу это реализовать?

Спасибо.

Comments

[Даша Циклаури]

реакт тут не причем. тебе нужно делать серверный рендеринг, посмотри в сторону nextjs.
чтобы управлять поиском, тебе нужно каждую страницу оптимизировать под поисковые запросы. гугол проиндексирует страницу /meet как мясо если она будет содержать контент посвященный мясу или связанным с ним и будет выдавать эту страницу когда люди ищут мясо, а дальше ты с нее уже можешь редиректить куда угодно (но увлекаться не стоит)

[Алексей Уколов]

Я хочу чтобы на /meet кидало только при поиске мяса

Мясо - это meat.

[historydev]

Алексей Уколов, май бэд, опечатался из спешки

Answer 1

[Andrew Ghostuhin]

Привет. Вариантов в принципе не много, вернее вариантов много, но, нормальных 1-2, приведу их ниже:
Ты можешь использовать react-helmet.
Например:

import React       from 'react'
import Helmet      from 'react-helmet'
import { useIntl } from 'react-intl'

import messages    from './messages'

export const Seo = () => {
  const intl = useIntl()

  const title = intl.formatMessage(messages.title)
  const description = intl.formatMessage(messages.description)

  return (
    <Helmet
      htmlAttributes={{ lang: intl.locale }}
      title={title}
      titleTemplate={`%s | ${title}`}
      meta={[
        {
          name: 'description',
          content: description,
        },
        {
          property: 'og:title',
          content: title,
        },
        {
          property: 'og:description',
          content: description,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          name: 'twitter:card',
          content: 'summary',
        },
        {
          name: 'twitter:title',
          content: title,
        },
        {
          name: 'twitter:description',
          content: description,
        },
      ]}
    />
  )
}

Для sitemap можешь использовать react-router-sitemap

import { Router, Route, IndexRoute, Redirect, IndexRedirect } from 'react-router'
import React from 'react';

export default (
    <Router>
        <Route path="/">
            <IndexRoute/>
            <Route path="test" />
            <Route path="posts(/:page)" />
            <Route path="article/:hrefTitle" />
            <Route path="tags/:tagName" />
            <Route path="tags/pages/(:page)" />
            <Route path="archive(/:searchKey)" />
            <Redirect path="*" to="/" />
        </Route>
    </Router>
)